From: Tatjana Dehler <tdehler@suse.com>
Date: Fri, 30 Oct 2020 11:39:32 +0000 (+0100)
Subject: mgr/dashboard: add form button panel
X-Git-Tag: v16.1.0~449^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=2b4e6288c2bd921debfaa38458414b6faa812d90;p=ceph.git

mgr/dashboard: add form button panel

Fixes: https://tracker.ceph.com/issues/48016
Signed-off-by: Tatjana Dehler <tdehler@suse.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/block/images.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/block/images.po.ts
index f744920c3cd7..bf6cbc05263b 100644
--- a/src/pybind/mgr/dashboard/frontend/cypress/integration/block/images.po.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/block/images.po.ts
@@ -22,7 +22,7 @@ export class ImagesPageHelper extends PageHelper {
     cy.get('#size').type(size);
 
     // Click the create button and wait for image to be made
-    cy.contains('button', 'Create RBD').click();
+    cy.get('[data-cy=submitBtn]').click();
     this.getFirstTableCell(name).should('exist');
   }
 
@@ -35,7 +35,7 @@ export class ImagesPageHelper extends PageHelper {
     cy.get('#name').clear().type(newName);
     cy.get('#size').clear().type(newSize); // click the size box and send new size
 
-    cy.contains('button', 'Edit RBD').click();
+    cy.get('[data-cy=submitBtn]').click();
 
     this.getExpandCollapseElement(newName).click();
     cy.get('.table.table-striped.table-bordered').contains('td', newSize);
@@ -53,7 +53,7 @@ export class ImagesPageHelper extends PageHelper {
     cy.get('.table-actions button.dropdown-toggle').first().click();
     cy.get('button.move-to-trash').click();
 
-    cy.contains('button', 'Move Image').should('be.visible').click();
+    cy.get('[data-cy=submitBtn]').should('be.visible').click();
 
     // Clicks trash tab
     cy.contains('.nav-link', 'Trash').click();
@@ -79,7 +79,7 @@ export class ImagesPageHelper extends PageHelper {
       cy.get('cd-modal #name').clear().type(newName);
     }
 
-    cy.contains('button', 'Restore Image').click();
+    cy.get('[data-cy=submitBtn]').click();
 
     // clicks images tab
     cy.contains('.nav-link', 'Images').click();
@@ -102,7 +102,7 @@ export class ImagesPageHelper extends PageHelper {
       this.selectOption('poolName', pool);
       cy.get('#poolName').should('have.class', 'ng-valid'); // check if pool is selected
     }
-    cy.get('#purgeFormButton').click();
+    cy.get('[data-cy=submitBtn]').click();
     // Wait for image to delete and check it is not present
 
     this.getFirstTableCell(name).should('not.exist');
diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/configuration.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/configuration.po.ts
index eb160b052e11..f309120c60d6 100644
--- a/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/configuration.po.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/configuration.po.ts
@@ -20,7 +20,7 @@ export class ConfigurationPageHelper extends PageHelper {
       cy.get(`#${i}`).clear();
     }
     // Clicks save button and checks that values are not present for the selected config
-    cy.contains('button', 'Save').click();
+    cy.get('[data-cy=submitBtn]').click();
 
     // Enter config setting name into filter box
     this.seachTable(name);
@@ -57,7 +57,7 @@ export class ConfigurationPageHelper extends PageHelper {
 
     // Clicks save button then waits until the desired config is visible, clicks it,
     // then checks that each desired value appears with the desired number
-    cy.contains('button', 'Save').click();
+    cy.get('[data-cy=submitBtn]').click();
 
     // Enter config setting name into filter box
     this.seachTable(name);
diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/role-mgmt.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/role-mgmt.po.ts
index 2cbdef39b98a..1cc3630a4631 100644
--- a/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/role-mgmt.po.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/role-mgmt.po.ts
@@ -16,7 +16,7 @@ export class RoleMgmtPageHelper extends PageHelper {
     cy.get('#description').type(description);
 
     // Click the create button and wait for role to be made
-    cy.contains('button', 'Create Role').click();
+    cy.get('[data-cy=submitBtn]').click();
     cy.get('.breadcrumb-item.active').should('not.have.text', 'Create');
 
     this.getFirstTableCell(name).should('exist');
@@ -31,7 +31,7 @@ export class RoleMgmtPageHelper extends PageHelper {
     cy.get('#description').clear().type(description);
 
     // Click the edit button and check new values are present in table
-    cy.contains('button', 'Edit Role').click();
+    cy.get('[data-cy=submitBtn]').click();
     cy.get('.breadcrumb-item.active').should('not.have.text', 'Edit');
 
     this.getFirstTableCell(name).should('exist');
diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/user-mgmt.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/user-mgmt.po.ts
index 5afcdf37ca52..fb2b79129443 100644
--- a/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/user-mgmt.po.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/ui/user-mgmt.po.ts
@@ -17,7 +17,7 @@ export class UserMgmtPageHelper extends PageHelper {
     cy.get('#email').type(email);
 
     // Click the create button and wait for user to be made
-    cy.contains('button', 'Create User').click();
+    cy.get('[data-cy=submitBtn]').click();
     this.getFirstTableCell(username).should('exist');
   }
 
@@ -31,7 +31,7 @@ export class UserMgmtPageHelper extends PageHelper {
     cy.get('#email').clear().type(email);
 
     // Click the edit button and check new values are present in table
-    const editButton = cy.contains('button', 'Edit User');
+    const editButton = cy.get('[data-cy=submitBtn]');
     editButton.click();
     this.getFirstTableCell(email).should('exist');
     this.getFirstTableCell(name).should('exist');
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.html
index f4189cc372b4..c7724e9ec9a9 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.html
@@ -126,14 +126,10 @@
       </div>
 
       <div class="modal-footer">
-        <cd-submit-button (submitAction)="submitAction()"
-                          [form]="discoveryForm"
-                          *ngIf="hasPermission"
-                          i18n>Submit</cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"
-                        name="Cancel"
-                        i18n-name>
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="submitAction()"
+                              [form]="discoveryForm"
+                              [showSubmit]="hasPermission"
+                              [submitText]="actionLabels.SUBMIT"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.ts
index fd00db7c1429..68958cfaa2b0 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.ts
@@ -4,6 +4,7 @@ import { FormControl, Validators } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { IscsiService } from '~/app/shared/api/iscsi.service';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { NotificationType } from '~/app/shared/enum/notification-type.enum';
 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 import { CdValidators } from '~/app/shared/forms/cd-validators';
@@ -27,6 +28,7 @@ export class IscsiTargetDiscoveryModalComponent implements OnInit {
   constructor(
     private authStorageService: AuthStorageService,
     public activeModal: NgbActiveModal,
+    public actionLabels: ActionLabelsI18n,
     private iscsiService: IscsiService,
     private notificationService: NotificationService
   ) {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
index 825e821144a6..ed719e416121 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
@@ -690,12 +690,10 @@
 
       </div>
       <div class="card-footer">
-        <div class="text-right">
-          <cd-submit-button (submitAction)="submit()"
-                            i18n="form action button|Example: Create Pool@@formActionButton"
-                            [form]="formDir">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
-          <cd-back-button></cd-back-button>
-        </div>
+        <cd-form-button-panel (submitActionEvent)="submit()"
+                              [form]="targetForm"
+                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
+                              wrappingClass="text-right"></cd-form-button-panel>
       </div>
     </div>
   </form>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.html
index b3732d2f5970..3c34a2b85f28 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.html
@@ -83,13 +83,9 @@
       </div>
 
       <div class="modal-footer">
-        <cd-submit-button i18n
-                          [form]="settingsForm"
-                          (submitAction)="save()">Confirm</cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"
-                        name="Cancel"
-                        i18n-name>
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="save()"
+                              [form]="settingsForm"
+                              [submitText]="actionLabels.UPDATE"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.ts
index 4521a0db1971..e9c9c7d90daa 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.ts
@@ -5,6 +5,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import _ from 'lodash';
 
 import { IscsiService } from '~/app/shared/api/iscsi.service';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 
 @Component({
@@ -23,7 +24,11 @@ export class IscsiTargetImageSettingsModalComponent implements OnInit {
 
   settingsForm: CdFormGroup;
 
-  constructor(public activeModal: NgbActiveModal, public iscsiService: IscsiService) {}
+  constructor(
+    public activeModal: NgbActiveModal,
+    public iscsiService: IscsiService,
+    public actionLabels: ActionLabelsI18n
+  ) {}
 
   ngOnInit() {
     const fg: Record<string, FormControl> = {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-iqn-settings-modal/iscsi-target-iqn-settings-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-iqn-settings-modal/iscsi-target-iqn-settings-modal.component.html
index 76490e1d4dea..a5d1269f6df2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-iqn-settings-modal/iscsi-target-iqn-settings-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-iqn-settings-modal/iscsi-target-iqn-settings-modal.component.html
@@ -23,13 +23,9 @@
       </div>
 
       <div class="modal-footer">
-        <cd-submit-button i18n
-                          [form]="settingsForm"
-                          (submitAction)="save()">Confirm</cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"
-                        name="Cancel"
-                        i18n-name>
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="save()"
+                              [form]="settingsForm"
+                              [submitText]="actionLabels.UPDATE"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-iqn-settings-modal/iscsi-target-iqn-settings-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-iqn-settings-modal/iscsi-target-iqn-settings-modal.component.ts
index 4a6ac9df9f4d..36fdb9026c3a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-iqn-settings-modal/iscsi-target-iqn-settings-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-iqn-settings-modal/iscsi-target-iqn-settings-modal.component.ts
@@ -5,6 +5,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import _ from 'lodash';
 
 import { IscsiService } from '~/app/shared/api/iscsi.service';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 
 @Component({
@@ -19,7 +20,11 @@ export class IscsiTargetIqnSettingsModalComponent implements OnInit {
 
   settingsForm: CdFormGroup;
 
-  constructor(public activeModal: NgbActiveModal, public iscsiService: IscsiService) {}
+  constructor(
+    public activeModal: NgbActiveModal,
+    public iscsiService: IscsiService,
+    public actionLabels: ActionLabelsI18n
+  ) {}
 
   ngOnInit() {
     const fg: Record<string, FormControl> = {};
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-import-modal/bootstrap-import-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-import-modal/bootstrap-import-modal.component.html
index 00a3745362db..3770ef099a6b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-import-modal/bootstrap-import-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-import-modal/bootstrap-import-modal.component.html
@@ -87,13 +87,9 @@
       </div>
 
       <div class="modal-footer">
-        <cd-submit-button i18n
-                          [form]="importBootstrapForm"
-                          (submitAction)="import()">Import</cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"
-                        name="Close"
-                        i18n-name>
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="import()"
+                              [form]="importBootstrapForm"
+                              [submitText]="actionLabels.SUBMIT"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-import-modal/bootstrap-import-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-import-modal/bootstrap-import-modal.component.ts
index df3cc2bee030..d79096f6be6f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-import-modal/bootstrap-import-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-import-modal/bootstrap-import-modal.component.ts
@@ -8,6 +8,7 @@ import { last } from 'rxjs/operators';
 
 import { Pool } from '~/app/ceph/pool/pool';
 import { RbdMirroringService } from '~/app/shared/api/rbd-mirroring.service';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 import { FinishedTask } from '~/app/shared/models/finished-task';
 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
@@ -33,6 +34,7 @@ export class BootstrapImportModalComponent implements OnInit, OnDestroy {
 
   constructor(
     public activeModal: NgbActiveModal,
+    public actionLabels: ActionLabelsI18n,
     private rbdMirroringService: RbdMirroringService,
     private taskWrapper: TaskWrapperService
   ) {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/edit-site-name-modal/edit-site-name-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/edit-site-name-modal/edit-site-name-modal.component.html
index 403a5d8cd3af..f0c91976802b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/edit-site-name-modal/edit-site-name-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/edit-site-name-modal/edit-site-name-modal.component.html
@@ -30,13 +30,9 @@
       </div>
 
       <div class="modal-footer">
-        <cd-submit-button i18n
-                          [form]="editSiteNameForm"
-                          (submitAction)="update()">Update</cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"
-                        name="Cancel"
-                        i18n-name>
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="update()"
+                              [form]="editSiteNameForm"
+                              [submitText]="actionLabels.UPDATE"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/edit-site-name-modal/edit-site-name-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/edit-site-name-modal/edit-site-name-modal.component.ts
index 71c41a1267ac..aa43bd0e8db7 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/edit-site-name-modal/edit-site-name-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/edit-site-name-modal/edit-site-name-modal.component.ts
@@ -4,6 +4,7 @@ import { FormControl } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { RbdMirroringService } from '~/app/shared/api/rbd-mirroring.service';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 import { FinishedTask } from '~/app/shared/models/finished-task';
 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
@@ -20,6 +21,7 @@ export class EditSiteNameModalComponent implements OnInit {
 
   constructor(
     public activeModal: NgbActiveModal,
+    public actionLabels: ActionLabelsI18n,
     private rbdMirroringService: RbdMirroringService,
     private taskWrapper: TaskWrapperService
   ) {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-mode-modal/pool-edit-mode-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-mode-modal/pool-edit-mode-modal.component.html
index 98bb65c9f1ce..2e88059ba0c6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-mode-modal/pool-edit-mode-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-mode-modal/pool-edit-mode-modal.component.html
@@ -34,13 +34,9 @@
       </div>
 
       <div class="modal-footer">
-        <cd-submit-button i18n
-                          [form]="editModeForm"
-                          (submitAction)="update()">Update</cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"
-                        name="Cancel"
-                        i18n-name>
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="update()"
+                              [form]="editModeForm"
+                              [submitText]="actionLabels.UPDATE"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-mode-modal/pool-edit-mode-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-mode-modal/pool-edit-mode-modal.component.ts
index f435e84b75f6..137e787174d7 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-mode-modal/pool-edit-mode-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-mode-modal/pool-edit-mode-modal.component.ts
@@ -5,6 +5,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { Subscription } from 'rxjs';
 
 import { RbdMirroringService } from '~/app/shared/api/rbd-mirroring.service';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 import { FinishedTask } from '~/app/shared/models/finished-task';
 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
@@ -37,6 +38,7 @@ export class PoolEditModeModalComponent implements OnInit, OnDestroy {
 
   constructor(
     public activeModal: NgbActiveModal,
+    public actionLabels: ActionLabelsI18n,
     private rbdMirroringService: RbdMirroringService,
     private taskWrapper: TaskWrapperService
   ) {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-peer-modal/pool-edit-peer-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-peer-modal/pool-edit-peer-modal.component.html
index 164791e996aa..97774ebe3ffb 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-peer-modal/pool-edit-peer-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-peer-modal/pool-edit-peer-modal.component.html
@@ -91,13 +91,9 @@
       </div>
 
       <div class="modal-footer">
-        <cd-submit-button i18n
-                          [form]="editPeerForm"
-                          (submitAction)="update()">Submit</cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"
-                        name="Cancel"
-                        i18n-name>
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="update()"
+                              [form]="editPeerForm"
+                              [submitText]="actionLabels.SUBMIT"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-peer-modal/pool-edit-peer-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-peer-modal/pool-edit-peer-modal.component.ts
index 83f1fe897690..6569c3b24b04 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-peer-modal/pool-edit-peer-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-peer-modal/pool-edit-peer-modal.component.ts
@@ -4,6 +4,7 @@ import { AbstractControl, FormControl, Validators } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { RbdMirroringService } from '~/app/shared/api/rbd-mirroring.service';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 import { FinishedTask } from '~/app/shared/models/finished-task';
 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
@@ -29,6 +30,7 @@ export class PoolEditPeerModalComponent implements OnInit {
 
   constructor(
     public activeModal: NgbActiveModal,
+    public actionLabels: ActionLabelsI18n,
     private rbdMirroringService: RbdMirroringService,
     private taskWrapper: TaskWrapperService
   ) {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
index 91a4439b9048..6a12cb64f166 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
@@ -328,12 +328,10 @@
 
       </div>
       <div class="card-footer">
-        <div class="text-right">
-          <cd-submit-button (submitAction)="submit()"
-                            i18n="form action button|Example: Create Pool@@formActionButton"
-                            [form]="formDir">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
-          <cd-back-button></cd-back-button>
-        </div>
+        <cd-form-button-panel (submitActionEvent)="submit()"
+                              [form]="formDir"
+                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
+                              wrappingClass="text-right"></cd-form-button-panel>
       </div>
     </div>
   </form>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form-modal.component.html
index 613a14b53350..debbf8643a3c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form-modal.component.html
@@ -70,13 +70,9 @@
       </div>
 
       <div class="modal-footer">
-        <cd-submit-button [form]="namespaceForm"
-                          (submitAction)="submit()"
-                          i18n>Create Namespace</cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"
-                        name="Close"
-                        i18n-name>
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="submit()"
+                              [form]="namespaceForm"
+                              [submitText]="actionLabels.CREATE"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form-modal.component.ts
index 5bca4266327b..bad32c3c554c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form-modal.component.ts
@@ -13,6 +13,7 @@ import { Subject } from 'rxjs';
 import { Pool } from '~/app/ceph/pool/pool';
 import { PoolService } from '~/app/shared/api/pool.service';
 import { RbdService } from '~/app/shared/api/rbd.service';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { NotificationType } from '~/app/shared/enum/notification-type.enum';
 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 import { FinishedTask } from '~/app/shared/models/finished-task';
@@ -39,6 +40,7 @@ export class RbdNamespaceFormModalComponent implements OnInit {
 
   constructor(
     public activeModal: NgbActiveModal,
+    public actionLabels: ActionLabelsI18n,
     private authStorageService: AuthStorageService,
     private notificationService: NotificationService,
     private poolService: PoolService,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form-modal.component.html
index 1b58ee3610a7..3b15b0aae69e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form-modal.component.html
@@ -29,14 +29,9 @@
       </div>
 
       <div class="modal-footer">
-        <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 (backAction)="activeModal.close()"
-                        name="Close"
-                        i18n-name>
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="submit()"
+                              [form]="snapshotForm"
+                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-move-modal/rbd-trash-move-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-move-modal/rbd-trash-move-modal.component.html
index c53e79ac3df0..b87dbfe6b6df 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-move-modal/rbd-trash-move-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-move-modal/rbd-trash-move-modal.component.html
@@ -44,13 +44,9 @@
       </div>
 
       <div class="modal-footer">
-        <cd-submit-button i18n
-                          [form]="moveForm"
-                          (submitAction)="moveImage()">Move Image</cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"
-                        name="Cancel"
-                        i18n-name>
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="moveImage()"
+                              [form]="moveForm"
+                              [submitText]="actionLabels.MOVE"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-move-modal/rbd-trash-move-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-move-modal/rbd-trash-move-modal.component.ts
index 28b826581623..ccf381f9c882 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-move-modal/rbd-trash-move-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-move-modal/rbd-trash-move-modal.component.ts
@@ -4,6 +4,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import moment from 'moment';
 
 import { RbdService } from '~/app/shared/api/rbd.service';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { CdFormBuilder } from '~/app/shared/forms/cd-form-builder';
 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 import { CdValidators } from '~/app/shared/forms/cd-validators';
@@ -34,6 +35,7 @@ export class RbdTrashMoveModalComponent implements OnInit {
   constructor(
     private rbdService: RbdService,
     public activeModal: NgbActiveModal,
+    public actionLabels: ActionLabelsI18n,
     private fb: CdFormBuilder,
     private taskWrapper: TaskWrapperService
   ) {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-purge-modal/rbd-trash-purge-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-purge-modal/rbd-trash-purge-modal.component.html
index 989b69473b6a..4958173083b6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-purge-modal/rbd-trash-purge-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-purge-modal/rbd-trash-purge-modal.component.html
@@ -39,14 +39,9 @@
       </div>
 
       <div class="modal-footer">
-        <cd-submit-button id="purgeFormButton"
-                          [form]="purgeForm"
-                          (submitAction)="purge()"
-                          i18n>Purge Trash</cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"
-                        name="Cancel"
-                        i18n-name>
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="purge()"
+                              [form]="purgeForm"
+                              [submitText]="actionLabels.PURGE"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-purge-modal/rbd-trash-purge-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-purge-modal/rbd-trash-purge-modal.component.ts
index 3969926ef463..e4df25d15ece 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-purge-modal/rbd-trash-purge-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-purge-modal/rbd-trash-purge-modal.component.ts
@@ -5,6 +5,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { Pool } from '~/app/ceph/pool/pool';
 import { PoolService } from '~/app/shared/api/pool.service';
 import { RbdService } from '~/app/shared/api/rbd.service';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { CdFormBuilder } from '~/app/shared/forms/cd-form-builder';
 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 import { FinishedTask } from '~/app/shared/models/finished-task';
@@ -26,6 +27,7 @@ export class RbdTrashPurgeModalComponent implements OnInit {
     private authStorageService: AuthStorageService,
     private rbdService: RbdService,
     public activeModal: NgbActiveModal,
+    public actionLabels: ActionLabelsI18n,
     private fb: CdFormBuilder,
     private poolService: PoolService,
     private taskWrapper: TaskWrapperService
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-restore-modal/rbd-trash-restore-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-restore-modal/rbd-trash-restore-modal.component.html
index 056ed2509ce3..ab64c78285da 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-restore-modal/rbd-trash-restore-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-restore-modal/rbd-trash-restore-modal.component.html
@@ -34,13 +34,9 @@
       </div>
 
       <div class="modal-footer">
-        <cd-submit-button [form]="restoreForm"
-                          (submitAction)="restore()"
-                          i18n>Restore Image</cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"
-                        name="Cancel"
-                        i18n-name>
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="restore()"
+                              [form]="restoreForm"
+                              [submitText]="actionLabels.RESTORE"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-restore-modal/rbd-trash-restore-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-restore-modal/rbd-trash-restore-modal.component.ts
index a2eae8c1b28e..860d66cc0173 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-restore-modal/rbd-trash-restore-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-restore-modal/rbd-trash-restore-modal.component.ts
@@ -3,6 +3,7 @@ import { Component, OnInit } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { RbdService } from '~/app/shared/api/rbd.service';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { CdFormBuilder } from '~/app/shared/forms/cd-form-builder';
 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 import { ExecutingTask } from '~/app/shared/models/executing-task';
@@ -28,6 +29,7 @@ export class RbdTrashRestoreModalComponent implements OnInit {
   constructor(
     private rbdService: RbdService,
     public activeModal: NgbActiveModal,
+    public actionLabels: ActionLabelsI18n,
     private fb: CdFormBuilder,
     private taskWrapper: TaskWrapperService
   ) {}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html
index 3df68d267b84..27225e5b0e04 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html
@@ -150,13 +150,10 @@
       </div>
       <!-- Footer -->
       <div class="card-footer">
-        <div class="text-right">
-          <cd-submit-button [form]="formDir"
-                            (submitAction)="submit()">
-            <span i18n>Save</span>
-          </cd-submit-button>
-          <cd-back-button></cd-back-button>
-        </div>
+        <cd-form-button-panel (submitActionEvent)="submit()"
+                              [form]="configForm"
+                              [submitText]="actionLabels.UPDATE"
+                              wrappingClass="text-right"></cd-form-button-panel>
       </div>
     </div>
   </form>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.ts
index aef0eceb5576..18099109d5db 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.ts
@@ -7,6 +7,7 @@ import _ from 'lodash';
 import { ConfigurationService } from '~/app/shared/api/configuration.service';
 import { ConfigFormModel } from '~/app/shared/components/config-option/config-option.model';
 import { ConfigOptionTypes } from '~/app/shared/components/config-option/config-option.types';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { NotificationType } from '~/app/shared/enum/notification-type.enum';
 import { CdForm } from '~/app/shared/forms/cd-form';
 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
@@ -30,6 +31,7 @@ export class ConfigurationFormComponent extends CdForm implements OnInit {
   availSections = ['global', 'mon', 'mgr', 'osd', 'mds', 'client'];
 
   constructor(
+    public actionLabels: ActionLabelsI18n,
     private route: ActivatedRoute,
     private router: Router,
     private configService: ConfigurationService,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html
index 0fcf0cd1a5fa..0bb3fb8dbfda 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html
@@ -34,12 +34,10 @@
       </div>
 
       <div class="card-footer">
-        <div class="text-right">
-          <cd-submit-button [form]="formDir"
-                            i18n="form action button|Example: Create Pool@@formActionButton"
-                            (submitAction)="submit()">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
-          <cd-back-button></cd-back-button>
-        </div>
+        <cd-form-button-panel (submitActionEvent)="submit()"
+                              [form]="hostForm"
+                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
+                              wrappingClass="text-right"></cd-form-button-panel>
       </div>
     </div>
   </form>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html
index de235b58b6d3..89cb7b4d7ee0 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html
@@ -100,16 +100,10 @@
         </div>
       </div>
       <div class="card-footer">
-        <div class="text-right">
-          <cd-submit-button (submitAction)="onSubmit()"
-                            [form]="mgrModuleForm">
-            <ng-container i18n>Update</ng-container>
-          </cd-submit-button>
-          <button type="button"
-                  class="btn btn-light"
-                  routerLink="/mgr-modules"
-                  i18n>Back</button>
-        </div>
+        <cd-form-button-panel (submitActionEvent)="onSubmit()"
+                              [form]="mgrModuleForm"
+                              [submitText]="actionLabels.UPDATE"
+                              wrappingClass="text-right"></cd-form-button-panel>
       </div>
     </div>
   </form>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.ts
index b07cc46bb388..c40af28031e4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.ts
@@ -6,6 +6,7 @@ import _ from 'lodash';
 import { forkJoin as observableForkJoin } from 'rxjs';
 
 import { MgrModuleService } from '~/app/shared/api/mgr-module.service';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { NotificationType } from '~/app/shared/enum/notification-type.enum';
 import { CdForm } from '~/app/shared/forms/cd-form';
 import { CdFormBuilder } from '~/app/shared/forms/cd-form-builder';
@@ -24,6 +25,7 @@ export class MgrModuleFormComponent extends CdForm implements OnInit {
   moduleOptions: any[] = [];
 
   constructor(
+    public actionLabels: ActionLabelsI18n,
     private route: ActivatedRoute,
     private router: Router,
     private formBuilder: CdFormBuilder,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-creation-preview-modal/osd-creation-preview-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-creation-preview-modal/osd-creation-preview-modal.component.html
index 3431b84d3fc8..9b442dbc78db 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-creation-preview-modal/osd-creation-preview-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-creation-preview-modal/osd-creation-preview-modal.component.html
@@ -11,9 +11,9 @@
         <pre>{{ driveGroups | json}}</pre>
       </div>
       <div class="modal-footer">
-        <cd-submit-button (submitAction)="onSubmit()"
-                          [form]="formGroup">{{ action | titlecase }}</cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"></cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="onSubmit()"
+                              [form]="formGroup"
+                              [submitText]="action | titlecase"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-modal/osd-devices-selection-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-modal/osd-devices-selection-modal.component.html
index 2cbf29bb2498..30effc21b53e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-modal/osd-devices-selection-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-modal/osd-devices-selection-modal.component.html
@@ -31,10 +31,10 @@
         </div>
       </div>
       <div class="modal-footer">
-        <cd-submit-button (submitAction)="onSubmit()"
-                          [form]="formGroup"
-                          [disabled]="!canSubmit || filteredDevices.length === 0">{{ action | titlecase }}</cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"></cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="onSubmit()"
+                              [form]="formGroup"
+                              [disabled]="!canSubmit || filteredDevices.length === 0"
+                              [submitText]="action | titlecase"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-modal/osd-devices-selection-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-modal/osd-devices-selection-modal.component.spec.ts
index cbcabfba6f96..60ef65d0517c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-modal/osd-devices-selection-modal.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-modal/osd-devices-selection-modal.component.spec.ts
@@ -23,7 +23,7 @@ describe('OsdDevicesSelectionModalComponent', () => {
 
   const expectSubmitButton = (enabled: boolean) => {
     const nativeElement = fixture.debugElement.nativeElement;
-    const button = nativeElement.querySelector('.modal-footer button');
+    const button = nativeElement.querySelector('.modal-footer .tc_submitButton');
     expect(button.disabled).toBe(!enabled);
   };
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-indiv-modal/osd-flags-indiv-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-indiv-modal/osd-flags-indiv-modal.component.html
index 78d108d7be4e..f8a10ff24de6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-indiv-modal/osd-flags-indiv-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-indiv-modal/osd-flags-indiv-modal.component.html
@@ -38,14 +38,10 @@
                 class="btn btn-light"
                 (click)="resetSelection()"
                 i18n>Restore previous selection</button>
-        <cd-submit-button *ngIf="permissions.osd.update"
-                          (submitAction)="submitAction()"
-                          [form]="osdFlagsForm"
-                          i18n>Submit</cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"
-                        name="Cancel"
-                        i18n-name>
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="submitAction()"
+                              [form]="osdFlagsForm"
+                              [showSubmit]="permissions.osd.update"
+                              [submitText]="actionLabels.UPDATE"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-indiv-modal/osd-flags-indiv-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-indiv-modal/osd-flags-indiv-modal.component.ts
index 652c9afa58b1..e9e0b876f3bd 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-indiv-modal/osd-flags-indiv-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-indiv-modal/osd-flags-indiv-modal.component.ts
@@ -5,6 +5,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import _ from 'lodash';
 
 import { OsdService } from '~/app/shared/api/osd.service';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { NotificationType } from '~/app/shared/enum/notification-type.enum';
 import { Flag } from '~/app/shared/models/flag';
 import { Permissions } from '~/app/shared/models/permissions';
@@ -59,6 +60,7 @@ export class OsdFlagsIndivModalComponent implements OnInit {
 
   constructor(
     public activeModal: NgbActiveModal,
+    public actionLabels: ActionLabelsI18n,
     private authStorageService: AuthStorageService,
     private osdService: OsdService,
     private notificationService: NotificationService
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html
index df3a3a192643..2ae6460fbb73 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html
@@ -31,14 +31,10 @@
       </div>
 
       <div class="modal-footer">
-        <cd-submit-button *ngIf="permissions.osd.update"
-                          (submitAction)="submitAction()"
-                          [form]="osdFlagsForm"
-                          i18n>Submit</cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"
-                        name="Cancel"
-                        i18n-name>
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="submitAction()"
+                              [form]="osdFlagsForm"
+                              [showSubmit]="permissions.osd.update"
+                              [submitText]="actionLabels.UPDATE"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.ts
index 05e61324e14c..640719382b42 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.ts
@@ -5,6 +5,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import _ from 'lodash';
 
 import { OsdService } from '~/app/shared/api/osd.service';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { NotificationType } from '~/app/shared/enum/notification-type.enum';
 import { Permissions } from '~/app/shared/models/permissions';
 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
@@ -115,6 +116,7 @@ export class OsdFlagsModalComponent implements OnInit {
 
   constructor(
     public activeModal: NgbActiveModal,
+    public actionLabels: ActionLabelsI18n,
     private authStorageService: AuthStorageService,
     private osdService: OsdService,
     private notificationService: NotificationService
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.html
index 998d5d9856b0..8907b161605e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.html
@@ -122,14 +122,11 @@
         </fieldset>
       </div>
       <div class="card-footer">
-        <div class="text-right">
-          <cd-submit-button #previewButton
-                            (submitAction)="submit()"
-                            i18n
-                            [form]="formDir"
-                            [disabled]="dataDeviceSelectionGroups.devices.length === 0">Preview</cd-submit-button>
-          <cd-back-button></cd-back-button>
-        </div>
+        <cd-form-button-panel (submitActionEvent)="submit()"
+                              [form]="form"
+                              [disabled]="dataDeviceSelectionGroups.devices.length === 0"
+                              [submitText]="actionLabels.PREVIEW"
+                              wrappingClass="text-right"></cd-form-button-panel>
       </div>
     </div>
   </form>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.spec.ts
index b58b9c0a6f7b..120b320ced8a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.spec.ts
@@ -49,7 +49,7 @@ describe('OsdFormComponent', () => {
   ];
 
   const expectPreviewButton = (enabled: boolean) => {
-    const debugElement = fixtureHelper.getElementByCss('.card-footer button');
+    const debugElement = fixtureHelper.getElementByCss('.tc_submitButton');
     expect(debugElement.nativeElement.disabled).toBe(!enabled);
   };
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-pg-scrub-modal/osd-pg-scrub-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-pg-scrub-modal/osd-pg-scrub-modal.component.html
index 59c6d81fe04d..841f41b575a6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-pg-scrub-modal/osd-pg-scrub-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-pg-scrub-modal/osd-pg-scrub-modal.component.html
@@ -34,12 +34,11 @@
         </div>
       </div>
       <div class="modal-footer">
-        <cd-submit-button *ngIf="permissions.configOpt.update"
-                          (submitAction)="submitAction()"
-                          i18n="form action button|Example: Create Pool@@formActionButton"
-                          [form]="osdPgScrubForm">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()">
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="submitAction()"
+                              [form]="osdPgScrubForm"
+                              [showSubmit]="permissions.configOpt.update"
+                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)">
+        </cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.html
index 6b444b0ee314..6544872726ea 100755
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.html
@@ -82,14 +82,10 @@
         </div>
       </div>
       <div class="modal-footer">
-        <cd-submit-button *ngIf="permissions.configOpt.update"
-                          (submitAction)="submitAction()"
-                          [form]="osdRecvSpeedForm"
-                          i18n>Submit</cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"
-                        name="Cancel"
-                        i18n-name>
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="submitAction()"
+                              [form]="osdRecvSpeedForm"
+                              [submitText]="actionLabels.UPDATE"
+                              [showSubmit]="permissions.configOpt.update"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.ts
index 6c41d0180aba..6546e086569e 100755
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.ts
@@ -7,6 +7,7 @@ import _ from 'lodash';
 import { ConfigurationService } from '~/app/shared/api/configuration.service';
 import { OsdService } from '~/app/shared/api/osd.service';
 import { ConfigOptionTypes } from '~/app/shared/components/config-option/config-option.types';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { NotificationType } from '~/app/shared/enum/notification-type.enum';
 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 import { Permissions } from '~/app/shared/models/permissions';
@@ -27,6 +28,7 @@ export class OsdRecvSpeedModalComponent implements OnInit {
 
   constructor(
     public activeModal: NgbActiveModal,
+    public actionLabels: ActionLabelsI18n,
     private authStorageService: AuthStorageService,
     private configService: ConfigurationService,
     private notificationService: NotificationService,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-reweight-modal/osd-reweight-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-reweight-modal/osd-reweight-modal.component.html
index e19a3d8ceccc..e5aa22311f1c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-reweight-modal/osd-reweight-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-reweight-modal/osd-reweight-modal.component.html
@@ -29,14 +29,9 @@
       </div>
 
       <div class="modal-footer">
-        <cd-submit-button (submitAction)="reweight()"
-                          [form]="reweightForm"
-                          [disabled]="reweightForm.invalid"
-                          i18n>Reweight</cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"
-                        name="Cancel"
-                        i18n-name>
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="reweight()"
+                              [form]="reweightForm"
+                              [submitText]="actionLabels.REWEIGHT"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-reweight-modal/osd-reweight-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-reweight-modal/osd-reweight-modal.component.spec.ts
index d240f68fd34a..41e05021efc6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-reweight-modal/osd-reweight-modal.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-reweight-modal/osd-reweight-modal.component.spec.ts
@@ -1,4 +1,5 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
@@ -26,6 +27,7 @@ describe('OsdReweightModalComponent', () => {
       SubmitButtonComponent,
       BackButtonComponent
     ],
+    schemas: [NO_ERRORS_SCHEMA],
     providers: [OsdService, NgbActiveModal, CdFormBuilder]
   });
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-reweight-modal/osd-reweight-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-reweight-modal/osd-reweight-modal.component.ts
index 392f32003947..d101079776e0 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-reweight-modal/osd-reweight-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-reweight-modal/osd-reweight-modal.component.ts
@@ -4,6 +4,7 @@ import { Validators } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { OsdService } from '~/app/shared/api/osd.service';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { CdFormBuilder } from '~/app/shared/forms/cd-form-builder';
 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 
@@ -18,6 +19,7 @@ export class OsdReweightModalComponent implements OnInit {
   reweightForm: CdFormGroup;
 
   constructor(
+    public actionLabels: ActionLabelsI18n,
     public activeModal: NgbActiveModal,
     private osdService: OsdService,
     private fb: CdFormBuilder
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.html
index 386d53a9173e..568c700fa69e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.html
@@ -13,13 +13,9 @@
       </div>
 
       <div class="modal-footer">
-        <cd-submit-button (submitAction)="scrub()"
-                          [form]="scrubForm"
-                          i18n>Submit</cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"
-                        name="Cancel"
-                        i18n-name>
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="scrub()"
+                              [form]="scrubForm"
+                              [submitText]="actionLabels.UPDATE"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.ts
index 9a1b58160c51..b2f636708b97 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.ts
@@ -5,6 +5,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { forkJoin } from 'rxjs';
 
 import { OsdService } from '~/app/shared/api/osd.service';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { NotificationType } from '~/app/shared/enum/notification-type.enum';
 import { JoinPipe } from '~/app/shared/pipes/join.pipe';
 import { NotificationService } from '~/app/shared/services/notification.service';
@@ -21,6 +22,7 @@ export class OsdScrubModalComponent implements OnInit {
 
   constructor(
     public activeModal: NgbActiveModal,
+    public actionLabels: ActionLabelsI18n,
     private osdService: OsdService,
     private notificationService: NotificationService,
     private joinPipe: JoinPipe
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html
index 40dded4dbfc2..ce8928f7f026 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html
@@ -205,12 +205,9 @@
 
       <div class="card-footer">
         <div class="text-right">
-          <cd-submit-button (submitAction)="submit()"
-                            [form]="formDir"
-                            i18n="@@formTitle">
-            {{ action | titlecase }} {{ resource | upperFirst }}
-          </cd-submit-button>
-          <cd-back-button></cd-back-button>
+          <cd-form-button-panel (submitActionEvent)="submit()"
+                                [form]="form"
+                                [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
         </div>
       </div>
     </div>
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 b0c1798b9931..db89adc53690 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
@@ -76,14 +76,9 @@
       </div>
 
       <div class="modal-footer">
-        <cd-submit-button (submitAction)="onSubmit()"
-                          [form]="form">
-          <span i18n>{editMode, select, true {Edit} other {Add}}</span>
-        </cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"
-                        name="Close"
-                        i18n-name>
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="onSubmit()"
+                              [form]="form"
+                              [submitText]="getMode()"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.ts
index 5c24a9bdf1c4..bdd616ce9c60 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.ts
@@ -6,6 +6,7 @@ import _ from 'lodash';
 import { merge, Observable, Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
 
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { CdFormBuilder } from '~/app/shared/forms/cd-form-builder';
 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 import {
@@ -54,7 +55,8 @@ export class SilenceMatcherModalComponent {
   constructor(
     private formBuilder: CdFormBuilder,
     private silenceMatcher: PrometheusSilenceMatcherService,
-    public activeModal: NgbActiveModal
+    public activeModal: NgbActiveModal,
+    public actionLabels: ActionLabelsI18n
   ) {
     this.createForm();
     this.subscribeToChanges();
@@ -90,6 +92,10 @@ export class SilenceMatcherModalComponent {
     );
   }
 
+  getMode() {
+    return this.editMode ? this.actionLabels.EDIT : this.actionLabels.ADD;
+  }
+
   preFillControls(matcher: AlertmanagerSilenceMatcher) {
     this.form.setValue(matcher);
   }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html
index 05918798d1b4..6f9d47ce4210 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html
@@ -403,11 +403,9 @@
 
       <div class="card-footer">
         <div class="text-right">
-          <cd-submit-button (submitAction)="onSubmit()"
-                            i18n="form action button|Example: Create Pool@@formActionButton"
-                            [form]="serviceForm">{{ action | titlecase }} {{ resource | upperFirst }}
-          </cd-submit-button>
-          <cd-back-button></cd-back-button>
+          <cd-form-button-panel (submitActionEvent)="onSubmit()"
+                                [form]="serviceForm"
+                                [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
         </div>
       </div>
     </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.html
index a128c6f2510f..877374967a44 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.html
@@ -207,7 +207,7 @@
               <button type="button"
                       class="btn btn-light"
                       (click)="next()">
-                <ng-container i18n>Next</ng-container>
+                <ng-container i18n>{{ actionLabels.NEXT }}</ng-container>
               </button>
             </div>
           </div>
@@ -293,14 +293,11 @@
           </div>
           <div class="card-footer">
             <div class="button-group text-right">
-              <cd-submit-button (submitAction)="onSubmit()"
-                                [form]="previewForm">
-                <ng-container i18n>Save</ng-container>
-              </cd-submit-button>
-              <button type="button"
-                      class="btn btn-light"
-                      (click)="back()"
-                      i18n>Back</button>
+              <cd-form-button-panel (submitActionEvent)="onSubmit()"
+                                    (backActionEvent)="back()"
+                                    [form]="previewForm"
+                                    [submitText]="actionLabels.UPDATE"
+                                    [cancelText]="actionLabels.BACK"></cd-form-button-panel>
             </div>
           </div>
         </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.ts
index 4b65089c6555..8edb7b6a927d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.ts
@@ -7,6 +7,7 @@ import { forkJoin as observableForkJoin } from 'rxjs';
 
 import { MgrModuleService } from '~/app/shared/api/mgr-module.service';
 import { TelemetryService } from '~/app/shared/api/telemetry.service';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { NotificationType } from '~/app/shared/enum/notification-type.enum';
 import { CdForm } from '~/app/shared/forms/cd-form';
 import { CdFormBuilder } from '~/app/shared/forms/cd-form-builder';
@@ -43,6 +44,7 @@ export class TelemetryComponent extends CdForm implements OnInit {
   step = 1;
 
   constructor(
+    public actionLabels: ActionLabelsI18n,
     private formBuilder: CdFormBuilder,
     private mgrModuleService: MgrModuleService,
     private notificationService: NotificationService,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html
index 3f596d400802..42fc9675d8f7 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html
@@ -485,13 +485,10 @@
       </div>
 
       <div class="card-footer">
-        <div class="text-right">
-          <cd-submit-button
-            (submitAction)="submitAction()"
-            i18n="form action button|Example: Create Pool@@formActionButton"
-            [form]="formDir">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
-          <cd-back-button></cd-back-button>
-        </div>
+        <cd-form-button-panel (submitActionEvent)="submitAction()"
+                              [form]="nfsForm"
+                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
+                              wrappingClass="text-right"></cd-form-button-panel>
       </div>
     </div>
   </form>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/crush-rule-form-modal/crush-rule-form-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/crush-rule-form-modal/crush-rule-form-modal.component.html
index a29ac0e3342a..7bf328df4eb7 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/crush-rule-form-modal/crush-rule-form-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/crush-rule-form-modal/crush-rule-form-modal.component.html
@@ -114,10 +114,9 @@
       </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 (backAction)="activeModal.close()"></cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="onSubmit()"
+                              [form]="form"
+                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form-modal.component.html
index 4ed4025601b8..92cecabc9158 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form-modal.component.html
@@ -406,10 +406,9 @@
       </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 (backAction)="activeModal.close()"></cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="onSubmit()"
+                              [form]="form"
+                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
index a91c3ca4bbe0..f62a7283feb8 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
@@ -597,13 +597,10 @@
         </div>
       </div>
       <div class="card-footer">
-        <div class="text-right">
-          <cd-submit-button [form]="formDir"
-                            i18n="form action button|Example: Create Pool@@formActionButton"
-                            (submitAction)="submit()">{{ action | titlecase }} {{ resource | upperFirst }}
-          </cd-submit-button>
-          <cd-back-button></cd-back-button>
-        </div>
+        <cd-form-button-panel (submitActionEvent)="submit()"
+                              [form]="form"
+                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
+                              wrappingClass="text-right"></cd-form-button-panel>
       </div>
 
     </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html
index 07aa631bf350..310ec3d171f5 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html
@@ -289,12 +289,10 @@
 
       </div>
       <div class="card-footer">
-        <div class="text-right">
-          <cd-submit-button (submitAction)="submit()"
-                            i18n="form action button|Example: Create Pool@@formActionButton"
-                            [form]="bucketForm">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
-          <cd-back-button></cd-back-button>
-        </div>
+        <cd-form-button-panel (submitActionEvent)="submit()"
+                              [form]="bucketForm"
+                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
+                              wrappingClass="text-right"></cd-form-button-panel>
       </div>
     </div>
   </form>
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 215c0cb61d01..24cf4ab5f548 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
@@ -61,10 +61,9 @@
       </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 (backAction)="activeModal.close()"></cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="onSubmit()"
+                              [form]="formGroup"
+                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
index 164f6c2b3e8f..25b7bce95306 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
@@ -619,12 +619,10 @@
       </div>
 
       <div class="card-footer">
-        <div class="text-right">
-          <cd-submit-button (submitAction)="onSubmit()"
-                            i18n="form action button|Example: Create Pool@@formActionButton"
-                            [form]="userForm">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
-          <cd-back-button></cd-back-button>
-        </div>
+        <cd-form-button-panel (submitActionEvent)="onSubmit()"
+                              [form]="userForm"
+                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
+                              wrappingClass="text-right"></cd-form-button-panel>
       </div>
     </div>
   </form>
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 a96a26753df2..0f8edcaf5dde 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
@@ -119,11 +119,10 @@
       </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 (backAction)="activeModal.close()"></cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="onSubmit()"
+                              [form]="formGroup"
+                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
+                              [showSubmit]="!viewing"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
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 8bb3363d3219..66c59cb3f2c6 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,7 +1,6 @@
 <cd-modal [modalRef]="bsModalRef">
   <ng-container i18n="form title|Example: Create Pool@@formTitle"
                 class="modal-title">{{ action | titlecase }} {{ resource | upperFirst }}</ng-container>
-
   <ng-container class="modal-content">
     <form #frm="ngForm"
           [formGroup]="formGroup"
@@ -122,10 +121,9 @@
 
       </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 (backAction)="bsModalRef.close()"></cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="onSubmit()"
+                              [form]="formGroup"
+                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.html
index 84fc9c663f2e..2dc30df52e61 100755
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.html
@@ -85,19 +85,11 @@
             *ngIf="userForm.showError('confirmnewpassword', frm, 'match')"
             i18n>Password confirmation doesn't match the new password.</span>
     </div>
+    <cd-form-button-panel (submitActionEvent)="onSubmit()"
+                          (backActionEvent)="onCancel()"
+                          [form]="userForm"
+                          [disabled]="userForm.invalid"
+                          [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
+                          wrappingClass="text-right"></cd-form-button-panel>
   </form>
-  <div class="form-footer">
-    <cd-submit-button class="full-width"
-                      btnClass="btn-block"
-                      (submitAction)="onSubmit()"
-                      [form]="userForm"
-                      [disabled]="userForm.invalid"
-                      i18n="form action button|Example: Create Pool@@formActionButton">
-      {{ action | titlecase }} {{ resource | upperFirst }}
-    </cd-submit-button>
-    <button class="btn btn-light"
-            (click)="onCancel()">
-      <ng-container i18n>Cancel</ng-container>
-    </button>
-  </div>
 </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html
index 00260011115b..ce395236545e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html
@@ -68,12 +68,10 @@
 
       </div>
       <div class="card-footer">
-        <div class="text-right">
-          <cd-submit-button (submitAction)="submit()"
-                            i18n="form action button|Example: Create Pool@@formActionButton"
-                            [form]="formDir">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
-          <cd-back-button></cd-back-button>
-        </div>
+        <cd-form-button-panel (submitActionEvent)="submit()"
+                              [form]="roleForm"
+                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
+                              wrappingClass="text-right"></cd-form-button-panel>
       </div>
     </div>
   </form>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html
index 067f854cf9d8..098b15e97af1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html
@@ -240,12 +240,10 @@
 
       </div>
       <div class="card-footer">
-        <div class="text-right">
-          <cd-submit-button (submitAction)="submit()"
-                            i18n="form action button|Example: Create Pool@@formActionButton"
-                            [form]="formDir">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
-          <cd-back-button></cd-back-button>
-        </div>
+        <cd-form-button-panel (submitActionEvent)="submit()"
+                              [form]="userForm"
+                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
+                              wrappingClass="text-right"></cd-form-button-panel>
       </div>
     </div>
   </form>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.html
index cbde4f7d6552..64a679a32ba1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.html
@@ -111,12 +111,10 @@
       </div>
 
       <div class="card-footer">
-        <cd-submit-button (submitAction)="onSubmit()"
-                          [form]="userForm"
-                          class="float-right"
-                          i18n="form action button|Example: Create Pool@@formActionButton">
-          {{ action | titlecase }} {{ resource | upperFirst }}
-        </cd-submit-button>
+        <cd-form-button-panel (submitActionEvent)="onSubmit()"
+                              [form]="userForm"
+                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
+                              wrappingClass="text-right"></cd-form-button-panel>
       </div>
     </div>
   </form>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
index cb27f473f974..5defbf36a3a5 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
@@ -26,6 +26,7 @@ import { CriticalConfirmationModalComponent } from './critical-confirmation-moda
 import { DateTimePickerComponent } from './date-time-picker/date-time-picker.component';
 import { DocComponent } from './doc/doc.component';
 import { DownloadButtonComponent } from './download-button/download-button.component';
+import { FormButtonPanelComponent } from './form-button-panel/form-button-panel.component';
 import { FormModalComponent } from './form-modal/form-modal.component';
 import { GrafanaComponent } from './grafana/grafana.component';
 import { HelperComponent } from './helper/helper.component';
@@ -87,7 +88,8 @@ import { UsageBarComponent } from './usage-bar/usage-bar.component';
     OrchestratorDocPanelComponent,
     DateTimePickerComponent,
     DocComponent,
-    DownloadButtonComponent
+    DownloadButtonComponent,
+    FormButtonPanelComponent
   ],
   providers: [],
   exports: [
@@ -111,7 +113,8 @@ import { UsageBarComponent } from './usage-bar/usage-bar.component';
     OrchestratorDocPanelComponent,
     DateTimePickerComponent,
     DocComponent,
-    DownloadButtonComponent
+    DownloadButtonComponent,
+    FormButtonPanelComponent
   ]
 })
 export class ComponentsModule {}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.html
index 6d6b5a757398..3e0d1d29900a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.html
@@ -12,14 +12,10 @@
         </p>
       </div>
       <div class="modal-footer">
-        <cd-submit-button [form]="confirmationForm"
-                          (submitAction)="onSubmit(confirmationForm.value)">
-          {{ buttonText }}
-        </cd-submit-button>
-        <cd-back-button (backAction)="boundCancel()"
-                        name="Cancel"
-                        i18n-name>
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="onSubmit(confirmationForm.value)"
+                              (backActionEvent)="boundCancel()"
+                              [form]="confirmationForm"
+                              [submitText]="buttonText"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.spec.ts
index d44b646ca079..a76c5d378ed4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.spec.ts
@@ -1,7 +1,6 @@
 import { Component, NgModule, NO_ERRORS_SCHEMA, TemplateRef, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgbActiveModal, NgbModalModule, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
@@ -9,6 +8,7 @@ import { NgbActiveModal, NgbModalModule, NgbModalRef } from '@ng-bootstrap/ng-bo
 import { ModalService } from '~/app/shared/services/modal.service';
 import { configureTestBed, FixtureHelper } from '~/testing/unit-test-helper';
 import { BackButtonComponent } from '../back-button/back-button.component';
+import { FormButtonPanelComponent } from '../form-button-panel/form-button-panel.component';
 import { ModalComponent } from '../modal/modal.component';
 import { SubmitButtonComponent } from '../submit-button/submit-button.component';
 import { ConfirmationModalComponent } from './confirmation-modal.component';
@@ -72,11 +72,12 @@ describe('ConfirmationModalComponent', () => {
       BackButtonComponent,
       MockComponent,
       ModalComponent,
-      SubmitButtonComponent
+      SubmitButtonComponent,
+      FormButtonPanelComponent
     ],
     schemas: [NO_ERRORS_SCHEMA],
     imports: [ReactiveFormsModule, MockModule, RouterTestingModule, NgbModalModule],
-    providers: [NgbActiveModal, SubmitButtonComponent]
+    providers: [NgbActiveModal, SubmitButtonComponent, FormButtonPanelComponent]
   });
 
   beforeEach(() => {
@@ -161,10 +162,7 @@ describe('ConfirmationModalComponent', () => {
 
     it('should use the correct submit action', () => {
       // In order to ignore the `ElementRef` usage of `SubmitButtonComponent`
-      spyOn(
-        fixture.debugElement.query(By.directive(SubmitButtonComponent)).componentInstance,
-        'focusButton'
-      );
+      spyOn(fh.getElementByCss('.tc_submitButton').componentInstance, 'focusButton');
       fh.clickElement('.tc_submitButton');
       expect(component.onSubmit).toHaveBeenCalledTimes(1);
       expect(component.activeModal.close).toHaveBeenCalledTimes(0);
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component.html
index 06b66265c2c9..29b669b141f3 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component.html
@@ -42,15 +42,9 @@
         </div>
       </div>
       <div class="modal-footer">
-        <cd-submit-button #submitButton
-                          [form]="deletionForm"
-                          (submitAction)="callSubmitAction()">
-          <ng-container *ngTemplateOutlet="deletionHeading"></ng-container>
-        </cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"
-                        name="Cancel"
-                        i18n-name>
-        </cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="callSubmitAction()"
+                              [form]="deletionForm"
+                              [submitText]="(actionDescription | titlecase) + ' ' + itemDescription"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-button-panel/form-button-panel.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-button-panel/form-button-panel.component.html
new file mode 100644
index 000000000000..bef4bb8a7486
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-button-panel/form-button-panel.component.html
@@ -0,0 +1,10 @@
+<div [class]="wrappingClass">
+  <cd-back-button class="m-2"
+                  (backAction)="backAction()"
+                  [name]="cancelText"></cd-back-button>
+  <cd-submit-button *ngIf="showSubmit"
+                    (submitAction)="submitAction()"
+                    [disabled]="disabled"
+                    [form]="form"
+                    data-cy="submitBtn">{{ submitText }}</cd-submit-button>
+</div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-button-panel/form-button-panel.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-button-panel/form-button-panel.component.scss
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-button-panel/form-button-panel.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-button-panel/form-button-panel.component.spec.ts
new file mode 100644
index 000000000000..b8350485b3be
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-button-panel/form-button-panel.component.spec.ts
@@ -0,0 +1,25 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { configureTestBed } from '~/testing/unit-test-helper';
+import { FormButtonPanelComponent } from './form-button-panel.component';
+
+describe('FormButtonPanelComponent', () => {
+  let component: FormButtonPanelComponent;
+  let fixture: ComponentFixture<FormButtonPanelComponent>;
+
+  configureTestBed({
+    declarations: [FormButtonPanelComponent],
+    schemas: [NO_ERRORS_SCHEMA]
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormButtonPanelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-button-panel/form-button-panel.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-button-panel/form-button-panel.component.ts
new file mode 100644
index 000000000000..7684d1915632
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-button-panel/form-button-panel.component.ts
@@ -0,0 +1,55 @@
+import { Location } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup, NgForm } from '@angular/forms';
+
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
+import { ModalService } from '~/app/shared/services/modal.service';
+
+@Component({
+  selector: 'cd-form-button-panel',
+  templateUrl: './form-button-panel.component.html',
+  styleUrls: ['./form-button-panel.component.scss']
+})
+export class FormButtonPanelComponent {
+  @Output()
+  submitActionEvent = new EventEmitter();
+  @Output()
+  backActionEvent = new EventEmitter();
+
+  @Input()
+  form: FormGroup | NgForm;
+  @Input()
+  showSubmit = true;
+  @Input()
+  wrappingClass = '';
+  @Input()
+  btnClass = '';
+  @Input()
+  submitText: string = this.actionLabels.CREATE;
+  @Input()
+  cancelText: string = this.actionLabels.CANCEL;
+  @Input()
+  disabled = false;
+
+  constructor(
+    private location: Location,
+    private actionLabels: ActionLabelsI18n,
+    private modalService: ModalService
+  ) {}
+
+  submitAction() {
+    this.submitActionEvent.emit();
+  }
+
+  backAction() {
+    if (this.backActionEvent.observers.length === 0) {
+      if (this.modalService.hasOpenModals()) {
+        this.modalService.dismissAll();
+      } else {
+        this.location.back();
+      }
+    } else {
+      this.backActionEvent.emit();
+    }
+  }
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html
index 3efd823cf14e..061747f11301 100755
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html
@@ -60,11 +60,9 @@
         </ng-container>
       </div>
       <div class="modal-footer">
-        <cd-submit-button [form]="formGroup"
-                          (submitAction)="onSubmitForm(formGroup.value)">
-          {{ submitButtonText }}
-        </cd-submit-button>
-        <cd-back-button (backAction)="activeModal.close()"></cd-back-button>
+        <cd-form-button-panel (submitActionEvent)="onSubmitForm(formGroup.value)"
+                              [form]="formGroup"
+                              [submitText]="submitButtonText"></cd-form-button-panel>
       </div>
     </form>
   </ng-container>