mgr/dashboard: mgr/dashboard: Carbonize Realm Name and Token block in Multi-site...

Fixes: https://tracker.ceph.com/issues/76085
Signed-off-by: Sagar Gopale <sagar.gopale@ibm.com>
(cherry picked from commit 5155b2125db002c21be1b014ccd6389b7c7b386e)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.html
index 80969213c367afdbb048d6b4836d6b327da01e84..f7b2cfb3789ccb8232db5b9e38a5f0de2b666ddf 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-multisite-wizard/rgw-multisite-wizard.component.html
@@ -73,10 +73,10 @@
                   <select class="form-select"
                           id="selectedRealm"
                           formControlName="selectedRealm">
-                  <option *ngFor="let realm of realmList"
-                          [value]="realm">
+                    <option *ngFor="let realm of realmList"
+                            [value]="realm">
                         {{ realm }}
-                  </option>
+                    </option>
                   </select>
                 </div>
               </div>
@@ -360,43 +360,54 @@
 </ng-template>
 
 <ng-template #exportTokenTemplate>
-  <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>
-        <cd-help-text>
-          <span i18n>Name of the realm that will be involved in replication.</span>
-        </cd-help-text>
-      </div>
-    </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>
-        <cd-copy-2-clipboard-button [source]="realminfo.token"
-                                    [byId]="false">
-        </cd-copy-2-clipboard-button>
-        <cd-help-text>
-          <span i18n>This field displays the token needed to import the multisite configuration into a secondary cluster. Copy this token securely and use it on the secondary cluster to replicate the current multisite setup. Ensure that the token is handled securely to prevent unauthorized access.</span>
-        </cd-help-text>
-      </div>
-    </div>
-    <hr *ngIf="realms.length > 1">
+  @for (realminfo of realms; track realminfo; let i = $index) {
+  <div class="form-item">
+    <cds-text-label
+      [labelInputID]="'wizard-export-realm-' + i"
+      i18n
+      helperText="Name of the realm that will be involved in replication."
+      i18n-helperText
+    >
+      Realm Name
+      <input
+        cdsText
+        readonly
+        type="text"
+        [id]="'wizard-export-realm-' + i"
+        [value]="realminfo.realm"
+      />
+    </cds-text-label>
   </div>
+
+  <div class="form-item form-item-append">
+    <cds-text-label
+      [labelInputID]="'wizard-export-token-' + i"
+      i18n
+      helperText="This field displays the token needed to import the multisite configuration into a secondary cluster. Copy this token securely and use it on the secondary cluster to replicate the current multisite setup. Ensure that the token is handled securely to prevent unauthorized access."
+      i18n-helperText
+    >
+      Token
+      <input
+        cdsText
+        readonly
+        type="text"
+        [id]="'wizard-export-token-' + i"
+        [value]="realminfo.token"
+      />
+    </cds-text-label>
+    <cd-copy-2-clipboard-button
+      class="cds-mt-6"
+      [source]="realminfo.token"
+      [byId]="false"
+      size="md"
+    >
+    </cd-copy-2-clipboard-button>
+  </div>
+
+  @if (i < realms.length - 1) {
+  <hr />
+  }
+  }
 </ng-template>
 
 <ng-template #reviewTemplate>