From: Sagar Gopale <sagar.gopale@ibm.com>
Date: Tue, 30 Dec 2025 10:03:29 +0000 (+0530)
Subject: mgr/dashboard: carbonize-delete-zone-modal
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=d67e18d822d8466adccc7220caf7b2bdd587f72c;p=ceph.git

mgr/dashboard: carbonize-delete-zone-modal

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

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

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zone-deletion-form/rgw-multisite-zone-deletion-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zone-deletion-form/rgw-multisite-zone-deletion-form.component.html
index 9793d2b369d..58f64b0d8da 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zone-deletion-form/rgw-multisite-zone-deletion-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zone-deletion-form/rgw-multisite-zone-deletion-form.component.html
@@ -1,54 +1,60 @@
-<cd-modal [modalRef]="activeModal">
-  <ng-container i18n="form title"
-                class="modal-title">Delete Zone</ng-container>
+<cds-modal size="sm"
+           [open]="open"
+           (overlaySelected)="closeModal()">
+  <cds-modal-header (closeSelect)="closeModal()">
+    <h3 cdsModalHeaderHeading
+        i18n>Delete zone</h3>
+  </cds-modal-header>
 
-  <ng-container class="modal-content">
-    <form name="zoneForm"
-          [formGroup]="zoneForm"
-          novalidate>
-      <div class="modal-body ms-4">
-        <label i18n>
-          This will delete your <strong>{{zone?.name}}</strong> Zone.
+  <ng-container>
+    <section cdsModalContent>
+      <form [formGroup]="zoneForm"
+            novalidate>
+        <label class="cds--label-description"
+               i18n>
+          This will delete your <strong>{{ zone?.name }}</strong> Zone.
         </label>
-        <ng-container *ngIf="includedPools.size">
-          <label class="mt-3"
-                 i18n>
-              Do you want to delete the associated pools with the <strong>{{zone?.name}}</strong> Zone?</label>
-          <label class="mb-4"
-                 i18n>
-              This will delete the following pools and any data stored in these pools:</label>
-            <strong *ngFor="let pool of includedPools"
-                    class="block">{{ pool }}</strong>
-          <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()">
-              <label class="custom-control-label"
-                     for="deletePools"
-                     i18n>Yes, I want to delete the pools.</label>
-            </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>
+        @if (includedPools.size) {
+        <label class="cds--label-description"
+               i18n>
+          Do you want to delete the associated pools with the
+          <strong>{{ zone?.name }}</strong> Zone?
+        </label>
+        <label class="cds--label-description"
+               i18n>
+          This will delete the following pools and any data stored in these pools:
+        </label>
+
+        <div class="scroll-list">
+          @for (pool of includedPools; track pool) {
+          <div>
+            <strong>{{ pool }}</strong>
           </div>
-        </ng-container>
-      </div>
+          }
+        </div>
+
+        <div class="form-item">
+          <cds-checkbox id="deletePools"
+                        formControlName="deletePools"
+                        (checkedChange)="showDangerText()"
+                        i18n>Yes, I want to delete the pools.
+          </cds-checkbox>
+        </div>
 
-      <div class="modal-footer">
-        <cd-form-button-panel (submitActionEvent)="submit()"
-                              [form]="zoneForm"
-                              [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>
+        }
+        }
+      </form>
+    </section>
   </ng-container>
 
-</cd-modal>
+  <cd-form-button-panel (submitActionEvent)="submit()"
+                        [form]="zoneForm"
+                        [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-zone-deletion-form/rgw-multisite-zone-deletion-form.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zone-deletion-form/rgw-multisite-zone-deletion-form.component.scss
index 55a52c0ee2e..0550ab070ca 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zone-deletion-form/rgw-multisite-zone-deletion-form.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zone-deletion-form/rgw-multisite-zone-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-zone-deletion-form/rgw-multisite-zone-deletion-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zone-deletion-form/rgw-multisite-zone-deletion-form.component.spec.ts
index 8cdd79e6549..be242f8b19c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zone-deletion-form/rgw-multisite-zone-deletion-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zone-deletion-form/rgw-multisite-zone-deletion-form.component.spec.ts
@@ -1,12 +1,9 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrModule } from 'ngx-toastr';
 import { SharedModule } from '~/app/shared/shared.module';
 import { configureTestBed } from '~/testing/unit-test-helper';
