From d259b23c3742be1f121077a9f5d7c80379beee37 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Stephan=20M=C3=BCller?= <smueller@suse.com>
Date: Fri, 8 Mar 2019 16:32:13 +0100
Subject: [PATCH] mgr/dashboard: Back button component
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Fixes: https://tracker.ceph.com/issues/38937
Signed-off-by: Stephan Müller <smueller@suse.com>
(cherry picked from commit ad960f1aa7c08b56b691fc1c8ad0348f7ede1f1b)
---
 ...scsi-target-discovery-modal.component.html |  8 +++---
 ...i-target-discovery-modal.component.spec.ts |  9 ++++++-
 .../iscsi-target-form.component.html          |  6 +----
 ...target-image-settings-modal.component.html |  9 +++----
 ...get-image-settings-modal.component.spec.ts |  3 ++-
 ...i-target-iqn-settings-modal.component.html |  8 +++---
 ...arget-iqn-settings-modal.component.spec.ts |  3 ++-
 .../pool-edit-mode-modal.component.html       |  8 +++---
 .../pool-edit-peer-modal.component.html       |  8 +++---
 .../block/rbd-form/rbd-form.component.html    |  7 ++---
 .../rbd-snapshot-form.component.html          |  8 +++---
 .../rbd-trash-move-modal.component.html       |  8 +++---
 .../rbd-trash-purge-modal.component.html      |  8 +++---
 .../rbd-trash-restore-modal.component.html    |  8 +++---
 .../configuration-form.component.html         |  5 +---
 .../osd-flags-modal.component.html            |  8 +++---
 .../osd-flags-modal.component.spec.ts         |  2 ++
 .../osd-recv-speed-modal.component.html       |  8 +++---
 .../osd-recv-speed-modal.component.spec.ts    |  2 ++
 .../osd-reweight-modal.component.html         |  8 +++---
 .../osd-reweight-modal.component.spec.ts      | 11 ++++++--
 .../osd-scrub-modal.component.html            |  8 +++---
 .../ceph/nfs/nfs-form/nfs-form.component.html |  5 +---
 .../ceph/nfs/nfs-form/nfs-form.component.ts   |  4 ---
 .../erasure-code-profile-form.component.html  |  8 +++---
 .../pool/pool-form/pool-form.component.html   |  5 +---
 .../rgw-bucket-form.component.html            |  5 +---
 .../rgw-user-capability-modal.component.html  |  8 +++---
 ...gw-user-capability-modal.component.spec.ts |  7 ++---
 .../rgw-user-form.component.html              |  5 +---
 .../rgw-user-s3-key-modal.component.html      |  8 +++---
 .../rgw-user-s3-key-modal.component.spec.ts   |  7 ++---
 .../rgw-user-subuser-modal.component.html     |  8 +++---
 .../rgw-user-subuser-modal.component.spec.ts  |  7 ++---
 .../auth/role-form/role-form.component.html   |  5 +---
 .../auth/user-form/user-form.component.html   |  5 +---
 .../telemetry/telemetry.component.html        |  0
 .../back-button/back-button.component.html    |  6 +++++
 .../back-button/back-button.component.scss    |  0
 .../back-button/back-button.component.spec.ts | 26 +++++++++++++++++++
 .../back-button/back-button.component.ts      | 16 ++++++++++++
 .../shared/components/components.module.ts    |  3 +++
 .../confirmation-modal.component.html         |  8 +++---
 .../confirmation-modal.component.spec.ts      | 15 ++++++++---
 .../confirmation-modal.component.ts           |  2 ++
 ...critical-confirmation-modal.component.html |  7 ++---
 46 files changed, 187 insertions(+), 136 deletions(-)
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/core/mgr-modules/telemetry/telemetry.component.html
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/back-button/back-button.component.html
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/back-button/back-button.component.scss
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/back-button/back-button.component.spec.ts
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/back-button/back-button.component.ts

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 a5253fb88a6a9..fbd603f4754c0 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
@@ -131,10 +131,10 @@
           <cd-submit-button (submitAction)="submitAction()"
                             [form]="discoveryForm"
                             i18n>Submit</cd-submit-button>
-
-          <button class="btn btn-link btn-sm"
-                  (click)="bsModalRef.hide()"
-                  i18n>Cancel</button>
+          <cd-back-button [back]="bsModalRef.hide"
+                          name="Cancel"
+                          i18n-name>
+          </cd-back-button>
         </div>
       </div>
     </form>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.spec.ts
