PR #18534 (f22736bb64) — reverted: policy dialogs converted back from drawer to popup dialogs (#19235) (#19238)

PR #18852 (3f3fc6f984) — reverted: OnDestroy drawer-close logic removed from PoliciesComponent, drawer docs removed from dialogs.mdx

PR #18915 (2e83244158) — reverted: showDescription property in BasePolicyEditDefinition restored to true

apps/web/src/app/admin-console/organizations/policies/base-policy-edit.component.ts

@@ -56,7 +56,7 @@ export abstract class BasePolicyEditDefinition {
    * If true, the {@link description} will be reused in the policy edit modal. Set this to false if you
    * have more complex requirements that you will implement in your template instead.
    **/
-  showDescription: boolean = false;
+  showDescription: boolean = true;
 
   /**
    * A method that determines whether to display this policy in the Admin Console Policies page.

apps/web/src/app/admin-console/organizations/policies/policies.component.html

@@ -19,14 +19,12 @@
           @if (p.display$(organization, configService) | async) {
             <tr bitRow>
               <td bitCell ngPreserveWhitespaces>
-                <div class="tw-flex tw-items-center tw-gap-2">
-                  <button type="button" bitLink (click)="edit(p, organizationId)">
-                    {{ p.name | i18n }}
-                  </button>
-                  @if (policiesEnabledMap.get(p.type)) {
-                    <span bitBadge variant="success">{{ "on" | i18n }}</span>
-                  }
-                </div>
+                <button type="button" bitLink (click)="edit(p, organizationId)">
+                  {{ p.name | i18n }}
+                </button>
+                @if (policiesEnabledMap.get(p.type)) {
+                  <span bitBadge variant="success">{{ "on" | i18n }}</span>
+                }
                 <small class="tw-text-muted tw-block">{{ p.description | i18n }}</small>
               </td>
             </tr>

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, DestroyRef, OnDestroy } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { ActivatedRoute } from "@angular/router";
 import { combineLatest, Observable, of, switchMap, first, map, shareReplay } from "rxjs";
@@ -14,7 +14,7 @@ import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { getById } from "@bitwarden/common/platform/misc";
 import { OrganizationId, UserId } from "@bitwarden/common/types/guid";
-import { DialogRef, DialogService } from "@bitwarden/components";
+import { DialogService } from "@bitwarden/components";
 import { safeProvider } from "@bitwarden/ui-common";
 
 import { HeaderModule } from "../../../layouts/header/header.module";
@@ -37,8 +37,7 @@ import { POLICY_EDIT_REGISTER } from "./policy-register-token";
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class PoliciesComponent implements OnDestroy {
-  private myDialogRef?: DialogRef;
+export class PoliciesComponent {
   private userId$: Observable<UserId> = this.accountService.activeAccount$.pipe(getUserId);
 
   protected organizationId$: Observable<OrganizationId> = this.route.params.pipe(
@@ -99,10 +98,6 @@ export class PoliciesComponent implements OnDestroy {
     this.handleLaunchEvent();
   }
 
-  ngOnDestroy() {
-    this.myDialogRef?.close();
-  }
-
   // Handle policies component launch from Event message
   private handleLaunchEvent() {
     combineLatest([
@@ -136,7 +131,7 @@ export class PoliciesComponent implements OnDestroy {
   edit(policy: BasePolicyEditDefinition, organizationId: OrganizationId) {
     const dialogComponent: PolicyDialogComponent =
       policy.editDialogComponent ?? PolicyEditDialogComponent;
-    this.myDialogRef = dialogComponent.open(this.dialogService, {
+    dialogComponent.open(this.dialogService, {
       data: {
         policy: policy,
         organizationId: organizationId,

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

@@ -13,24 +13,29 @@
     <bit-label>{{ "enforceOnLoginDesc" | i18n }}</bit-label>
   </bit-form-control>
 
-  <bit-form-field>
-    <bit-label>{{ "minComplexityScore" | i18n }}</bit-label>
-    <bit-select formControlName="minComplexity" id="minComplexity">
-      <bit-option *ngFor="let o of passwordScores" [value]="o.value" [label]="o.name"></bit-option>
-    </bit-select>
-  </bit-form-field>
-
-  <bit-form-field>
-    <bit-label>{{ "minLength" | i18n }}</bit-label>
-    <input
-      bitInput
-      type="number"
-      formControlName="minLength"
-      id="minLength"
-      [min]="MinPasswordLength"
-      [max]="MaxPasswordLength"
-    />
-  </bit-form-field>
+  <div class="tw-flex tw-space-x-4">
+    <bit-form-field class="tw-flex-auto">
+      <bit-label>{{ "minComplexityScore" | i18n }}</bit-label>
+      <bit-select formControlName="minComplexity" id="minComplexity">
+        <bit-option
+          *ngFor="let o of passwordScores"
+          [value]="o.value"
+          [label]="o.name"
+        ></bit-option>
+      </bit-select>
+    </bit-form-field>
+    <bit-form-field class="tw-flex-auto">
+      <bit-label>{{ "minLength" | i18n }}</bit-label>
+      <input
+        bitInput
+        type="number"
+        formControlName="minLength"
+        id="minLength"
+        [min]="MinPasswordLength"
+        [max]="MaxPasswordLength"
+      />
+    </bit-form-field>
+  </div>
 
   <bit-form-control class="!tw-mb-2">
     <input type="checkbox" bitCheckbox formControlName="requireUpper" id="requireUpper" />

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

@@ -4,50 +4,56 @@
     <bit-label>{{ "turnOn" | i18n }}</bit-label>
   </bit-form-control>
 
-  <bit-form-field>
-    <bit-label>{{ "passwordTypePolicyOverride" | i18n }}</bit-label>
-    <bit-select formControlName="overridePasswordType" id="overrideType">
-      <bit-option
-        *ngFor="let o of overridePasswordTypeOptions"
-        [value]="o.value"
-        [label]="o.name"
-      ></bit-option>
-    </bit-select>
-  </bit-form-field>
+  <div class="tw-grid tw-grid-cols-12 tw-gap-4">
+    <bit-form-field class="tw-col-span-6 tw-mb-0">
+      <bit-label>{{ "overridePasswordTypePolicy" | i18n }}</bit-label>
+      <bit-select formControlName="overridePasswordType" id="overrideType">
+        <bit-option
+          *ngFor="let o of overridePasswordTypeOptions"
+          [value]="o.value"
+          [label]="o.name"
+        ></bit-option>
+      </bit-select>
+    </bit-form-field>
+  </div>
 
   <!-- password-specific policies -->
   <div *ngIf="showPasswordPolicies$ | async">
     <h3 bitTypography="h3" class="tw-mt-4">{{ "password" | i18n }}</h3>
-    <bit-form-field>
-      <bit-label>{{ "minLength" | i18n }}</bit-label>
-      <input
-        bitInput
-        type="number"
-        [min]="minLengthMin"
-        [max]="minLengthMax"
-        formControlName="minLength"
-      />
-    </bit-form-field>
-    <bit-form-field>
-      <bit-label>{{ "minNumbers" | i18n }}</bit-label>
-      <input
-        bitInput
-        type="number"
-        [min]="minNumbersMin"
-        [max]="minNumbersMax"
-        formControlName="minNumbers"
-      />
-    </bit-form-field>
-    <bit-form-field>
-      <bit-label>{{ "minSpecial" | i18n }}</bit-label>
-      <input
-        bitInput
-        type="number"
-        [min]="minSpecialMin"
-        [max]="minSpecialMax"
-        formControlName="minSpecial"
-      />
-    </bit-form-field>
+    <div class="tw-grid tw-grid-cols-12 tw-gap-4">
+      <bit-form-field class="tw-col-span-6">
+        <bit-label>{{ "minLength" | i18n }}</bit-label>
+        <input
+          bitInput
+          type="number"
+          [min]="minLengthMin"
+          [max]="minLengthMax"
+          formControlName="minLength"
+        />
+      </bit-form-field>
+    </div>
+    <div class="tw-grid tw-grid-cols-12 tw-gap-4">
+      <bit-form-field class="tw-col-span-6">
+        <bit-label>{{ "minNumbers" | i18n }}</bit-label>
+        <input
+          bitInput
+          type="number"
+          [min]="minNumbersMin"
+          [max]="minNumbersMax"
+          formControlName="minNumbers"
+        />
+      </bit-form-field>
+      <bit-form-field class="tw-col-span-6">
+        <bit-label>{{ "minSpecial" | i18n }}</bit-label>
+        <input
+          bitInput
+          type="number"
+          [min]="minSpecialMin"
+          [max]="minSpecialMax"
+          formControlName="minSpecial"
+        />
+      </bit-form-field>
+    </div>
     <bit-form-control>
       <input type="checkbox" bitCheckbox formControlName="useUpper" id="useUpper" />
       <bit-label>{{ "uppercaseLabel" | i18n }}</bit-label>
@@ -73,16 +79,18 @@
   <!-- passphrase-specific policies -->
   <div *ngIf="showPassphrasePolicies$ | async">
     <h3 bitTypography="h3" class="tw-mt-4">{{ "passphrase" | i18n }}</h3>
-    <bit-form-field>
-      <bit-label>{{ "minimumNumberOfWords" | i18n }}</bit-label>
-      <input
-        bitInput
-        type="number"
-        [min]="minNumberWordsMin"
-        [max]="minNumberWordsMax"
-        formControlName="minNumberWords"
-      />
-    </bit-form-field>
+    <div class="tw-grid tw-grid-cols-12 tw-gap-4">
+      <bit-form-field class="tw-col-span-6">
+        <bit-label>{{ "minimumNumberOfWords" | i18n }}</bit-label>
+        <input
+          bitInput
+          type="number"
+          [min]="minNumberWordsMin"
+          [max]="minNumberWordsMax"
+          formControlName="minNumberWords"
+        />
+      </bit-form-field>
+    </div>
     <bit-form-control>
       <input type="checkbox" bitCheckbox formControlName="capitalize" id="capitalize" />
       <bit-label>{{ "capitalize" | i18n }}</bit-label>

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

@@ -1,13 +1,5 @@
-<form [formGroup]="formGroup" [bitSubmit]="submit" class="tw-h-full tw-flex tw-flex-col">
-  <bit-dialog dialogSize="default" [loading]="loading">
-    <ng-container bitDialogTitle>
-      <span class="tw-flex tw-items-center tw-gap-2">
-        {{ policy.name | i18n }}
-        @if (isPolicyEnabled) {
-          <span bitBadge variant="success">{{ "on" | i18n }}</span>
-        }
-      </span>
-    </ng-container>
+<form [formGroup]="formGroup" [bitSubmit]="submit">
+  <bit-dialog [loading]="loading" [title]="'editPolicy' | i18n" [subtitle]="policy.name | i18n">
     <ng-container bitDialogContent>
       <div *ngIf="loading">
         <i

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

@@ -81,10 +81,6 @@ export class PolicyEditDialogComponent implements AfterViewInit {
     return this.data.policy;
   }
 
-  get isPolicyEnabled(): boolean {
-    return this.policyComponent?.policyResponse?.enabled ?? false;
-  }
-
   /**
    * Type guard to check if the policy component has the buildVNextRequest method.
    */
@@ -200,9 +196,6 @@ export class PolicyEditDialogComponent implements AfterViewInit {
     );
   }
   static open = (dialogService: DialogService, config: DialogConfig<PolicyEditDialogData>) => {
-    return dialogService.openDrawer<PolicyEditDialogResult, PolicyEditDialogData>(
-      PolicyEditDialogComponent,
-      config,
-    );
+    return dialogService.open<PolicyEditDialogResult>(PolicyEditDialogComponent, config);
   };
 }

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

