feat(HMS-3332): Migrate to PF5 (#365)

RHEnVision · Jan 9, 2024 · 295c472 · 295c472
1 parent f786cab
commit 295c472
Show file tree

Hide file tree

Showing 29 changed files with 13,441 additions and 13,476 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -56,10 +56,6 @@ module.exports = {
           preventFullImport: false,
           skipDefaultConversion: true,
         },
-        '@patternfly/react-table': {
-          skipDefaultConversion: true,
-          transform: `@patternfly/react-table/dist/esm`,
-        },
       },
       'react-icons',
     ],

diff --git a/config/jest.setup.js b/config/jest.setup.js
@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { server } from '../src/mocks/server';
 import { QueryCache } from '@tanstack/react-query';
 

diff --git a/jest.config.js b/jest.config.js
@@ -10,12 +10,8 @@ module.exports = {
   },
   roots: ['<rootDir>/src/'],
   transformIgnorePatterns: [
-    '<rootDir>/node_modules/(?!(@patternfly/react-core/|@patternfly/react-icons/|@redhat-cloud-services|@openshift|lodash-es|@patternfly/react-table|@patternfly/react-tokens|p-all)).*$',
+    '<rootDir>/node_modules/(?!(@patternfly|@redhat-cloud-services|@openshift|lodash-es|p-all)).*$',
   ],
   testEnvironment: 'jsdom',
-  moduleDirectories: [
-    'node_modules',
-    './src', //the root directory
-  ],
   setupFilesAfterEnv: ['<rootDir>/config/jest.setup.js'],
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,17 +23,17 @@
     "dev": "HOT=true PROXY=true ROUTES_PATH=config/routes.config.js fec dev --clouddotEnv stage --uiEnv beta"
   },
   "dependencies": {
-    "@patternfly/react-core": "4.278.0",
-    "@patternfly/react-table": "4.113.4",
-    "@redhat-cloud-services/frontend-components": "3.11.8",
-    "@redhat-cloud-services/frontend-components-utilities": "3.7.6",
+    "@patternfly/react-core": "5.1.2",
+    "@patternfly/react-table": "5.1.2",
+    "@redhat-cloud-services/frontend-components": "4.2.0",
+    "@redhat-cloud-services/frontend-components-utilities": "4.0.2",
     "@tanstack/react-query": "^4.33.0",
     "@unleash/proxy-client-react": "^3.5.2",
     "axios": "1.6.0",
     "classnames": "^2.3.2",
     "jsonata": "^2.0.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-tracked": "^1.7.10",
     "uuid": "^9.0.0"
   },
@@ -45,16 +45,17 @@
     "@babel/preset-react": "7.22.5",
     "@redhat-cloud-services/eslint-config-redhat-cloud-services": "^1.3.0",
     "@redhat-cloud-services/frontend-components-config": "5.1.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/dom": "9.3.3",
+    "@testing-library/jest-dom": "6.1.5",
+    "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "^14.4.3",
-    "babel-jest": "29.6.3",
+    "babel-jest": "29.7.0",
     "babel-plugin-transform-imports": "^2.0.0",
     "eslint": "8.9.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "29.6.3",
-    "jest-environment-jsdom": "^29.6.3",
-    "msw": "^1.2.3",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "msw": "1.2.3",
     "npm-run-all": "4.1.5",
     "prop-types": "15.8.1",
     "stylelint": "13.13.1",

diff --git a/src/Components/AzureResourceGroup/index.js b/src/Components/AzureResourceGroup/index.js
@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { Spinner, Select, SelectOption, TextInput } from '@patternfly/react-core';
+import { Spinner, TextInput } from '@patternfly/react-core';
+import { Select, SelectOption } from '@patternfly/react-core/deprecated';
 import { useQuery } from '@tanstack/react-query';
 import { AZURE_RG_KEY } from '../../API/queryKeys';
 import { fetchResourceGroups } from '../../API';
@@ -37,7 +38,7 @@ const AzureResourceGroup = ({ imageResourceGroup }) => {
   }
 
   if (isLoading) {
-    return <Spinner isSVG size="sm" aria-label="loading resource groups" />;
+    return <Spinner size="sm" aria-label="loading resource groups" />;
   }
 
   if (error) {
@@ -80,7 +81,7 @@ const AzureResourceGroup = ({ imageResourceGroup }) => {
     <Select
       variant="typeahead"
       ouiaId="select_resource_group"
-      onToggle={(isExpanded) => setIsOpen(isExpanded)}
+      onToggle={(_event, isExpanded) => setIsOpen(isExpanded)}
       onSelect={onSelect}
       isOpen={isOpen}
       onClear={clearSelection}

diff --git a/src/Components/InstanceCounter/index.js b/src/Components/InstanceCounter/index.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useEffect } from 'react';
-import { NumberInput } from '@patternfly/react-core';
+import { HelperText, HelperTextItem, NumberInput } from '@patternfly/react-core';
 import { useWizardContext } from '../Common/WizardContext';
 import { useQuery } from '@tanstack/react-query';
 import { MAX_INSTANCES, MIN_INSTANCES, MAX_VCPU } from './constants';
@@ -75,6 +75,11 @@ const InstanceCounter = ({ setValidation }) => {
         minusBtnAriaLabel="instances-minus"
         plusBtnAriaLabel="instances-plus"
       />
+      {isWarning && (
+        <HelperText>
+          <HelperTextItem variant="warning">Launching many vCPUs might exceed service quota limit.</HelperTextItem>
+        </HelperText>
+      )}
     </>
   );
 };

