Merge branch 'improvement/replace-form-components' into q/124.0

Author: bert-e

shell-ui/package-lock.json

@@ -50,7 +50,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@scality/core-ui": "github:scality/core-ui#v0.46.0",
+    "@scality/core-ui": "github:scality/core-ui#v0.55.0",
     "@scality/module-federation": "github:scality/module-federation.git#1.1.0",
     "canvas": "^2.9.3",
     "oidc-client": "^1.11.3",
@@ -70,6 +70,7 @@
     "react-to-webcomponent": "^1.5.1",
     "react-virtualized": "^9.22.3",
     "styled-components": "^5.2.1",
+    "styled-system": "^5.1.5",
     "vega": "^5.17.3",
     "vega-embed": "^6.0.0",
     "vega-lite": "^5.0.0",

shell-ui/package.json

@@ -105,6 +105,11 @@ module.exports = {
           eager: true,
           requiredVersion: deps['styled-components'],
         },
+        'styled-system': {
+          singleton: true,
+          eager: true,
+          requiredVersion: deps['styled-system'],
+        },
         'react-dom': {
           singleton: true,
           eager: true,

shell-ui/webpack.common.js

@@ -1,4 +1,5 @@
 import { And, Then, When } from 'cypress-cucumber-preprocessor/steps';
+import '@testing-library/cypress/add-commands';
 
 And('I am on the volume creation page', () => {
   cy.visit('/volumes');
@@ -21,14 +22,23 @@ When('I fill out the volume creation form using:', (dataTable) => {
   cy.get('[data-cy=add-volume-labels-button]').click();
 
   // node name
-  cy.get('.sc-select').eq(0).click();
-  cy.get('.sc-select__menu').eq(0).click();
-
-  cy.get('.sc-select').eq(1).click();
-  cy.get('.sc-select__menu').find('[data-cy=storageClass-metalk8s]').click();
-
-  cy.get('.sc-select').eq(2).click();
-  cy.get('.sc-select__menu').find(`[data-cy="type-${volumeType}"]`).click();
+  cy.findByText(/node \*/i)
+    .closest('label')
+    .invoke('attr', 'for')
+    .then((htmlFor) => cy.get(`#${htmlFor}`).click());
+  cy.findAllByRole('option').then(options => options[0].click());
+
+  cy.findByText(/storage class \*/i)
+    .closest('label')
+    .invoke('attr', 'for')
+    .then((htmlFor) => cy.get(`#${htmlFor}`).click());
+  cy.findByRole('option', { name: new RegExp(`metalk8s`, 'i') }).click();
+
+  cy.findByText(/type \*/i)
+    .closest('label')
+    .invoke('attr', 'for')
+    .then((htmlFor) => cy.get(`#${htmlFor}`).click());
+  cy.findByRole('option', { name: new RegExp(`${volumeType}`, 'i') }).click();
 
   cy.get('input[name=sizeInput]').type(volumeSize);
 });

ui/cypress/integration/e2e/Volumes/steps.js

@@ -18,16 +18,16 @@ describe('the create button when creating sparseloop volume', () => {
   });
 
   it('should be disabled before adding the valid label', () => {
-    cy.findByPlaceholderText(/Enter label name/i).type(VOLUME_LABEL_NAME);
-    cy.findByPlaceholderText(/Enter label value/i).type(VOLUME_LABEL_VALUE);
+    cy.findByPlaceholderText(/Example: name/i).type(VOLUME_LABEL_NAME);
+    cy.findByPlaceholderText(/Example: value/i).type(VOLUME_LABEL_VALUE);
 
     cy.findByRole('button', { name: /create/i }).should('be.disabled');
     cy.findByRole('button', { name: /add/i }).should('be.enabled');
   });
 
   it('should be disabled as well as the Add button if labelName is not valid', () => {
-    cy.findByPlaceholderText(/Enter label name/i).type(VOLUME_LABEL_INVALID);
-    cy.findByPlaceholderText(/Enter label value/i).type(VOLUME_LABEL_VALUE);
+    cy.findByPlaceholderText(/Example: name/i).type(VOLUME_LABEL_INVALID);
+    cy.findByPlaceholderText(/Example: value/i).type(VOLUME_LABEL_VALUE);
 
     cy.findByRole('button', { name: /create/i }).should('be.disabled');
     cy.findByRole('button', { name: /add/i }).should('be.disabled');

ui/cypress/integration/volume/volume_creation_form.spec.js

@@ -262,22 +262,27 @@ const VOLUME_SIZE = '1 GiB';
 Cypress.Commands.add('fillVolumeCreationForm', (volume_type) => {
   // The following steps are to fill the required fields of create volume form
   cy.get('input[name=name]').type(VOLUME_NAME);
-  cy.findByText(/node\*/i)
-    .next('.sc-input-wrapper')
-    .click();
 
-  cy.get('.sc-select__menu').find(`[data-cy=node-${NODE_NAME}]`).click();
-  cy.findByText(/storage class\*/i)
-    .next('.sc-input-wrapper')
-    .click();
-  /* we use `data-cy` is because the name of storageClass may display in both the select list and selected item, 
-     so we must use unique selector to make sure to choose the item in the list. */
-  cy.get('.sc-select__menu')
-    .find(`[data-cy=storageClass-${STORAGECLASS}]`)
-    .click();
-  cy.findByText(/type\*/i)
-    .next('.sc-input-wrapper')
-    .click();
-  cy.get('.sc-select__menu').find(`[data-cy="type-${volume_type}"]`).click();
+  cy.findByText(/node \*/i)
+    .closest('label')
+    .invoke('attr', 'for')
+    .then((htmlFor) => cy.get(`#${htmlFor}`).click());
+
+  cy.findByRole('option', {name: new RegExp(`${NODE_NAME}`, 'i')}).click();
+
+  cy.findByText(/storage class \*/i)
+    .closest('label')
+    .invoke('attr', 'for')
+    .then((htmlFor) => cy.get(`#${htmlFor}`).click());
+  
+  cy.findByRole('option', {name: new RegExp(`${STORAGECLASS}`, 'i')}).click();
+     
+  cy.findByText(/type \*/i)
+    .closest('label')
+    .invoke('attr', 'for')
+    .then((htmlFor) => cy.get(`#${htmlFor}`).click());
+  
+  cy.findByRole('option', {name: new RegExp(`${volume_type}`, 'i')}).click();
+  
   cy.get('input[name=sizeInput]').type(VOLUME_SIZE);
 });