@@ -1,5 +1,5 @@
-<form [formGroup]="formGroup" [bitSubmit]="submit" class="tw-h-full tw-flex tw-flex-col">
-  <bit-dialog dialogSize="large" [loading]="loading">
+<form [formGroup]="formGroup" [bitSubmit]="submit">
+  <bit-dialog [loading]="loading">
     <ng-container bitDialogTitle>
       @let title = (multiStepSubmit | async)[currentStep()]?.titleContent();
       @if (title) {
@@ -40,16 +40,13 @@
     @if (showBadge) {
       <span bitBadge variant="info" class="tw-w-[99px] tw-my-2"> {{ "availableNow" | i18n }}</span>
     }
-    <span class="tw-flex tw-items-center tw-gap-2">
+    <span>
       {{ (showBadge ? "autoConfirm" : "editPolicy") | i18n }}
       @if (!showBadge) {
         <span class="tw-text-muted tw-font-normal tw-text-sm">
           {{ policy.name | i18n }}
         </span>
       }
-      @if (isPolicyEnabled) {
-        <span bitBadge variant="success">{{ "on" | i18n }}</span>
-      }
     </span>
   </div>
 </ng-template>

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

@@ -287,9 +287,6 @@ export class AutoConfirmPolicyDialogComponent
     dialogService: DialogService,
     config: DialogConfig<AutoConfirmPolicyDialogData>,
   ) => {
-    return dialogService.openDrawer<PolicyEditDialogResult, AutoConfirmPolicyDialogData>(
-      AutoConfirmPolicyDialogComponent,
-      config,
-    );
+    return dialogService.open<PolicyEditDialogResult>(AutoConfirmPolicyDialogComponent, config);
   };
 }

