From: Tiago Melo <tmelo@suse.com>
Date: Tue, 10 Mar 2020 11:33:45 +0000 (-0100)
Subject: mgr/dashboard: Use ModalComponent in all modals
X-Git-Tag: v15.1.1~16^2~1
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=0204865db658af8650bc47315604d8e851104f1c;p=ceph.git

mgr/dashboard: Use ModalComponent in all modals

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

Signed-off-by: Tiago Melo <tmelo@suse.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form.component.html
index d75d6c6ab609..fb0d3650d0d0 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form.component.html
@@ -1,88 +1,85 @@
-<div class="modal-header">
-  <h4 class="modal-title float-left"
-      i18n>Create Namespace</h4>
-  <button type="button"
-          class="close float-right"
-          aria-label="Close"
-          (click)="modalRef.hide()">
-    <span aria-hidden="true">&times;</span>
-  </button>
-</div>
-<form name="namespaceForm"
-      #formDir="ngForm"
-      [formGroup]="namespaceForm"
-      novalidate>
-  <div class="modal-body">
+<cd-modal [modalRef]="modalRef">
+  <ng-container class="modal-title"
+                i18n>Create Namespace</ng-container>
 
-    <!-- Pool -->
-    <div class="form-group row">
-      <label class="cd-col-form-label required"
-             for="pool"
-             i18n>Pool</label>
-      <div class="cd-col-form-input">
-        <input class="form-control"
-               type="text"
-               placeholder="Pool name..."
-               id="pool"
-               name="pool"
-               formControlName="pool"
-               *ngIf="!poolPermission.read">
-        <select id="pool"
-                name="pool"
-                class="form-control custom-select"
-                formControlName="pool"
-                *ngIf="poolPermission.read">
-          <option *ngIf="pools === null"
-                  [ngValue]="null"
-                  i18n>Loading...</option>
-          <option *ngIf="pools !== null && pools.length === 0"
-                  [ngValue]="null"
-                  i18n>-- No rbd pools available --</option>
-          <option *ngIf="pools !== null && pools.length > 0"
-                  [ngValue]="null"
-                  i18n>-- Select a pool --</option>
-          <option *ngFor="let pool of pools"
-                  [value]="pool.pool_name">{{ pool.pool_name }}</option>
-        </select>
-        <span *ngIf="namespaceForm.showError('pool', formDir, 'required')"
-              class="invalid-feedback"
-              i18n>This field is required.</span>
-      </div>
-    </div>
+  <ng-container class="modal-content">
+    <form name="namespaceForm"
+          #formDir="ngForm"
+          [formGroup]="namespaceForm"
+          novalidate>
+      <div class="modal-body">
 
-    <!-- Name -->
-    <div class="form-group row">
-      <label class="cd-col-form-label required"
-             for="namespace"
-             i18n>Name</label>
-      <div class="cd-col-form-input">
-        <input class="form-control"
-               type="text"
-               placeholder="Namespace name..."
-               id="namespace"
-               name="namespace"
-               formControlName="namespace"
-               autofocus>
-        <span class="invalid-feedback"
-              *ngIf="namespaceForm.showError('namespace', formDir, 'required')"
-              i18n>This field is required.</span>
-        <span class="invalid-feedback"
-              *ngIf="namespaceForm.showError('namespace', formDir, 'namespaceExists')"
-              i18n>Namespace already exists.</span>
-      </div>
-    </div>
+        <!-- Pool -->
+        <div class="form-group row">
+          <label class="cd-col-form-label required"
+                 for="pool"
+                 i18n>Pool</label>
+          <div class="cd-col-form-input">
+            <input class="form-control"
+                   type="text"
+                   placeholder="Pool name..."
+                   id="pool"
+                   name="pool"
+                   formControlName="pool"
+                   *ngIf="!poolPermission.read">
+            <select id="pool"
+                    name="pool"
+                    class="form-control custom-select"
+                    formControlName="pool"
+                    *ngIf="poolPermission.read">
+              <option *ngIf="pools === null"
+                      [ngValue]="null"
+                      i18n>Loading...</option>
+              <option *ngIf="pools !== null && pools.length === 0"
+                      [ngValue]="null"
+                      i18n>-- No rbd pools available --</option>
+              <option *ngIf="pools !== null && pools.length > 0"
+                      [ngValue]="null"
+                      i18n>-- Select a pool --</option>
+              <option *ngFor="let pool of pools"
+                      [value]="pool.pool_name">{{ pool.pool_name }}</option>
+            </select>
+            <span *ngIf="namespaceForm.showError('pool', formDir, 'required')"
+                  class="invalid-feedback"
+                  i18n>This field is required.</span>
+          </div>
+        </div>
 
-  </div>
+        <!-- Name -->
+        <div class="form-group row">
+          <label class="cd-col-form-label required"
+                 for="namespace"
+                 i18n>Name</label>
+          <div class="cd-col-form-input">
+            <input class="form-control"
+                   type="text"
+                   placeholder="Namespace name..."
+                   id="namespace"
+                   name="namespace"
+                   formControlName="namespace"
+                   autofocus>
+            <span class="invalid-feedback"
+                  *ngIf="namespaceForm.showError('namespace', formDir, 'required')"
+                  i18n>This field is required.</span>
+            <span class="invalid-feedback"
+                  *ngIf="namespaceForm.showError('namespace', formDir, 'namespaceExists')"
+                  i18n>Namespace already exists.</span>
+          </div>
+        </div>
 
-  <div class="modal-footer">
-    <div class="button-group text-right">
-      <cd-submit-button [form]="namespaceForm"
-                        (submitAction)="submit()"
-                        i18n>Create Namespace</cd-submit-button>
-      <cd-back-button [back]="modalRef.hide"
-                      name="Close"
-                      i18n-name>
-      </cd-back-button>
-    </div>
-  </div>
-</form>
+      </div>
+
+      <div class="modal-footer">
+        <div class="button-group text-right">
+          <cd-submit-button [form]="namespaceForm"
+                            (submitAction)="submit()"
+                            i18n>Create Namespace</cd-submit-button>
+          <cd-back-button [back]="modalRef.hide"
+                          name="Close"
+                          i18n-name>
+          </cd-back-button>
+        </div>
+      </div>
+    </form>
+  </ng-container>
+</cd-modal>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html
index f96eb581bcf2..9a32a3ce887d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html
@@ -1,49 +1,45 @@
-<div class="modal-header">
-  <h4 class="modal-title float-left"
-      i18n="form title|Example: Create rbdSnapshot@@formTitle">{{ action | titlecase }} {{ resource | upperFirst }}</h4>
-  <button type="button"
-          class="close float-right"
-          aria-label="Close"
-          (click)="modalRef.hide()">
-    <span aria-hidden="true">&times;</span>
-  </button>
-</div>
-<form name="snapshotForm"
-      #formDir="ngForm"
-      [formGroup]="snapshotForm"
-      novalidate>
-  <div class="modal-body">
+<cd-modal [modalRef]="modalRef">
+  <ng-container i18n="form title|Example: Create rbdSnapshot@@formTitle"
+                class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}</ng-container>
 
