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 <[email protected]>

Author: nizamial09

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}`);
   }
 }

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();
+  });
+});

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

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>

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.spec.ts

@@ -142,30 +142,30 @@ 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(() => {
     fixture.ngZone.run(() => {
       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(() => {
     fixture.ngZone.run(() => {
       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(() => {
     fixture.ngZone.run(() => {
       router.navigateByUrl('/block/rbd/add');
     });
     tick();
-    expect(titleService.getTitle()).toEqual('Ceph: Block > Images > Add');
+    expect(titleService.getTitle()).toEqual('Ceph Dashboard: Block > Images > Add');
   }));
 });

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;
     }
   }
 }

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"

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) }}"

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 {