mgr/dashboard: use border:0 for clipboard css

- Sets border-width: 0
- Completely removes the border
- More memory efficient than `border: none` which occupies some browser memory
- Higher priority in border conflicts

Signed-off-by: Afreen Misbah <[email protected]>

Author: afreen23

src/pybind/mgr/dashboard/frontend/cypress/e2e/a11y/dashboard.e2e-spec.ts

@@ -1,7 +1,7 @@
-import { DashboardPageHelper } from '../ui/dashboard.po';
+import { DashboardV3PageHelper } from '../ui/dashboard-v3.po';
 
 describe('Dashboard Main Page', { retries: 0 }, () => {
-  const dashboard = new DashboardPageHelper();
+  const dashboard = new DashboardV3PageHelper();
 
   beforeEach(() => {
     cy.login();

src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/04-osds.e2e-spec.ts

@@ -1,18 +1,12 @@
 import { OSDsPageHelper } from '../cluster/osds.po';
-import { DashboardPageHelper } from '../ui/dashboard.po';
-import { ManagerModulesPageHelper } from '../cluster/mgr-modules.po';
+import { DashboardV3PageHelper } from '../ui/dashboard-v3.po';
 
 describe('OSDs page', () => {
   const osds = new OSDsPageHelper();
-  const dashboard = new DashboardPageHelper();
-  const mgrmodules = new ManagerModulesPageHelper();
+  const dashboard = new DashboardV3PageHelper();
 
   before(() => {
     cy.login();
-    mgrmodules.navigateTo();
-    mgrmodules.navigateEdit('dashboard');
-    cy.get('#FEATURE_TOGGLE_DASHBOARD').uncheck();
-    cy.contains('button', 'Update').click();
   });
 
   beforeEach(() => {
@@ -35,9 +29,7 @@ describe('OSDs page', () => {
 
           // landing page is easier to check OSD status
           dashboard.navigateTo();
-          dashboard.infoCardBody('OSDs').should('contain.text', `${expectedCount} total`);
-          dashboard.infoCardBody('OSDs').should('contain.text', `${expectedCount} up`);
-          dashboard.infoCardBody('OSDs').should('contain.text', `${expectedCount} in`);
+          dashboard.cardRow('OSD').should('contain.text', `${expectedCount} OSDs`);
 
           cy.wait(30000);
           expect(Number(newCount)).to.be.gte(2);

src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard-v3.e2e-spec.ts

@@ -1,16 +1,10 @@
-import { ManagerModulesPageHelper } from '../cluster/mgr-modules.po';
 import { DashboardV3PageHelper } from './dashboard-v3.po';
 
 describe('Dashboard-v3 Main Page', () => {
   const dashboard = new DashboardV3PageHelper();
-  const mgrmodules = new ManagerModulesPageHelper();
 
   before(() => {
     cy.login();
-    mgrmodules.navigateTo();
-    mgrmodules.navigateEdit('dashboard');
-    cy.get('#FEATURE_TOGGLE_DASHBOARD').check();
-    cy.contains('button', 'Update').click();
   });
 
   beforeEach(() => {

src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard-v3.po.ts

@@ -17,4 +17,8 @@ export class DashboardV3PageHelper extends PageHelper {
 
     return cy.get('@cards').its(indexOrTitle);
   }
+
+  cardRow(rowName: string) {
+    return cy.get(`[data-testid=${rowName}]`);
+  }
 }

src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard.e2e-spec.ts

@@ -6,6 +6,7 @@
     <a [routerLink]="link"
        *ngIf="link && total > 0; else noLinkTitle"
        [ngPlural]="total"
+       data-testid="title"
       i18n>
         {{ total }}
       <ng-template ngPluralCase="=0">{{ title }}</ng-template>

src/pybind/mgr/dashboard/frontend/cypress/e2e/ui/dashboard.po.ts

@@ -1,5 +1,5 @@
 .clipboard-btn {
-  border: none;
+  border: 0;
   box-shadow: none;
   outline: none;
 }

src/pybind/mgr/dashboard/frontend/src/app/shared/components/card-row/card-row.component.html

@@ -4,22 +4,6 @@
  * thus reducing the final css size.
 */
 
-cd-info-card {
-  .card {
-    @extend .pb-2;
-
-    .card-body {
-      .card-title {
-        @extend .ps-2;
-      }
-
-      .card-text {
-        @extend .pt-2;
-      }
-    }
-  }
-}
-
 .btn-toolbar cd-table-actions.btn-group {
   @extend .me-2;
 }
@@ -46,42 +30,6 @@ cd-table {
   }
 }
 
-cd-health {
-  cd-info-card {
-    @extend .d-flex;
-    @extend .flex-column;
-    @extend .mb-4;
-    @extend .col-12;
-    @extend .col-sm-12;
-    @extend .col-md-6;
-    @extend .col-lg-4;
-
-    &.cd-status-card {
-      @extend .col-xl-3;
-    }
-
-    &.cd-performance-card,
-    &.cd-capacity-card {
-      @extend .col-xl;
-    }
-
-    &.cd-capacity-card {
-      @extend .col-lg-3;
-    }
-
-    &.cd-performance-card {
-      @extend .col-lg-6;
-    }
-
-    &.cd-chart-card {
-      @extend .col-md-12;
-      @extend .col-lg-6;
-      @extend .col-xl-4;
-      @extend .col-2xl-3;
-    }
-  }
-}
-
 cd-logs {
   label {
     @extend .me-2;