-    <!-- Name -->
-    <div class="form-group row">
-      <label class="cd-col-form-label required"
-             for="snapshotName"
-             i18n>Name</label>
-      <div class="cd-col-form-input">
-        <input class="form-control"
-               type="text"
-               placeholder="Snapshot name..."
-               id="snapshotName"
-               name="snapshotName"
-               formControlName="snapshotName"
-               autofocus>
-        <span class="invalid-feedback"
-              *ngIf="snapshotForm.showError('snapshotName', formDir, 'required')"
-              i18n>This field is required.</span>
+  <ng-container class="modal-content">
+    <form name="snapshotForm"
+          #formDir="ngForm"
+          [formGroup]="snapshotForm"
+          novalidate>
+      <div class="modal-body">
+        <!-- Name -->
+        <div class="form-group row">
+          <label class="cd-col-form-label required"
+                 for="snapshotName"
+                 i18n>Name</label>
+          <div class="cd-col-form-input">
+            <input class="form-control"
+                   type="text"
+                   placeholder="Snapshot name..."
+                   id="snapshotName"
+                   name="snapshotName"
+                   formControlName="snapshotName"
+                   autofocus>
+            <span class="invalid-feedback"
+                  *ngIf="snapshotForm.showError('snapshotName', formDir, 'required')"
+                  i18n>This field is required.</span>
+          </div>
+        </div>
       </div>
-    </div>
 
-  </div>
-
-  <div class="modal-footer">
-    <div class="button-group text-right">
-      <cd-submit-button [form]="snapshotForm"
-                        (submitAction)="submit()"
-                        i18n="form action button|Example: Create rbdSnapshot@@formActionButton">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
-      <cd-back-button [back]="modalRef.hide"
-                      name="Close"
-                      i18n-name>
-      </cd-back-button>
-    </div>
-  </div>
-</form>
+      <div class="modal-footer">
+        <div class="button-group text-right">
+          <cd-submit-button [form]="snapshotForm"
+                            i18n="form action button|Example: Create rbdSnapshot@@formActionButton"
+                            (submitAction)="submit()">{{ action | titlecase }}
+            {{ resource | upperFirst }}</cd-submit-button>
+          <cd-back-button [back]="modalRef.hide"
+                          name="Close"
+                          i18n-name>
+          </cd-back-button>
+        </div>
+      </div>
+    </form>
+  </ng-container>
+</cd-modal>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.html
index e2f7e9ec6b87..e6e4764b73ff 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.html
@@ -1,92 +1,88 @@
-<div class="modal-header">
-  <h4 class="modal-title pull-left"
-      i18n>Matcher</h4>
-  <button type="button"
-          class="close pull-right"
-          aria-label="Close"
-          (click)="bsModalRef.hide()">
-    <span aria-hidden="true">&times;</span>
-  </button>
-</div>
+<cd-modal [modalRef]="bsModalRef">
+  <ng-container class="modal-title"
+                i18n>Matcher</ng-container>
 
-<form class="form"
-      #formDir="ngForm"
-      [formGroup]="form"
-      novalidate>
-  <div class="modal-body">
-    <!-- Name -->
-    <div class="form-group row">
-      <label class="cd-col-form-label required"
-             for="name"
-             i18n>Name</label>
-      <div class="cd-col-form-input">
-        <select class="form-control"
-                id="name"
-                formControlName="name"
-                name="name">
-          <option [ngValue]="null"
-                  i18n>-- Select an attribute to match against --</option>
-          <option *ngFor="let attribute of nameAttributes"
-                  [value]="attribute">
-            {{ attribute }}
-          </option>
-        </select>
-        <span class="help-block"
-              *ngIf="form.showError('name', formDir, 'required')"
-              i18n>This field is required!</span>
-      </div>
-    </div>
+  <ng-container class="modal-content">
+    <form class="form"
+          #formDir="ngForm"
+          [formGroup]="form"
+          novalidate>
+      <div class="modal-body">
+        <!-- Name -->
+        <div class="form-group row">
+          <label class="cd-col-form-label required"
+                 for="name"
+                 i18n>Name</label>
+          <div class="cd-col-form-input">
+            <select class="form-control"
+                    id="name"
+                    formControlName="name"
+                    name="name">
+              <option [ngValue]="null"
+                      i18n>-- Select an attribute to match against --</option>
+              <option *ngFor="let attribute of nameAttributes"
+                      [value]="attribute">
+                {{ attribute }}
+              </option>
+            </select>
+            <span class="help-block"
+                  *ngIf="form.showError('name', formDir, 'required')"
+                  i18n>This field is required!</span>
+          </div>
+        </div>
 
-    <!-- Value -->
-    <div class="form-group row">
-      <label class="cd-col-form-label required"
-             for="value"
-             i18n>Value</label>
-      <div class="cd-col-form-input">
-        <input id="value"
-               class="form-control"
-               type="text"
-               [typeahead]="possibleValues"
-               [typeaheadMinLength]="0"
-               formControlName="value">
-        <span *ngIf="form.showError('value', formDir, 'required')"
-              class="help-block"
-              i18n>This field is required!</span>
-      </div>
-      <div *ngIf="form.getValue('value') && !form.getValue('isRegex') && matcherMatch"
-           class="cd-col-form-offset {{matcherMatch.cssClass}}"
-           id="match-state">
-        <span class="text-muted {{matcherMatch.cssClass}}">
-          {{matcherMatch.status}}
-        </span>
-      </div>
-    </div>
+        <!-- Value -->
+        <div class="form-group row">
+          <label class="cd-col-form-label required"
+                 for="value"
+                 i18n>Value</label>
+          <div class="cd-col-form-input">
+            <input id="value"
+                   class="form-control"
+                   type="text"
+                   [typeahead]="possibleValues"
+                   [typeaheadMinLength]="0"
+                   formControlName="value">
+            <span *ngIf="form.showError('value', formDir, 'required')"
+                  class="help-block"
+                  i18n>This field is required!</span>
+          </div>
+          <div *ngIf="form.getValue('value') && !form.getValue('isRegex') && matcherMatch"
+               class="cd-col-form-offset {{matcherMatch.cssClass}}"
+               id="match-state">
+            <span class="text-muted {{matcherMatch.cssClass}}">
+              {{matcherMatch.status}}
+            </span>
+          </div>
+        </div>
 
-    <!-- isRegex -->
-    <div class="form-group row">
-      <div class="cd-col-form-offset">
-        <div class="custom-control custom-checkbox">
-          <input type="checkbox"
-                 class="custom-control-input"
-                 formControlName="isRegex"
-                 name="is-regex"
-                 id="is-regex">
-          <label for="is-regex"
-                 class="custom-control-label"
-                 i18n>Use regular expression</label>
+        <!-- isRegex -->
+        <div class="form-group row">
+          <div class="cd-col-form-offset">
+            <div class="custom-control custom-checkbox">
+              <input type="checkbox"
+                     class="custom-control-input"
+                     formControlName="isRegex"
+                     name="is-regex"
+                     id="is-regex">
+              <label for="is-regex"
+                     class="custom-control-label"
+                     i18n>Use regular expression</label>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
 
-  <div class="modal-footer">
-    <cd-submit-button (submitAction)="onSubmit()"
-                      [form]="form">
-      <ng-container i18n>{editMode, select, 1 {Update} other {Add}}</ng-container>
-    </cd-submit-button>
-    <cd-back-button [back]="bsModalRef.hide"
-                    name="Close"
-                    i18n-name>
-    </cd-back-button>
-  </div>
-</form>
+      <div class="modal-footer">
+        <cd-submit-button (submitAction)="onSubmit()"
+                          [form]="form">
+          <ng-container i18n>{editMode, select, 1 {Update} other {Add}}</ng-container>
+        </cd-submit-button>
+        <cd-back-button [back]="bsModalRef.hide"
+                        name="Close"
+                        i18n-name>
+        </cd-back-button>
+      </div>
+    </form>
+  </ng-container>
+</cd-modal>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.html
index 52a83907baac..985f6a3fa551 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.html
@@ -1,318 +1,313 @@
-<div class="modal-header">
-  <h4 i18n="form title|Example: Create Pool@@formTitle"
-      class="modal-title float-left">{{ action | titlecase }} {{ resource | upperFirst }}</h4>
+<cd-modal [modalRef]="bsModalRef">
+  <ng-container i18n="form title|Example: Create Pool@@formTitle"
+                class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}</ng-container>
 
