Merge pull request #1107 from bipuladh/pf5

Upgrade to Patternfly 5

.github/workflows/frontend-build.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14, 16, 18.17.1]
+        node-version: [16, 18.17.1]
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3

.gitignore

@@ -10,3 +10,4 @@ plugins/**/dist
 plugins/**/.cache-loader
 plugins/**/cypress.config.ts
 yarn-error.log
+test-report.html

.vscode/settings.json

@@ -6,5 +6,6 @@
     }
   ],
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "files.insertFinalNewline": true
+  "files.insertFinalNewline": true,
+  "jest.runMode": "on-demand",
 }

analyzeTest.ts

@@ -1,7 +1,7 @@
 import * as fs from 'fs';
 
 const pluginName = process.env.PLUGIN;
-const MAX_ASSET_SIZE = 3; //3 MiB
+const MAX_ASSET_SIZE = 17; //17 MiB
 
 const getStatsFilePath = () => `./plugins/${pluginName}/dist/stats.json`;
 

cypress/views/bc.ts

@@ -226,7 +226,7 @@ export const verifyBucketClass = () => {
 
 export const deleteBucketClass = () => {
   cy.log('Deleting bucket class');
-  cy.byTestID('kebab-dropdown-toggle').click();
+  cy.byTestID('kebab-button').click();
   cy.byTestActionID('Delete Bucket Class').click();
   cy.byTestID('delete-action').click();
   cy.byTestID('item-create').should('be.visible');

cypress/views/multiple-storageclass.ts

@@ -30,7 +30,8 @@ export const addCapacity = (uid: string, scName: string) => {
   cy.byLegacyTestID('item-filter')
     .type('ocs-storagecluster-storagesystem')
     .wait(1000);
-  cy.byLegacyTestID('kebab-button').click().contains('Add Capacity').click();
+  cy.byTestID('kebab-button').click();
+  cy.contains('Add Capacity').click();
   // eslint-disable-next-line cypress/no-unnecessary-waiting
   cy.byTestID('add-cap-sc-dropdown').wait(1500).click();
   cy.contains(scName).click();

jest.config.js

@@ -6,6 +6,7 @@ const config = {
     '^@odf/shared/(.*)': '<rootDir>/packages/shared/src/$1',
     '^lodash-es$': 'lodash',
     '\\.(css|scss)$': 'identity-obj-proxy',
+    '@patternfly/react-table/deprecated*': 'identity-obj-proxy',
   },
   roots: ['<rootDir>/packages/'],
   setupFilesAfterEnv: ['<rootDir>/setupJest.ts'],
@@ -25,6 +26,15 @@ const config = {
       statements: 0,
     },
   },
+  reporters: [
+    'default',
+    [
+      './node_modules/jest-html-reporter',
+      {
+        pageTitle: 'Test Report',
+      },
+    ],
+  ],
 };
 
 module.exports = config;

locales/en/plugin__odf-console.json

@@ -68,10 +68,10 @@
   "Secure selected namespace by defining resource label expressions.": "Secure selected namespace by defining resource label expressions.",
   "Resource label": "Resource label",
   "Recipe list": "Recipe list",
-  "No recipe found": "No recipe found",
-  "Required": "Required",
   "Only recipes of the selected namespaces will appear in the list.": "Only recipes of the selected namespaces will appear in the list.",
   "Select a recipe": "Select a recipe",
+  "No recipe found": "No recipe found",
+  "Required": "Required",
   "Name": "Name",
   "{{count}} results found for {{clusterName}}_one": "{{count}} results found for {{clusterName}}",
   "{{count}} results found for {{clusterName}}_other": "{{count}} results found for {{clusterName}}",
@@ -297,8 +297,8 @@
   "PVC label selector:": "PVC label selector:",
   "Replication type: {{type}}, Interval: {{interval}}, Clusters: {{clusters}}": "Replication type: {{type}}, Interval: {{interval}}, Clusters: {{clusters}}",
   "Replication type: {{type}}, Clusters: {{clusters}}": "Replication type: {{type}}, Clusters: {{clusters}}",
-  "Status: {{status}}": "Status: {{status}}",
   "Select a policy": "Select a policy",
+  "Status: {{status}}": "Status: {{status}}",
   "Search": "Search",
   "Search input": "Search input",
   "Secondary actions": "Secondary actions",
@@ -571,7 +571,6 @@
   "Error retrieving Parameters": "Error retrieving Parameters",
   "my-storage-pool": "my-storage-pool",
   "Enable Encryption": "Enable Encryption",
-  "This is a required field": "This is a required field",
   "StorageClass encryption": "StorageClass encryption",
   "An encryption key will be generated for each PersistentVolume created using this StorageClass.": "An encryption key will be generated for each PersistentVolume created using this StorageClass.",
   "Key service": "Key service",
@@ -702,8 +701,8 @@
   "BackingStore Name": "BackingStore Name",
   "Create BackingStore": "Create BackingStore",
   "Storage platform": "Storage platform",
-  "Select a storage platform you wish to connect": "Select a storage platform you wish to connect",
   "Select external system from list": "Select external system from list",
+  "Select a storage platform you wish to connect": "Select a storage platform you wish to connect",
   "No existing StorageClass found, refer to the documentation to create a StorageClass.": "No existing StorageClass found, refer to the documentation to create a StorageClass.",
   "Backing storage type": "Backing storage type",
   "Use an existing StorageClass": "Use an existing StorageClass",
@@ -763,9 +762,9 @@
   "Enable arbiter": "Enable arbiter",
   "Stretch Cluster": "Stretch Cluster",
   "Arbiter zone": "Arbiter zone",
-  "An arbiter node will be automatically selected from this zone": "An arbiter node will be automatically selected from this zone",
   "Select an arbiter zone": "Select an arbiter zone",
   "Arbiter zone selection": "Arbiter zone selection",
+  "An arbiter node will be automatically selected from this zone": "An arbiter node will be automatically selected from this zone",
   "Connection details": "Connection details",
   "This selection is exclusive and cannot be used with other device types.": "This selection is exclusive and cannot be used with other device types.",
   "Disks on all nodes": "Disks on all nodes",
@@ -886,6 +885,7 @@
   "Connection name": "Connection name",
   "An unique name for the key management service within the project. Name must only include alphanumeric characters, \"-\", \"_\" or \".\"": "An unique name for the key management service within the project. Name must only include alphanumeric characters, \"-\", \"_\" or \".\"",
   "Service instance ID": "Service instance ID",
+  "This is a required field": "This is a required field",
   "Service API key": "Service API key",
   "Customer root key": "Customer root key",
   "IBM base URL": "IBM base URL",
@@ -908,9 +908,9 @@
   "TLS server name": "TLS server name",
   "The endpoint server name. Useful when the KMIP endpoint does not have a DNS entry.": "The endpoint server name. Useful when the KMIP endpoint does not have a DNS entry.",
   "Token": "Token",
-  "Create a secret with the token for every namespace using encrypted PVCs.": "Create a secret with the token for every namespace using encrypted PVCs.",
   "Hide token": "Hide token",
   "Reveal token": "Reveal token",
+  "Create a secret with the token for every namespace using encrypted PVCs.": "Create a secret with the token for every namespace using encrypted PVCs.",
   "Authentication method": "Authentication method",
   "authentication-method": "authentication-method",
   "Advanced settings": "Advanced settings",
@@ -954,9 +954,9 @@
   "Event log bucket": "Event log bucket",
   "Enter a bucket name": "Enter a bucket name",
   "Prefix": "Prefix",
-  "Object names starting with given prefix gets synchronised with the target bucket": "Object names starting with given prefix gets synchronised with the target bucket",
   "Enter a prefix": "Enter a prefix",
   "Log Prefix": "Log Prefix",
+  "Object names starting with given prefix gets synchronised with the target bucket": "Object names starting with given prefix gets synchronised with the target bucket",
   "The corresponding ObjectBucketClaim must be deleted first.": "The corresponding ObjectBucketClaim must be deleted first.",
   "ObjectBuckets": "ObjectBuckets",
   "Object Bucket Details": "Object Bucket Details",

package.json

@@ -27,7 +27,7 @@
     "build-mco": "NODE_ENV=production PLUGIN=mco I8N_NS=plugin__odf-multicluster-console yarn build:plugin",
     "build-client": "NODE_ENV=production PLUGIN=client I8N_NS=plugin__odf-client-console yarn build:plugin",
     "build-dev": "NODE_ENV=development PLUGIN=odf I8N_NS=plugin__odf-console yarn build:plugin",
-    "server:plugin": "yarn build:generate && I8N_NS=${I8N_NS} yarn ts-node ./node_modules/.bin/webpack serve -c ./webpack.config.ts --progress",
+    "server:plugin": "yarn build:generate && I8N_NS=${I8N_NS} yarn ts-node --stack-size=65500 ./node_modules/.bin/webpack serve -c ./webpack.config.ts --progress",
     "analyze-common": "yarn build:generate && NODE_ENV=production I8N_NS=${I8N_NS} ANALYZE_BUNDLE=true yarn ts-node ./node_modules/.bin/webpack -c ./webpack.config.ts",
     "analyze-odf": "PLUGIN=odf yarn analyze-common && PLUGIN=odf yarn ts-node ./analyzeTest.ts",
     "analyze-mco": "PLUGIN=mco yarn analyze-common && PLUGIN=mco yarn ts-node ./analyzeTest.ts",
@@ -57,25 +57,25 @@
     "dev:c": "yarn ocp-console & PLUGIN=${PLUGIN} I8N_NS=${I8N_NS} yarn server:plugin & wait"
   },
   "dependencies": {
-    "@openshift-console/dynamic-plugin-sdk": "0.0.21",
-    "@openshift-console/dynamic-plugin-sdk-internal": "0.0.12",
-    "@openshift-console/dynamic-plugin-sdk-webpack": "0.0.10",
+    "@openshift-console/dynamic-plugin-sdk": "1.0.0",
+    "@openshift-console/dynamic-plugin-sdk-internal": "1.0.0",
+    "@openshift-console/dynamic-plugin-sdk-webpack": "1.0.0",
     "@openshift-console/plugin-shared": "^0.0.1",
-    "@patternfly/patternfly": "4.103.6",
-    "@patternfly/react-charts": "^6.15.3",
-    "@patternfly/react-core": "4.267.5",
-    "@patternfly/react-icons": "^4.11.0",
-    "@patternfly/react-table": "4.104.7",
-    "@patternfly/react-tokens": "^4.12.0",
-    "@patternfly/react-topology": "^4.90.38",
-    "@types/react-dnd-html5-backend": "^3.0.2",
+    "@patternfly/patternfly": "5.0.2",
+    "@patternfly/react-charts": "7.1.0",
+    "@patternfly/react-core": "5.1.0",
+    "@patternfly/react-icons": "5.0.1",
+    "@patternfly/react-table": "5.1.0",
+    "@patternfly/react-tokens": "5.1.0",
+    "@patternfly/react-topology": "5.0.0",
     "@types/lodash-es": "^4.17.4",
+    "@types/react-dnd-html5-backend": "^3.0.2",
     "buffer": "^6.0.3",
     "cache-loader": "1.x",
+    "circular-dependency-plugin": "5.x",
+    "classnames": "^2.3.1",
     "copy-webpack-plugin": "^6.4.1",
     "css-loader": "0.28.x",
-    "classnames": "^2.3.1",
-    "circular-dependency-plugin": "5.x",
     "eslint-config-airbnb": "18.2.1",
     "file-loader": "1.x",
     "fork-ts-checker-webpack-plugin": "^7.2.13",
@@ -97,16 +97,16 @@
     "react-hook-form": "^7.42.1",
     "react-i18next": "^11.11.4",
     "react-linkify": "^0.2.2",
-    "react-redux": "^7.2.6",
+    "react-redux": "7.2.2",
     "react-router": "5.3.x",
     "react-router-dom": "5.3.x",
     "react-router-dom-v5-compat": "^6.11.2",
     "react-tagsinput": "^3.19.0",
-    "redux": "^4.0.0",
+    "redux": "4.0.1",
     "resolve-url-loader": "^5.0.0",
-    "semver": "6.x",
     "sass": "^1.55.0",
     "sass-loader": "^13.0.2",
+    "semver": "6.x",
     "style-loader": "^0.23.1",
     "thread-loader": "3.0.4",
     "ts-loader": "^9.4.1",
@@ -115,17 +115,13 @@
     "typesafe-actions": "^4.2.1",
     "typescript": "^4.8",
     "victory-core": "^35.4.4",
-    "webpack": "5.74.0",
+    "webpack": "5.75.0",
     "webpack-bundle-analyzer": "^4.6.1",
     "webpack-cli": "4.5.x",
     "yup": "^0.32.11"
   },
   "devDependencies": {
     "@cypress/webpack-preprocessor": "^5.9.1",
-    "@types/react": "16.8.13",
-    "@types/react-helmet": "^6.1.1",
-    "@types/react-router": "^5.1.20",
-    "@types/react-router-dom": "5.3.x",
     "@swc/core": "1.3.19",
     "@swc/jest": "^0.2.23",
     "@testing-library/jest-dom": "^5.16.5",
@@ -134,6 +130,10 @@
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "29.2.2",
     "@types/node": "^14.14.34",
+    "@types/react": "16.8.13",
+    "@types/react-helmet": "^6.1.1",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "5.3.x",
     "@typescript-eslint/eslint-plugin": "^5.42",
     "@typescript-eslint/parser": "^5.42",
     "comment-json": "4.x",
@@ -156,6 +156,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "29.2.2",
     "jest-environment-jsdom": "^29.2.0",
+    "jest-html-reporter": "^3.10.2",
     "jest-silent-reporter": "^0.5.0",
     "marge": "^1.0.1",
     "mocha-junit-reporter": "^2.0.0",

packages/ibm/system-connection-details.tsx

@@ -12,14 +12,14 @@ import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
 import { isValidIP } from '@odf/shared/utils';
 import { getAPIVersionForModel } from '@odf/shared/utils';
 import { k8sGet } from '@openshift-console/dynamic-plugin-sdk';
+import { Select, SelectOption } from '@patternfly/react-core/deprecated';
 import {
   FormGroup,
   TextInput,
   InputGroup,
   Button,
   Tooltip,
-  Select,
-  SelectOption,
+  InputGroupItem,
 } from '@patternfly/react-core';
 import { EyeSlashIcon, EyeIcon } from '@patternfly/react-icons';
 import { IBMFlashSystemModel } from './system-models';
@@ -58,7 +58,7 @@ export const FlashSystemConnectionDetails: React.FC<
             id="endpoint-input"
             type="text"
             value={value}
-            onChange={(newValue: string) => {
+            onChange={(_event, newValue: string) => {
               onChange(newValue);
               setFormState('endpoint', newValue);
             }}
@@ -80,7 +80,7 @@ export const FlashSystemConnectionDetails: React.FC<
             id="username-input"
             value={formState.username}
             type="text"
-            onChange={(value: string) => {
+            onChange={(_event, value: string) => {
               onChange(value);
               setFormState('username', value);
             }}
@@ -98,25 +98,29 @@ export const FlashSystemConnectionDetails: React.FC<
           fieldId: 'password-input',
         }}
         render={({ onChange, onBlur }) => (
-          <InputGroup>
-            <TextInput
-              id="password-input"
-              value={formState.password}
-              type={reveal ? 'text' : 'password'}
-              onChange={(value: string) => {
-                onChange(value);
-                setFormState('password', value);
-              }}
-              onBlur={onBlur}
-              isRequired
-            />
-            <Tooltip
-              content={reveal ? t('Hide password') : t('Reveal password')}
-            >
-              <Button variant="control" onClick={() => setReveal(!reveal)}>
-                {reveal ? <EyeSlashIcon /> : <EyeIcon />}
-              </Button>
-            </Tooltip>
+          <InputGroup translate={undefined}>
+            <InputGroupItem isFill>
+              <TextInput
+                id="password-input"
+                value={formState.password}
+                type={reveal ? 'text' : 'password'}
+                onChange={(_event, value: string) => {
+                  onChange(value);
+                  setFormState('password', value);
+                }}
+                onBlur={onBlur}
+                isRequired
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <Tooltip
+                content={reveal ? t('Hide password') : t('Reveal password')}
+              >
+                <Button variant="control" onClick={() => setReveal(!reveal)}>
+                  {reveal ? <EyeSlashIcon /> : <EyeIcon />}
+                </Button>
+              </Tooltip>
+            </InputGroupItem>
           </InputGroup>
         )}
       />
@@ -134,7 +138,7 @@ export const FlashSystemConnectionDetails: React.FC<
             id="poolname-input"
             value={formState.poolname}
             type="text"
-            onChange={(value: string) => {
+            onChange={(_event, value: string) => {
               onChange(value);
               setFormState('poolname', value);
             }}

packages/mco/components/create-dr-policy/create-dr-policy.scss

@@ -1,29 +1,29 @@
 .mco-create-data-policy {
-  margin: var(--pf-global--spacer--lg);
+  margin: var(--pf-v5-global--spacer--lg);
   max-width: 700px;
   .pf-c-form.pf-m-limit-width {
     max-width: 33rem;
   }
 }
 
 .mco-create-data-policy__action-group {
-  margin-bottom: var(--pf-global--spacer--md);
+  margin-bottom: var(--pf-v5-global--spacer--md);
 }
 
 .mco-create-data-policy__description {
-  margin-bottom: var(--pf-global--spacer--sm);
+  margin-bottom: var(--pf-v5-global--spacer--sm);
 }
 
 .mco-create-data-policy__flex {
-  margin-right: var(--pf-global--spacer--lg);
-  margin-bottom: var(--pf-global--spacer--md);
+  margin-right: var(--pf-v5-global--spacer--lg);
+  margin-bottom: var(--pf-v5-global--spacer--md);
 }
 
 .mco-create-data-policy__dropdown {
   width: 12rem;
 }
 
 .mco-create-data-policy__alert {
-  margin-bottom: var(--pf-global--spacer--xs);
-  --pf-global--FontSize--md: 0.8rem;
+  margin-bottom: var(--pf-v5-global--spacer--xs);
+  --pf-v5-global--FontSize--md: 0.8rem;
 }