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

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

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 4d3ab1442b684699539cd74381b1d65cfc3a9fd6..8e8813b144c728026b848e19fc1f9dc292fdf671 100644 (file)
--- 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
@@ -72,3 +72,8 @@ export interface Zone {
   added: string[];
   removed: string[];
 }
+
+export interface RgwRealmToken {
+  realm: string;
+  token: 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 13aed824cd21894b3cbf3e7d02786003f7a5cb9d..bb86c47841547934e429bd967cd4cd6d9496a5b4 100644 (file)
--- 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 4f2d9cae379d549428c0556d2e80d92b7c9a3547..2bad5d8ed1c754af8ce3c47631782f4c152a9859 100644 (file)
--- 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,69 +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>
-    <svg [cdsIcon]="icons.down"
-         [size]="icons.size24"
-         class="cds-info-color"></svg>
-  </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 e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..f8e869be15dd98ee41eff3bdc5d016a2e39d5dd3 100644 (file)
--- 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 0b1b24287299d8d815e243a15f2985f4270a7848..d38f1c485aaee487e7c339f5d6d7fb974ac6d939 100644 (file)
--- 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 {