-  <button type="button"
-          class="close float-right"
-          aria-label="Close"
-          (click)="bsModalRef.hide()">
-    <span aria-hidden="true">&times;</span>
-  </button>
-</div>
+  <ng-container class="modal-content">
+    <form #frm="ngForm"
+          [formGroup]="form"
+          novalidate>
+      <div class="modal-body">
+        <div class="form-group row">
+          <label class="cd-col-form-label"
+                 for="name"
+                 i18n>Name</label>
+          <div class="cd-col-form-input">
+            <input type="text"
+                   id="name"
+                   name="name"
+                   class="form-control"
+                   placeholder="Name..."
+                   formControlName="name"
+                   autofocus>
+            <span class="invalid-feedback"
+                  *ngIf="form.showError('name', frm, 'required')"
+                  i18n>This field is required!</span>
+            <span class="invalid-feedback"
+                  *ngIf="form.showError('name', frm, 'pattern')"
+                  i18n>The name can only consist of alphanumeric characters, dashes and underscores.</span>
+            <span class="invalid-feedback"
+                  *ngIf="form.showError('name', frm, 'uniqueName')"
+                  i18n>The chosen erasure code profile name is already in use.</span>
+          </div>
+        </div>
 
-<form #frm="ngForm"
-      [formGroup]="form"
-      novalidate>
-  <div class="modal-body">
-    <div class="form-group row">
-      <label class="cd-col-form-label"
-             for="name"
-             i18n>Name</label>
-      <div class="cd-col-form-input">
-        <input type="text"
-               id="name"
-               name="name"
-               class="form-control"
-               placeholder="Name..."
-               formControlName="name"
-               autofocus>
-        <span class="invalid-feedback"
-              *ngIf="form.showError('name', frm, 'required')"
-              i18n>This field is required!</span>
-        <span class="invalid-feedback"
-              *ngIf="form.showError('name', frm, 'pattern')"
-              i18n>The name can only consist of alphanumeric characters, dashes and underscores.</span>
-        <span class="invalid-feedback"
-              *ngIf="form.showError('name', frm, 'uniqueName')"
-              i18n>The chosen erasure code profile name is already in use.</span>
-      </div>
-    </div>
+        <div class="form-group row">
+          <label for="plugin"
+                 class="cd-col-form-label">
+            <span class="required"
+                  i18n>Plugin</span>
+            <cd-helper [html]="tooltips.plugins[plugin].description">
+            </cd-helper>
+          </label>
+          <div class="cd-col-form-input">
+            <select class="form-control custom-select"
+                    id="plugin"
+                    name="plugin"
+                    formControlName="plugin">
+              <option *ngIf="!plugins"
+                      ngValue=""
+                      i18n>Loading...</option>
+              <option *ngFor="let plugin of plugins"
+                      [ngValue]="plugin">
+                {{ plugin }}
+              </option>
+            </select>
+            <span class="invalid-feedback"
+                  *ngIf="form.showError('name', frm, 'required')"
+                  i18n>This field is required!</span>
+          </div>
+        </div>
 
-    <div class="form-group row">
-      <label for="plugin"
-             class="cd-col-form-label">
-        <span class="required"
-              i18n>Plugin</span>
-        <cd-helper [html]="tooltips.plugins[plugin].description">
-        </cd-helper>
-      </label>
-      <div class="cd-col-form-input">
-        <select class="form-control custom-select"
-                id="plugin"
-                name="plugin"
-                formControlName="plugin">
-          <option *ngIf="!plugins"
-                  ngValue=""
-                  i18n>Loading...</option>
-          <option *ngFor="let plugin of plugins"
-                  [ngValue]="plugin">
-            {{ plugin }}
-          </option>
-        </select>
-        <span class="invalid-feedback"
-              *ngIf="form.showError('name', frm, 'required')"
-              i18n>This field is required!</span>
-      </div>
-    </div>
+        <div class="form-group row">
+          <label for="k"
+                 class="cd-col-form-label">
+            <span [ngClass]="{'required': requiredControls.includes('k')}"
+                  i18n>Data chunks (k)</span>
+            <cd-helper [html]="tooltips.k">
+            </cd-helper>
+          </label>
+          <div class="cd-col-form-input">
+            <input type="number"
+                   id="k"
+                   name="k"
+                   class="form-control"
+                   ng-model="$ctrl.erasureCodeProfile.k"
+                   placeholder="Data chunks..."
+                   formControlName="k">
+            <span class="invalid-feedback"
+                  *ngIf="form.showError('k', frm, 'required')"
+                  i18n>This field is required!</span>
+            <span class="invalid-feedback"
+                  *ngIf="form.showError('k', frm, 'min')"
+                  i18n>Must be equal to or greater than 2.</span>
+          </div>
+        </div>
 
-    <div class="form-group row">
-      <label for="k"
-             class="cd-col-form-label">
-        <span [ngClass]="{'required': requiredControls.includes('k')}"
-              i18n>Data chunks (k)</span>
-        <cd-helper [html]="tooltips.k">
-        </cd-helper>
-      </label>
-      <div class="cd-col-form-input">
-        <input type="number"
-               id="k"
-               name="k"
-               class="form-control"
-               ng-model="$ctrl.erasureCodeProfile.k"
-               placeholder="Data chunks..."
-               formControlName="k">
-        <span class="invalid-feedback"
-              *ngIf="form.showError('k', frm, 'required')"
-              i18n>This field is required!</span>
-        <span class="invalid-feedback"
-              *ngIf="form.showError('k', frm, 'min')"
-              i18n>Must be equal to or greater than 2.</span>
-      </div>
-    </div>
+        <div class="form-group row">
+          <label for="m"
+                 class="cd-col-form-label">
+            <span [ngClass]="{'required': requiredControls.includes('m')}"
+                  i18n>Coding chunks (m)</span>
+            <cd-helper [html]="tooltips.m">
+            </cd-helper>
+          </label>
+          <div class="cd-col-form-input">
+            <input type="number"
+                   id="m"
+                   name="m"
+                   class="form-control"
+                   placeholder="Coding chunks..."
+                   formControlName="m">
+            <span class="invalid-feedback"
+                  *ngIf="form.showError('m', frm, 'required')"
+                  i18n>This field is required!</span>
+            <span class="invalid-feedback"
+                  *ngIf="form.showError('m', frm, 'min')"
+                  i18n>Must be equal to or greater than 1.</span>
+          </div>
+        </div>
 
-    <div class="form-group row">
-      <label for="m"
-             class="cd-col-form-label">
-        <span [ngClass]="{'required': requiredControls.includes('m')}"
-              i18n>Coding chunks (m)</span>
-        <cd-helper [html]="tooltips.m">
-        </cd-helper>
-      </label>
-      <div class="cd-col-form-input">
-        <input type="number"
-               id="m"
-               name="m"
-               class="form-control"
-               placeholder="Coding chunks..."
-               formControlName="m">
-        <span class="invalid-feedback"
-              *ngIf="form.showError('m', frm, 'required')"
-              i18n>This field is required!</span>
-        <span class="invalid-feedback"
-              *ngIf="form.showError('m', frm, 'min')"
-              i18n>Must be equal to or greater than 1.</span>
-      </div>
-    </div>
+        <div class="form-group row"
+             *ngIf="plugin === 'shec'">
+          <label for="c"
+                 class="cd-col-form-label">
+            <ng-container i18n>Durability estimator (c)</ng-container>
+            <cd-helper [html]="tooltips.plugins.shec.c">
+            </cd-helper>
+          </label>
+          <div class="cd-col-form-input">
+            <input type="number"
+                   id="c"
+                   name="c"
+                   class="form-control"
+                   placeholder="Coding chunks..."
+                   formControlName="c">
+            <span class="invalid-feedback"
+                  *ngIf="form.showError('c', frm, 'min')"
+                  i18n>Must be equal to or greater than 1.</span>
+          </div>
+        </div>
 
