]> git-server-git.apps.pok.os.sepia.ceph.com Git - ceph.git/commitdiff
mgr/dashboard: add form button panel 37994/head
authorTatjana Dehler <tdehler@suse.com>
Fri, 30 Oct 2020 11:39:32 +0000 (12:39 +0100)
committerTatjana Dehler <tdehler@suse.com>
Mon, 23 Nov 2020 09:49:22 +0000 (10:49 +0100)
Fixes: https://tracker.ceph.com/issues/48016
Signed-off-by: Tatjana Dehler <tdehler@suse.com>
79 files changed:
src/pybind/mgr/dashboard/frontend/cypress/integration/block/images.po.ts
src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/configuration.po.ts
src/pybind/mgr/dashboard/frontend/cypress/integration/ui/role-mgmt.po.ts
src/pybind/mgr/dashboard/frontend/cypress/integration/ui/user-mgmt.po.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-iqn-settings-modal/iscsi-target-iqn-settings-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-iqn-settings-modal/iscsi-target-iqn-settings-modal.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-import-modal/bootstrap-import-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/bootstrap-import-modal/bootstrap-import-modal.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/edit-site-name-modal/edit-site-name-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/edit-site-name-modal/edit-site-name-modal.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-mode-modal/pool-edit-mode-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-mode-modal/pool-edit-mode-modal.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-peer-modal/pool-edit-peer-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-peer-modal/pool-edit-peer-modal.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-form/rbd-form.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form-modal.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-move-modal/rbd-trash-move-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-move-modal/rbd-trash-move-modal.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-purge-modal/rbd-trash-purge-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-purge-modal/rbd-trash-purge-modal.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-restore-modal/rbd-trash-restore-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-restore-modal/rbd-trash-restore-modal.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/host-form/host-form.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-creation-preview-modal/osd-creation-preview-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-modal/osd-devices-selection-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-devices-selection-modal/osd-devices-selection-modal.component.spec.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-indiv-modal/osd-flags-indiv-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-indiv-modal/osd-flags-indiv-modal.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.spec.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-pg-scrub-modal/osd-pg-scrub-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-reweight-modal/osd-reweight-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-reweight-modal/osd-reweight-modal.component.spec.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-reweight-modal/osd-reweight-modal.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-form/service-form.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.ts
src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form/nfs-form.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/crush-rule-form-modal/crush-rule-form-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/erasure-code-profile-form/erasure-code-profile-form-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-form/rgw-bucket-form.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-capability-modal/rgw-user-capability-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-s3-key-modal/rgw-user-s3-key-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-subuser-modal/rgw-user-subuser-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.html
src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-form/role-form.component.html
src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-form/user-form.component.html
src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.html
src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.spec.ts
src/pybind/mgr/dashboard/frontend/src/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component.html
src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-button-panel/form-button-panel.component.html [new file with mode: 0644]
src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-button-panel/form-button-panel.component.scss [new file with mode: 0644]
src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-button-panel/form-button-panel.component.spec.ts [new file with mode: 0644]
src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-button-panel/form-button-panel.component.ts [new file with mode: 0644]
src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html

index f744920c3cd71ab2b1eab36292219fa09b6b0a0d..bf6cbc05263b00ad3b54b685f94450238f5817dd 100644 (file)
@@ -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');
index eb160b052e11f970d0629546bba7078b5dc471be..f309120c60d6c9d87bbe6dea4725c70b39a34a4d 100644 (file)
@@ -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);
index 2cbdef39b98af50415f254ed36ab59034ca2fe59..1cc3630a463181a1727ddb203e2e8b30741781f4 100644 (file)
@@ -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');
index 5afcdf37ca52881c5f5ef95285c8a0ffa60a2611..fb2b791294432d294aa6444a58c3565cf66a1a5d 100644 (file)
@@ -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');
index f4189cc372b45c4a4faa53a475a96a21fdc0a263..c7724e9ec9a955910eb58634fd015062bebeec9c 100644 (file)
       </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>