apps/web/src/app/admin-console/organizations/policies/policy-edit-dialogs/organization-data-ownership-edit-policy-dialog.component.html

@@ -1,5 +1,5 @@
-<form [formGroup]="formGroup" [bitSubmit]="submit" class="tw-h-full tw-flex tw-flex-col">
-  <bit-dialog dialogSize="large" [loading]="loading">
+<form [formGroup]="formGroup" [bitSubmit]="submit">
+  <bit-dialog [loading]="loading">
     <ng-container bitDialogTitle>
       @let title = multiStepSubmit()[currentStep()]?.titleContent();
       @if (title) {
@@ -35,12 +35,7 @@
 </form>
 
 <ng-template #step0Title>
-  <span class="tw-flex tw-items-center tw-gap-2">
-    {{ policy.name | i18n }}
-    @if (isPolicyEnabled) {
-      <span bitBadge variant="success">{{ "on" | i18n }}</span>
-    }
-  </span>
+  {{ policy.name | i18n }}
 </ng-template>
 
 <ng-template #step1Title>

apps/web/src/app/admin-console/organizations/policies/policy-edit-dialogs/organization-data-ownership-edit-policy-dialog.component.ts

@@ -216,7 +216,7 @@ export class OrganizationDataOwnershipPolicyDialogComponent
   };
 
   static open = (dialogService: DialogService, config: DialogConfig<PolicyEditDialogData>) => {
-    return dialogService.openDrawer<PolicyEditDialogResult, PolicyEditDialogData>(
+    return dialogService.open<PolicyEditDialogResult>(
       OrganizationDataOwnershipPolicyDialogComponent,
       config,
     );

apps/web/src/locales/en/messages.json

@@ -5445,8 +5445,8 @@
   "minimumNumberOfWords": {
     "message": "Minimum number of words"
   },
-  "passwordTypePolicyOverride": {
-    "message": "Password type",
+  "overridePasswordTypePolicy": {
+    "message": "Password Type",
     "description": "Name of the password generator policy that overrides the user's password/passphrase selection."
   },
   "userPreference": {