-    <div class="form-group row"
-         *ngIf="plugin === 'shec'">
-      <label for="c"
-             class="cd-col-form-label">
-        <ng-container i18n>Durability estimator (c)</ng-container>
-        <cd-helper [html]="tooltips.plugins.shec.c">
-        </cd-helper>
-      </label>
-      <div class="cd-col-form-input">
-        <input type="number"
-               id="c"
-               name="c"
-               class="form-control"
-               placeholder="Coding chunks..."
-               formControlName="c">
-        <span class="invalid-feedback"
-              *ngIf="form.showError('c', frm, 'min')"
-              i18n>Must be equal to or greater than 1.</span>
-      </div>
-    </div>
+        <div class="form-group row"
+             *ngIf="plugin === PLUGIN.LRC">
+          <label class="cd-col-form-label"
+                 for="l">
+            <span class="required"
+                  i18n>Locality (l)</span>
+            <cd-helper [html]="tooltips.plugins.lrc.l">
+            </cd-helper>
+          </label>
+          <div class="cd-col-form-input">
+            <input type="number"
+                   id="l"
+                   name="l"
+                   class="form-control"
+                   placeholder="Coding chunks..."
+                   formControlName="l">
+            <span class="invalid-feedback"
+                  *ngIf="form.showError('l', frm, 'required')"
+                  i18n>This field is required!</span>
+            <span class="invalid-feedback"
+                  *ngIf="form.showError('l', frm, 'min')"
+                  i18n>Must be equal to or greater than 1.</span>
+          </div>
+        </div>
 
-    <div class="form-group row"
-         *ngIf="plugin === PLUGIN.LRC">
-      <label class="cd-col-form-label"
-             for="l">
-        <span class="required"
-              i18n>Locality (l)</span>
-        <cd-helper [html]="tooltips.plugins.lrc.l">
-        </cd-helper>
-      </label>
-      <div class="cd-col-form-input">
-        <input type="number"
-               id="l"
-               name="l"
-               class="form-control"
-               placeholder="Coding chunks..."
-               formControlName="l">
-        <span class="invalid-feedback"
-              *ngIf="form.showError('l', frm, 'required')"
-              i18n>This field is required!</span>
-        <span class="invalid-feedback"
-              *ngIf="form.showError('l', frm, 'min')"
-              i18n>Must be equal to or greater than 1.</span>
-      </div>
-    </div>
+        <div class="form-group row">
+          <label for="crushFailureDomain"
+                 class="cd-col-form-label">
+            <ng-container i18n>Crush failure domain</ng-container>
+            <cd-helper [html]="tooltips.crushFailureDomain">
+            </cd-helper>
+          </label>
+          <div class="cd-col-form-input">
+            <select class="form-control custom-select"
+                    id="crushFailureDomain"
+                    name="crushFailureDomain"
+                    formControlName="crushFailureDomain">
+              <option *ngIf="!failureDomains"
+                      ngValue=""
+                      i18n>Loading...</option>
+              <option *ngFor="let domain of failureDomains"
+                      [ngValue]="domain">
+                {{ domain }}
+              </option>
+            </select>
+          </div>
+        </div>
 
-    <div class="form-group row">
-      <label for="crushFailureDomain"
-             class="cd-col-form-label">
-        <ng-container i18n>Crush failure domain</ng-container>
-        <cd-helper [html]="tooltips.crushFailureDomain">
-        </cd-helper>
-      </label>
-      <div class="cd-col-form-input">
-        <select class="form-control custom-select"
-                id="crushFailureDomain"
-                name="crushFailureDomain"
-                formControlName="crushFailureDomain">
-          <option *ngIf="!failureDomains"
-                  ngValue=""
-                  i18n>Loading...</option>
-          <option *ngFor="let domain of failureDomains"
-                  [ngValue]="domain">
-            {{ domain }}
-          </option>
-        </select>
-      </div>
-    </div>
+        <div class="form-group row"
+             *ngIf="plugin === PLUGIN.LRC">
+          <label for="crushLocality"
+                 class="cd-col-form-label">
+            <ng-container i18n>Crush Locality</ng-container>
+            <cd-helper [html]="tooltips.plugins.lrc.crushLocality">
+            </cd-helper>
+          </label>
+          <div class="cd-col-form-input">
+            <select class="form-control custom-select"
+                    id="crushLocality"
+                    name="crushLocality"
+                    formControlName="crushLocality">
+              <option *ngIf="!failureDomains"
+                      ngValue=""
+                      i18n>Loading...</option>
+              <option *ngIf="failureDomains && failureDomains.length > 0"
+                      ngValue=""
+                      i18n>None</option>
+              <option *ngFor="let domain of failureDomains"
+                      [ngValue]="domain">
+                {{ domain }}
+              </option>
+            </select>
+          </div>
+        </div>
 
-    <div class="form-group row"
-         *ngIf="plugin === PLUGIN.LRC">
-      <label for="crushLocality"
-             class="cd-col-form-label">
-        <ng-container i18n>Crush Locality</ng-container>
-        <cd-helper [html]="tooltips.plugins.lrc.crushLocality">
-        </cd-helper>
-      </label>
-      <div class="cd-col-form-input">
-        <select class="form-control custom-select"
-                id="crushLocality"
-                name="crushLocality"
-                formControlName="crushLocality">
-          <option *ngIf="!failureDomains"
-                  ngValue=""
-                  i18n>Loading...</option>
-          <option *ngIf="failureDomains && failureDomains.length > 0"
-                  ngValue=""
-                  i18n>None</option>
-          <option *ngFor="let domain of failureDomains"
-                  [ngValue]="domain">
-            {{ domain }}
-          </option>
-        </select>
-      </div>
-    </div>
+        <div class="form-group row"
+             *ngIf="[PLUGIN.JERASURE, PLUGIN.ISA].includes(plugin)">
+          <label for="technique"
+                 class="cd-col-form-label">
+            <ng-container i18n>Technique</ng-container>
+            <cd-helper [html]="tooltips.plugins[plugin].technique">
+            </cd-helper>
+          </label>
+          <div class="cd-col-form-input">
+            <select class="form-control custom-select"
+                    id="technique"
+                    name="technique"
+                    formControlName="technique">
+              <option *ngFor="let technique of techniques"
+                      [ngValue]="technique">
+                {{ technique }}
+              </option>
+            </select>
+          </div>
+        </div>
 
