Merge pull request ceph#58239 from rhcs-dashboard/carbon-forms

mgr/dashboard: carbonize rbd forms

Reviewed-by: Ankush Behl <[email protected]>

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

@@ -18,7 +18,7 @@ describe('Images page', () => {
   after(() => {
     // Deletes images test pool
     pools.navigateTo();
-    pools.delete(poolName);
+    pools.delete(poolName, null, null, true);
     pools.navigateTo();
     pools.existTableCell(poolName, false);
   });
@@ -58,7 +58,7 @@ describe('Images page', () => {
     });
 
     it('should delete image', () => {
-      images.delete(newImageName);
+      images.delete(newImageName, null, null, true);
     });
   });
 

src/pybind/mgr/dashboard/frontend/cypress/e2e/block/images.po.ts

@@ -71,12 +71,12 @@ export class ImagesPageHelper extends PageHelper {
     cy.contains('button', 'Restore').click();
 
     // wait for pop-up to be visible (checks for title of pop-up)
-    cy.get('cd-modal #name').should('be.visible');
+    cy.get('cds-modal #name').should('be.visible');
 
     // If a new name for the image is passed, it changes the name of the image
     if (newName !== undefined) {
       // click name box and send new name
-      cy.get('cd-modal #name').clear().type(newName);
+      cy.get('cds-modal #name').clear().type(newName);
     }
 
     cy.get('[data-cy=submitBtn]').click();
@@ -95,7 +95,7 @@ export class ImagesPageHelper extends PageHelper {
     cy.contains('button', 'Purge Trash').click();
 
     // Check for visibility of modal container
-    cy.get('.modal-header').should('be.visible');
+    cy.get('cds-modal').should('be.visible');
 
     // If purging a specific pool, selects that pool if given
     if (pool !== undefined) {

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

@@ -74,7 +74,7 @@ describe('Mirroring page', () => {
           cy.get('.table-actions button.dropdown-toggle').first().click();
           cy.get('[aria-label="Import Bootstrap Token"]').click();
           cy.get('cd-bootstrap-import-modal').within(() => {
-            cy.get(`label[for=${name}]`).click();
+            cy.get(`input[name=${name}]`).click({ force: true });
             cy.get('textarea[id=token]').wait(100).type(bootstrapToken);
             cy.get('button[type=submit]').click();
           });
@@ -112,7 +112,7 @@ describe('Mirroring page', () => {
 
     afterEach(() => {
       pools.navigateTo();
-      pools.delete(poolName);
+      pools.delete(poolName, null, null, true);
     });
   });
 });

src/pybind/mgr/dashboard/frontend/cypress/e2e/block/mirroring.po.ts

@@ -25,12 +25,12 @@ export class MirroringPageHelper extends PageHelper {
     cy.contains('button', 'Edit Mode').click();
 
     // Clicks the drop down in the edit pop-up, then clicks the Update button
-    cy.get('.modal-content').should('be.visible');
+    cy.get('cds-modal').should('be.visible');
     this.selectOption('mirrorMode', option);
 
     // Clicks update button and checks if the mode has been changed
     cy.contains('button', 'Update').click();
-    cy.contains('.modal-dialog', 'Edit pool mirror mode').should('not.exist');
+    cy.contains('cds-modal').should('not.exist');
     const val = option.toLowerCase(); // used since entries in table are lower case
     this.getFirstTableCell(val).should('be.visible');
   }
@@ -39,7 +39,7 @@ export class MirroringPageHelper extends PageHelper {
   generateToken(poolName: string) {
     cy.get('[aria-label="Create Bootstrap Token"]').first().click();
     cy.get('cd-bootstrap-create-modal').within(() => {
-      cy.get(`label[for=${poolName}]`).click();
+      cy.get(`input[name=${poolName}]`).click({ force: true });
       cy.get('button[type=submit]').click();
       cy.get('textarea[id=token]').wait(200).invoke('val').as('token');
       cy.get('[aria-label="Back"]').click();

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

@@ -61,7 +61,7 @@ export class HostsPageHelper extends PageHelper {
   }
 
   remove(hostname: string) {
-    super.delete(hostname, this.columnIndex.hostname, 'hosts');
+    super.delete(hostname, this.columnIndex.hostname, 'hosts', true);
   }
 
   // Add or remove labels on a host, then verify labels in the table
@@ -113,7 +113,7 @@ export class HostsPageHelper extends PageHelper {
       this.getTableCell(this.columnIndex.hostname, hostname, true).click();
       this.clickActionButton('enter-maintenance');
 
-      cy.get('cd-modal').within(() => {
+      cy.get('cds-modal').within(() => {
         cy.contains('button', 'Continue').click();
       });
 

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

@@ -54,7 +54,7 @@ describe('Logs page', () => {
 
     it('should delete pool and check audit logs reacted', () => {
       pools.navigateTo();
-      pools.delete(poolname);
+      pools.delete(poolname, null, null, true);
       logs.checkAuditForPoolFunction(poolname, 'delete', hour, minute);
     });
   });

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

@@ -198,11 +198,11 @@ export class ServicesPageHelper extends PageHelper {
     this.clickActionButton('delete');
 
     // Confirms deletion
-    cy.get('cd-modal .custom-control-label').click();
-    cy.contains('cd-modal button', 'Delete').click();
+    cy.get('cds-modal input#confirmation_input').click({ force: true });
+    cy.contains('cds-modal button', 'Delete').click();
 
     // Wait for modal to close
-    cy.get('cd-modal').should('not.exist');
+    cy.get('cds-modal').should('not.exist');
     this.checkExist(serviceName, false);
   }
 

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

@@ -40,7 +40,7 @@ describe('Cluster Ceph Users', () => {
     });
 
     it('should delete a user', () => {
-      users.delete(entityName);
+      users.delete(entityName, null, null, true);
     });
   });
 });

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

@@ -60,11 +60,20 @@ Then('I check the tick box in modal', () => {
   cy.get('cd-modal input#confirmation').click();
 });
 
+Then('I check the tick box in carbon modal', () => {
+  cy.get('cds-modal input#confirmation_input').click({ force: true });
+});
+
 And('I confirm to {string}', (action: string) => {
   cy.contains('cd-modal button', action).click();
   cy.get('cd-modal').should('not.exist');
 });
 
+And('I confirm to {string} on carbon modal', (action: string) => {
+  cy.contains('cds-modal button', action).click();
+  cy.get('cds-modal').should('not.exist');
+});
+
 Then('I should see an error in {string} field', (field: string) => {
   cy.get('cd-modal').within(() => {
     cy.get(`input[id=${field}]`).should('have.class', 'ng-invalid');

src/pybind/mgr/dashboard/frontend/cypress/e2e/common/global.feature.po.ts

@@ -29,10 +29,20 @@ Then('I should see the modal', () => {
   cy.get('cd-modal').should('exist');
 });
 
+// @TODO: Replace with the existing (above one)
+// once carbon migration is completed
+Then('I should see the carbon modal', () => {
+  cy.get('cds-modal').should('exist');
+});
+
 Then('I should not see the modal', () => {
   cy.get('cd-modal').should('not.exist');
 });
 
+Then('I should not see the carbon modal', () => {
+  cy.get('cds-modal').should('not.exist');
+});
+
 And('I go to the {string} tab', (names: string) => {
   for (const name of names.split(', ')) {
     cy.contains('.nav.nav-tabs a', name).click();

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

@@ -143,6 +143,6 @@ And('I should see row {string} have {string} on this tab', (row: string, options
 
 Then('I should see an alert {string} in the expanded row', (alert: string) => {
   cy.get('.datatable-row-detail').within(() => {
-    cy.get('.alert-panel-text').contains(alert);
+    cy.get('.cds--actionable-notification__content').contains(alert);
   });
 });

src/pybind/mgr/dashboard/frontend/cypress/e2e/filesystems/filesystems.e2e-spec.feature

@@ -25,7 +25,7 @@ Feature: CephFS Management
         Given I am on the "cephfs" page
         And I select a row "test_cephfs"
         And I click on "Remove" button from the table actions
-        Then I should see the modal
-        And I check the tick box in modal
+        Then I should see the carbon modal
+        And I check the tick box in carbon modal
         And I click on "Remove File System" button
         Then I should not see a row with "test_cephfs"

src/pybind/mgr/dashboard/frontend/cypress/e2e/filesystems/snapshots.e2e-spec.feature

@@ -60,7 +60,7 @@ Feature: CephFS Snapshot Management
         And I go to the "Subvolumes" tab
         And I select a row "test_clone" in the expanded row
         And I click on "Remove" button from the table actions in the expanded row
-        And I check the tick box in modal
+        And I check the tick box in carbon modal
         And I click on "Remove Subvolume" button
         Then I wait for "5" seconds
         And I should not see a row with "test_clone" in the expanded row
@@ -71,7 +71,7 @@ Feature: CephFS Snapshot Management
         And I go to the "Snapshots" tab
         And I select a row "test_snapshot" in the expanded row
         And I click on "Remove" button from the table actions in the expanded row
-        And I check the tick box in modal
+        And I check the tick box in carbon modal
         And I click on "Remove Snapshot" button
         Then I should not see a row with "test_snapshot" in the expanded row
 
@@ -81,15 +81,15 @@ Feature: CephFS Snapshot Management
         And I go to the "Subvolumes" tab
         When I select a row "test_subvolume" in the expanded row
         And I click on "Remove" button from the table actions in the expanded row
-        And I check the tick box in modal
+        And I check the tick box in carbon modal
         And I click on "Remove Subvolume" button
         Then I should not see a row with "test_subvolume" in the expanded row
 
     Scenario: Remove CephFS Volume
         Given I am on the "cephfs" page
         And I select a row "test_cephfs"
         And I click on "Remove" button from the table actions
-        Then I should see the modal
-        And I check the tick box in modal
+        Then I should see the carbon modal
+        And I check the tick box in carbon modal
         And I click on "Remove File System" button
         Then I should not see a row with "test_cephfs"

src/pybind/mgr/dashboard/frontend/cypress/e2e/filesystems/subvolume-groups.e2e-spec.feature

@@ -37,15 +37,15 @@ Feature: CephFS Subvolume Group management
         And I go to the "Subvolume groups" tab
         When I select a row "test_subvolume_group" in the expanded row
         And I click on "Remove" button from the table actions in the expanded row
-        And I check the tick box in modal
+        And I check the tick box in carbon modal
         And I click on "Remove subvolume group" button
         Then I should not see a row with "test_subvolume_group" in the expanded row
 
     Scenario: Remove CephFS Volume
         Given I am on the "cephfs" page
         And I select a row "test_cephfs"
         And I click on "Remove" button from the table actions
-        Then I should see the modal
-        And I check the tick box in modal
+        Then I should see the carbon modal
+        And I check the tick box in carbon modal
         And I click on "Remove File System" button
         Then I should not see a row with "test_cephfs_edit"

src/pybind/mgr/dashboard/frontend/cypress/e2e/filesystems/subvolumes.e2e-spec.feature

@@ -37,15 +37,15 @@ Feature: CephFS Subvolume management
         And I go to the "Subvolumes" tab
         When I select a row "test_subvolume" in the expanded row
         And I click on "Remove" button from the table actions in the expanded row
-        And I check the tick box in modal
+        And I check the tick box in carbon modal
         And I click on "Remove Subvolume" button
         Then I should not see a row with "test_subvolume" in the expanded row
 
     Scenario: Remove CephFS Volume
         Given I am on the "cephfs" page
         And I select a row "test_cephfs"
         And I click on "Remove" button from the table actions
-        Then I should see the modal
-        And I check the tick box in modal
+        Then I should see the carbon modal
+        And I check the tick box in carbon modal
         And I click on "Remove File System" button
         Then I should not see a row with "test_cephfs_edit"

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

@@ -26,8 +26,8 @@ export class MultiClusterPageHelper extends PageHelper {
   disconnect(alias: string) {
     this.getFirstTableCell(alias).click();
     this.clickActionButton('disconnect');
-    cy.get('cd-modal').within(() => {
-      cy.get('#confirmation').click();
+    cy.get('cds-modal').within(() => {
+      cy.get('#confirmation_input').click({ force: true });
       cy.get('cd-submit-button').click();
     });
     cy.wait(WAIT_TIMER);

src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/01-create-cluster-welcome.feature

@@ -22,5 +22,5 @@ Feature: Cluster expansion welcome screen
         Given I am on the "welcome" page
         And I should see a button to "Skip"
         When I click on "Skip" button
-        And I confirm to "Continue"
+        And I confirm to "Continue" on carbon modal
         Then I should be on the "dashboard" page

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

@@ -29,10 +29,10 @@ Feature: Cluster expansion host addition
         And I should see a row with "<hostname>"
         When I select a row "<hostname>"
         And I click on "Remove" button from the table actions
-        Then I should see the modal
-        And I check the tick box in modal
+        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 modal
+        Then I should not see the carbon modal
         And I should not see a row with "<hostname>"
 
         Examples:

src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/10-nfs-exports.e2e-spec.ts

@@ -75,10 +75,10 @@ describe('nfsExport page', () => {
 
     it('should delete exports and bucket', () => {
       nfsExport.navigateTo('rgw_index');
-      nfsExport.delete(editPseudo);
+      nfsExport.delete(editPseudo, null, null, true);
 
       buckets.navigateTo();
-      buckets.delete(bucketName);
+      buckets.delete(bucketName, null, null, true);
     });
   });
 });

src/pybind/mgr/dashboard/frontend/cypress/e2e/page-helper.po.ts

@@ -68,7 +68,12 @@ export abstract class PageHelper {
    * Checks the active breadcrumb value.
    */
   expectBreadcrumbText(text: string) {
-    cy.get('.breadcrumb-item.active').should('have.text', text);
+    cy.get('[data-testid="active-breadcrumb-item"]')
+      .last()
+      .invoke('text')
+      .then((crumb) => {
+        expect(crumb.trim()).to.equal(text);
+      });
   }
 
   getTabs() {
@@ -106,7 +111,7 @@ export abstract class PageHelper {
    * @param option The option text (not value) to be selected.
    */
   selectOption(selectionName: string, option: string) {
-    cy.get(`select[name=${selectionName}]`).select(option);
+    cy.get(`select[id=${selectionName}]`).select(option);
     return this.expectSelectOption(selectionName, option);
   }
 
@@ -116,7 +121,7 @@ export abstract class PageHelper {
    *   be expected.
    */
   expectSelectOption(selectionName: string, option: string) {
-    return cy.get(`select[name=${selectionName}] option:checked`).contains(option);
+    return cy.get(`select[id=${selectionName}] option:checked`).contains(option);
   }
 
   getLegends() {
@@ -283,7 +288,9 @@ export abstract class PageHelper {
    * @param name The string to search in table cells.
    * @param columnIndex If provided, search string in columnIndex column.
    */
-  delete(name: string, columnIndex?: number, section?: string) {
+  // cdsModal is a temporary variable which will be removed once the carbonization
+  // is complete
+  delete(name: string, columnIndex?: number, section?: string, cdsModal = false) {
     // Selects row
     const getRow = columnIndex
       ? this.getTableCell.bind(this, columnIndex, name, true)
@@ -297,12 +304,17 @@ export abstract class PageHelper {
 
     // Convert action to SentenceCase and Confirms deletion
     const actionUpperCase = action.charAt(0).toUpperCase() + action.slice(1);
-    cy.get('cd-modal .custom-control-label').click();
-    cy.contains('cd-modal button', actionUpperCase).click();
-
-    // Wait for modal to close
-    cy.get('cd-modal').should('not.exist');
+    cy.get('input[name="confirmation"]').click({ force: true });
 
+    if (cdsModal) {
+      cy.get('cds-modal button').contains(actionUpperCase).click();
+      // Wait for modal to close
+      cy.get('cds-modal').should('not.exist');
+    } else {
+      cy.contains('cd-modal button', actionUpperCase).click();
+      // Wait for modal to close
+      cy.get('cd-modal').should('not.exist');
+    }
     // Waits for item to be removed from table
     getRow(name).should('not.exist');
   }

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

@@ -47,7 +47,7 @@ describe('Pools page', () => {
     });
 
     it('should delete a pool', () => {
-      pools.delete(poolName);
+      pools.delete(poolName, null, null, true);
     });
   });
 
@@ -65,7 +65,7 @@ describe('Pools page', () => {
     });
 
     it('should delete the pool', () => {
-      pools.delete(poolName);
+      pools.delete(poolName, null, null, true);
     });
   });
 });