index 5b8b5602e8e73..21005c80c524a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.spec.ts
@@ -5,6 +5,7 @@ import {
 } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { ToastModule } from 'ng2-toastr';
 import { BsModalRef } from 'ngx-bootstrap/modal';
@@ -21,7 +22,13 @@ describe('IscsiTargetDiscoveryModalComponent', () => {
 
   configureTestBed({
     declarations: [IscsiTargetDiscoveryModalComponent],
-    imports: [HttpClientTestingModule, ReactiveFormsModule, SharedModule, ToastModule.forRoot()],
+    imports: [
+      HttpClientTestingModule,
+      ReactiveFormsModule,
+      SharedModule,
+      ToastModule.forRoot(),
+      RouterTestingModule
+    ],
     providers: [i18nProviders, BsModalRef]
   });
 
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 e5010ebc925f9..ef0696a6ab104 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
@@ -560,11 +560,7 @@
                             type="button"
                             (submitAction)="submit()"
                             i18n>Submit</cd-submit-button>
-
-          <button type="button"
-                  class="btn btn-sm btn-default"
-                  routerLink="/block/iscsi/targets"
-                  i18n>Back</button>
+          <cd-back-button></cd-back-button>
         </div>
       </div>
     </div>
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 ff1e54d5e09f3..791f80b8a2fc6 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
@@ -48,11 +48,10 @@
         <button class="btn btn-sm btn-primary"
                 (click)="save()"
                 i18n>Confirm</button>
-
-        <button i18n
-                type="button"
-                class="btn btn-sm btn-default"
-                (click)="modalRef.hide()">Cancel</button>
+        <cd-back-button [back]="modalRef.hide"
+                        name="Cancel"
+                        i18n-name>
+        </cd-back-button>
       </div>
     </div>
   </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.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.spec.ts
index 1f8d8c7c03b9b..00f4da5fa07dc 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.spec.ts
@@ -1,6 +1,7 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { BsModalRef } from 'ngx-bootstrap/modal';
 
@@ -14,7 +15,7 @@ describe('IscsiTargetImageSettingsModalComponent', () => {
 
   configureTestBed({
     declarations: [IscsiTargetImageSettingsModalComponent],
-    imports: [SharedModule, FormsModule, HttpClientTestingModule],
+    imports: [SharedModule, FormsModule, HttpClientTestingModule, RouterTestingModule],
     providers: [BsModalRef, i18nProviders]
   });
 
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 23a56976f900a..4707dafe8d2b1 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
@@ -51,10 +51,10 @@
           <cd-submit-button i18n
                             [form]="settingsForm"
                             (submitAction)="save()">Confirm</cd-submit-button>
-          <button i18n
-                  type="button"
-                  class="btn btn-sm btn-default"
-                  (click)="modalRef.hide()">Cancel</button>
+          <cd-back-button [back]="modalRef.hide"
+                          name="Cancel"
+                          i18n-name>
+          </cd-back-button>
         </div>
       </div>
     </form>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-iqn-settings-modal/iscsi-target-iqn-settings-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-iqn-settings-modal/iscsi-target-iqn-settings-modal.component.spec.ts
index 1862d6b9ebf68..6666731d35961 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-iqn-settings-modal/iscsi-target-iqn-settings-modal.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-iqn-settings-modal/iscsi-target-iqn-settings-modal.component.spec.ts
@@ -1,6 +1,7 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { BsModalRef } from 'ngx-bootstrap/modal';
 
@@ -14,7 +15,7 @@ describe('IscsiTargetIqnSettingsModalComponent', () => {
 
   configureTestBed({
     declarations: [IscsiTargetIqnSettingsModalComponent],
-    imports: [SharedModule, ReactiveFormsModule, HttpClientTestingModule],
+    imports: [SharedModule, ReactiveFormsModule, HttpClientTestingModule, RouterTestingModule],
     providers: [BsModalRef, i18nProviders]
   });
 
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 1b0efcf459cc1..bc5bb0f6a44eb 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
@@ -39,10 +39,10 @@
           <cd-submit-button i18n
                             [form]="editModeForm"
                             (submitAction)="update()">Update</cd-submit-button>
-          <button i18n
-                  type="button"
-                  class="btn btn-sm btn-default"
-                  (click)="modalRef.hide()">Cancel</button>
+          <cd-back-button [back]="modalRef.hide"
+                          name="Cancel"
+                          i18n-name>
+          </cd-back-button>
         </div>
       </div>
     </form>
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 cfbf79d26dbf4..66291d9418664 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
@@ -104,10 +104,10 @@
           <cd-submit-button i18n
                             [form]="editPeerForm"
                             (submitAction)="update()">Submit</cd-submit-button>
-          <button i18n
-                  type="button"
-                  class="btn btn-sm btn-default"
-                  (click)="modalRef.hide()">Cancel</button>
+          <cd-back-button [back]="modalRef.hide"
+                          name="Cancel"
+                          i18n-name>
+          </cd-back-button>
         </div>
       </div>
     </form>
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 63df157673ea0..7caad726a4c25 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
@@ -312,12 +312,9 @@
                             (submitAction)="submit()">
             <span i18n>{mode, select, editing {Update} cloning {Clone} copying {Copy} other {Create}} RBD</span>
           </cd-submit-button>
-          <button type="button"
-                  class="btn btn-sm btn-default"
-                  routerLink="/block/rbd"
-                  i18n>Back</button>
+          <cd-back-button></cd-back-button>
         </div>
       </div>
     </div>
   </form>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html
index ac455e5174d8e..f11da878598aa 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html
@@ -44,10 +44,10 @@
       <cd-submit-button [form]="snapshotForm"
                         (submitAction)="submit()"
                         i18n>{ editing, select, true {Rename} other {Create}} Snapshot</cd-submit-button>
-      <button type="button"
-              class="btn btn-sm btn-default"
-              (click)="modalRef.hide()"
-              i18n>Close</button>
+      <cd-back-button [back]="modalRef.hide"
+                      name="Close"
+                      i18n-name>
+      </cd-back-button>
     </div>
   </div>
 </form>
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 d19a2adfa5c4c..e0bb6f0f96e58 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
@@ -38,10 +38,10 @@
           <cd-submit-button i18n
                             [form]="moveForm"
                             (submitAction)="moveImage()">Move Image</cd-submit-button>
-          <button i18n
-                  type="button"
-                  class="btn btn-sm btn-default"
-                  (click)="modalRef.hide()">Cancel</button>
+          <cd-back-button [back]="modalRef.hide"
+                          name="Cancel"
+                          i18n-name>
+          </cd-back-button>
         </div>
       </div>
     </form>
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 dc81cf1c4a799..b8b27911cf097 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,10 +39,10 @@
           <cd-submit-button [form]="purgeForm"
                             (submitAction)="purge()"
                             i18n>Purge Trash</cd-submit-button>
-          <button i18n
-                  type="button"
-                  class="btn btn-sm btn-default"
-                  (click)="modalRef.hide()">Cancel</button>
+          <cd-back-button [back]="modalRef.hide"
+                          name="Cancel"
+                          i18n-name>
+          </cd-back-button>
         </div>
       </div>
     </form>
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 dc862aa6194ff..3f83e64fd8caf 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
@@ -38,10 +38,10 @@
           <cd-submit-button [form]="restoreForm"
                             (submitAction)="restore()"
                             i18n>Restore Image</cd-submit-button>
-          <button i18n
-                  type="button"
-                  class="btn btn-sm btn-default"
-                  (click)="modalRef.hide()">Cancel</button>
+          <cd-back-button [back]="modalRef.hide"
+                          name="Cancel"
+                          i18n-name>
+          </cd-back-button>
         </div>
       </div>
     </form>
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 faa90d381a510..a32fb35151e1b 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
@@ -153,10 +153,7 @@
                             (submitAction)="submit()">
             <span i18n>Save</span>
           </cd-submit-button>
-          <button type="button"
-                  class="btn btn-sm btn-default"
-                  routerLink="/configuration"
-                  i18n>Back</button>
+          <cd-back-button></cd-back-button>
         </div>
       </div>
     </div>
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 b0bedb1b6dfaa..59e2388593fa7 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
@@ -32,10 +32,10 @@
           <cd-submit-button (submitAction)="submitAction()"
                             [form]="osdFlagsForm"
                             i18n>Submit</cd-submit-button>
-
-          <button class="btn btn-link btn-sm"
-                  (click)="bsModalRef.hide()"
-                  i18n>Cancel</button>
+          <cd-back-button [back]="bsModalRef.hide"
+                          name="Cancel"
+                          i18n-name>
+          </cd-back-button>
         </div>
       </div>
     </form>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.spec.ts
index b74f80f1853c2..00583a014e877 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.spec.ts
@@ -1,6 +1,7 @@
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import * as _ from 'lodash';
 import { ToastModule } from 'ng2-toastr';
@@ -30,6 +31,7 @@ describe('OsdFlagsModalComponent', () => {
       ModalModule.forRoot(),
       SharedModule,
       HttpClientTestingModule,
+      RouterTestingModule,
       ToastModule.forRoot()
     ],
     declarations: [OsdFlagsModalComponent],
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 4429882b78cc7..fb18166890ff1 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
@@ -85,10 +85,10 @@
           <cd-submit-button (submitAction)="submitAction()"
                             [form]="osdRecvSpeedForm"
                             i18n>Submit</cd-submit-button>
-
-          <button class="btn btn-link btn-sm"
-                  (click)="bsModalRef.hide()"
-                  i18n>Cancel</button>
+          <cd-back-button [back]="bsModalRef.hide"
+                          name="Cancel"
+                          i18n-name>
+          </cd-back-button>
         </div>
       </div>
     </form>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.spec.ts
index efee6abe23d13..ee3ba222979af 100755
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.spec.ts
@@ -1,6 +1,7 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import * as _ from 'lodash';
 import { ToastModule } from 'ng2-toastr';
@@ -19,6 +20,7 @@ describe('OsdRecvSpeedModalComponent', () => {
       HttpClientTestingModule,
       ModalModule.forRoot(),
       ReactiveFormsModule,
+      RouterTestingModule,
       SharedModule,
       ToastModule.forRoot()
     ],
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 5e6d9851d8c19..7d9e28eb428b6 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
@@ -28,10 +28,10 @@
                           [form]="reweightForm"
                           [disabled]="reweightForm.invalid"
                           i18n>Reweight</cd-submit-button>
-
-        <button class="btn btn-link btn-sm"
-                (click)="bsModalRef.hide()"
-                i18n>Cancel</button>
+        <cd-back-button [back]="bsModalRef.hide"
+                        name="Cancel"
+                        i18n-name>
+        </cd-back-button>
       </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 9ffc34ead1295..78c3860c5e39b 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,12 +1,14 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { of } from 'rxjs';
 
 import { configureTestBed, i18nProviders } from '../../../../../testing/unit-test-helper';
 import { OsdService } from '../../../../shared/api/osd.service';
+import { BackButtonComponent } from '../../../../shared/components/back-button/back-button.component';
 import { ModalComponent } from '../../../../shared/components/modal/modal.component';
 import { SubmitButtonComponent } from '../../../../shared/components/submit-button/submit-button.component';
 import { CdFormBuilder } from '../../../../shared/forms/cd-form-builder';
@@ -17,8 +19,13 @@ describe('OsdReweightModalComponent', () => {
   let fixture: ComponentFixture<OsdReweightModalComponent>;
 
   configureTestBed({
-    imports: [ReactiveFormsModule, HttpClientTestingModule],
-    declarations: [OsdReweightModalComponent, ModalComponent, SubmitButtonComponent],
+    imports: [ReactiveFormsModule, HttpClientTestingModule, RouterTestingModule],
+    declarations: [
+      OsdReweightModalComponent,
+      ModalComponent,
+      SubmitButtonComponent,
+      BackButtonComponent
+    ],
     providers: [OsdService, BsModalRef, CdFormBuilder, i18nProviders]
   });
 
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 0ac55c1919129..ba05c97515bd5 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
@@ -19,10 +19,10 @@
         <cd-submit-button (submitAction)="scrub()"
                           [form]="scrubForm"
                           i18n>Submit</cd-submit-button>
-
-        <button class="btn btn-link btn-sm"
-                (click)="bsModalRef.hide()"
-                i18n>Cancel</button>
+        <cd-back-button [back]="bsModalRef.hide"
+                        name="Cancel"
+                        i18n-name>
+        </cd-back-button>
       </div>
     </form>
   </ng-container>
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 d67ddd7cf6292..b93de70af50a0 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
@@ -514,10 +514,7 @@
                             (submitAction)="submitAction()">
             <ng-container i18n>Submit</ng-container>
           </cd-submit-button>
-          <button type="button"
-                  class="btn btn-sm btn-default"
-                  (click)="cancelAction()"
-                  i18n>Back</button>
+          <cd-back-button></cd-back-button>
         </div>
       </div>
     </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.ts
index 128782fc96110..1e3715c733b54 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.ts
@@ -546,8 +546,4 @@ export class NfsFormComponent implements OnInit {
 
     return requestModel;
   }
-
-  cancelAction() {
-    this.router.navigate(['/nfs']);
-  }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.html
index 1fd5879aab42c..31f2eb94df014 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form.component.html
@@ -324,9 +324,9 @@
     <cd-submit-button (submitAction)="onSubmit()"
                       [form]="frm"
                       i18n>Add</cd-submit-button>
-    <button class="btn btn-sm btn-default"
-            type="button"
-            (click)="bsModalRef.hide()"
-            i18n>Close</button>
+    <cd-back-button [back]="bsModalRef.hide"
+                    name="Close"
+                    i18n-name>
+    </cd-back-button>
   </div>
 </form>
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 b54d287aaf4d1..b958e66fa6e1b 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
@@ -454,10 +454,7 @@
                             (submitAction)="submit()">
             <span i18n>{editing, select, 1 {Edit} other {Create}} pool</span>
           </cd-submit-button>
-          <button i18n
-                  type="button"
-                  class="btn btn-sm btn-default"
-                  routerLink="/pool">Back</button>
+          <cd-back-button></cd-back-button>
         </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 2d2ddf4967f12..5d172238e05ad 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
@@ -101,10 +101,7 @@
                             [form]="bucketForm">
             <ng-container i18n>{editing, select, 1 {Update} other {Add}}</ng-container>
           </cd-submit-button>
-          <button i18n
-                  type="button"
-                  class="btn btn-sm btn-default"
-                  routerLink="/rgw/bucket">Back</button>
+          <cd-back-button></cd-back-button>
         </div>
       </div>
     </div>
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 0fd9a22bf554a..2a15f3f7f3253 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
@@ -79,9 +79,9 @@
                       [form]="formGroup">
       <ng-container i18n>{editing, select, 1 {Update} other {Add}}</ng-container>
     </cd-submit-button>
-    <button class="btn btn-sm btn-default"
-            type="button"
-            (click)="bsModalRef.hide()"
-            i18n>Close</button>
+    <cd-back-button [back]="bsModalRef.hide"
+                    name="Close"
+                    i18n-name>
+    </cd-back-button>
   </div>
 </form>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-capability-modal/rgw-user-capability-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-capability-modal/rgw-user-capability-modal.component.spec.ts
index 318c8a1affc0c..c2b53d2620b13 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-capability-modal/rgw-user-capability-modal.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-capability-modal/rgw-user-capability-modal.component.spec.ts
@@ -1,9 +1,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { BsModalRef } from 'ngx-bootstrap/modal';
 
-import { configureTestBed } from '../../../../testing/unit-test-helper';
+import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
 import { SharedModule } from '../../../shared/shared.module';
 import { RgwUserCapabilityModalComponent } from './rgw-user-capability-modal.component';
 
@@ -13,8 +14,8 @@ describe('RgwUserCapabilityModalComponent', () => {
 
   configureTestBed({
     declarations: [RgwUserCapabilityModalComponent],
-    imports: [ReactiveFormsModule, SharedModule],
-    providers: [BsModalRef]
+    imports: [ReactiveFormsModule, SharedModule, RouterTestingModule],
+    providers: [BsModalRef, i18nProviders]
   });
 
   beforeEach(() => {
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 2ed89951341ea..85aabaa078371 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
@@ -592,10 +592,7 @@
                             [form]="userForm">
             <ng-container i18n>{editing, select, 1 {Update} other {Add}}</ng-container>
           </cd-submit-button>
-          <button class="btn btn-sm btn-default"
-                  type="button"
-                  routerLink="/rgw/user"
-                  i18n>Back</button>
+          <cd-back-button></cd-back-button>
         </div>
       </div>
     </div>
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 858b21b4853a7..c2b198d06ffc2 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
@@ -138,9 +138,9 @@
                       (submitAction)="onSubmit()"
                       [form]="formGroup"
                       i18n>Add</cd-submit-button>
-    <button class="btn btn-sm btn-default"
-            type="button"
-            (click)="bsModalRef.hide()"
-            i18n>Close</button>
+    <cd-back-button [back]="bsModalRef.hide"
+                    name="Close"
+                    i18n-name>
+    </cd-back-button>
   </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.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.spec.ts
index 7dd53a0404665..bf8dcdce75109 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.spec.ts
@@ -1,9 +1,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { BsModalRef } from 'ngx-bootstrap/modal';
 
-import { configureTestBed } from '../../../../testing/unit-test-helper';
+import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
 import { SharedModule } from '../../../shared/shared.module';
 import { RgwUserS3KeyModalComponent } from './rgw-user-s3-key-modal.component';
 
@@ -13,8 +14,8 @@ describe('RgwUserS3KeyModalComponent', () => {
 
   configureTestBed({
     declarations: [RgwUserS3KeyModalComponent],
-    imports: [ReactiveFormsModule, SharedModule],
-    providers: [BsModalRef]
+    imports: [ReactiveFormsModule, SharedModule, RouterTestingModule],
+    providers: [BsModalRef, i18nProviders]
   });
 
   beforeEach(() => {
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 c83bd94cce1e5..7f9c1409256b7 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
@@ -141,9 +141,9 @@
                       [form]="formGroup">
       <ng-container i18n>{editing, select, 1 {Update} other {Add}}</ng-container>
     </cd-submit-button>
-    <button class="btn btn-sm btn-default"
-            type="button"
-            (click)="bsModalRef.hide()"
-            i18n>Close</button>
+    <cd-back-button [back]="bsModalRef.hide"
+                    name="Close"
+                    i18n-name>
+    </cd-back-button>
   </div>
 </form>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.spec.ts
index 4c11f6a8f973d..a828c3d5df028 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.spec.ts
@@ -1,9 +1,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { BsModalRef } from 'ngx-bootstrap/modal';
 
-import { configureTestBed } from '../../../../testing/unit-test-helper';
+import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
 import { SharedModule } from '../../../shared/shared.module';
 import { RgwUserSubuserModalComponent } from './rgw-user-subuser-modal.component';
 
@@ -13,8 +14,8 @@ describe('RgwUserSubuserModalComponent', () => {
 
   configureTestBed({
     declarations: [RgwUserSubuserModalComponent],
-    imports: [ReactiveFormsModule, SharedModule],
-    providers: [BsModalRef]
+    imports: [ReactiveFormsModule, SharedModule, RouterTestingModule],
+    providers: [BsModalRef, i18nProviders]
   });
 
   beforeEach(() => {
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 957a1df0cb66e..236670cb76a6a 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
@@ -79,10 +79,7 @@
                             type="button"
                             (submitAction)="submit()"
                             i18n>{mode, select, editing {Update} other {Create}} Role</cd-submit-button>
-          <button i18n
-                  type="button"
-                  class="btn btn-sm btn-default"
-                  routerLink="/user-management/roles">Back</button>
+          <cd-back-button></cd-back-button>
         </div>
       </div>
     </div>
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 2b9a07e67d8a2..f35c2324122d7 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
@@ -145,10 +145,7 @@
                             type="button"
                             (submitAction)="submit()"
                             i18n>{mode, select, editing {Update} other {Create}} User</cd-submit-button>
-          <button i18n
-                  type="button"
-                  class="btn btn-sm btn-default"
-                  routerLink="/user-management/users">Back</button>
+          <cd-back-button></cd-back-button>
         </div>
       </div>
     </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/mgr-modules/telemetry/telemetry.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/mgr-modules/telemetry/telemetry.component.html
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/back-button/back-button.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/back-button/back-button.component.html
new file mode 100644
index 0000000000000..0d5e50fd505ac
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/back-button/back-button.component.html
@@ -0,0 +1,6 @@
+&nbsp;
+<button class="btn btn-sm btn-default tc_backButton"
+        (click)="back()"
+        type="button">
+  {{ name }}
+</button>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/back-button/back-button.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/back-button/back-button.component.scss
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/back-button/back-button.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/back-button/back-button.component.spec.ts
new file mode 100644
index 0000000000000..150e0567a1691
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/back-button/back-button.component.spec.ts
@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
+import { BackButtonComponent } from './back-button.component';
+
+describe('BackButtonComponent', () => {
+  let component: BackButtonComponent;
+  let fixture: ComponentFixture<BackButtonComponent>;
+
+  configureTestBed({
+    imports: [RouterTestingModule],
+    declarations: [BackButtonComponent],
+    providers: [i18nProviders]
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BackButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/back-button/back-button.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/back-button/back-button.component.ts
new file mode 100644
index 0000000000000..b052ac1ebe032
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/back-button/back-button.component.ts
@@ -0,0 +1,16 @@
+import { Location } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+import { I18n } from '@ngx-translate/i18n-polyfill';
+
+@Component({
+  selector: 'cd-back-button',
+  templateUrl: './back-button.component.html',
+  styleUrls: ['./back-button.component.scss']
+})
+export class BackButtonComponent {
+  constructor(private location: Location, private i18n: I18n) {}
+
+  @Input() name: string = this.i18n('Back');
+  @Input() back: Function = () => this.location.back();
+}
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 517c528233170..efc94139b2302 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
@@ -11,6 +11,7 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 import { DirectivesModule } from '../directives/directives.module';
 import { PipesModule } from '../pipes/pipes.module';
+import { BackButtonComponent } from './back-button/back-button.component';
 import { ConfirmationModalComponent } from './confirmation-modal/confirmation-modal.component';
 import { CriticalConfirmationModalComponent } from './critical-confirmation-modal/critical-confirmation-modal.component';
 import { ErrorPanelComponent } from './error-panel/error-panel.component';
@@ -61,6 +62,7 @@ import { WarningPanelComponent } from './warning-panel/warning-panel.component';
     LanguageSelectorComponent,
     GrafanaComponent,
     SelectComponent,
+    BackButtonComponent,
     RefreshSelectorComponent
   ],
   providers: [],
@@ -70,6 +72,7 @@ import { WarningPanelComponent } from './warning-panel/warning-panel.component';
     HelperComponent,
     SelectBadgesComponent,
     SubmitButtonComponent,
+    BackButtonComponent,
     ErrorPanelComponent,
     LoadingPanelComponent,
     InfoPanelComponent,
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 271235faed89d..707e24e84d5c8 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
@@ -15,10 +15,10 @@
                             (submitAction)="onSubmit(confirmationForm.value)">
             {{ buttonText }}
           </cd-submit-button>
-          <button i18n
-                  type="button"
-                  class="btn btn-sm btn-default"
-                  (click)="cancel()">Cancel</button>
+          <cd-back-button [back]="boundCancel"
+                          name="Cancel"
+                          i18n-name>
+          </cd-back-button>
         </div>
       </div>
     </form>
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 3af57bbe80ae7..2c1f76a1d365d 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,9 +1,11 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { BsModalRef } from 'ngx-bootstrap/modal';
 
-import { configureTestBed } from '../../../../testing/unit-test-helper';
+import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
+import { BackButtonComponent } from '../back-button/back-button.component';
 import { ModalComponent } from '../modal/modal.component';
 import { SubmitButtonComponent } from '../submit-button/submit-button.component';
 import { ConfirmationModalComponent } from './confirmation-modal.component';
@@ -13,9 +15,14 @@ describe('ConfirmationModalComponent', () => {
   let fixture: ComponentFixture<ConfirmationModalComponent>;
 
   configureTestBed({
-    declarations: [ConfirmationModalComponent, SubmitButtonComponent, ModalComponent],
-    imports: [ReactiveFormsModule],
-    providers: [BsModalRef]
+    declarations: [
+      ConfirmationModalComponent,
+      BackButtonComponent,
+      SubmitButtonComponent,
+      ModalComponent
+    ],
+    imports: [ReactiveFormsModule, RouterTestingModule],
+    providers: [BsModalRef, i18nProviders]
   });
 
   beforeEach(() => {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.ts
index c108cb40f9121..9765fed85e483 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.ts
@@ -19,6 +19,8 @@ export class ConfirmationModalComponent implements OnInit {
   bodyContext: object;
   confirmationForm: FormGroup;
 
+  boundCancel = this.cancel.bind(this);
+
   constructor(public modalRef: BsModalRef) {
     this.confirmationForm = new FormGroup({});
   }
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 716defde2b116..7f0d3d786ea3c 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
@@ -33,9 +33,10 @@
                           (submitAction)="callSubmitAction()">
           <ng-container *ngTemplateOutlet="deletionHeading"></ng-container>
         </cd-submit-button>
-        <button class="btn btn-link btn-sm"
-                (click)="hideModal()"
-                i18n>Cancel</button>
+        <cd-back-button [back]="modalRef.hide"
+                        name="Cancel"
+                        i18n-name>
+        </cd-back-button>
       </div>
     </form>
   </ng-container>
-- 
2.39.5