-    <div class="form-group row"
-         *ngIf="[PLUGIN.JERASURE, PLUGIN.ISA].includes(plugin)">
-      <label for="technique"
-             class="cd-col-form-label">
-        <ng-container i18n>Technique</ng-container>
-        <cd-helper [html]="tooltips.plugins[plugin].technique">
-        </cd-helper>
-      </label>
-      <div class="cd-col-form-input">
-        <select class="form-control custom-select"
-                id="technique"
-                name="technique"
-                formControlName="technique">
-          <option *ngFor="let technique of techniques"
-                  [ngValue]="technique">
-            {{ technique }}
-          </option>
-        </select>
-      </div>
-    </div>
+        <div class="form-group row"
+             *ngIf="plugin === PLUGIN.JERASURE">
+          <label for="packetSize"
+                 class="cd-col-form-label">
+            <ng-container i18n>Packetsize</ng-container>
+            <cd-helper [html]="tooltips.plugins.jerasure.packetSize">
+            </cd-helper>
+          </label>
+          <div class="cd-col-form-input">
+            <input type="number"
+                   id="packetSize"
+                   name="packetSize"
+                   class="form-control"
+                   placeholder="Packetsize..."
+                   formControlName="packetSize">
+            <span class="invalid-feedback"
+                  *ngIf="form.showError('packetSize', frm, 'min')"
+                  i18n>Must be equal to or greater than 1.</span>
+          </div>
+        </div>
 
-    <div class="form-group row"
-         *ngIf="plugin === PLUGIN.JERASURE">
-      <label for="packetSize"
-             class="cd-col-form-label">
-        <ng-container i18n>Packetsize</ng-container>
-        <cd-helper [html]="tooltips.plugins.jerasure.packetSize">
-        </cd-helper>
-      </label>
-      <div class="cd-col-form-input">
-        <input type="number"
-               id="packetSize"
-               name="packetSize"
-               class="form-control"
-               placeholder="Packetsize..."
-               formControlName="packetSize">
-        <span class="invalid-feedback"
-              *ngIf="form.showError('packetSize', frm, 'min')"
-              i18n>Must be equal to or greater than 1.</span>
-      </div>
-    </div>
+        <div class="form-group row">
+          <label for="crushRoot"
+                 class="cd-col-form-label">
+            <ng-container i18n>Crush root</ng-container>
+            <cd-helper [html]="tooltips.crushRoot">
+            </cd-helper>
+          </label>
+          <div class="cd-col-form-input">
+            <input type="text"
+                   id="crushRoot"
+                   name="crushRoot"
+                   class="form-control"
+                   placeholder="root..."
+                   formControlName="crushRoot">
+          </div>
+        </div>
 
-    <div class="form-group row">
-      <label for="crushRoot"
-             class="cd-col-form-label">
-        <ng-container i18n>Crush root</ng-container>
-        <cd-helper [html]="tooltips.crushRoot">
-        </cd-helper>
-      </label>
-      <div class="cd-col-form-input">
-        <input type="text"
-               id="crushRoot"
-               name="crushRoot"
-               class="form-control"
-               placeholder="root..."
-               formControlName="crushRoot">
-      </div>
-    </div>
+        <div class="form-group row">
+          <label for="crushDeviceClass"
+                 class="cd-col-form-label">
+            <ng-container i18n>Crush device class</ng-container>
+            <cd-helper [html]="tooltips.crushDeviceClass">
+            </cd-helper>
+          </label>
+          <div class="cd-col-form-input">
+            <select class="form-control custom-select"
+                    id="crushDeviceClass"
+                    name="crushDeviceClass"
+                    formControlName="crushDeviceClass">
+              <option ngValue=""
+                      i18n>any</option>
+              <option *ngFor="let deviceClass of devices"
+                      [ngValue]="deviceClass">
+                {{ deviceClass }}
+              </option>
+            </select>
+          </div>
+        </div>
 
-    <div class="form-group row">
-      <label for="crushDeviceClass"
-             class="cd-col-form-label">
-        <ng-container i18n>Crush device class</ng-container>
-        <cd-helper [html]="tooltips.crushDeviceClass">
-        </cd-helper>
-      </label>
-      <div class="cd-col-form-input">
-        <select class="form-control custom-select"
-                id="crushDeviceClass"
-                name="crushDeviceClass"
-                formControlName="crushDeviceClass">
-          <option ngValue=""
-                  i18n>any</option>
-          <option *ngFor="let deviceClass of devices"
-                  [ngValue]="deviceClass">
-            {{ deviceClass }}
-          </option>
-        </select>
+        <div class="form-group row">
+          <label for="directory"
+                 class="cd-col-form-label">
+            <ng-container i18n>Directory</ng-container>
+            <cd-helper [html]="tooltips.directory">
+            </cd-helper>
+          </label>
+          <div class="cd-col-form-input">
+            <input type="text"
+                   id="directory"
+                   name="directory"
+                   class="form-control"
+                   placeholder="Path..."
+                   formControlName="directory">
+          </div>
+        </div>
       </div>
-    </div>
 
-    <div class="form-group row">
-      <label for="directory"
-             class="cd-col-form-label">
-        <ng-container i18n>Directory</ng-container>
-        <cd-helper [html]="tooltips.directory">
-        </cd-helper>
-      </label>
-      <div class="cd-col-form-input">
-        <input type="text"
-               id="directory"
-               name="directory"
-               class="form-control"
-               placeholder="Path..."
-               formControlName="directory">
+      <div class="modal-footer">
+        <cd-submit-button (submitAction)="onSubmit()"
+                          i18n="form action button|Example: Create Pool@@formActionButton"
+                          [form]="frm">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
+        <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
       </div>
-    </div>
-  </div>
-
-  <div class="modal-footer">
-    <cd-submit-button (submitAction)="onSubmit()"
-                      i18n="form action button|Example: Create Pool@@formActionButton"
-                      [form]="frm">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
-    <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
-  </div>
-</form>
+    </form>
+  </ng-container>
+</cd-modal>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-capability-modal/rgw-user-capability-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-capability-modal/rgw-user-capability-modal.component.html
index 4d1cb115e3da..de9165c309a2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-capability-modal/rgw-user-capability-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-capability-modal/rgw-user-capability-modal.component.html
@@ -1,76 +1,71 @@
-<div class="modal-header">
-  <h4 i18n="form title|Example: Create Pool@@formTitle"
-      class="modal-title float-left">{{ action | titlecase }} {{ resource | upperFirst }}</h4>
+<cd-modal [modalRef]="bsModalRef">
+  <ng-container i18n="form title|Example: Create Pool@@formTitle"
+                class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}</ng-container>
 
-  <button type="button"
-          class="close float-right"
-          aria-label="Close"
-          (click)="bsModalRef.hide()">
-    <span aria-hidden="true">&times;</span>
-  </button>
-</div>
-<form #frm="ngForm"
-      [formGroup]="formGroup"
-      novalidate>
-  <div class="modal-body">
+  <ng-container class="modal-content">
+    <form #frm="ngForm"
+          [formGroup]="formGroup"
+          novalidate>
+      <div class="modal-body">
+        <!-- Type -->
+        <div class="form-group row">
+          <label class="cd-col-form-label"
+                 [ngClass]="{'required': !editing}"
+                 for="type"
+                 i18n>Type</label>
+          <div class="cd-col-form-input">
+            <input id="type"
+                   class="form-control"
+                   type="text"
+                   *ngIf="editing"
+                   [readonly]="true"
+                   formControlName="type">
+            <select id="type"
+                    class="form-control custom-select"
+                    formControlName="type"
+                    *ngIf="!editing"
+                    autofocus>
+              <option i18n
+                      *ngIf="types !== null"
+                      [ngValue]="null">-- Select a type --</option>
+              <option *ngFor="let type of types"
+                      [value]="type">{{ type }}</option>
+            </select>
+            <span class="invalid-feedback"
+                  *ngIf="formGroup.showError('type', frm, 'required')"
+                  i18n>This field is required.</span>
+          </div>
+        </div>
 