index fd00db7c142919e2f71b15a2583a5732d8ad3cd8..68958cfaa2b01ed0bd4bc63fb079aebe5f850357 100644 (file)
@@ -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
   ) {
index 825e821144a6e79994593bf0248c7a2387d572fa..ed719e41612140e73d8ed8297f0661c03da4ea5d 100644 (file)
 
       </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>
index b3732d2f5970ddf08491aeaabd34761dde7b43ee..3c34a2b85f28d1d07e1c6e5235d94049319c9998 100644 (file)
       </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>
index 4521a0db19716de2b042c0ad8edd5550542517a0..e9c9c7d90daae3e8a2918383e58d3d027c668c2c 100644 (file)
@@ -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> = {
index 76490e1d4deae2ab7adaf174d13856d7ba3b2d2d..a5d1269f6df2817a45ab99414e7c183707ab8f8c 100644 (file)
       </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>
index 4a6ac9df9f4d65908a85248f5b3c2dc3cb223c87..36fdb9026c3a9b4e51d5d86c680bc9ad9771b242 100644 (file)
@@ -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> = {};
index 00a3745362dbf1e5fd6b6ed62268497484527d46..3770ef099a6b69d29ffb27be440a1aff67009f58 100644 (file)
       </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>
index df3cc2bee0302c2ff588a9cacedbc07be42c7878..d79096f6be6fea81ef934a762028d0f4d2ddda8e 100644 (file)
@@ -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
   ) {
index 403a5d8cd3af6f2f339191d6db73150ad340e8da..f0c91976802bec4b2ac5f9c0262b0e21434bd103 100644 (file)
       </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>
index 71c41a1267ac6db4836adfd39b471f6873973041..aa43bd0e8db75721f25883d9c4cb6421544fcfa3 100644 (file)
@@ -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
   ) {
index 98bb65c9f1ced2028ebd211f7cd74e8a3bc70a12..2e88059ba0c64544b9d2186a2d709ee877d94239 100644 (file)
       </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>
index f435e84b75f6047def12aaf1d10e9cb74b0b8b01..137e787174d7a0e545382746cf5fbf9cf182afcc 100644 (file)
@@ -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
   ) {
index 164791e996aa2f21eae2e2fc616d5e9e07e7669d..97774ebe3ffbb8fd63398fdf302aa208fb901ca9 100644 (file)
       </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>
index 83f1fe8976907e9b6abb294cf017643b0a7ad839..6569c3b24b0480c8aa43cef782e3916fc33aa3bd 100644 (file)
@@ -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
   ) {
index 91a4439b9048498cf58d38dd007a1139082a6d4c..6a12cb64f166b88a56d79d94e619b3f704f28843 100644 (file)
 
       </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>
index 613a14b533500652e55fef9a985e4af0de6dce16..debbf8643a3c2ebbae73f10efe6e20ade84ef719 100644 (file)
       </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>
index 5bca4266327bafdacbbe13fa6c8d40579752a2e0..bad32c3c554cacb949240db26b01716e285c6f81 100644 (file)
@@ -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,
index 1b58ee3610a78c9f2fa357e93507ed69866d8a3f..3b15b0aae69ec519f93526fa9ae0b0ff212dea35 100644 (file)
       </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>
index c53e79ac3df043e1a710a2e21811c2923e1d1396..b87dbfe6b6dfd2a003a2d0d7cd63ffe65058db07 100644 (file)
       </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>
index 28b82658162323a23206bb18b028a5e724e6859a..ccf381f9c8820fee5a3dabc53071f10a5253d0e1 100644 (file)
@@ -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
   ) {
index 989b69473b6a69cdc1b99af934967f5d3ef749af..4958173083b6a2625560bff6ed3e37b1e4437d15 100644 (file)
       </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>
index 3969926ef46354cccd22a6aaf433211896c0124c..e4df25d15ece467070499f8d3d1bab5da4f5dd29 100644 (file)
@@ -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
index 056ed2509ce3bd6392efddb43b8eabae186a9ecb..ab64c78285da64a4248326d9d3156253a7c7fad3 100644 (file)
       </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>
index a2eae8c1b28edfd6029095327de44ba08b7600d9..860d66cc0173b885cccf49506d7dd050766a6c43 100644 (file)
@@ -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
   ) {}
index 3df68d267b849cf7017887d7a979c363241f8788..27225e5b0e04387b3da1c1e50dcc43d632671b2d 100644 (file)
       </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>
index aef0eceb5576e75f718e779f916455f33e6079a2..18099109d5db4e162a5193e056ddfc1e6f020f4e 100644 (file)
@@ -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,
index 0fcf0cd1a5fa8b9ba03c423116e39d15d5c9ce91..0bb3fb8dbfda9bf5b7588dfa11e9a73d0ff8a099 100644 (file)
       </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>
index de235b58b6d3bb1ad12c1c3a368ad9002de050ca..89cb7b4d7ee02fe9c3ceef35f8b60ac5bbe12775 100644 (file)
         </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>
index b07cc46bb3885134bef1118661fda76df29e1f77..c40af28031e4fe8afb8f50a366d3609c1b11b2a9 100644 (file)
@@ -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,
index 3431b84d3fc8c42b0cef6a402f4f50602ba9d424..9b442dbc78dbbfbc038e3fddfb871219f520a5a7 100644 (file)
@@ -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>
index 2cbf29bb249807b4bc2db76c03720997ebaf5a86..30effc21b53e2baa84ec6dd6ed2309a2ed80b69d 100644 (file)
         </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>
index cbcabfba6f9674b6fc6b1a3e7e072d73383eb3b2..60ef65d0517c1a9b120af626d2d4f70a785272b8 100644 (file)
@@ -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);
   };
 
