mgr/dashboard: fix UI modal issues

- Fix bs-modal getting hidden behind navbar
- Reuse the project name for tab title
- Readonly user shows an empty space in the administration dropdown
- Physical Disks Identify modal not opening up
   - add e2e in cephadm to make sure the modal always comes up
- Primary action doesn't need to be displayed for the read-only user

Fixes: https://tracker.ceph.com/issues/67547
Signed-off-by: Nizamudeen A <nia@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/inventory.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/inventory.po.ts
index 5a9abdc036c915d2cd651f2e7adf127c3abb25a4..3da482cfe9095eeb8a15be8bb3b997cd06e41967 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/inventory.po.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/inventory.po.ts
@@ -10,13 +10,13 @@ export class InventoryPageHelper extends PageHelper {
   identify() {
     // Nothing we can do, just verify the form is there
     this.getFirstTableCell().click();
-    cy.contains('cd-table-actions button', 'Identify').click();
-    cy.get('cd-modal').within(() => {
+    cy.contains('[data-testid="primary-action"]', 'Identify').click();
+    cy.get('cds-modal').within(() => {
       cy.get('#duration').select('15 minutes');
       cy.get('#duration').select('10 minutes');
       cy.get('cd-back-button').click();
     });
-    cy.get('cd-modal').should('not.exist');
+    cy.get('cds-modal').should('not.exist');
     cy.get(`${this.pages.index.id}`);
   }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/11-inventory.e2e-spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/11-inventory.e2e-spec.ts
new file mode 100644 (file)
index 0000000..0397a33
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/11-inventory.e2e-spec.ts
@@ -0,0 +1,14 @@
+import { InventoryPageHelper } from '../../cluster/inventory.po';
+
+describe('Physical Disks page', () => {
+  const inventory = new InventoryPageHelper();
+
+  beforeEach(() => {
+    cy.login();
+    inventory.navigateTo();
+  });
+
+  it('should identify device', () => {
+    inventory.identify();
+  });
+});

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/inventory/inventory-devices/inventory-devices.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/inventory/inventory-devices/inventory-devices.component.ts
index 0ef0449c48126dfd762e57b02b3b3ca5970ef278..b377b28f29349663b42118560cb281b80ca03eac 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/inventory/inventory-devices/inventory-devices.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/inventory/inventory-devices/inventory-devices.component.ts
@@ -27,9 +27,9 @@ import { OrchestratorStatus } from '~/app/shared/models/orchestrator.interface';
 import { Permission } from '~/app/shared/models/permissions';
 import { DimlessBinaryPipe } from '~/app/shared/pipes/dimless-binary.pipe';
 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
-import { ModalService } from '~/app/shared/services/modal.service';
 import { NotificationService } from '~/app/shared/services/notification.service';
 import { InventoryDevice } from './inventory-device.model';
+import { ModalCdsService } from '~/app/shared/services/modal-cds.service';
 
 @Component({
   selector: 'cd-inventory-devices',
@@ -84,7 +84,7 @@ export class InventoryDevicesComponent implements OnInit, OnDestroy {
   constructor(
     private authStorageService: AuthStorageService,
     private dimlessBinary: DimlessBinaryPipe,
-    private modalService: ModalService,
+    private modalService: ModalCdsService,
     private notificationService: NotificationService,
     private orchService: OrchestratorService,
     private hostService: HostService

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html
index 8a96de0a0e18d95d51d54c498003ceefe0c5df48..e0d508172feb8db2290719759eb785be6b595308 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html
@@ -1,14 +1,14 @@
 <cds-overflow-menu [customTrigger]="customTrigger"
                    [flip]="true">
-  <li class="cds--overflow-menu-options__option mb-2">
-    <button *ngIf="userPermission.read"
-            routerLink="/user-management"
+  <li class="cds--overflow-menu-options__option mb-2"
+      *ngIf="userPermission.read">
+    <button routerLink="/user-management"
             class="cds--overflow-menu-options__btn"
             i18n>User management</button>
   </li>
-  <li class="cds--overflow-menu-options__option mb-2">
-    <button *ngIf="configOptPermission.read"
-            routerLink="/telemetry"
+  <li class="cds--overflow-menu-options__option mb-2"
+      *ngIf="configOptPermission.read">
+    <button routerLink="/telemetry"
             class="cds--overflow-menu-options__btn"
             i18n>Telemetry configuration</button>
   </li>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.spec.ts
index b92b2ae497eb3756185d8d7fa5844b1708e6376f..688c51b37090dd0ac8deb63b5770270c8fb367d5 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.spec.ts
@@ -142,7 +142,7 @@ describe('BreadcrumbsComponent', () => {
       router.navigateByUrl('');
     });
     tick();
-    expect(titleService.getTitle()).toEqual('Ceph');
+    expect(titleService.getTitle()).toEqual('Ceph Dashboard');
   }));
 
   it('should display no breadcrumbs in page title when a page is not found', fakeAsync(() => {
@@ -150,7 +150,7 @@ describe('BreadcrumbsComponent', () => {
       router.navigateByUrl('/error');
     });
     tick();
-    expect(titleService.getTitle()).toEqual('Ceph');
+    expect(titleService.getTitle()).toEqual('Ceph Dashboard');
   }));
 
   it('should display 2 breadcrumbs in page title when navigating to hosts', fakeAsync(() => {
@@ -158,7 +158,7 @@ describe('BreadcrumbsComponent', () => {
       router.navigateByUrl('/hosts');
     });
     tick();
-    expect(titleService.getTitle()).toEqual('Ceph: Cluster > Hosts');
+    expect(titleService.getTitle()).toEqual('Ceph Dashboard: Cluster > Hosts');
   }));
 
   it('should display 3 breadcrumbs in page title when navigating to RBD Add', fakeAsync(() => {
@@ -166,6 +166,6 @@ describe('BreadcrumbsComponent', () => {
       router.navigateByUrl('/block/rbd/add');
     });
     tick();
-    expect(titleService.getTitle()).toEqual('Ceph: Block > Images > Add');
+    expect(titleService.getTitle()).toEqual('Ceph Dashboard: Block > Images > Add');
   }));
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.ts
index 82d69fbf5d1f5fe4c5d36f97e1605c4acb943b78..cae2341fe6f4d0a644c1c189e25d14aa48f815bf 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.ts
@@ -28,6 +28,7 @@ import { ActivatedRouteSnapshot, NavigationEnd, NavigationStart, Router } from '
 
 import { concat, from, Observable, of, Subscription } from 'rxjs';
 import { distinct, filter, first, mergeMap, toArray } from 'rxjs/operators';
+import { AppConstants } from '~/app/shared/constants/app.constants';
 
 import { BreadcrumbsResolver, IBreadcrumb } from '~/app/shared/models/breadcrumbs';
 
@@ -149,9 +150,9 @@ export class BreadcrumbsComponent implements OnDestroy {
       })
       .join(' > ');
     if (currentLocation.length > 0) {
-      return `Ceph: ${currentLocation}`;
+      return `${AppConstants.projectName}: ${currentLocation}`;
     } else {
-      return 'Ceph';
+      return AppConstants.projectName;
     }
   }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html
index c98ef5861156d82534468c5d14abde7cb5f7820d..163890abf6bb0fb86972757f8f0ff6d88c7b406f 100755 (executable)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html
@@ -61,6 +61,7 @@
           <cds-select *ngIf="field.type === 'select'"
                       [label]="field.label"
                       [for]="field.name"
+                      [id]="field.name"
                       [formControlName]="field.name"
                       [options]="field?.typeConfig?.options"
                       [placeholder]="field?.typeConfig?.placeholder"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
index 386c2850cf30e27b9f73bf88e91cbefa09998c70..41318cbc8989419a89c7a7114ce75ede66678a56 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngIf="!dropDownOnly; else dropDownOnlyTpl">
-  <button *ngIf="currentAction"
+  <button *ngIf="currentAction && tableActions.length > 0"
           type="button"
           [cdsButton]="currentAction.buttonKind"
           title="{{ useDisableDesc(currentAction) }}"

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss
index 1bc3bb3a48671139d1c32a6a2e62da2316bb8dd1..683abc7a237f613c52645ab703ea9aa35a3934c8 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss
@@ -53,12 +53,22 @@
   @extend .cd-col-form-input;
 }
 
+// Until all the modals are converted to carbon
+// need to keep this so that modals won't get hidden
+// behind nav bar
+ngb-modal-window {
+  .modal-dialog {
+    margin-top: 3rem;
+  }
+}
+
 cd-modal {
   .modal {
     /* stylelint-disable */
     background-color: rgba(0, 0, 0, 0.4);
     /* stylelint-enable */
     display: block;
+    margin-top: 3rem;
   }
 
   .modal-dialog {