-    <!-- Type -->
-    <div class="form-group row">
-      <label class="cd-col-form-label"
-             [ngClass]="{'required': !editing}"
-             for="type"
-             i18n>Type</label>
-      <div class="cd-col-form-input">
-        <input id="type"
-               class="form-control"
-               type="text"
-               *ngIf="editing"
-               [readonly]="true"
-               formControlName="type">
-        <select id="type"
-                class="form-control custom-select"
-                formControlName="type"
-                *ngIf="!editing"
-                autofocus>
-          <option i18n
-                  *ngIf="types !== null"
-                  [ngValue]="null">-- Select a type --</option>
-          <option *ngFor="let type of types"
-                  [value]="type">{{ type }}</option>
-        </select>
-        <span class="invalid-feedback"
-              *ngIf="formGroup.showError('type', frm, 'required')"
-              i18n>This field is required.</span>
+        <!-- Permission -->
+        <div class="form-group row">
+          <label class="cd-col-form-label required"
+                 for="perm"
+                 i18n>Permission</label>
+          <div class="cd-col-form-input">
+            <select id="perm"
+                    class="form-control custom-select"
+                    formControlName="perm">
+              <option i18n
+                      [ngValue]="null">-- Select a permission --</option>
+              <option *ngFor="let perm of ['read', 'write', '*']"
+                      [value]="perm">
+                {{ perm }}
+              </option>
+            </select>
+            <span class="invalid-feedback"
+                  *ngIf="formGroup.showError('perm', frm, 'required')"
+                  i18n>This field is required.</span>
+          </div>
+        </div>
       </div>
-    </div>
 
-    <!-- Permission -->
-    <div class="form-group row">
-      <label class="cd-col-form-label required"
-             for="perm"
-             i18n>Permission</label>
-      <div class="cd-col-form-input">
-        <select id="perm"
-                class="form-control custom-select"
-                formControlName="perm">
-          <option i18n
-                  [ngValue]="null">-- Select a permission --</option>
-          <option *ngFor="let perm of ['read', 'write', '*']"
-                  [value]="perm">
-            {{ perm }}
-          </option>
-        </select>
-        <span class="invalid-feedback"
-              *ngIf="formGroup.showError('perm', frm, 'required')"
-              i18n>This field is required.</span>
+      <div class="modal-footer">
+        <cd-submit-button (submitAction)="onSubmit()"
+                          i18n="form action button|Example: Create Pool@@formActionButton"
+                          [form]="formGroup">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
+        <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
       </div>
-    </div>
-
-  </div>
-  <div class="modal-footer">
-    <cd-submit-button (submitAction)="onSubmit()"
-                      i18n="form action button|Example: Create Pool@@formActionButton"
-                      [form]="formGroup">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
-    <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
-  </div>
-</form>
+    </form>
+  </ng-container>
+</cd-modal>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.html
index 782f7fe6f17d..b82f23070ff0 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.html
@@ -1,133 +1,130 @@
-<div class="modal-header">
-  <h4 i18n="form title|Example: Create Pool@@formTitle"
-      class="modal-title float-left">{{ action | titlecase }} {{ resource | upperFirst }}</h4>
+<cd-modal [modalRef]="bsModalRef">
+  <ng-container i18n="form title|Example: Create Pool@@formTitle"
+                class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}</ng-container>
 
-  <button type="button"
-          class="close float-right"
-          aria-label="Close"
-          (click)="bsModalRef.hide()">
-    <span aria-hidden="true">&times;</span>
-  </button>
-</div>
-<form #frm="ngForm"
-      [formGroup]="formGroup"
-      novalidate>
-  <div class="modal-body">
+  <ng-container class="modal-content">
+    <form #frm="ngForm"
+          [formGroup]="formGroup"
+          novalidate>
+      <div class="modal-body">
 
-    <!-- Username -->
-    <div class="form-group row">
-      <label class="cd-col-form-label"
-             [ngClass]="{'required': !viewing}"
-             for="user"
-             i18n>Username</label>
-      <div class="cd-col-form-input">
-        <input id="user"
-               class="form-control"
-               type="text"
-               *ngIf="viewing"
-               [readonly]="true"
-               formControlName="user">
-        <select id="user"
-                class="form-control custom-select"
-                formControlName="user"
-                *ngIf="!viewing"
-                autofocus>
-          <option i18n
-                  *ngIf="userCandidates !== null"
-                  [ngValue]="null">-- Select a username --</option>
-          <option *ngFor="let userCandidate of userCandidates"
-                  [value]="userCandidate">{{ userCandidate }}</option>
-        </select>
-        <span class="invalid-feedback"
-              *ngIf="formGroup.showError('user', frm, 'required')"
-              i18n>This field is required.</span>
-      </div>
-    </div>
+        <!-- Username -->
+        <div class="form-group row">
+          <label class="cd-col-form-label"
+                 [ngClass]="{'required': !viewing}"
+                 for="user"
+                 i18n>Username</label>
+          <div class="cd-col-form-input">
+            <input id="user"
+                   class="form-control"
+                   type="text"
+                   *ngIf="viewing"
+                   [readonly]="true"
+                   formControlName="user">
+            <select id="user"
+                    class="form-control custom-select"
+                    formControlName="user"
+                    *ngIf="!viewing"
+                    autofocus>
+              <option i18n
+                      *ngIf="userCandidates !== null"
+                      [ngValue]="null">-- Select a username --</option>
+              <option *ngFor="let userCandidate of userCandidates"
+                      [value]="userCandidate">{{ userCandidate }}</option>
+            </select>
+            <span class="invalid-feedback"
+                  *ngIf="formGroup.showError('user', frm, 'required')"
+                  i18n>This field is required.</span>
+          </div>
+        </div>
 
-    <!-- Auto-generate key -->
-    <div class="form-group row"
-         *ngIf="!viewing">
-      <div class="cd-col-form-offset">
-        <div class="custom-control custom-checkbox">
-          <input class="custom-control-input"
-                 id="generate_key"
-                 type="checkbox"
-                 formControlName="generate_key">
-          <label class="custom-control-label"
-                 for="generate_key"
-                 i18n>Auto-generate key</label>
+        <!-- Auto-generate key -->
+        <div class="form-group row"
+             *ngIf="!viewing">
+          <div class="cd-col-form-offset">
+            <div class="custom-control custom-checkbox">
+              <input class="custom-control-input"
+                     id="generate_key"
+                     type="checkbox"
+                     formControlName="generate_key">
+              <label class="custom-control-label"
+                     for="generate_key"
+                     i18n>Auto-generate key</label>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
 
-    <!-- Access key -->
-    <div class="form-group row"
-         *ngIf="!formGroup.getValue('generate_key')">
-      <label class="cd-col-form-label"
-             [ngClass]="{'required': !viewing}"
-             for="access_key"
-             i18n>Access key</label>
-      <div class="cd-col-form-input">
-        <div class="input-group">
-          <input id="access_key"
-                 class="form-control"
-                 type="password"
-                 [readonly]="viewing"
-                 formControlName="access_key">
-          <span class="input-group-append">
-            <button type="button"
-                    class="btn btn-light"
-                    cdPasswordButton="access_key">
-            </button>
-            <button type="button"
-                    class="btn btn-light"
-                    cdCopy2ClipboardButton="access_key">
-            </button>
-          </span>
+        <!-- Access key -->
+        <div class="form-group row"
+             *ngIf="!formGroup.getValue('generate_key')">
+          <label class="cd-col-form-label"
+                 [ngClass]="{'required': !viewing}"
+                 for="access_key"
+                 i18n>Access key</label>
+          <div class="cd-col-form-input">
+            <div class="input-group">
+              <input id="access_key"
+                     class="form-control"
+                     type="password"
+                     [readonly]="viewing"
+                     formControlName="access_key">
+              <span class="input-group-append">
+                <button type="button"
+                        class="btn btn-light"
+                        cdPasswordButton="access_key">
+                </button>
+                <button type="button"
+                        class="btn btn-light"
+                        cdCopy2ClipboardButton="access_key">
+                </button>
+              </span>
+            </div>
+            <span class="invalid-feedback"
+                  *ngIf="formGroup.showError('access_key', frm, 'required')"
+                  i18n>This field is required.</span>
+          </div>
         </div>
