From: Sagar Gopale <sagar.gopale@ibm.com>
Date: Wed, 24 Dec 2025 05:21:57 +0000 (+0530)
Subject: mgr/dashboard: carbonize-delete-zonegroup-modal
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=6ac5d3ba42bd5a4b0c64a56ebd8d297d38c902e0;p=ceph.git

mgr/dashboard: carbonize-delete-zonegroup-modal

Fixes: https://tracker.ceph.com/issues/74249

Signed-off-by: Sagar Gopale <sagar.gopale@ibm.com>

 Conflicts:
	src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zonegroup-deletion-form/rgw-multisite-zonegroup-deletion-form.component.html
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zonegroup-deletion-form/rgw-multisite-zonegroup-deletion-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zonegroup-deletion-form/rgw-multisite-zonegroup-deletion-form.component.html
index 2f92b0467a0..aabd7735315 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zonegroup-deletion-form/rgw-multisite-zonegroup-deletion-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zonegroup-deletion-form/rgw-multisite-zonegroup-deletion-form.component.html
@@ -1,75 +1,83 @@
-<cd-modal [modalRef]="activeModal">
-  <ng-container i18n="form title"
-                class="modal-title">Delete Zonegroup</ng-container>
+<cds-modal size="sm"
+           [open]="open"
+           (overlaySelected)="closeModal()">
+  <cds-modal-header (closeSelect)="closeModal()">
+    <h3 cdsModalHeaderHeading
+        i18n>Delete zonegroup</h3>
+  </cds-modal-header>
 
-  <ng-container class="modal-content">
-    <form name="zonegroupForm"
-          [formGroup]="zonegroupForm"
-          novalidate>
-      <div class="modal-body ms-4">
-        <label i18n>
-          This will delete your <strong>{{zonegroup?.name}}</strong> Zonegroup.
+  <ng-container>
+    <section cdsModalContent>
+      <form name="zonegroupForm"
+            [formGroup]="zonegroupForm"
+            novalidate>
+        <label class="cds--label-description"
+               i18n>
+          This will delete your <strong>{{ zonegroup?.name }}</strong> Zonegroup.
         </label>
-        <ng-container *ngIf="zonesList.length > 0">
-          <label class="mt-3"
+
+      @if (zonesList.length > 0) {
+        <ng-container>
+          <label class="cds--label-description"
                  i18n>
-              Do you want to delete the associated zones and pools with the <strong>{{zonegroup?.name}}</strong> Zonegroup?</label>
-          <ng-container *ngIf="includedPools.size > 0">
-            <label i18n>
-              This will delete the following:</label>
-          </ng-container>
-          <strong class="mt-3 mb-2 h5 block">Zones:</strong>
-          <div id="scroll">
-            <strong *ngFor="let zone of zonesList"
-                    class="block">{{zone}}</strong>
+            Do you want to delete the associated zones and pools with the <strong>{{zonegroup?.name}}</strong> Zonegroup?
+          </label>
+
+          @if (includedPools.size > 0) {
+            <ng-container>
+              <label class="cds--label-description"
+                     i18n>
+                This will delete the following:
+              </label>
+            </ng-container>
+          }
+
+          <div><strong>Zones:</strong></div>
+          <div class="scroll-list">
+          @for (zone of zonesList; track zone) {
+            <div><strong>{{zone}}</strong></div>
+          }
           </div>
-          <ng-container *ngIf="includedPools.size > 0">
-            <strong class="mt-3 mb-2 h5 block">Pools:</strong>
-            <div id="scroll"
-                 class="mb-2">
-              <strong *ngFor="let pool of includedPools"
-                      class="block">{{ pool }}</strong>
-            </div>
-          </ng-container>
+          @if (includedPools.size > 0) {
+            <ng-container>
+              <div><strong>Pools:</strong></div>
+              <div class="scroll-list">
+              @for (pool of includedPools; track pool) {
+                <div><strong>{{ pool }}</strong></div>
+              }
+              </div>
+            </ng-container>
+          }
 
-          <div class="form-group">
-            <div class="custom-control custom-checkbox mt-2">
-              <input type="checkbox"
-                     class="custom-control-input"
-                     name="deletePools"
-                     id="deletePools"
-                     formControlName="deletePools"
-                     (change)="showDangerText()">
-              <ng-container *ngIf="includedPools.size > 0 else noPoolsConfirmation">
-                <label class="custom-control-label"
-                       for="deletePools"
-                       i18n>Yes, I want to delete the zones and their pools.</label>
-              </ng-container>
-            </div>
-            <div *ngIf="displayText"
-                 class="me-4">
-              <cd-alert-panel type="danger"
-                              i18n>
-                              This will delete all the data in the pools!
-              </cd-alert-panel>
-            </div>
+          <div class="form-item">
+            <cds-checkbox id="deletePools"
+                          formControlName="deletePools"
+                          (checkedChange)="showDangerText()">
+            @if (includedPools.size > 0) {
+              <span i18n>Yes, I want to delete the zones and their pools.</span>
+            } @else {
+              <span i18n>Yes, I want to delete the zones.</span>
+            }
+            </cds-checkbox>
           </div>
-        </ng-container>
-      </div>
 
-      <div class="modal-footer">
-        <cd-form-button-panel (submitActionEvent)="submit()"
-                              [form]="zonegroupForm"
-                              [submitText]="actionLabels.DELETE ">
-        </cd-form-button-panel>
-      </div>
-    </form>
+        @if (displayText) {
+          <cd-alert-panel type="danger"
+                          i18n>
+            This will delete all the data in the pools!
+          </cd-alert-panel>
+        }
+        </ng-container>
+      }
+      </form>
+    </section>
   </ng-container>
 
