mgr/dashboard: fixing cephadm dashboard e2e failures

the wizard component changes caused issue to the e2e, so fixing it.
It was uncaught before because of the test were unable to run due to
some lab issues.

Fixes: https://tracker.ceph.com/issues/68871
Signed-off-by: Nizamudeen A <[email protected]>

Author: nizamial09

src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/hosts.po.ts

@@ -21,7 +21,7 @@ export class HostsPageHelper extends PageHelper {
 
   add(hostname: string, exist?: boolean, maintenance?: boolean, labels: string[] = []) {
     cy.get(`${this.pages.add.id}`).within(() => {
-      cy.get('#hostname').type(hostname);
+      cy.get('#hostname').type(hostname, { force: true });
       if (maintenance) {
         cy.get('label[for=maintenance]').click();
       }
@@ -35,6 +35,7 @@ export class HostsPageHelper extends PageHelper {
     }
 
     cy.get('cd-submit-button').click();
+    cy.get('cds-modal').should('not.exist');
     // back to host list
     cy.get(`${this.pages.index.id}`);
   }

src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/osds.po.ts

@@ -50,9 +50,8 @@ export class OSDsPageHelper extends PageHelper {
 
   @PageHelper.restrictTo(pages.index.url)
   checkStatus(id: number, status: string[]) {
-    this.searchTable(`id:${id}`);
+    this.searchTable(id.toString());
     cy.wait(5 * 1000);
-    this.expectTableCount('found', 1);
     cy.get(`[cdstabledata]:nth-child(${this.columnIndex.status}) .badge`).should(($ele) => {
       const allStatus = $ele.toArray().map((v) => v.innerText);
       for (const s of status) {

src/pybind/mgr/dashboard/frontend/cypress/e2e/common/create-cluster/create-cluster.feature.po.ts

@@ -2,8 +2,8 @@ import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
 
 Given('I am on the {string} section', (page: string) => {
   cy.get('cd-wizard').within(() => {
-    cy.get('.nav-link').should('contain.text', page).first().click();
-    cy.get('.nav-link.active').should('contain.text', page);
+    cy.get('button').should('have.attr', 'title', page).first().click();
+    cy.get('.cds--assistive-text').should('contain.text', 'Current');
   });
 });
 

src/pybind/mgr/dashboard/frontend/cypress/e2e/common/forms-helper.feature.po.ts

@@ -42,16 +42,17 @@ And('select options {string}', (labels: string) => {
 
 And('{string} option {string}', (action: string, labels: string) => {
   if (labels) {
+    cy.get('cds-modal').find('input[id=labels]').click();
     if (action === 'add') {
-      cy.get('cd-modal').find('.select-menu-edit').click();
       for (const label of labels.split(', ')) {
-        cy.get('.popover-body input').type(`${label}{enter}`);
+        cy.get('input[id=labels]').clear().type(`${label}`);
+
+        cy.get('cds-dropdown-list').find('li').should('have.attr', 'title', label).click();
       }
     } else {
       for (const label of labels.split(', ')) {
-        cy.contains('cd-modal .badge', new RegExp(`^${label}$`))
-          .find('.badge-remove')
-          .click();
+        cy.get('input[id=labels]').clear().type(`${label}`);
+        cy.get('cds-dropdown-list').find('li').should('have.attr', 'title', label).click();
       }
     }
   }
@@ -84,7 +85,7 @@ And('I confirm to {string} on carbon modal', (action: string) => {
 });
 
 Then('I should see an error in {string} field', (field: string) => {
-  cy.get('cd-modal').within(() => {
+  cy.get('cds-modal').within(() => {
     cy.get(`input[id=${field}]`).should('have.class', 'ng-invalid');
   });
 });

src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/02-create-cluster-add-host.feature

@@ -12,10 +12,9 @@ Feature: Cluster expansion host addition
     Scenario Outline: Add hosts
         Given I am on the "Add Hosts" section
         When I click on "Add" button
-        And enter "hostname" "<hostname>" in the modal
-        And select options "<labels>"
+        And enter "hostname" "<hostname>" in the carbon modal
+        And "add" option "<labels>"
         And I click on "Add Host" button
-        Then I should not see the modal
         And I should see a row with "<hostname>"
         And I should see row "<hostname>" have "<labels>"
 
@@ -32,7 +31,6 @@ Feature: Cluster expansion host addition
         Then I should see the carbon modal
         And I check the tick box in carbon modal
         And I click on "Remove Host" button
-        Then I should not see the carbon modal
         And I should not see a row with "<hostname>"
 
         Examples:
@@ -43,9 +41,8 @@ Feature: Cluster expansion host addition
     Scenario: Add hosts using pattern 'ceph-node-[01-02]'
         Given I am on the "Add Hosts" section
         When I click on "Add" button
-        And enter "hostname" "ceph-node-[01-02]" in the modal
+        And enter "hostname" "ceph-node-[01-02]" in the carbon modal
         And I click on "Add Host" button
-        Then I should not see the modal
         And I should see rows with following entries
             | hostname |
             | ceph-node-01 |
@@ -55,7 +52,7 @@ Feature: Cluster expansion host addition
         Given I am on the "Add Hosts" section
         And I should see a row with "ceph-node-00"
         When I click on "Add" button
-        And enter "hostname" "ceph-node-00" in the modal
+        And enter "hostname" "ceph-node-00" in the carbon modal
         Then I should see an error in "hostname" field
 
     Scenario Outline: Add and remove labels on host

src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/03-create-cluster-create-services.e2e-spec.ts

@@ -19,7 +19,10 @@ describe('Create cluster create services page', () => {
     cy.login();
     createCluster.navigateTo();
     createCluster.createCluster();
-    cy.get('.nav-link').contains('Create Services').click();
+
+    cy.get('cd-wizard').within(() => {
+      cy.get('button').contains('Create Services').click();
+    });
   });
 
   it('should check if title contains Create Services', () => {

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

@@ -12,7 +12,9 @@ describe('Create cluster create osds page', () => {
     cy.login();
     createCluster.navigateTo();
     createCluster.createCluster();
-    cy.get('.nav-link').contains('Create OSDs').click();
+    cy.get('cd-wizard').within(() => {
+      cy.get('button').contains('Create OSDs').click();
+    });
   });
 
   it('should check if title contains Create OSDs', () => {
@@ -28,12 +30,16 @@ describe('Create cluster create osds page', () => {
         // Go to the Review section and Expand the cluster
         // because the drive group spec is only stored
         // in frontend and will be lost when refreshed
-        cy.get('.nav-link').contains('Review').click();
+        cy.get('cd-wizard').within(() => {
+          cy.get('button').contains('Review').click();
+        });
         cy.get('button[aria-label="Next"]').click();
         cy.get('cd-dashboard').should('exist');
         createCluster.navigateTo();
         createCluster.createCluster();
-        cy.get('.nav-link').contains('Create OSDs').click();
+        cy.get('cd-wizard').within(() => {
+          cy.get('button').contains('Create OSDs').click();
+        });
       }
     });
   });

src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/05-create-cluster-review.e2e-spec.ts

@@ -14,12 +14,8 @@ describe('Create Cluster Review page', () => {
     createCluster.navigateTo();
     createCluster.createCluster();
 
-    cy.get('.nav-link').contains('Review').click();
-  });
-
-  describe('navigation link test', () => {
-    it('should check if active nav-link is of Review section', () => {
-      cy.get('.nav-link.active').should('contain.text', 'Review');
+    cy.get('cd-wizard').within(() => {
+      cy.get('button').contains('Review').click();
     });
   });
 

src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/06-cluster-check.e2e-spec.ts

@@ -21,10 +21,14 @@ describe('when cluster creation is completed', () => {
 
     // Explicitly skip OSD Creation Step so that it prevents from
     // deploying OSDs to the hosts automatically.
-    cy.get('.nav-link').contains('Create OSDs').click();
+    cy.get('cd-wizard').within(() => {
+      cy.get('button').contains('Create OSDs').click();
+    });
     cy.get('button[aria-label="Skip this step"]').click();
 
-    cy.get('.nav-link').contains('Review').click();
+    cy.get('cd-wizard').within(() => {
+      cy.get('button').contains('Review').click();
+    });
     cy.get('button[aria-label="Next"]').click();
     cy.get('cd-dashboard').should('exist');
   });

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts

@@ -328,7 +328,7 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit
       const host = this.selection.first();
       const labels = new Set(resp.concat(this.hostService.predefinedLabels));
       const allLabels = Array.from(labels).map((label) => {
-        return { content: label };
+        return { content: label, selected: host['labels'].includes(label) };
       });
       this.cdsModalService.show(FormModalComponent, {
         titleText: $localize`Edit Host: ${host.hostname}`,