index 78d108d7be4ecab105e612c7b3b913ce0b5713e0..f8a10ff24de61dbadb65e8db77659cb99f40d215 100644 (file)
                 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>
index 652c9afa58b1c864bbcebb5de948ad1045dec9b4..e9e0b876f3bd896914d96c6bd5254233f838a756 100644 (file)
@@ -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
index df3a3a192643322aec973ec16ab69eba4844fb6e..2ae6460fbb7326d74d54fd39a2dcc2e6015c7fc7 100644 (file)
       </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>
index 05e61324e14ca3ae6ee6535254096920ca3380ea..640719382b42ee62ee7e0d5a8e9536812337558f 100644 (file)
@@ -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
index 998d5d9856b059a17f60f97c82a14a6788ca0e84..8907b161605e18a2d7b4b61a03d2f89cb9665b23 100644 (file)
         </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>
index b58b9c0a6f7befe2c73456e0d08c32a1055a98a6..120b320ced8a79523768f0fd85d8883cc90181eb 100644 (file)
@@ -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);
   };
 
index 59c6d81fe04d3cf71aa50c93c9be441734bc7523..841f41b575a6d9c2ddb581b8d234c7d44a579cc3 100644 (file)
         </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>
index 6b444b0ee3144851aff48108abc971e7bbd199be..6544872726ea2c0f765fd627077507c80b41600a 100755 (executable)
         </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>
index 6c41d0180aba567c4a975338ea121b6be4b9a6c3..6546e086569edd56381f1563e1ec558c0b47ff91 100755 (executable)
@@ -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,
index e19a3d8ceccc3af65ad6150e57a7aa7fb583ea22..e5aa22311f1cd8596a4026ae9bbee601c9add478 100644 (file)
       </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>
index d240f68fd34a9269bcd812c441fa579ca4087fa4..41e05021efc6a101ce379f21ce7db5c9d78b48c8 100644 (file)
@@ -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]
   });
 
index 392f32003947fc942804f0edba4d32b33e1fdbe8..d101079776e0dd8bd34230ab9004de4454e12b82 100644 (file)
@@ -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
index 386d53a9173e246bc9bc5a45d35151bbfc389de7..568c700fa69e1b6fc3c34bdbe704a8e6e77e3208 100644 (file)
       </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>
index 9a1b58160c5107b0b318b655df30b6a59b224568..b2f636708b97063c4508873a0dc94a22a7925097 100644 (file)
@@ -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
index 40dded4dbfc2b2a38380b616c9b2c4a7396415bd..ce8928f7f0266e5c7700b8dd4f3ea5ab9d3312d9 100644 (file)
 
       <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>
index b0c1798b99311d7cf68a5393d85deb687ab992b5..db89adc53690eff92ea78287b0da21530e871f93 100644 (file)
       </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>