-</cd-modal>
-
-<ng-template #noPoolsConfirmation>
-  <label class="custom-control-label"
-         for="deletePools"
-         i18n>Yes, I want to delete the zones.</label>
-</ng-template>
+  <cd-form-button-panel
+    (submitActionEvent)="submit()"
+    [form]="zonegroupForm"
+    [submitText]="actionLabels.DELETE"
+    [modalForm]="true"
+  >
+  </cd-form-button-panel>
+</cds-modal>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zonegroup-deletion-form/rgw-multisite-zonegroup-deletion-form.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zonegroup-deletion-form/rgw-multisite-zonegroup-deletion-form.component.scss
index 55a52c0ee2e..0550ab070ca 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zonegroup-deletion-form/rgw-multisite-zonegroup-deletion-form.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zonegroup-deletion-form/rgw-multisite-zonegroup-deletion-form.component.scss
@@ -1,9 +1,3 @@
-.block {
-  display: block;
-}
-
-#scroll {
-  height: 100%;
-  max-height: 10rem;
-  overflow: auto;
+.scroll-list {
+  margin-bottom: var(--cds-spacing-05);
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zonegroup-deletion-form/rgw-multisite-zonegroup-deletion-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zonegroup-deletion-form/rgw-multisite-zonegroup-deletion-form.component.spec.ts
index 2c4059f251a..7c325a6c91f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zonegroup-deletion-form/rgw-multisite-zonegroup-deletion-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zonegroup-deletion-form/rgw-multisite-zonegroup-deletion-form.component.spec.ts
@@ -22,7 +22,7 @@ describe('RgwMultisiteZonegroupDeletionFormComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(RgwMultisiteZonegroupDeletionFormComponent);
     component = fixture.componentInstance;
-    component.zonegroup = new RgwZonegroup();
+    component.zonegroup = Object.assign(new RgwZonegroup(), { parent: '' });
     fixture.detectChanges();
   });
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zonegroup-deletion-form/rgw-multisite-zonegroup-deletion-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zonegroup-deletion-form/rgw-multisite-zonegroup-deletion-form.component.ts
index 7e01e35e0fb..ccb17bed8ac 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zonegroup-deletion-form/rgw-multisite-zonegroup-deletion-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zonegroup-deletion-form/rgw-multisite-zonegroup-deletion-form.component.ts
@@ -1,12 +1,14 @@
-import { AfterViewInit, Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, Inject, OnInit, Optional } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { PoolService } from '~/app/shared/api/pool.service';
+
+import { RgwZonegroupMeta } from '~/app/ceph/rgw/models/rgw-multisite';
 import { RgwZoneService } from '~/app/shared/api/rgw-zone.service';
 import { RgwZonegroupService } from '~/app/shared/api/rgw-zonegroup.service';
 import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { NotificationType } from '~/app/shared/enum/notification-type.enum';
 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
+import { CdForm } from '~/app/shared/forms/cd-form';
 import { NotificationService } from '~/app/shared/services/notification.service';
 
 @Component({
@@ -15,24 +17,28 @@ import { NotificationService } from '~/app/shared/services/notification.service'
   styleUrls: ['./rgw-multisite-zonegroup-deletion-form.component.scss'],
   standalone: false
 })
-export class RgwMultisiteZonegroupDeletionFormComponent implements OnInit, AfterViewInit {
+export class RgwMultisiteZonegroupDeletionFormComponent
+  extends CdForm
+  implements OnInit, AfterViewInit {
   zonegroupData$: any;
   poolList$: any;
   zonesPools: Array<any> = [];
-  zonegroup: any;
+  zonegroup: RgwZonegroupMeta;
   zonesList: Array<any> = [];
   zonegroupForm: CdFormGroup;
   displayText: boolean = false;
   includedPools: Set<string> = new Set<string>();
 
   constructor(
-    public activeModal: NgbActiveModal,
+    @Optional() @Inject('zonegroup') public zonegroupInput: RgwZonegroupMeta,
     public actionLabels: ActionLabelsI18n,
     public notificationService: NotificationService,
     private rgwZonegroupService: RgwZonegroupService,
     private poolService: PoolService,
     private rgwZoneService: RgwZoneService
   ) {
+    super();
+    this.zonegroup = zonegroupInput;
     this.createForm();
   }
 
@@ -64,7 +70,7 @@ export class RgwMultisiteZonegroupDeletionFormComponent implements OnInit, After
           NotificationType.success,
           $localize`Zonegroup: '${this.zonegroup.name}' deleted successfully`
         );
-        this.activeModal.close();
+        this.closeModal();
       });
   }
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite.ts
index 8e8813b144c..f2309456009 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite.ts
@@ -22,6 +22,10 @@ export class RgwZonegroup {
   enabled_features: string[];
 }
 
+export interface RgwZonegroupMeta extends RgwZonegroup {
+  parent: string;
+}
+
 export class RgwZone {
   id: string;
   name: string;
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.ts
index aaede39d411..243e409d26d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-details/rgw-multisite-details.component.ts
@@ -606,7 +606,7 @@ export class RgwMultisiteDetailsComponent extends CdForm implements OnDestroy, O
         }
       });
     } else if (node?.data?.type === 'zonegroup') {
-      this.modalRef = this.modalService.show(RgwMultisiteZonegroupDeletionFormComponent, {
+      this.cdsModalService.show(RgwMultisiteZonegroupDeletionFormComponent, {
         zonegroup: node.data
       });
     } else if (node?.data?.type === 'zone') {