diff --git a/src/Components/InstanceTypesSelect/index.js b/src/Components/InstanceTypesSelect/index.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Spinner, Select, SelectOption, TextInput } from '@patternfly/react-core';
+import { Spinner, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
+import { Select, SelectOption } from '@patternfly/react-core/deprecated';
 import { useQuery } from '@tanstack/react-query';
 import { fetchInstanceTypesList } from '../../API';
 import { useWizardContext } from '../Common/WizardContext';
@@ -158,11 +159,14 @@ const InstanceTypesSelect = ({ setValidation, architecture }) => {
           placeholderText="No instance types found"
           toggleAriaLabel="Select instance type"
         />
+        <HelperText>
+          <HelperTextItem variant="error">There are problems fetching instance types. Please try again later.</HelperTextItem>
+        </HelperText>
       </>
     );
   }
   if (isLoading) {
-    return <Spinner isSVG size="sm" aria-label="loading instance type select" />;
+    return <Spinner size="sm" aria-label="loading instance type select" />;
   }
 
   const types = filteredTypes || instanceTypes;
@@ -180,7 +184,7 @@ const InstanceTypesSelect = ({ setValidation, architecture }) => {
         maxHeight="180px"
         isOpen={isOpen}
         selections={chosenInstanceType || searchValue}
-        onToggle={onToggle}
+        onToggle={(_event, isOpen) => onToggle(isOpen)}
         onSelect={onSelect}
         onFilter={() => {}}
         isInputValuePersisted
@@ -194,6 +198,11 @@ const InstanceTypesSelect = ({ setValidation, architecture }) => {
       >
         {selectItemsMapper(types, numOptions)}
       </Select>
+      <HelperText>
+        {!isTypeSupported && (
+          <HelperTextItem variant="warning">The selected specification does not meet minimum requirements for this image</HelperTextItem>
+        )}
+      </HelperText>
     </>
   );
 };

diff --git a/src/Components/InstancesTable/index.js b/src/Components/InstancesTable/index.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { ExportIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
-import { Button, ClipboardCopy, Card, Pagination, Spinner, Bullseye, EmptyStatePrimary } from '@patternfly/react-core';
+import { Button, ClipboardCopy, Card, Pagination, Spinner, Bullseye, EmptyStateActions } from '@patternfly/react-core';
 import { useQuery } from '@tanstack/react-query';
 
 import { SSHUsername, exportToCSV } from './helpers';
@@ -35,7 +35,7 @@ const InstancesTable = ({ reservationID, provider, region }) => {
   if (isLoading)
     return (
       <Bullseye>
-        <Spinner isSVG size="xl" />
+        <Spinner size="xl" />
       </Bullseye>
     );
   return (
@@ -51,7 +51,7 @@ const InstancesTable = ({ reservationID, provider, region }) => {
           isCompact
           ouiaId="instances-pagination"
         />
-        <TableComposable ouiaId="instances table" aria-label="instances description table" variant="compact">
+        <Table ouiaId="instances table" aria-label="instances description table" variant="compact">
           <Thead>
             <Tr>
               <Th>ID</Th>
@@ -99,13 +99,13 @@ const InstancesTable = ({ reservationID, provider, region }) => {
               </Tr>
             ))}
           </Tbody>
-        </TableComposable>
+        </Table>
       </Card>
-      <EmptyStatePrimary>
+      <EmptyStateActions>
         <Button variant="link" icon={<ExportIcon />} iconPosition="left" onClick={() => exportToCSV(instances)}>
           Export to CSV
         </Button>
-      </EmptyStatePrimary>
+      </EmptyStateActions>
     </>
   );
 };

