Ac/pm 26365 auto confirm extension one time setup dialog (#17339)

* create nav link for auto confirm in settings page

* wip

* WIP

* create auto confirm library

* migrate auto confirm files to lib

* update imports

* fix tests

* fix nudge

* cleanup, add documentation

* clean up

* cleanup

* fix import

* fix more imports

* implement one time dialog

* add tests

* design changes

* fix styles

* edit copy

* fix tests

* fix tw issue

* fix typo, add tests

* CR feedback

* more clean up, fix race condition

* CR feedback, cache policies, refactor tests

* run prettier with updated version

* clean up duplicate logic

* clean up

* add missing export

* fix test

* fix dialog position

* add tests

libs/auto-confirm/src/components/auto-confirm-extension-dialog.component.ts

@@ -0,0 +1,78 @@
+import { DialogRef } from "@angular/cdk/dialog";
+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import {
+  BadgeComponent,
+  ButtonModule,
+  CenterPositionStrategy,
+  DialogModule,
+  DialogService,
+} from "@bitwarden/components";
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <bit-simple-dialog dialogSize="small" hideIcon>
+      <div class="tw-flex tw-flex-col tw-justify-start" bitDialogTitle>
+        <div class="tw-flex tw-justify-start tw-pb-2">
+          <span bitBadge variant="info"> {{ "availableNow" | i18n }}</span>
+        </div>
+        <div class="tw-flex tw-flex-col">
+          <h3 class="tw-text-start">
+            <strong>
+              {{ "autoConfirmSetup" | i18n }}
+            </strong>
+          </h3>
+          <span class="tw-overflow-y-auto tw-text-start tw-break-words tw-hyphens-auto tw-text-sm">
+            {{ "autoConfirmSetupDesc" | i18n }}
+          </span>
+        </div>
+      </div>
+      <ng-container bitDialogFooter>
+        <div class="tw-flex tw-flex-col tw-justify-center">
+          <button
+            class="tw-mb-2"
+            type="button"
+            bitButton
+            buttonType="primary"
+            (click)="dialogRef.close(true)"
+          >
+            {{ "turnOn" | i18n }}
+          </button>
+          <button
+            class="tw-mb-4"
+            type="button"
+            bitButton
+            buttonType="secondary"
+            (click)="dialogRef.close(false)"
+          >
+            {{ "close" | i18n }}
+          </button>
+          <a
+            class="tw-text-sm tw-text-center"
+            bitLink
+            href="https://bitwarden.com/help/automatic-confirmation/"
+            target="_blank"
+          >
+            <strong class="tw-pr-1">
+              {{ "autoConfirmSetupHint" | i18n }}
+            </strong>
+            <i class="bwi bwi-external-link bwi-fw"></i>
+          </a>
+        </div>
+      </ng-container>
+    </bit-simple-dialog>
+  `,
+  imports: [ButtonModule, DialogModule, CommonModule, JslibModule, BadgeComponent],
+})
+export class AutoConfirmExtensionSetupDialogComponent {
+  constructor(public dialogRef: DialogRef<boolean>) {}
+
+  static open(dialogService: DialogService) {
+    return dialogService.open<boolean>(AutoConfirmExtensionSetupDialogComponent, {
+      positionStrategy: new CenterPositionStrategy(),
+    });
+  }
+}

libs/auto-confirm/src/components/auto-confirm-warning-dialog.component.ts

@@ -2,7 +2,12 @@ import { DialogRef } from "@angular/cdk/dialog";
 import { CommonModule } from "@angular/common";
 import { ChangeDetectionStrategy, Component } from "@angular/core";
 
-import { ButtonModule, DialogModule, DialogService } from "@bitwarden/components";
+import {
+  ButtonModule,
+  CenterPositionStrategy,
+  DialogModule,
+  DialogService,
+} from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
 @Component({
@@ -14,6 +19,8 @@ export class AutoConfirmWarningDialogComponent {
   constructor(public dialogRef: DialogRef<boolean>) {}
 
   static open(dialogService: DialogService) {
-    return dialogService.open<boolean>(AutoConfirmWarningDialogComponent);
+    return dialogService.open<boolean>(AutoConfirmWarningDialogComponent, {
+      positionStrategy: new CenterPositionStrategy(),
+    });
   }
 }

libs/auto-confirm/src/components/index.ts

@@ -1 +1,2 @@
+export * from "./auto-confirm-extension-dialog.component";
 export * from "./auto-confirm-warning-dialog.component";