From 15e48ecd2de960b56b88c1a7197e0109a9d6b58e Mon Sep 17 00:00:00 2001
From: Sagar Gopale <sagar.gopale@ibm.com>
Date: Tue, 9 Dec 2025 20:06:39 +0530
Subject: [PATCH] mgr/dashboard: carbonized-multisite-export-realm-token-modal

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

Signed-off-by: Sagar Gopale <sagar.gopale@ibm.com>
(cherry picked from commit 25644b4bdd1fa27b5c7445b27ab98084f05da5f7)

 Conflicts:
	src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-export/rgw-multisite-export.component.html

Signed-off-by: Sagar Gopale <sagar.gopale@ibm.com>
---
 .../rgw-multisite-details.component.ts        |   4 +-
 .../rgw-multisite-export.component.html       | 136 ++++++++++--------
 .../rgw-multisite-export.component.scss       |   5 +
 .../rgw-multisite-export.component.ts         |  19 ++-
 4 files changed, 95 insertions(+), 69 deletions(-)

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 18ea16c59bd..f10d8fe1676 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
@@ -199,9 +199,7 @@ export class RgwMultisiteDetailsComponent extends CdForm implements OnDestroy, O
       defaultsInfo: this.defaultsInfo,
       multisiteInfo: this.multisiteInfo
     };
