mgr/dashboard: cleanup behave logics

Fixes: https://tracker.ceph.com/issues/62564
Signed-off-by: Nizamudeen A <nia@redhat.com>
(cherry picked from commit 30b31083d40e0ff4ffef167775a0491cd599504d)

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/common/01-global.feature.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/common/01-global.feature.po.ts
deleted file mode 100644 (file)
index 216839d..0000000
--- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/common/01-global.feature.po.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-import { And, Given, Then, When } from 'cypress-cucumber-preprocessor/steps';
-
-import { UrlsCollection } from './urls.po';
-
-const urlsCollection = new UrlsCollection();
-
-Given('I am logged in', () => {
-  cy.login();
-});
-
-Given('I am on the {string} page', (page: string) => {
-  cy.visit(urlsCollection.pages[page].url);
-  cy.get(urlsCollection.pages[page].id).should('exist');
-});
-
-Then('I should be on the {string} page', (page: string) => {
-  cy.get(urlsCollection.pages[page].id).should('exist');
-});
-
-And('I should see a button to {string}', (button: string) => {
-  cy.get(`[aria-label="${button}"]`).should('be.visible');
-});
-
-When('I click on {string} button', (button: string) => {
-  cy.get(`[aria-label="${button}"]`).first().click();
-});
-
-// When you are clicking on an action in the table actions dropdown button
-When('I click on {string} button from the table actions', (button: string) => {
-  cy.get('.table-actions button.dropdown-toggle').first().click();
-  cy.get(`[aria-label="${button}"]`).first().click();
-});
-
-And('select options {string}', (labels: string) => {
-  if (labels) {
-    cy.get('a[data-testid=select-menu-edit]').click();
-    for (const label of labels.split(', ')) {
-      cy.get('.popover-body div.select-menu-item-content').contains(label).click();
-    }
-  }
-});
-
-And('{string} option {string}', (action: string, labels: string) => {
-  if (labels) {
-    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}`);
-      }
-    } else {
-      for (const label of labels.split(', ')) {
-        cy.contains('cd-modal .badge', new RegExp(`^${label}$`))
-          .find('.badge-remove')
-          .click();
-      }
-    }
-  }
-});
-
-/**
- * Fills in the given field using the value provided
- * @param field ID of the field that needs to be filled out.
- * @param value Value that should be filled in the field.
- */
-And('enter {string} {string} in the modal', (field: string, value: string) => {
-  cy.get('cd-modal').within(() => {
-    cy.get(`input[id=${field}]`).clear().type(value);
-  });
-});
-
-And('I click on submit button', () => {
-  cy.get('[data-cy=submitBtn]').click();
-});
-
-/**
- * Selects any row on the datatable if it matches the given name
- */
-When('I select a row {string}', (row: string) => {
-  cy.get('cd-table .search input').first().clear().type(row);
-  cy.contains(`datatable-body-row datatable-body-cell .datatable-body-cell-label`, row).click();
-});
-
-Then('I should see the modal', () => {
-  cy.get('cd-modal').should('exist');
-});
-
-Then('I should not see the modal', () => {
-  cy.get('cd-modal').should('not.exist');
-});
-
-/**
- * Some modals have an additional confirmation to be provided
- * by ticking the 'Are you sure?' box.
- */
-Then('I check the tick box in modal', () => {
-  cy.get('cd-modal .custom-control-label').click();
-});
-
-And('I confirm to {string}', (action: string) => {
-  cy.contains('cd-modal button', action).click();
-  cy.get('cd-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');
-  });
-});
-
-Then('I should see a row with {string}', (row: string) => {
-  cy.get('cd-table .search input').first().clear().type(row);
-  cy.contains(`datatable-body-row datatable-body-cell .datatable-body-cell-label`, row).should(
-    'exist'
-  );
-});
-
-Then('I should not see a row with {string}', (row: string) => {
-  cy.get('cd-table .search input').first().clear().type(row);
-  cy.contains(`datatable-body-row datatable-body-cell .datatable-body-cell-label`, row).should(
-    'not.exist'
-  );
-});
-
-Then('I should see rows with following entries', (entries) => {
-  entries.hashes().forEach((entry: any) => {
-    cy.get('cd-table .search input').first().clear().type(entry.hostname);
-    cy.contains(
-      `datatable-body-row datatable-body-cell .datatable-body-cell-label`,
-      entry.hostname
-    ).should('exist');
-  });
-});
-
-And('I should see row {string} have {string}', (row: string, options: string) => {
-  if (options) {
-    cy.get('cd-table .search input').first().clear().type(row);
-    for (const option of options.split(',')) {
-      cy.contains(
-        `datatable-body-row datatable-body-cell .datatable-body-cell-label .badge`,
-        option
-      ).should('exist');
-    }
-  }
-});
-
-And('I should see row {string} does not have {string}', (row: string, options: string) => {
-  if (options) {
-    cy.get('cd-table .search input').first().clear().type(row);
-    for (const option of options.split(',')) {
-      cy.contains(
-        `datatable-body-row datatable-body-cell .datatable-body-cell-label .badge`,
-        option
-      ).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();
-  }
-});
-
-And('select {string} {string}', (selectionName: string, option: string) => {
-  cy.get(`select[name=${selectionName}]`).select(option);
-  cy.get(`select[name=${selectionName}] option:checked`).contains(option);
-});
-
-When('I expand the row {string}', (row: string) => {
-  cy.contains('.datatable-body-row', row).first().find('.tc_expand-collapse').click();
-});
-
-And('I should see row {string} have {string} on this tab', (row: string, options: string) => {
-  if (options) {
-    cy.get('cd-table').should('exist');
-    cy.get('datatable-scroller, .empty-row');
-    cy.get('.datatable-row-detail').within(() => {
-      cy.get('cd-table .search input').first().clear().type(row);
-      for (const option of options.split(',')) {
-        cy.contains(
-          `datatable-body-row datatable-body-cell .datatable-body-cell-label span`,
-          option
-        ).should('exist');
-      }
-    });
-  }
-});
-
-/**
- * Fills in the given field using the value provided
- * @param field ID of the field that needs to be filled out.
- * @param value Value that should be filled in the field.
- */
-And('enter {string} {string}', (field: string, value: string) => {
-  cy.get('.cd-col-form').within(() => {
-    cy.get(`input[id=${field}]`).clear().type(value);
-  });
-});

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/common/forms-helper.feature.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/common/forms-helper.feature.po.ts
new file mode 100644 (file)
index 0000000..d541df3
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/common/forms-helper.feature.po.ts
@@ -0,0 +1,77 @@
+import { And, Then } from 'cypress-cucumber-preprocessor/steps';
+
+/**
+ * Fills in the given field using the value provided
+ * @param field ID of the field that needs to be filled out.
+ * @param value Value that should be filled in the field.
+ */
+And('enter {string} {string}', (field: string, value: string) => {
+  cy.get('.cd-col-form').within(() => {
+    cy.get(`input[id=${field}]`).clear().type(value);
+  });
+});
+
+/**
+ * Fills in the given field using the value provided
+ * @param field ID of the field that needs to be filled out.
+ * @param value Value that should be filled in the field.
+ */
+And('enter {string} {string} in the modal', (field: string, value: string) => {
+  cy.get('cd-modal').within(() => {
+    cy.get(`input[id=${field}]`).clear().type(value);
+  });
+});
+
+And('select options {string}', (labels: string) => {
+  if (labels) {
+    cy.get('a[data-testid=select-menu-edit]').click();
+    for (const label of labels.split(', ')) {
+      cy.get('.popover-body div.select-menu-item-content').contains(label).click();
+    }
+  }
+});
+
+And('{string} option {string}', (action: string, labels: string) => {
+  if (labels) {
+    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}`);
+      }
+    } else {
+      for (const label of labels.split(', ')) {
+        cy.contains('cd-modal .badge', new RegExp(`^${label}$`))
+          .find('.badge-remove')
+          .click();
+      }
+    }
+  }
+});
+
+And('I click on submit button', () => {
+  cy.get('[data-cy=submitBtn]').click();
+});
+
+/**
+ * Some modals have an additional confirmation to be provided
+ * by ticking the 'Are you sure?' box.
+ */
+Then('I check the tick box in modal', () => {
+  cy.get('cd-modal .custom-control-label').click();
+});
+
+And('I confirm to {string}', (action: string) => {
+  cy.contains('cd-modal button', action).click();
+  cy.get('cd-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');
+  });
+});
+
+And('select {string} {string}', (selectionName: string, option: string) => {
+  cy.get(`select[name=${selectionName}]`).select(option);
+  cy.get(`select[name=${selectionName}] option:checked`).contains(option);
+});

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/common/global.feature.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/common/global.feature.po.ts
new file mode 100644 (file)
index 0000000..c6132ae
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/common/global.feature.po.ts
@@ -0,0 +1,40 @@
+import { And, Given, Then, When } from 'cypress-cucumber-preprocessor/steps';
+
+import { UrlsCollection } from './urls.po';
+
+const urlsCollection = new UrlsCollection();
+
+Given('I am logged in', () => {
+  cy.login();
+});
+
+Given('I am on the {string} page', (page: string) => {
+  cy.visit(urlsCollection.pages[page].url);
+  cy.get(urlsCollection.pages[page].id).should('exist');
+});
+
+Then('I should be on the {string} page', (page: string) => {
+  cy.get(urlsCollection.pages[page].id).should('exist');
+});
+
+And('I should see a button to {string}', (button: string) => {
+  cy.get(`[aria-label="${button}"]`).should('be.visible');
+});
+
+When('I click on {string} button', (button: string) => {
+  cy.get(`[aria-label="${button}"]`).first().click();
+});
+
+Then('I should see the modal', () => {
+  cy.get('cd-modal').should('exist');
+});
+
+Then('I should not see the modal', () => {
+  cy.get('cd-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();
+  }
+});

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/common/table-helper.feature.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/common/table-helper.feature.po.ts
new file mode 100644 (file)
index 0000000..82a2c7c
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/common/table-helper.feature.po.ts
@@ -0,0 +1,135 @@
+import { And, Then, When } from 'cypress-cucumber-preprocessor/steps';
+
+// When you are clicking on an action in the table actions dropdown button
+When('I click on {string} button from the table actions', (button: string) => {
+  cy.get('.table-actions button.dropdown-toggle').first().click();
+  cy.get(`[aria-label="${button}"]`).first().click();
+});
+
+// When you are clicking on an action inside the expanded table row
+When('I click on {string} button from the expanded row', (button: string) => {
+  cy.get('.datatable-row-detail').within(() => {
+    cy.get('.table-actions button.dropdown-toggle').first().click();
+    cy.get(`[aria-label="${button}"]`).first().click();
+  });
+});
+
+When('I click on {string} button from the table actions in the expanded row', (button: string) => {
+  cy.get('.datatable-row-detail').within(() => {
+    cy.get('.table-actions button.dropdown-toggle').first().click();
+    cy.get(`[aria-label="${button}"]`).first().click();
+  });
+});
+
+When('I expand the row {string}', (row: string) => {
+  cy.contains('.datatable-body-row', row).first().find('.tc_expand-collapse').click();
+});
+
+/**
+ * Selects any row on the datatable if it matches the given name
+ */
+When('I select a row {string}', (row: string) => {
+  cy.get('cd-table .search input').first().clear().type(row);
+  cy.contains(`datatable-body-row datatable-body-cell .datatable-body-cell-label`, row).click();
+});
+
+When('I select a row {string} in the expanded row', (row: string) => {
+  cy.get('.datatable-row-detail').within(() => {
+    cy.get('cd-table .search input').first().clear().type(row);
+    cy.contains(`datatable-body-row datatable-body-cell .datatable-body-cell-label`, row).click();
+  });
+});
+
+Then('I should see a row with {string}', (row: string) => {
+  cy.get('cd-table .search input').first().clear().type(row);
+  cy.contains(`datatable-body-row datatable-body-cell .datatable-body-cell-label`, row).should(
+    'exist'
+  );
+});
+
+Then('I should not see a row with {string}', (row: string) => {
+  cy.get('cd-table .search input').first().clear().type(row);
+  cy.contains(`datatable-body-row datatable-body-cell .datatable-body-cell-label`, row).should(
+    'not.exist'
+  );
+});
+
+Then('I should not see a row with {string} in the expanded row', (row: string) => {
+  cy.get('.datatable-row-detail').within(() => {
+    cy.get('cd-table .search input').first().clear().type(row);
+    cy.contains(`datatable-body-row datatable-body-cell .datatable-body-cell-label`, row).should(
+      'not.exist'
+    );
+  });
+});
+
+Then('I should see rows with following entries', (entries) => {
+  entries.hashes().forEach((entry: any) => {
+    cy.get('cd-table .search input').first().clear().type(entry.hostname);
+    cy.contains(
+      `datatable-body-row datatable-body-cell .datatable-body-cell-label`,
+      entry.hostname
+    ).should('exist');
+  });
+});
+
+And('I should see row {string} have {string}', (row: string, options: string) => {
+  if (options) {
+    cy.get('cd-table .search input').first().clear().type(row);
+    for (const option of options.split(',')) {
+      cy.contains(
+        `datatable-body-row datatable-body-cell .datatable-body-cell-label .badge`,
+        option
+      ).should('exist');
+    }
+  }
+});
+
+And('I should see row {string} of the expanded row to have a usage bar', (row: string) => {
+  cy.get('.datatable-row-detail').within(() => {
+    cy.get('cd-table .search input').first().clear().type(row);
+    cy.contains(`datatable-body-row datatable-body-cell .datatable-body-cell-label`, row).should(
+      'exist'
+    );
+    cy.get('.datatable-body-row .datatable-body-cell .datatable-body-cell-label .progress').should(
+      'exist'
+    );
+  });
+});
+
+And('I should see row {string} does not have {string}', (row: string, options: string) => {
+  if (options) {
+    cy.get('cd-table .search input').first().clear().type(row);
+    for (const option of options.split(',')) {
+      cy.contains(
+        `datatable-body-row datatable-body-cell .datatable-body-cell-label .badge`,
+        option
+      ).should('not.exist');
+    }
+  }
+});
+
+Then('I should see a row with {string} in the expanded row', (row: string) => {
+  cy.get('.datatable-row-detail').within(() => {
+    cy.get('cd-table .search input').first().clear().type(row);
+    cy.contains(`datatable-body-row datatable-body-cell .datatable-body-cell-label`, row).should(
+      'exist'
+    );
+  });
+});
+
+And('I should see row {string} have {string} on this tab', (row: string, options: string) => {
+  if (options) {
+    cy.get('cd-table').should('exist');
+    cy.get('datatable-scroller, .empty-row');
+    cy.get('.datatable-row-detail').within(() => {
+      cy.get('cd-table .search input').first().clear().type(row);
+      for (const option of options.split(',')) {
+        cy.contains(
+          `datatable-body-row datatable-body-cell .datatable-body-cell-label span`,
+          option
+        ).should('exist');
+      }
+    });
+  }
+});