Enhance policy edit dialogs by adding policy status badges to indicate if a policy is enabled, improving user visibility and experience.

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

@@ -1,10 +1,13 @@
 <form [formGroup]="formGroup" [bitSubmit]="submit">
-  <bit-dialog
-    dialogSize="large"
-    [loading]="loading"
-    [title]="'editPolicy' | i18n"
-    [subtitle]="policy.name | i18n"
-  >
+  <bit-dialog dialogSize="large" [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>
     <ng-container bitDialogContent>
       <div *ngIf="loading">
         <i

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

@@ -81,6 +81,10 @@ 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.
    */

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

@@ -40,13 +40,16 @@
     @if (showBadge) {
       <span bitBadge variant="info" class="tw-w-[99px] tw-my-2"> {{ "availableNow" | i18n }}</span>
     }
-    <span>
+    <span class="tw-flex tw-items-center tw-gap-2">
       {{ (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/organization-data-ownership-edit-policy-dialog.component.html

@@ -35,7 +35,12 @@
 </form>
 
 <ng-template #step0Title>
-  {{ policy.name | i18n }}
+  <span class="tw-flex tw-items-center tw-gap-2">
+    {{ policy.name | i18n }}
+    @if (isPolicyEnabled) {
+      <span bitBadge variant="success">{{ "on" | i18n }}</span>
+    }
+  </span>
 </ng-template>
 
 <ng-template #step1Title>