diff --git a/src/Components/LaunchDescriptionList/index.js b/src/Components/LaunchDescriptionList/index.js
@@ -43,7 +43,12 @@ const LaunchDescriptionList = ({ image }) => {
   const instanceTypeLabel = providerInstanceType.charAt(0).toUpperCase() + providerInstanceType.slice(1);
 
   return (
-    <ExpandableSection toggleText={provider && humanizeProvider(provider)} onToggle={onToggle} isExpanded={isExpanded} isIndented>
+    <ExpandableSection
+      toggleText={provider && humanizeProvider(provider)}
+      onToggle={(_event, isExpanded) => onToggle(isExpanded)}
+      isExpanded={isExpanded}
+      isIndented
+    >
       <DescriptionList isHorizontal>
         <DescriptionListGroup>
           <DescriptionListTerm>Image</DescriptionListTerm>

diff --git a/src/Components/ProvisioningWizard/CustomFooter.js b/src/Components/ProvisioningWizard/CustomFooter.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Button, ButtonVariant, WizardFooter, WizardContextConsumer } from '@patternfly/react-core';
+import { Button, ButtonVariant } from '@patternfly/react-core';
+import { WizardFooter, WizardContextConsumer } from '@patternfly/react-core/deprecated';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 import { stepIdToString } from './steps';

diff --git a/src/Components/ProvisioningWizard/ProvisioningWizard.test.js b/src/Components/ProvisioningWizard/ProvisioningWizard.test.js
@@ -36,13 +36,9 @@ describe('ProvisioningWizard', () => {
 
       render(<ProvisioningWizard hasAccess image={{ ...awsImage, sourceIDs: ['1'] }} />);
       // wait for the sources to load
-      await screen.findByText('Select account', undefined, { timeout: 10000 });
-
-      const sourceDropdown = await screen.findByText('Source 1');
+      const sourceDropdown = await screen.findByText('Source 1', undefined, { timeout: 40000 });
       expect(sourceDropdown).toBeInTheDocument();
-
-      expect(await screen.queryByText(/Loading available Sources/i)).not.toBeInTheDocument();
-    }, 30000);
+    }, 40000);
 
     test('shows loading sources', () => {
       render(<ProvisioningWizard hasAccess image={awsImage} />);

diff --git a/src/Components/ProvisioningWizard/index.js b/src/Components/ProvisioningWizard/index.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { Wizard } from '@patternfly/react-core';
+import { Wizard } from '@patternfly/react-core/deprecated';
 import React from 'react';
 
 import APIProvider from '../Common/Query';

diff --git a/src/Components/ProvisioningWizard/steps/AccountCustomizations/aws.js b/src/Components/ProvisioningWizard/steps/AccountCustomizations/aws.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Form, FormGroup, Popover, Title, Button, Text } from '@patternfly/react-core';
+import { Form, FormGroup, Popover, Title, Button, Text, Icon } from '@patternfly/react-core';
 import { HelpIcon } from '@patternfly/react-icons';
 
 import { AWS_PROVIDER } from '../../../../constants';
@@ -39,13 +39,7 @@ const AccountCustomizationsAWS = ({ setStepValidated, image }) => {
       <Title ouiaId="account_custom_title" headingLevel="h1" size="xl">
         Account and customizations | Amazon
       </Title>
-      <FormGroup
-        label="Select account"
-        validated={validations.sources}
-        helperTextInvalid="Please pick a value"
-        isRequired
-        fieldId="aws-select-source"
-      >
+      <FormGroup label="Select account" isRequired fieldId="aws-select-source">
         <SourcesSelect
           image={image}
           setValidation={(validation) =>
@@ -71,7 +65,9 @@ const AccountCustomizationsAWS = ({ setStepValidated, image }) => {
               className="pf-c-form__group-label-help"
               variant="plain"
             >
-              <HelpIcon noVerticalAlign />
+              <Icon isInline>
+                <HelpIcon />
+              </Icon>
             </Button>
           </Popover>
         }
@@ -81,9 +77,6 @@ const AccountCustomizationsAWS = ({ setStepValidated, image }) => {
       <FormGroup
         label="Select instance type"
         isRequired
-        validated={validations.types}
-        helperTextInvalid="There are problems fetching instance types."
-        helperText={validations.types === 'warning' && 'The selected specification does not meet minimum requirements for this image'}
         fieldId="aws-select-instance-types"
         labelIcon={
           <Popover
@@ -107,7 +100,9 @@ const AccountCustomizationsAWS = ({ setStepValidated, image }) => {
               className="pf-c-form__group-label-help"
               variant="plain"
             >
-              <HelpIcon noVerticalAlign />
+              <Icon isInline>
+                <HelpIcon />
+              </Icon>
             </Button>
           </Popover>
         }
@@ -146,7 +141,9 @@ const AccountCustomizationsAWS = ({ setStepValidated, image }) => {
               className="pf-c-form__group-label-help"
               variant="plain"
             >
-              <HelpIcon noVerticalAlign />
+              <Icon isInline>
+                <HelpIcon />
+              </Icon>
             </Button>
           </Popover>
         }
@@ -157,8 +154,6 @@ const AccountCustomizationsAWS = ({ setStepValidated, image }) => {
         label="Count"
         isRequired
         fieldId="aws-select-instance-counter"
-        validated={validations.amount}
-        helperText={validations.amount === 'warning' && 'Launching many vCPUs might exceed service quota limit.'}
         labelIcon={
           <Popover bodyContent="Specify the number of AWS instances to be launched">
             <Button
@@ -170,7 +165,9 @@ const AccountCustomizationsAWS = ({ setStepValidated, image }) => {
               className="pf-c-form__group-label-help"
               variant="plain"
             >
-              <HelpIcon noVerticalAlign />
+              <Icon isInline>
+                <HelpIcon />
+              </Icon>
             </Button>
           </Popover>
         }