mgr/dashboard: show Rename in modal header & button when renaming RBD snapshot

Fixes: https://tracker.ceph.com/issues/42762
Signed-off-by: Alfonso Martínez <almartin@redhat.com>
(cherry picked from commit fa478ce4aed66013cee10864546715b1ce8d93a1)

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 f11da878598aa233e4e5ff7a237cc28cfc278612..86a1d9bc474de5255cb611f4584bd906e8a18a06 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.html
@@ -1,6 +1,6 @@
 <div class="modal-header">
   <h4 class="modal-title pull-left"
-      i18n>{ editing, select, true {Rename} other {Create}} RBD Snapshot</h4>
+      i18n="form title|Example: Create rbdSnapshot@@formTitle">{{ action | titlecase }} {{ resource | upperFirst }}</h4>
   <button type="button"
           class="close pull-right"
           aria-label="Close"
@@ -43,7 +43,7 @@
     <div class="button-group text-right">
       <cd-submit-button [form]="snapshotForm"
                         (submitAction)="submit()"
-                        i18n>{ editing, select, true {Rename} other {Create}} Snapshot</cd-submit-button>
+                        i18n="form action button|Example: Create rbdSnapshot@@formActionButton">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
       <cd-back-button [back]="modalRef.hide"
                       name="Close"
                       i18n-name>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.spec.ts
index 1002b82f4d8dbba011c79d12a513f40e66d38893..f75cc8fbbe547df4eb2f9936c963a6878fc6aa55 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.spec.ts
@@ -9,6 +9,7 @@ import { ToastrModule } from 'ngx-toastr';
 import { configureTestBed, i18nProviders } from '../../../../testing/unit-test-helper';
 import { ApiModule } from '../../../shared/api/api.module';
 import { ComponentsModule } from '../../../shared/components/components.module';
+import { PipesModule } from '../../../shared/pipes/pipes.module';
 import { AuthStorageService } from '../../../shared/services/auth-storage.service';
 import { RbdSnapshotFormComponent } from './rbd-snapshot-form.component';
 
@@ -20,6 +21,7 @@ describe('RbdSnapshotFormComponent', () => {
     imports: [
       ReactiveFormsModule,
       ComponentsModule,
+      PipesModule,
       HttpClientTestingModule,
       ApiModule,
       ToastrModule.forRoot(),
@@ -32,10 +34,31 @@ describe('RbdSnapshotFormComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(RbdSnapshotFormComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should show "Create" text', () => {
+    fixture.detectChanges();
+
+    const header = fixture.debugElement.nativeElement.querySelector('h4');
+    expect(header.textContent).toBe('Create RBD Snapshot');
+
+    const button = fixture.debugElement.nativeElement.querySelector('cd-submit-button');
+    expect(button.textContent).toBe('Create RBD Snapshot');
+  });
+
+  it('should show "Rename" text', () => {
+    component.setEditing();
+
+    fixture.detectChanges();
+
+    const header = fixture.debugElement.nativeElement.querySelector('h4');
+    expect(header.textContent).toBe('Rename RBD Snapshot');
+
+    const button = fixture.debugElement.nativeElement.querySelector('cd-submit-button');
+    expect(button.textContent).toBe('Rename RBD Snapshot');
+  });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.ts
index b5d2a080bc507b7e5ddaeb5a7e010af1ef4da158..217a3bbee97f5ad04b5b474b7232dae06b43cb59 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-form/rbd-snapshot-form.component.ts
@@ -1,10 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
 
+import { I18n } from '@ngx-translate/i18n-polyfill';
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { Subject } from 'rxjs';
 
 import { RbdService } from '../../../shared/api/rbd.service';
+import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
 import { CdFormGroup } from '../../../shared/forms/cd-form-group';
 import { FinishedTask } from '../../../shared/models/finished-task';
 import { NotificationService } from '../../../shared/services/notification.service';
@@ -23,6 +25,8 @@ export class RbdSnapshotFormComponent implements OnInit {
   snapshotForm: CdFormGroup;
 
   editing = false;
+  action: string;
+  resource: string;
 
   public onSubmit: Subject<string>;
 
@@ -30,8 +34,12 @@ export class RbdSnapshotFormComponent implements OnInit {
     public modalRef: BsModalRef,
     private rbdService: RbdService,
     private taskManagerService: TaskManagerService,
-    private notificationService: NotificationService
+    private notificationService: NotificationService,
+    private i18n: I18n,
+    private actionLabels: ActionLabelsI18n
   ) {
+    this.action = this.actionLabels.CREATE;
+    this.resource = this.i18n('RBD Snapshot');
     this.createForm();
   }
 
@@ -59,6 +67,7 @@ export class RbdSnapshotFormComponent implements OnInit {
    */
   setEditing(editing: boolean = true) {
     this.editing = editing;
+    this.action = this.editing ? this.actionLabels.RENAME : this.actionLabels.CREATE;
   }
 
   editAction() {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.spec.ts
index 2f5c7846b983923bf155eb685ea84368ce56ebd1..81c1c0e2875aa2f96d22205c22576eadda3b5a27 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.spec.ts
@@ -27,6 +27,7 @@ import { AuthStorageService } from '../../../shared/services/auth-storage.servic
 import { NotificationService } from '../../../shared/services/notification.service';
 import { SummaryService } from '../../../shared/services/summary.service';
 import { TaskListService } from '../../../shared/services/task-list.service';
+import { RbdSnapshotFormComponent } from '../rbd-snapshot-form/rbd-snapshot-form.component';
 import { RbdSnapshotListComponent } from './rbd-snapshot-list.component';
 import { RbdSnapshotModel } from './rbd-snapshot.model';
 
@@ -185,9 +186,16 @@ describe('RbdSnapshotListComponent', () => {
     beforeEach(() => {
       component.poolName = 'pool01';
       component.rbdName = 'image01';
-      spyOn(TestBed.get(BsModalService), 'show').and.callFake((content) => {
+      spyOn(TestBed.get(BsModalService), 'show').and.callFake(() => {
         const ref = new BsModalRef();
-        ref.content = new content();
+        ref.content = new RbdSnapshotFormComponent(
+          null,
+          null,
+          null,
+          null,
+          TestBed.get(I18n),
+          TestBed.get(ActionLabelsI18n)
+        );
         ref.content.onSubmit = new Subject();
         return ref;
       });