[PM-26363] Add one time setup dialog for auto confirm (#17104)

* add one time setup dialog for auto confirm

* add one time setup dialog for auto confirm

* fix copy, padding, cleanup observable logic

* cleanup

* cleanup

* refactor

* clean up

* more cleanup

* Fix deleted files

This reverts commit 7c18a5e512.

apps/web/src/app/admin-console/organizations/policies/auto-confirm-edit-policy-dialog.component.html

@@ -38,11 +38,11 @@
   <div class="tw-flex tw-flex-col">
     @let showBadge = firstTimeDialog();
     @if (showBadge) {
-      <span bitBadge variant="info" class="tw-w-28 tw-my-2"> {{ "availableNow" | i18n }}</span>
+      <span bitBadge variant="info" class="tw-w-[99px] tw-my-2"> {{ "availableNow" | i18n }}</span>
     }
     <span>
-      {{ (firstTimeDialog ? "autoConfirm" : "editPolicy") | i18n }}
-      @if (!firstTimeDialog) {
+      {{ (showBadge ? "autoConfirm" : "editPolicy") | i18n }}
+      @if (!showBadge) {
         <span class="tw-text-muted tw-font-normal tw-text-sm">
           {{ policy.name | i18n }}
         </span>
@@ -64,7 +64,7 @@
     type="submit"
   >
     @let autoConfirmEnabled = autoConfirmEnabled$ | async;
-    @let managePoliciesOnly = managePolicies$ | async;
+    @let managePoliciesOnly = managePoliciesOnly$ | async;
     @if (autoConfirmEnabled || managePoliciesOnly) {
       {{ "save" | i18n }}
     } @else {

apps/web/src/app/admin-console/organizations/policies/auto-confirm-edit-policy-dialog.component.ts

@@ -22,6 +22,7 @@ import {
   tap,
 } from "rxjs";
 
+import { AutomaticUserConfirmationService } from "@bitwarden/admin-console/common";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { PolicyApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/policy/policy-api.service.abstraction";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
@@ -85,7 +86,10 @@ export class AutoConfirmPolicyDialogComponent
     switchMap((userId) => this.policyService.policies$(userId)),
     map((policies) => policies.find((p) => p.type === PolicyType.AutoConfirm)?.enabled ?? false),
   );
-  protected managePolicies$: Observable<boolean> = this.accountService.activeAccount$.pipe(
+  // Users with manage policies custom permission should not see the dialog's second step since
+  // they do not have permission to configure the setting. This will only allow them to configure
+  // the policy.
+  protected managePoliciesOnly$: Observable<boolean> = this.accountService.activeAccount$.pipe(
     getUserId,
     switchMap((userId) => this.organizationService.organizations$(userId)),
     getById(this.data.organizationId),
@@ -116,6 +120,7 @@ export class AutoConfirmPolicyDialogComponent
     private organizationService: OrganizationService,
     private policyService: PolicyService,
     private router: Router,
+    private autoConfirmService: AutomaticUserConfirmationService,
   ) {
     super(
       data,
@@ -161,7 +166,7 @@ export class AutoConfirmPolicyDialogComponent
   }
 
   private buildMultiStepSubmit(singleOrgPolicyEnabled: boolean): Observable<MultiStepSubmit[]> {
-    return this.managePolicies$.pipe(
+    return this.managePoliciesOnly$.pipe(
       map((managePoliciesOnly) => {
         const submitSteps = [
           {
@@ -206,6 +211,17 @@ export class AutoConfirmPolicyDialogComponent
       autoConfirmRequest,
     );
 
+    const userId = await firstValueFrom(this.accountService.activeAccount$.pipe(getUserId));
+
+    const currentAutoConfirmState = await firstValueFrom(
+      this.autoConfirmService.configuration$(userId),
+    );
+
+    await this.autoConfirmService.upsert(userId, {
+      ...currentAutoConfirmState,
+      showSetupDialog: false,
+    });
+
     this.toastService.showToast({
       variant: "success",
       message: this.i18nService.t("editedPolicyId", this.i18nService.t(this.data.policy.name)),

apps/web/src/app/admin-console/organizations/policies/index.ts

@@ -2,3 +2,6 @@ export { PoliciesComponent } from "./policies.component";
 export { ossPolicyEditRegister } from "./policy-edit-register";
 export { BasePolicyEditDefinition, BasePolicyEditComponent } from "./base-policy-edit.component";
 export { POLICY_EDIT_REGISTER } from "./policy-register-token";
+export { AutoConfirmPolicyDialogComponent } from "./auto-confirm-edit-policy-dialog.component";
+export { AutoConfirmPolicy } from "./policy-edit-definitions";
+export { PolicyEditDialogResult } from "./policy-edit-dialog.component";

apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html

@@ -47,12 +47,12 @@
     <bit-icon class="tw-w-[233px]" [icon]="autoConfirmSvg"></bit-icon>
   </div>
   <ol>
-    <li>1. {{ "autoConfirmStep1" | i18n }}</li>
+    <li>1. {{ "autoConfirmExtension1" | i18n }}</li>
 
     <li>
-      2. {{ "autoConfirmStep2a" | i18n }}
+      2. {{ "autoConfirmExtension2" | i18n }}
       <strong>
-        {{ "autoConfirmStep2b" | i18n }}
+        {{ "autoConfirmExtension3" | i18n }}
       </strong>
     </li>
   </ol>