Reimplement status change modal with the common simple modal

frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.html

@@ -14,11 +14,11 @@
   <app-common-section-card-action-buttons
     header-right
     [showSlideToggle]="true"
-    [isEnableToggleChecked]="(featureFlag$ | async).status === FEATURE_FLAG_STATUS.ENABLED"
+    [isEnableToggleChecked]="flag.status === FEATURE_FLAG_STATUS.ENABLED"
     [showMenuButton]="true"
     [menuButtonItems]="menuButtonItems"
     [isSectionCardExpanded]="isSectionCardExpanded"
-    (slideToggleChange)="onSlideToggleChange($event)"
+    (slideToggleChange)="onSlideToggleChange($event, flag)"
     (menuButtonItemClick)="onMenuButtonItemClick($event, flag)"
     (sectionCardExpandChange)="onSectionCardExpandChange($event)"
   ></app-common-section-card-action-buttons>

frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
 import {
   CommonSectionCardActionButtonsComponent,
   CommonSectionCardComponent,
@@ -13,6 +13,9 @@ import { CommonModule } from '@angular/common';
 import { CommonSectionCardOverviewDetailsComponent } from '../../../../../../../shared-standalone-component-lib/components/common-section-card-overview-details/common-section-card-overview-details.component';
 import { DialogService } from '../../../../../../../shared/services/common-dialog.service';
 import { FeatureFlag } from '../../../../../../../core/feature-flags/store/feature-flags.model';
+import { MatDialogRef } from '@angular/material/dialog';
+import { CommonSimpleConfirmationModalComponent } from '../../../../../../../shared-standalone-component-lib/components/common-simple-confirmation-modal/common-simple-confirmation-modal.component';
+import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-feature-flag-overview-details-section-card',
   standalone: true,
@@ -33,13 +36,16 @@ export class FeatureFlagOverviewDetailsSectionCardComponent {
   @Output() sectionCardExpandChange = new EventEmitter<boolean>();
   featureFlag$ = this.featureFlagService.selectedFeatureFlag$;
   flagOverviewDetails$ = this.featureFlagService.selectedFlagOverviewDetails;
+  subscriptions = new Subscription();
 
   menuButtonItems: IMenuButtonItem[] = [
     { name: 'Edit', disabled: false },
     { name: 'Delete', disabled: false },
     { name: 'Duplicate', disabled: false },
   ];
 
+  confirmStatusChangeDialogRef: MatDialogRef<CommonSimpleConfirmationModalComponent>;
+
   constructor(private dialogService: DialogService, private featureFlagService: FeatureFlagsService) {}
 
   get FEATURE_FLAG_STATUS() {
@@ -51,25 +57,45 @@ export class FeatureFlagOverviewDetailsSectionCardComponent {
     console.log(event);
   }
 
-  onSlideToggleChange(event: MatSlideToggleChange) {
+  onSlideToggleChange(event: MatSlideToggleChange, flag: FeatureFlag) {
     const slideToggleEvent = event.source;
+    const newStatus = slideToggleEvent.checked ? FEATURE_FLAG_STATUS.ENABLED : FEATURE_FLAG_STATUS.DISABLED;
 
     if (slideToggleEvent.checked) {
-      this.openEnableConfirmModel();
+      this.confirmStatusChangeDialogRef = this.openEnableConfirmModel(flag.name);
     } else {
-      this.openDisableConfirmModel();
+      this.confirmStatusChangeDialogRef = this.openDisableConfirmModel(flag.name);
     }
 
+    this.listenForConfirmStatusChangeDialogClose(flag, newStatus);
+
     // Note: we don't want the toggle to visibly change state immediately because we have to pop a confirmation modal first, so we need override the default and flip it back. I unfortunately couldn't find a better way to do this.
     slideToggleEvent.checked = !slideToggleEvent.checked;
   }
 
-  openEnableConfirmModel(): void {
-    this.dialogService.openEnableFeatureFlagConfirmModel();
+  listenForConfirmStatusChangeDialogClose(flag: FeatureFlag, newStatus: FEATURE_FLAG_STATUS): void {
+    this.subscriptions.add(
+      this.confirmStatusChangeDialogRef.afterClosed().subscribe((confirmClicked) => {
+        this.handleDialogClose(confirmClicked, flag, newStatus);
+      })
+    );
+  }
+
+  handleDialogClose(confirmClicked: boolean, flag: FeatureFlag, newStatus: FEATURE_FLAG_STATUS): void {
+    if (confirmClicked) {
+      this.featureFlagService.updateFeatureFlagStatus({
+        flagId: flag.id,
+        status: newStatus,
+      });
+    }
   }
 
-  openDisableConfirmModel(): void {
-    this.dialogService.openDisableFeatureFlagConfirmModel();
+  openEnableConfirmModel(flagName: string): MatDialogRef<CommonSimpleConfirmationModalComponent> {
+    return this.dialogService.openEnableFeatureFlagConfirmModel(flagName);
+  }
+
+  openDisableConfirmModel(flagName: string): MatDialogRef<CommonSimpleConfirmationModalComponent> {
+    return this.dialogService.openDisableFeatureFlagConfirmModel(flagName);
   }
 
   onMenuButtonItemClick(event: 'Edit' | 'Delete' | 'Duplicate', flag: FeatureFlag) {
@@ -86,4 +112,8 @@ export class FeatureFlagOverviewDetailsSectionCardComponent {
     this.isSectionCardExpanded = isSectionCardExpanded;
     this.sectionCardExpandChange.emit(this.isSectionCardExpanded);
   }
+
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe();
+  }
 }

frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-simple-confirmation-modal/common-simple-confirmation-modal.component.ts

@@ -11,6 +11,43 @@ import { CommonModule } from '@angular/common';
 import { CommonModalComponent } from '../common-modal/common-modal.component';
 import { CommonModalConfig, SimpleConfirmationModalParams } from '../common-modal/common-modal-config';
 
+/**
+ * CommonSimpleConfirmationModalComponent is a reusable modal component for simple confirmation dialogs.
+ * It accepts a message, and an optional subMessage that can be also optionally be styled as 'info' or 'warn'.
+ * It will emit a boolean to the onClose event, true if the primary action button is clicked, false otherwise (close or cancel clicked without confirm).
+ *
+ * Example usage:
+ *
+ * // In dialog service, create a config object with SimpleConfirmationModalParams
+ * openExampleConfirmModel(someData: string) {
+ *   const exampleConfig: CommonModalConfig<SimpleConfirmationModalParams> = {
+ *     title: 'Confirm Choice',
+ *     primaryActionBtnLabel: 'Confirm',
+ *     primaryActionBtnColor: 'warn',
+ *     cancelBtnLabel: 'Cancel',
+ *     params: {
+ *       message: 'Are you sure?',
+ *       subMessage: `* This will send ${someData} somewhere.`,
+ *       subMessageClass: 'warn',
+ *     },
+ *   };
+ *
+ *   return this.openSimpleCommonConfirmationModal(exampleConfig);
+ * }
+ *
+ *  // Handle open and close in the component:
+ *  this.exampleDialogRef = this.openEnableConfirmModel(someData);
+ *
+ *  // On primary click, confirmClicked will be true, otherwise false
+ *  this.exampleDialogRef.afterClosed().subscribe((confirmClicked) => {
+ *    if (confirmClicked) {
+ *      // handle confirmed action
+ *    } else {
+ *      // handle cancel or do nothing
+ *    }
+ *  })
+ *
+ */
 @Component({
   selector: 'common-simple-confirmation-modal',
   standalone: true,

frontend/projects/upgrade/src/app/shared/services/common-dialog.service.ts

@@ -8,7 +8,6 @@ import {
 import { DeleteFeatureFlagModalComponent } from '../../features/dashboard/feature-flags/modals/delete-feature-flag-modal/delete-feature-flag-modal.component';
 
 import { ImportFeatureFlagModalComponent } from '../../features/dashboard/feature-flags/modals/import-feature-flag-modal/import-feature-flag-modal.component';
-import { UpdateFlagStatusConfirmationModalComponent } from '../../features/dashboard/feature-flags/modals/update-flag-status-confirmation-modal/update-flag-status-confirmation-modal.component';
 import { UpsertFeatureFlagModalComponent } from '../../features/dashboard/feature-flags/modals/upsert-feature-flag-modal/upsert-feature-flag-modal.component';
 import {
   FeatureFlag,
@@ -77,26 +76,36 @@ export class DialogService {
     return this.openUpsertFeatureFlagModal(commonModalConfig);
   }
 
-  openEnableFeatureFlagConfirmModel() {
-    const enableFlagStatusModalConfig: CommonModalConfig = {
+  openEnableFeatureFlagConfirmModel(flagName: string) {
+    const enableFlagStatusModalConfig: CommonModalConfig<SimpleConfirmationModalParams> = {
       title: 'Enable Feature Flag',
       primaryActionBtnLabel: 'Enable',
       primaryActionBtnColor: 'primary',
       cancelBtnLabel: 'Cancel',
+      params: {
+        message: `Are you sure you want to enable "${flagName}"?`,
+        subMessage: '* Only the enabled include lists will be affected.',
+        subMessageClass: 'info',
+      },
     };
 
-    return this.openUpdateFlagStatusConfirmationModal(enableFlagStatusModalConfig);
+    return this.openSimpleCommonConfirmationModal(enableFlagStatusModalConfig);
   }
 
-  openDisableFeatureFlagConfirmModel() {
-    const disableFlagStatusModalConfig: CommonModalConfig = {
+  openDisableFeatureFlagConfirmModel(flagName: string) {
+    const disableFlagStatusModalConfig: CommonModalConfig<SimpleConfirmationModalParams> = {
       title: 'Disable Feature Flag',
       primaryActionBtnLabel: 'Disable',
       primaryActionBtnColor: 'warn',
       cancelBtnLabel: 'Cancel',
+      params: {
+        message: `Are you sure you want to disable "${flagName}"?`,
+        subMessage: '* All enabled include lists will be disabled.',
+        subMessageClass: 'warn',
+      },
     };
 
-    return this.openUpdateFlagStatusConfirmationModal(disableFlagStatusModalConfig);
+    return this.openSimpleCommonConfirmationModal(disableFlagStatusModalConfig);
   }
 
   openUpsertFeatureFlagModal(commonModalConfig: CommonModalConfig) {
@@ -109,17 +118,6 @@ export class DialogService {
     return this.dialog.open(UpsertFeatureFlagModalComponent, config);
   }
 
-  openUpdateFlagStatusConfirmationModal(commonModalConfig: CommonModalConfig) {
-    const config: MatDialogConfig = {
-      data: commonModalConfig,
-      width: '560px',
-      autoFocus: 'first-heading',
-      disableClose: true,
-    };
-
-    return this.dialog.open(UpdateFlagStatusConfirmationModalComponent, config);
-  }
-
   openAddIncludeListModal() {
     const commonModalConfig: CommonModalConfig<UpsertFeatureFlagListParams> = {
       title: 'Add Include List',