-        <span class="invalid-feedback"
-              *ngIf="formGroup.showError('access_key', frm, 'required')"
-              i18n>This field is required.</span>
-      </div>
-    </div>
 
-    <!-- Secret key -->
-    <div class="form-group row"
-         *ngIf="!formGroup.getValue('generate_key')">
-      <label class="cd-col-form-label"
-             [ngClass]="{'required': !viewing}"
-             for="secret_key"
-             i18n>Secret key</label>
-      <div class="cd-col-form-input">
-        <div class="input-group">
-          <input id="secret_key"
-                 class="form-control"
-                 type="password"
-                 [readonly]="viewing"
-                 formControlName="secret_key">
-          <span class="input-group-append">
-            <button type="button"
-                    class="btn btn-light"
-                    cdPasswordButton="secret_key">
-            </button>
-            <button type="button"
-                    class="btn btn-light"
-                    cdCopy2ClipboardButton="secret_key">
-            </button>
-          </span>
+        <!-- Secret key -->
+        <div class="form-group row"
+             *ngIf="!formGroup.getValue('generate_key')">
+          <label class="cd-col-form-label"
+                 [ngClass]="{'required': !viewing}"
+                 for="secret_key"
+                 i18n>Secret key</label>
+          <div class="cd-col-form-input">
+            <div class="input-group">
+              <input id="secret_key"
+                     class="form-control"
+                     type="password"
+                     [readonly]="viewing"
+                     formControlName="secret_key">
+              <span class="input-group-append">
+                <button type="button"
+                        class="btn btn-light"
+                        cdPasswordButton="secret_key">
+                </button>
+                <button type="button"
+                        class="btn btn-light"
+                        cdCopy2ClipboardButton="secret_key">
+                </button>
+              </span>
+            </div>
+            <span class="invalid-feedback"
+                  *ngIf="formGroup.showError('secret_key', frm, 'required')"
+                  i18n>This field is required.</span>
+          </div>
         </div>
-        <span class="invalid-feedback"
-              *ngIf="formGroup.showError('secret_key', frm, 'required')"
-              i18n>This field is required.</span>
+
       </div>
-    </div>
 
-  </div>
-  <div class="modal-footer">
-    <cd-submit-button *ngIf="!viewing"
-                      (submitAction)="onSubmit()"
-                      i18n="form action button|Example: Create Pool@@formActionButton"
-                      [form]="formGroup">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
-    <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
-  </div>
-</form>
+      <div class="modal-footer">
+        <cd-submit-button *ngIf="!viewing"
+                          (submitAction)="onSubmit()"
+                          i18n="form action button|Example: Create Pool@@formActionButton"
+                          [form]="formGroup">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
+        <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
+      </div>
+    </form>
+  </ng-container>
+</cd-modal>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.html
index aa33bffd0870..578324221e07 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.html
@@ -1,135 +1,132 @@
-<div class="modal-header">
-  <h4 i18n="form title|Example: Create Pool@@formTitle"
-      class="modal-title float-left">{{ action | titlecase }} {{ resource | upperFirst }}</h4>
-  <button type="button"
-          class="close float-right"
-          aria-label="Close"
-          (click)="bsModalRef.hide()">
-    <span aria-hidden="true">&times;</span>
-  </button>
-</div>
-<form #frm="ngForm"
-      [formGroup]="formGroup"
-      novalidate>
-  <div class="modal-body">
+<cd-modal [modalRef]="bsModalRef">
+  <ng-container i18n="form title|Example: Create Pool@@formTitle"
+                class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}</ng-container>
 
-    <!-- Username -->
-    <div class="form-group row">
-      <label class="cd-col-form-label"
-             for="uid"
-             i18n>Username</label>
-      <div class="cd-col-form-input">
-        <input id="uid"
-               class="form-control"
-               type="text"
-               formControlName="uid"
-               [readonly]="true">
-      </div>
-    </div>
-
-    <!-- Subuser -->
-    <div class="form-group row">
-      <label class="cd-col-form-label"
-             [ngClass]="{'required': !editing}"
-             for="subuid"
-             i18n>Subuser</label>
-      <div class="cd-col-form-input">
-        <input id="subuid"
-               class="form-control"
-               type="text"
-               formControlName="subuid"
-               [readonly]="editing"
-               autofocus>
-        <span class="invalid-feedback"
-              *ngIf="formGroup.showError('subuid', frm, 'required')"
-              i18n>This field is required.</span>
-        <span class="invalid-feedback"
-              *ngIf="formGroup.showError('subuid', frm, 'subuserIdExists')"
-              i18n>The chosen subuser ID is already in use.</span>
-      </div>
-    </div>
-
-    <!-- Permission -->
-    <div class="form-group row">
-      <label class="cd-col-form-label required"
-             for="perm"
-             i18n>Permission</label>
-      <div class="cd-col-form-input">
-        <select id="perm"
-                class="form-control custom-select"
-                formControlName="perm">
-          <option i18n
-                  [ngValue]="null">-- Select a permission --</option>
-          <option *ngFor="let perm of ['read', 'write']"
-                  [value]="perm">
-            {{ perm }}
-          </option>
-          <option i18n
-                  value="read-write">read, write</option>
-          <option i18n
-                  value="full-control">full</option>
-        </select>
-        <span class="invalid-feedback"
-              *ngIf="formGroup.showError('perm', frm, 'required')"
-              i18n>This field is required.</span>
-      </div>
-    </div>
+  <ng-container class="modal-content">
+    <form #frm="ngForm"
+          [formGroup]="formGroup"
+          novalidate>
+      <div class="modal-body">
 
-    <!-- Swift key -->
-    <fieldset *ngIf="!editing">
-      <legend i18n>Swift key</legend>
-
-      <!-- Auto-generate key -->
-      <div class="form-group row">
-        <div class="cd-col-form-offset">
-          <div class="custom-control custom-checkbox">
-            <input class="custom-control-input"
-                   id="generate_secret"
-                   type="checkbox"
-                   formControlName="generate_secret">
-            <label class="custom-control-label"
-                   for="generate_secret"
-                   i18n>Auto-generate secret</label>
+        <!-- Username -->
+        <div class="form-group row">
+          <label class="cd-col-form-label"
+                 for="uid"
+                 i18n>Username</label>
+          <div class="cd-col-form-input">
+            <input id="uid"
+                   class="form-control"
+                   type="text"
+                   formControlName="uid"
+                   [readonly]="true">
           </div>
         </div>
-      </div>
 
-      <!-- Secret key -->
-      <div class="form-group row"
-           *ngIf="!editing && !formGroup.getValue('generate_secret')">
-        <label class="cd-col-form-label required"
-               for="secret_key"
-               i18n>Secret key</label>
-        <div class="cd-col-form-input">
-          <div class="input-group">
-            <input id="secret_key"
+        <!-- Subuser -->
+        <div class="form-group row">
+          <label class="cd-col-form-label"
+                 [ngClass]="{'required': !editing}"
+                 for="subuid"
+                 i18n>Subuser</label>
+          <div class="cd-col-form-input">
+            <input id="subuid"
                    class="form-control"