-import { RgwZone } from '../rgw-multisite';
-
 import { RgwMultisiteZoneDeletionFormComponent } from './rgw-multisite-zone-deletion-form.component';
 
 describe('RgwMultisiteZoneDeletionFormComponent', () => {
@@ -16,13 +13,17 @@ describe('RgwMultisiteZoneDeletionFormComponent', () => {
   configureTestBed({
     declarations: [RgwMultisiteZoneDeletionFormComponent],
     imports: [SharedModule, HttpClientTestingModule, ToastrModule.forRoot(), RouterTestingModule],
-    providers: [NgbActiveModal]
+    providers: []
   });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(RgwMultisiteZoneDeletionFormComponent);
     component = fixture.componentInstance;
-    component.zone = new RgwZone();
+    component.zone = {
+      name: 'zone',
+      parent: 'parent',
+      second_parent: 'second_parent'
+    };
     fixture.detectChanges();
   });
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zone-deletion-form/rgw-multisite-zone-deletion-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zone-deletion-form/rgw-multisite-zone-deletion-form.component.ts
index cebb2afba78..6f7da6c8935 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zone-deletion-form/rgw-multisite-zone-deletion-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/models/rgw-multisite-zone-deletion-form/rgw-multisite-zone-deletion-form.component.ts
@@ -1,12 +1,13 @@
-import { AfterViewInit, Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit, Optional, AfterViewInit } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { PoolService } from '~/app/shared/api/pool.service';
 import { RgwZoneService } from '~/app/shared/api/rgw-zone.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 { NotificationService } from '~/app/shared/services/notification.service';
+import { CdForm } from '~/app/shared/forms/cd-form';
+import { RgwZoneTreeNode } from '../rgw-multisite';
 
 @Component({
   selector: 'cd-rgw-multisite-zone-deletion-form',
@@ -14,21 +15,23 @@ import { NotificationService } from '~/app/shared/services/notification.service'
   styleUrls: ['./rgw-multisite-zone-deletion-form.component.scss'],
   standalone: false
 })
-export class RgwMultisiteZoneDeletionFormComponent implements OnInit, AfterViewInit {
+export class RgwMultisiteZoneDeletionFormComponent extends CdForm implements OnInit, AfterViewInit {
   zoneData$: any;
   poolList$: any;
-  zone: any;
+  zone: RgwZoneTreeNode;
   zoneForm: CdFormGroup;
   displayText: boolean = false;
   includedPools: Set<string> = new Set<string>();
 
   constructor(
-    public activeModal: NgbActiveModal,
+    @Optional() @Inject('zone') public zoneInput: RgwZoneTreeNode,
     public actionLabels: ActionLabelsI18n,
     public notificationService: NotificationService,
     private rgwZoneService: RgwZoneService,
     private poolService: PoolService
   ) {
+    super();
+    this.zone = zoneInput;
     this.createForm();
   }
 
@@ -62,7 +65,7 @@ export class RgwMultisiteZoneDeletionFormComponent implements OnInit, AfterViewI
             NotificationType.success,
             $localize`Zone: '${this.zone.name}' deleted successfully`
           );
-          this.activeModal.close();
+          this.closeModal();
         },
         () => {
           this.zoneForm.setErrors({ cdSubmitButton: true });
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..c45dff31838 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
@@ -77,3 +77,9 @@ export interface RgwRealmToken {
   realm: string;
   token: string;
 }
+
+export interface RgwZoneTreeNode {
+  name: string;
+  parent: string;
+  second_parent: 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..b087ce7a5a0 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
@@ -610,7 +610,7 @@ export class RgwMultisiteDetailsComponent extends CdForm implements OnDestroy, O
         zonegroup: node.data
       });
     } else if (node?.data?.type === 'zone') {
-      this.modalRef = this.modalService.show(RgwMultisiteZoneDeletionFormComponent, {
+      this.cdsModalService.show(RgwMultisiteZoneDeletionFormComponent, {
         zone: node.data
       });
     }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/rgw-zone.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/rgw-zone.service.ts
index c958b2e3928..bbeb8b79fd2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/api/rgw-zone.service.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/api/rgw-zone.service.ts
@@ -1,7 +1,12 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { RgwRealm, RgwZone, RgwZonegroup } from '~/app/ceph/rgw/models/rgw-multisite';
+import {
+  RgwRealm,
+  RgwZone,
+  RgwZonegroup,
+  RgwZoneTreeNode
+} from '~/app/ceph/rgw/models/rgw-multisite';
 import { Icons } from '../enum/icons.enum';
 import { USER } from '~/app/shared/constants/app.constants';
 
@@ -37,7 +42,7 @@ export class RgwZoneService {
     return this.http.get<object>(`${this.url}`);
   }
 
-  get(zone: RgwZone): Observable<object> {
+  get(zone: RgwZone | RgwZoneTreeNode): Observable<object> {
     return this.http.get(`${this.url}/${zone.name}`);
   }