-    this.bsModalRef = this.modalService.show(RgwMultisiteExportComponent, initialState, {
-      size: 'lg'
-    });
+    this.cdsModalService.show(RgwMultisiteExportComponent, initialState);
   }
 
   getDisableExport() {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-export/rgw-multisite-export.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-export/rgw-multisite-export.component.html
index 77988493693..2bad5d8ed1c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-export/rgw-multisite-export.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-export/rgw-multisite-export.component.html
@@ -1,65 +1,89 @@
-<cd-modal [modalRef]="activeModal">
-  <ng-container i18n="form title"
-                class="modal-title">Export Multi-site Realm Token</ng-container>
+<cds-modal
+  size="sm"
+  [open]="open"
+  [hasScrollingContent]="true"
+  (overlaySelected)="closeModal()"
+>
+  <cds-modal-header
+    (closeSelect)="closeModal()"
+    i18n
+  >
+      Export multi-site realm token
+  </cds-modal-header>
 
-  <ng-container class="modal-content">
-    <form name="exportTokenForm"
-          #frm="ngForm"
-          [formGroup]="exportTokenForm">
-    <span *ngIf="loading"
-          class="d-flex justify-content-center">
-    <i [ngClass]="[icons.large3x, icons.spinner, icons.spin]"></i></span>
-    <div class="modal-body"
-         *ngIf="!loading">
-      <cd-alert-panel *ngIf="!tokenValid"
-                      type="warning"
-                      class="mx-3"
-                      i18n>
-      <div *ngFor="let realminfo of realms">
-        <b>{{realminfo.realm}}</b> -
-        {{realminfo.token}}
-      </div>
-      </cd-alert-panel>
-      <div *ngFor="let realminfo of realms">
-        <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="realmName"
-                 i18n>Realm Name
-          </label>
-          <div class="cd-col-form-input">
-            <input id="realmName"
-                   name="realmName"
-                   type="text"
-                   value="{{ realminfo.realm }}"
-                   readonly>
-          </div>
+  <ng-container *cdFormLoading="loading">
+    <form
+      name="exportTokenForm"
+      [formGroup]="exportTokenForm"
+      novalidate
+    >
+      <div cdsModalContent>
+        <div class="form-item">
+          @if (!tokenValid) {
+          <cd-alert-panel
+            type="warning"
+            i18n
+          >
+            @for (realminfo of realms; track realminfo) {
+            <div>
+              <b>{{ realminfo.realm }}</b> - {{ realminfo.token }}
+            </div>
+            }
+          </cd-alert-panel>
+          }
         </div>
-        <div class="form-group row">
-          <label class="cd-col-form-label"
-                 for="token"
-                 i18n>Token
-          </label>
-          <div class="cd-col-form-input">
-            <input id="realmToken"
-                   name="realmToken"
-                   type="text"
-                   value="{{ realminfo.token }}"
-                   class="me-2 mb-4"
-                   readonly>
+
+        @for (realminfo of realms; track realminfo) {
+        <div>
+          <div class="form-item">
+            <cds-text-label
+              labelInputID="realmName"
+              i18n
+            >
+              Realm Name
+              <input
+                cdsText
+                readonly
+                type="text"
+                id="realmName"
+                [value]="realminfo.realm"
+                modal-primary-focus
+                [autofocus]="true"
+              />
+            </cds-text-label>
+          </div>
+
+          <div class="form-item form-item-append">
+            <cds-text-label
+              labelInputID="realmToken"
+              i18n
+            >
+              Token
+              <input
+                cdsText
+                readonly
+                type="text"
+                id="realmToken"
+                [value]="realminfo.token"
+              />
+            </cds-text-label>
             <cd-copy-2-clipboard-button
-                      source="{{ realminfo.token }}"
-                      [byId]="false">
+              class="clipboard"
+              [source]="realminfo.token"
+              [byId]="false"
+              size="md"
+            >
             </cd-copy-2-clipboard-button>
           </div>
-          <hr *ngIf="realms.length > 1">
         </div>
+        }
       </div>
-    </div>
-    <div class="modal-footer">
-      <cd-back-button class="m-2 float-end"
-                      aria-label="Close"
-                      (backAction)="activeModal.close()"></cd-back-button>
-    </div>
+      <cd-form-button-panel
+        [modalForm]="true"
+        [showSubmit]="false"
+        (backActionEvent)="closeModal()"
+      >
+      </cd-form-button-panel>
     </form>
   </ng-container>
-</cd-modal>
+</cds-modal>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-export/rgw-multisite-export.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-export/rgw-multisite-export.component.scss
index e69de29bb2d..f8e869be15d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-export/rgw-multisite-export.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-export/rgw-multisite-export.component.scss
@@ -0,0 +1,5 @@
+@use '@carbon/layout';
+
+.clipboard {
+  margin-top: layout.$spacing-06;
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-export/rgw-multisite-export.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-export/rgw-multisite-export.component.ts
index 0b1b2428729..d38f1c485aa 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-export/rgw-multisite-export.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-export/rgw-multisite-export.component.ts
@@ -4,21 +4,19 @@ import { RgwRealmService } from '~/app/shared/api/rgw-realm.service';
 import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 import { NotificationService } from '~/app/shared/services/notification.service';
-import { RgwRealm } from '../models/rgw-multisite';
+import { RgwRealmToken } from '../models/rgw-multisite';
 import { Icons } from '~/app/shared/enum/icons.enum';
+import { CdForm } from '~/app/shared/forms/cd-form';
 
 @Component({
   selector: 'cd-rgw-multisite-export',
   templateUrl: './rgw-multisite-export.component.html',
   styleUrls: ['./rgw-multisite-export.component.scss']
 })
-export class RgwMultisiteExportComponent implements OnInit, AfterViewChecked {
+export class RgwMultisiteExportComponent extends CdForm implements OnInit, AfterViewChecked {
   exportTokenForm: CdFormGroup;
-  realms: any;
-  realmList: RgwRealm[];
-  multisiteInfo: any;
+  realms: RgwRealmToken[];
   tokenValid = false;
-  loading = true;
   icons = Icons;
 
   constructor(
@@ -28,6 +26,7 @@ export class RgwMultisiteExportComponent implements OnInit, AfterViewChecked {
     public notificationService: NotificationService,
     private readonly changeDetectorRef: ChangeDetectorRef
   ) {
+    super();
     this.createForm();
   }
 
@@ -36,17 +35,17 @@ export class RgwMultisiteExportComponent implements OnInit, AfterViewChecked {
   }
 
   onSubmit() {
-    this.activeModal.close();
+    this.closeModal();
   }
 
   ngOnInit(): void {
-    this.rgwRealmService.getRealmTokens().subscribe((data: object[]) => {
-      this.loading = false;
+    this.rgwRealmService.getRealmTokens().subscribe((data: RgwRealmToken[]) => {
+      this.loadingReady();
       this.realms = data;
       var base64Matcher = new RegExp(
         '^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{4})$'
       );
-      this.realms.forEach((realmInfo: any) => {
+      this.realms.forEach((realmInfo: RgwRealmToken) => {
         if (base64Matcher.test(realmInfo.token)) {
           this.tokenValid = true;
         } else {
-- 
2.47.3