-                   type="password"
-                   formControlName="secret_key">
-            <span class="input-group-append">
-              <button type="button"
-                      class="btn btn-light"
-                      cdPasswordButton="secret_key">
-              </button>
-              <button type="button"
-                      class="btn btn-light"
-                      cdCopy2ClipboardButton="secret_key">
-              </button>
-            </span>
+                   type="text"
+                   formControlName="subuid"
+                   [readonly]="editing"
+                   autofocus>
+            <span class="invalid-feedback"
+                  *ngIf="formGroup.showError('subuid', frm, 'required')"
+                  i18n>This field is required.</span>
+            <span class="invalid-feedback"
+                  *ngIf="formGroup.showError('subuid', frm, 'subuserIdExists')"
+                  i18n>The chosen subuser ID is already in use.</span>
           </div>
-          <span class="invalid-feedback"
-                *ngIf="formGroup.showError('secret_key', frm, 'required')"
-                i18n>This field is required.</span>
         </div>
-      </div>
 
-    </fieldset>
+        <!-- Permission -->
+        <div class="form-group row">
+          <label class="cd-col-form-label required"
+                 for="perm"
+                 i18n>Permission</label>
+          <div class="cd-col-form-input">
+            <select id="perm"
+                    class="form-control custom-select"
+                    formControlName="perm">
+              <option i18n
+                      [ngValue]="null">-- Select a permission --</option>
+              <option *ngFor="let perm of ['read', 'write']"
+                      [value]="perm">
+                {{ perm }}
+              </option>
+              <option i18n
+                      value="read-write">read, write</option>
+              <option i18n
+                      value="full-control">full</option>
+            </select>
+            <span class="invalid-feedback"
+                  *ngIf="formGroup.showError('perm', frm, 'required')"
+                  i18n>This field is required.</span>
+          </div>
+        </div>
+
+        <!-- Swift key -->
+        <fieldset *ngIf="!editing">
+          <legend i18n>Swift key</legend>
 
-  </div>
-  <div class="modal-footer">
-    <cd-submit-button (submitAction)="onSubmit()"
-                      i18n="form action button|Example: Create Pool@@formActionButton"
-                      [form]="formGroup">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
-    <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
-  </div>
-</form>
+          <!-- Auto-generate key -->
+          <div class="form-group row">
+            <div class="cd-col-form-offset">
+              <div class="custom-control custom-checkbox">
+                <input class="custom-control-input"
+                       id="generate_secret"
+                       type="checkbox"
+                       formControlName="generate_secret">
+                <label class="custom-control-label"
+                       for="generate_secret"
+                       i18n>Auto-generate secret</label>
+              </div>
+            </div>
+          </div>
+
+          <!-- Secret key -->
+          <div class="form-group row"
+               *ngIf="!editing && !formGroup.getValue('generate_secret')">
+            <label class="cd-col-form-label required"
+                   for="secret_key"
+                   i18n>Secret key</label>
+            <div class="cd-col-form-input">
+              <div class="input-group">
+                <input id="secret_key"
+                       class="form-control"
+                       type="password"
+                       formControlName="secret_key">
+                <span class="input-group-append">
+                  <button type="button"
+                          class="btn btn-light"
+                          cdPasswordButton="secret_key">
+                  </button>
+                  <button type="button"
+                          class="btn btn-light"
+                          cdCopy2ClipboardButton="secret_key">
+                  </button>
+                </span>
+              </div>
+              <span class="invalid-feedback"
+                    *ngIf="formGroup.showError('secret_key', frm, 'required')"
+                    i18n>This field is required.</span>
+            </div>
+          </div>
+
+        </fieldset>
+
+      </div>
+      <div class="modal-footer">
+        <cd-submit-button (submitAction)="onSubmit()"
+                          i18n="form action button|Example: Create Pool@@formActionButton"
+                          [form]="formGroup">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
+        <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
+      </div>
+    </form>
+  </ng-container>
+</cd-modal>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-swift-key-modal/rgw-user-swift-key-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-swift-key-modal/rgw-user-swift-key-modal.component.html
index 52d8e0fed0c3..5e74d7e3547a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-swift-key-modal/rgw-user-swift-key-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-swift-key-modal/rgw-user-swift-key-modal.component.html
@@ -1,61 +1,57 @@
-<div class="modal-header">
-  <h4 i18n="form title|Example: Create Pool@@formTitle"
-      class="modal-title float-left">{{ action | titlecase }} {{ resource | upperFirst }}</h4>
+<cd-modal [modalRef]="bsModalRef">
+  <ng-container i18n="form title|Example: Create Pool@@formTitle"
+                class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}
+  </ng-container>
 
-  <button type="button"
-          class="close float-right"
-          aria-label="Close"
-          (click)="bsModalRef.hide()">
-    <span aria-hidden="true">&times;</span>
-  </button>
-</div>
-<div class="modal-body">
-  <form novalidate>
-
-    <!-- Username -->
-    <div class="form-group row">
-      <label class="cd-col-form-label"
-             for="user"
-             i18n>Username</label>
-      <div class="cd-col-form-inpu">
-        <input id="user"
-               name="user"
-               class="form-control"
-               type="text"
-               [readonly]="true"
-               [(ngModel)]="user">
-      </div>
-    </div>
+  <ng-container class="modal-content">
+    <div class="modal-body">
+      <form novalidate>
+        <!-- Username -->
+        <div class="form-group row">
+          <label class="cd-col-form-label"
+                 for="user"
+                 i18n>Username</label>
+          <div class="cd-col-form-inpu">
+            <input id="user"
+                   name="user"
+                   class="form-control"
+                   type="text"
+                   [readonly]="true"
+                   [(ngModel)]="user">
+          </div>
+        </div>
 
-    <!-- Secret key -->
-    <div class="form-group row">
-      <label class="cd-col-form-label"
-             for="secret_key"
-             i18n>Secret key</label>
-      <div class="cd-col-form-inpu">
-        <div class="input-group">
-          <input id="secret_key"
-                 name="secret_key"
-                 class="form-control"
-                 type="password"
-                 [(ngModel)]="secret_key"
-                 [readonly]="true">
-          <span class="input-group-append">
-            <button type="button"
-                    class="btn btn-light"
-                    cdPasswordButton="secret_key">
-            </button>
-            <button type="button"
-                    class="btn btn-light"
-                    cdCopy2ClipboardButton="secret_key">
-            </button>
-          </span>
+        <!-- Secret key -->
+        <div class="form-group row">
+          <label class="cd-col-form-label"
+                 for="secret_key"
+                 i18n>Secret key</label>
+          <div class="cd-col-form-inpu">
+            <div class="input-group">
+              <input id="secret_key"
+                     name="secret_key"
+                     class="form-control"
+                     type="password"
+                     [(ngModel)]="secret_key"
+                     [readonly]="true">
+              <span class="input-group-append">
+                <button type="button"
+                        class="btn btn-light"
+                        cdPasswordButton="secret_key">
+                </button>
+                <button type="button"
+                        class="btn btn-light"
+                        cdCopy2ClipboardButton="secret_key">
+                </button>
+              </span>
+            </div>
+          </div>
         </div>
-      </div>
+      </form>
     </div>
 
-  </form>
-</div>
-<div class="modal-footer">
-  <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
-</div>
+    <div class="modal-footer">
+      <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
+    </div>
+  </ng-container>
+</cd-modal>
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index 3bca8edf36f0..b5d80130a082 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -345,6 +345,10 @@ cd-modal {
   .cd-col-form-input {
     @extend .col-lg-8;
   }
+
+  .cd-col-form-offset {
+    @extend .offset-lg-4;
+  }
 }
 
 /* Card */