index 5c24a9bdf1c47ab467493e34552f44765faf115c..bdd616ce9c60f9de1d8ad8e04854a4389dd1ad6c 100644 (file)
@@ -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);
   }
index 05918798d1b411afe63596dc085f8cd8137abfa7..6f9d47ce4210113032593e61280a4f85421758e7 100644 (file)
 
       <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>
index a128c6f2510f757416e00003f1a3428bf60bb334..877374967a44502f833e75049ba8e5a048421b00 100644 (file)
               <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>
           </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>
index 4b65089c6555a4872bddf326f1c4f5ad63ee5c1b..8edb7b6a927d700989040dfb0060f4d954cfa768 100644 (file)
@@ -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,
index 3f596d4008025c0b5cbbdee4c8f6c5d4fbacc9bc..42fc9675d8f7fb8b9b184972ad82e171c68b6738 100644 (file)
       </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>
index a29ac0e3342aad7186a7700da2f63e05e1143d87..7bf328df4eb720c3bdbda6c58e5310cfd8593f1b 100644 (file)
       </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>
index 4ed4025601b8e2141aef880ffc177e39ff0a270f..92cecabc91581a3b4c7792c3230919e2b1e6f621 100644 (file)
       </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>
index a91c3ca4bbe0525ce91ecdff5acd8f739c0a65b8..f62a7283feb8f2d7a26402f8c375ab705957aa68 100644 (file)
         </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>
index 07aa631bf350bcbef08317a5143c002fdf870a61..310ec3d171f55485c770d789a671c31fb870fb47 100644 (file)
 
       </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>
index 215c0cb61d013f5513971a67923beda9b737ae00..24cf4ab5f548837b68610758f7f7ae11d1cef826 100644 (file)
       </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>
index 164f6c2b3e8f91109fdadf659a084ea11419eddf..25b7bce95306b81dc5a1fd901593d1feeedad8a0 100644 (file)
       </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>
index a96a26753df2e0cad66eda147dd3a7152ab20660..0f8edcaf5ddefa5fad2a8dc6bee44d7ce09e4d4d 100644 (file)
       </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>
index 8bb3363d3219e9b08df50435c6eb05c0cf52bbc2..66c59cb3f2c62028393f5fd90765a181eb2b20b9 100644 (file)
@@ -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"
 
       </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>
index 84fc9c663f2ef3596c8d69501d4ef915cb895b8f..2dc30df52e613dfaae7a951ca3a4b446c3526af2 100755 (executable)
             *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>
index 00260011115ba5f396bc4fb2f3cea694cd0b2df5..ce395236545ecd163942dbc184112bfe73b69262 100644 (file)
 
       </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>
index 067f854cf9d8d57fb9878eec29fa7679e8cdbfb0..098b15e97af1ad27eb527e6cdf28d7dadcc5d77f 100644 (file)
 
       </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>
index cbde4f7d6552c20f177feae05c45be566def60ff..64a679a32ba1b04f1d13de18a0262060f8433d13 100644 (file)
       </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>
index cb27f473f974bc69ecbec88dc665dbd71bb36384..5defbf36a3a598ee201873d70f381f46e10ebbfd 100644 (file)
@@ -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 {}
index 6d6b5a757398e35c670bbf7864e3429f2115a372..3e0d1d29900a9e2bc3b517522fe6a181a412ff82 100644 (file)
         </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>
index d44b646ca0791585f63be988b339ae73c23f6e8d..a76c5d378ed43a6646f44498922d91917d5d5381 100644 (file)
@@ -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);
index 06b66265c2c902f568e2c2c01e5fb7ffcdedc770..29b669b141f3bf5e78f2b179f80c5779d5e57300 100644 (file)
         </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 (file)
index 0000000..bef4bb8
--- /dev/null
@@ -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 (file)
index 0000000..e69de29
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 (file)
index 0000000..b835048
--- /dev/null
@@ -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 (file)
index 0000000..7684d19
--- /dev/null
@@ -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();
+    }
+  }
+}
index 3efd823cf14e375436693f80d270cf6cf2770842..061747f113010803c26a4d87d73ce8aa43baa491 100755 (executable)
         </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>