From 2a5c73f1e8a6d4a1f9ac3764782c5adfbaab62ab Mon Sep 17 00:00:00 2001
From: Dnyaneshwari
 <dnyaneshwari@li-9c9fbecc-2d5c-11b2-a85c-e2a7cc8a424f.ibm.com>
Date: Thu, 16 Oct 2025 09:46:16 +0530
Subject: [PATCH] mgr/dashboard: Carbonize Administration module > Create
 Realm/Zone group/Zone

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

Signed-off-by: Dnyaneshwari Talwekar <dtalweka@redhat.com>
---
 .../service-form/service-form.component.ts    |  18 +-
 ...create-rgw-service-entities.component.html | 175 +++++++++++-------
 .../create-rgw-service-entities.component.ts  |  22 ++-
 .../src/app/ceph/rgw/models/rgw-multisite.ts  |   6 +
 4 files changed, 141 insertions(+), 80 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.ts
index e1228f5ef90ac..185a9a99e5244 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.ts
@@ -3,14 +3,14 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { AbstractControl, UntypedFormControl, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
-import { NgbActiveModal, NgbModalRef, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
+import { NgbActiveModal, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
 import { ListItem } from 'carbon-components-angular';
 import _ from 'lodash';
 import { forkJoin, merge, Observable, Subject, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
 import { Pool } from '~/app/ceph/pool/pool';
 import { CreateRgwServiceEntitiesComponent } from '~/app/ceph/rgw/create-rgw-service-entities/create-rgw-service-entities.component';
-import { RgwRealm, RgwZonegroup, RgwZone } from '~/app/ceph/rgw/models/rgw-multisite';
+import { RgwRealm, RgwZonegroup, RgwZone, RgwEntities } from '~/app/ceph/rgw/models/rgw-multisite';
 
 import { CephServiceService } from '~/app/shared/api/ceph-service.service';
 import { HostService } from '~/app/shared/api/host.service';
@@ -36,7 +36,7 @@ import { CdValidators } from '~/app/shared/forms/cd-validators';
 import { FinishedTask } from '~/app/shared/models/finished-task';
 import { Host } from '~/app/shared/models/host.interface';
 import { CephServiceSpec } from '~/app/shared/models/service.interface';
-import { ModalService } from '~/app/shared/services/modal.service';
+import { ModalCdsService } from '~/app/shared/services/modal-cds.service';
 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
 import { TimerService } from '~/app/shared/services/timer.service';
 
@@ -88,7 +88,6 @@ export class ServiceFormComponent extends CdForm implements OnInit {
   realmList: RgwRealm[] = [];
   zonegroupList: RgwZonegroup[] = [];
   zoneList: RgwZone[] = [];
-  bsModalRef: NgbModalRef;
   defaultZonegroup: RgwZonegroup;
   showRealmCreationForm = false;
   defaultsInfo: { defaultRealmName: string; defaultZonegroupName: string; defaultZoneName: string };
@@ -125,7 +124,7 @@ export class ServiceFormComponent extends CdForm implements OnInit {
     public rgwMultisiteService: RgwMultisiteService,
     private route: ActivatedRoute,
     public activeModal: NgbActiveModal,
-    public modalService: ModalService
+    public modalService: ModalCdsService
   ) {
     super();
     this.resource = $localize`service`;
@@ -1364,11 +1363,10 @@ export class ServiceFormComponent extends CdForm implements OnInit {
   }
 
   createMultisiteSetup() {
-    this.bsModalRef = this.modalService.show(CreateRgwServiceEntitiesComponent, {
-      size: 'lg'
-    });
-    this.bsModalRef.componentInstance.submitAction.subscribe(() => {
-      this.setRgwFields();
+    const modalRef = this.modalService.show(CreateRgwServiceEntitiesComponent);
+    const modalComponent = modalRef as CreateRgwServiceEntitiesComponent;
+    modalComponent.submitAction.subscribe((item: RgwEntities) => {
+      this.setRgwFields(item.realm_name, item.zonegroup_name, item.zone_name);
     });
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/create-rgw-service-entities/create-rgw-service-entities.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/create-rgw-service-entities/create-rgw-service-entities.component.html
index 140f314ce5379..36c31b4a93ec7 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/create-rgw-service-entities/create-rgw-service-entities.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/create-rgw-service-entities/create-rgw-service-entities.component.html
@@ -1,70 +1,117 @@
-<cd-modal [modalRef]="activeModal">
-  <ng-container i18n="form title"
-                class="modal-title">Create Realm/Zone Group/Zone
-  </ng-container>
-
-  <ng-container class="modal-content">
-    <form name="createMultisiteEntitiesForm"
-          #formDir="ngForm"
-          [formGroup]="createMultisiteEntitiesForm"
-          novalidate>
-    <div class="modal-body">
+<cds-modal size="sm"
+           [open]="open"
+           [hasScrollingContent]="false"
+           (overlaySelected)="closeModal()">
+  <cds-modal-header (closeSelect)="closeModal()">
+    <h3 cdsModalHeaderHeading
+        i18n>Create Realm/Zone Group/Zone</h3>
+    <cd-help-text [formAllFieldsRequired]="true"></cd-help-text>
+  </cds-modal-header>
+  <form
+    name="createMultisiteEntitiesForm"
+    #formDir="ngForm"
+    [formGroup]="createMultisiteEntitiesForm"
+    novalidate
+  >
+    <div cdsModalContent>
       <cd-alert-panel type="info"
-                      spacingClass="mb-3">The realm/zone group/zone created will be set as default and master.
+                      spacingClass="mt-3"
+                      i18n>The realm/zone group/zone created will be set as default and master.
       </cd-alert-panel>
-      <div class="form-group row">
-        <label class="cd-col-form-label required"
-               for="realmName"
-               i18n>Realm Name</label>
-        <div class="cd-col-form-input">
-          <input class="form-control"
-                 type="text"
-                 placeholder="Realm name..."
-                 id="realmName"
-                 name="realmName"
-                 formControlName="realmName">
-          <span class="invalid-feedback"
-                *ngIf="createMultisiteEntitiesForm.showError('realmName', formDir, 'required')"
-                i18n>This field is required.</span>
-        </div>
+      <div class="form-item">
+        <cds-text-label
+          labelInputID="realmName"
+          [invalid]="createMultisiteEntitiesForm.controls.realmName.invalid &&
+                     createMultisiteEntitiesForm.controls.realmName.dirty"
+          [invalidText]="realmNameError"
+          i18n
+          >Realm Name
+          <input
+            cdsText
+            type="text"
+            id="realmName"
+            formControlName="realmName"
+            [invalid]="
+              createMultisiteEntitiesForm.controls.realmName.invalid &&
+              createMultisiteEntitiesForm.controls.realmName.dirty"
+            [autofocus]="true"
+            modal-primary-focus
+          />
+        </cds-text-label>
+        <ng-template #realmNameError>
+          <span
+            class="invalid-feedback"
+            *ngIf="createMultisiteEntitiesForm.showError('realmName', formDir, 'required')"
+            i18n
+            >This field is required.</span
+          >
+        </ng-template>
       </div>
-      <div class="form-group row">
-        <label class="cd-col-form-label required"
-               for="zonegroupName"
-               i18n>Zone Group Name</label>
-        <div class="cd-col-form-input">
-          <input class="form-control"
-                 type="text"
-                 placeholder="Zone group name..."
-                 id="zonegroupName"
-                 name="zonegroupName"
-                 formControlName="zonegroupName">
-          <span class="invalid-feedback"
-                *ngIf="createMultisiteEntitiesForm.showError('zonegroupName', formDir, 'required')"
-                i18n>This field is required.</span>
-        </div>
+
+      <div class="form-item">
+        <cds-text-label
+          labelInputID="zonegroupName"
+          [invalid]="createMultisiteEntitiesForm.controls.zonegroupName.invalid &&
+                     createMultisiteEntitiesForm.controls.zonegroupName.dirty"
+          [invalidText]="zoneGroupNameError"
+          i18n
+          >Zone Group Name
+          <input
+            cdsText
+            type="text"
+            placeholder="Zone group name..."
+            id="zonegroupName"
+            name="zonegroupName"
+            formControlName="zonegroupName"
+            [invalid]="createMultisiteEntitiesForm.controls.zonegroupName.invalid &&
+                       createMultisiteEntitiesForm.controls.zonegroupName.dirty"
+          />
+        </cds-text-label>
+        <ng-template #zoneGroupNameError>
+          <span
+            class="invalid-feedback"
+            *ngIf="createMultisiteEntitiesForm.showError('zonegroupName', formDir, 'required')"
+            i18n
+            >This field is required.</span
+          >
+        </ng-template>
       </div>
-      <div class="form-group row">
-        <label class="cd-col-form-label required"
-               for="zoneName"
-               i18n>Zone Name</label>
-        <div class="cd-col-form-input">
-          <input class="form-control"
-                 type="text"
-                 placeholder="Zone name..."
-                 id="zoneName"
-                 name="zoneName"
-                 formControlName="zoneName">
-          <span class="invalid-feedback"
-                *ngIf="createMultisiteEntitiesForm.showError('zoneName', formDir, 'required')"
-                i18n>This field is required.</span>
-        </div>
+
+      <div class="form-item">
+        <cds-text-label
+          labelInputID="zoneName"
+          [invalid]="createMultisiteEntitiesForm.controls.zoneName.invalid &&
+                     createMultisiteEntitiesForm.controls.zoneName.dirty"
+          [invalidText]="zoneNameError"
+          i18n
+          >Zone Name
+          <input
+            cdsText
+            type="text"
+            placeholder="Zone name..."
+            id="zoneName"
+            name="zoneName"
+            formControlName="zoneName"
+            [invalid]="createMultisiteEntitiesForm.controls.zoneName.invalid &&
+                       createMultisiteEntitiesForm.controls.zoneName.dirty"
+          />
+        </cds-text-label>
+        <ng-template #zoneNameError>
+          <span
+            class="invalid-feedback"
+            *ngIf="createMultisiteEntitiesForm.showError('zoneName', formDir, 'required')"
+            i18n
+            >This field is required.</span
+          >
+        </ng-template>
       </div>
     </div>
-    <div class="modal-footer">
-      <cd-form-button-panel (submitActionEvent)="submit()"
-                            [form]="createMultisiteEntitiesForm"></cd-form-button-panel>
-    </div>
-    </form>
-  </ng-container>
-</cd-modal>
+
+    <cd-form-button-panel
+      (submitActionEvent)="submit()"
+      [form]="createMultisiteEntitiesForm"
+      [modalForm]="true"
+    >
+    </cd-form-button-panel>
+  </form>
+</cds-modal>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/create-rgw-service-entities/create-rgw-service-entities.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/create-rgw-service-entities/create-rgw-service-entities.component.ts
index 041915186c05e..5f517c33233a7 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/create-rgw-service-entities/create-rgw-service-entities.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/create-rgw-service-entities/create-rgw-service-entities.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { RgwMultisiteService } from '~/app/shared/api/rgw-multisite.service';
@@ -7,18 +7,19 @@ 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 { CdFormGroup } from '~/app/shared/forms/cd-form-group';
-import { ModalService } from '~/app/shared/services/modal.service';
 import { NotificationService } from '~/app/shared/services/notification.service';
 import { RgwRealm, RgwZonegroup, RgwZone, SystemKey } from '../models/rgw-multisite';
 import { NotificationType } from '~/app/shared/enum/notification-type.enum';
 import { Subscription } from 'rxjs';
+import { ModalCdsService } from '~/app/shared/services/modal-cds.service';
+import { CdForm } from '~/app/shared/forms/cd-form';
 
 @Component({
   selector: 'cd-create-rgw-service-entities',
   templateUrl: './create-rgw-service-entities.component.html',
   styleUrls: ['./create-rgw-service-entities.component.scss']
 })
-export class CreateRgwServiceEntitiesComponent {
+export class CreateRgwServiceEntitiesComponent extends CdForm implements OnInit {
   public sub = new Subscription();
   createMultisiteEntitiesForm: CdFormGroup;
   realm: RgwRealm;
@@ -36,9 +37,14 @@ export class CreateRgwServiceEntitiesComponent {
     public notificationService: NotificationService,
     public rgwZonegroupService: RgwZonegroupService,
     public rgwRealmService: RgwRealmService,
-    public modalService: ModalService
+    public modalService: ModalCdsService
   ) {
+    super();
+  }
+
+  ngOnInit() {
     this.createForm();
+    this.loadingReady();
   }
 
   createForm() {
@@ -84,8 +90,12 @@ export class CreateRgwServiceEntitiesComponent {
                   NotificationType.success,
                   $localize`Realm/Zonegroup/Zone created successfully`
                 );
-                this.submitAction.emit();
-                this.activeModal.close();
+                this.submitAction.emit({
+                  realm: this.realm,
+                  zonegroup: this.zonegroup,
+                  zone: this.zone
+                });
+                this.closeModal();
               })
               .catch(() => {
                 this.notificationService.show(
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 e385ecd5ada2e..4d3ab1442b684 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
@@ -51,6 +51,12 @@ export class SystemKey {
   secret_key: string;
 }
 
+export interface RgwEntities {
+  realm_name: string;
+  zonegroup_name: string;
+  zone_name: string;
+}
+
 export enum RgwMultisiteSyncPolicyStatus {
   ENABLED = 'enabled',
   FORBIDDEN = 'forbidden',
-- 
2.39.5