feat(update to pf5): update dependencies to work with PF5 (#93)

RedHatInsights · Feb 12, 2024 · 4e20e52 · 4e20e52
1 parent 2e6778c
commit 4e20e52
Show file tree

Hide file tree

Showing 27 changed files with 513 additions and 369 deletions.
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "build": "lerna run build --stream",
     "start": "lerna run start --stream",
     "ci": "npm-run-all build lint test:ci",
-    "lint": "lerna run lint --stream",
+    "lint": "lerna run lint --stream -- --fix",
     "test": "lerna run test --stream",
     "test:ci": "lerna run test:ci --stream",
     "release": "lerna publish --conventional-commits --no-commit-hooks --no-verify-access --yes",
@@ -22,13 +22,13 @@
     "@babel/core": "7.14.6",
     "@lerna/project": "3.21.0",
     "@oat-sa/rollup-plugin-wildcard-external": "0.1.0",
-    "@patternfly/react-core": "4.278.1",
-    "@patternfly/react-icons": "4.93.7",
-    "@patternfly/react-table": "4.113.7",
-    "@patternfly/react-tokens": "4.94.7",
-    "@redhat-cloud-services/frontend-components": "3.11.7",
-    "@redhat-cloud-services/frontend-components-notifications": "3.2.2",
-    "@redhat-cloud-services/frontend-components-utilities": "3.5.0",
+    "@patternfly/react-core": "^5.0.0",
+    "@patternfly/react-icons": "^5.0.0",
+    "@patternfly/react-table": "^5.0.0",
+    "@patternfly/react-tokens": "^5.0.0",
+    "@redhat-cloud-services/frontend-components": "^4.0.0",
+    "@redhat-cloud-services/frontend-components-notifications": "^4.0.0",
+    "@redhat-cloud-services/frontend-components-utilities": "^4.0.0",
     "@redhat-cloud-services/rbac-client": "^1.0.100",
     "@rollup/plugin-commonjs": "19.0.0",
     "@rollup/plugin-json": "4.1.0",

diff --git a/packages/insights-common-typescript/package.json b/packages/insights-common-typescript/package.json
@@ -24,11 +24,11 @@
     "react-string-format": "0.1.0"
   },
   "peerDependencies": {
-    "@patternfly/react-core": "^4.128.2",
-    "@patternfly/react-icons": "^4.10.11",
-    "@redhat-cloud-services/frontend-components": "^3.2.8",
-    "@redhat-cloud-services/frontend-components-notifications": "^3.2.2",
-    "@redhat-cloud-services/frontend-components-utilities": "^3.2.2",
+    "@patternfly/react-core": "^5.0.0",
+    "@patternfly/react-icons": "^5.0.0",
+    "@redhat-cloud-services/frontend-components": "^4.0.0",
+    "@redhat-cloud-services/frontend-components-notifications": "^4.0.0",
+    "@redhat-cloud-services/frontend-components-utilities": "^4.0.0",
     "@redhat-cloud-services/rbac-client": "^1.0.98",
     "axios": "0.27.2",
     "csx": "^10.0.2",

diff --git a/packages/insights-common-typescript/src/components/AppSkeleton/AppSkeleton.tsx b/packages/insights-common-typescript/src/components/AppSkeleton/AppSkeleton.tsx
@@ -1,14 +1,10 @@
 import * as React from 'react';
-
-import {
-    Main,
-    PageHeader,
-    PageHeaderTitle,
-    Section,
-    Skeleton,
-    Spinner
-} from '@redhat-cloud-services/frontend-components';
-import { Bullseye } from '@patternfly/react-core';
+import { Main } from '@redhat-cloud-services/frontend-components/Main';
+import { Section } from '@redhat-cloud-services/frontend-components/Section';
+import { Skeleton } from '@redhat-cloud-services/frontend-components/Skeleton';
+import { Spinner } from '@redhat-cloud-services/frontend-components/Spinner';
+import { PageHeader, PageHeaderTitle } from '@redhat-cloud-services/frontend-components/PageHeader';
+import { Bullseye } from '@patternfly/react-core/dist/dynamic/layouts/Bullseye';
 
 import { OuiaComponentProps, getOuiaProps } from '../../utils/Ouia';
 

diff --git a/packages/insights-common-typescript/src/components/EmailOptIn/EmailOptIn.tsx b/packages/insights-common-typescript/src/components/EmailOptIn/EmailOptIn.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Alert, AlertVariant, Text, TextContent } from '@patternfly/react-core';
+import { Text, TextContent } from '@patternfly/react-core/dist/dynamic/components/Text';
+import { Alert, AlertVariant } from '@patternfly/react-core/dist/dynamic/components/Alert';
 
 import { Messages } from '../../properties/Messages';
 import { Config } from '../../config';

diff --git a/packages/insights-common-typescript/src/components/EmptyState/EmptyState.tsx b/packages/insights-common-typescript/src/components/EmptyState/EmptyState.tsx
@@ -1,5 +1,12 @@
 import * as React from 'react';
-import { Button, EmptyState as EmptyStatePf, EmptyStateBody, EmptyStateIcon, EmptyStateVariant, Title } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
+import {
+    EmptyState as EmptyStatePf,
+    EmptyStateBody,
+    EmptyStateIcon,
+    EmptyStateVariant
+} from '@patternfly/react-core/dist/dynamic/components/EmptyState';
+import { Title } from '@patternfly/react-core/dist/dynamic/components/Title';
 import { global_spacer_3xl } from '@patternfly/react-tokens';
 import { style } from 'typestyle';
 import { calc } from 'csx';

diff --git a/packages/insights-common-typescript/src/components/ErrorBoundaryPage/ErrorBoundaryPage.tsx b/packages/insights-common-typescript/src/components/ErrorBoundaryPage/ErrorBoundaryPage.tsx
@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { Main, PageHeader, PageHeaderTitle } from '@redhat-cloud-services/frontend-components';
+import { Main } from '@redhat-cloud-services/frontend-components/Main';
+import { PageHeader, PageHeaderTitle } from '@redhat-cloud-services/frontend-components/PageHeader';
 import { Messages } from '../../properties/Messages';
-import { ErrorCircleOIcon } from '@patternfly/react-icons';
-import { Text, ExpandableSection } from '@patternfly/react-core';
+import { ErrorCircleOIcon } from '@patternfly/react-icons/dist/dynamic/icons/error-circle-o-icon';
+import { ExpandableSection } from '@patternfly/react-core/dist/dynamic/components/ExpandableSection';
+import { Text } from '@patternfly/react-core/dist/dynamic/components/Text';
 import { global_spacer_sm, global_BackgroundColor_dark_300 } from '@patternfly/react-tokens';
 import { join } from '../../utils/ComponentUtils';
 import { style } from 'typestyle';

diff --git a/...s-common-typescript/src/components/ErrorBoundaryPage/__tests__/ErrorBoundaryPage.test.tsx b/...s-common-typescript/src/components/ErrorBoundaryPage/__tests__/ErrorBoundaryPage.test.tsx
@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { ErrorBoundaryPage } from '../../..';
 import jestMock from 'jest-mock';
 
-jest.mock('@redhat-cloud-services/frontend-components', () => {
+jest.mock('@redhat-cloud-services/frontend-components/PageHeader', () => {
 
     const Children: React.FunctionComponent = (props) => {
         // eslint-disable-next-line testing-library/no-node-access
@@ -16,12 +16,23 @@ jest.mock('@redhat-cloud-services/frontend-components', () => {
     };
 
     return {
-        Main: Children,
         PageHeader: Children,
         PageHeaderTitle: Title
     };
 });
 
+jest.mock('@redhat-cloud-services/frontend-components/Main', () => {
+
+    const Children: React.FunctionComponent = (props) => {
+        // eslint-disable-next-line testing-library/no-node-access
+        return <span>{ props.children }</span>;
+    };
+
+    return {
+        Main: Children
+    };
+});
+
 describe('src/pages/Error/Page', () => {
 
     let mockConsole;

diff --git a/packages/insights-common-typescript/src/components/Formik/Patternfly/Checkbox.tsx b/packages/insights-common-typescript/src/components/Formik/Patternfly/Checkbox.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { useField } from 'formik';
-import { Checkbox as PFCheckbox, FormGroup, CheckboxProps as PFCheckboxProps } from '@patternfly/react-core';
+import { Checkbox as PFCheckbox, CheckboxProps as PFCheckboxProps } from '@patternfly/react-core/dist/dynamic/components/Checkbox';
+import { FormGroup, FormHelperText } from '@patternfly/react-core/dist/dynamic/components/Form';
+import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
 
 import { onChangePFAdapter } from './Common';
 import { getOuiaProps, withoutOuiaProps } from '../../../utils/Ouia';
@@ -18,18 +20,23 @@ export const Checkbox: React.FunctionComponent<CheckboxProps> = (props) => {
     return (
         <FormGroup
             fieldId={ props.id }
-            helperTextInvalid={ meta.error }
             isRequired={ props.isRequired }
-            validated={ (isValid) ? 'default' : 'error' }
             { ...getOuiaProps('FormikPatternfly/Checkbox', props) }
         >
             <PFCheckbox
                 isChecked={ field.checked  }
                 { ...withoutOuiaProps(props) }
                 { ...field }
                 isValid={ isValid }
-                onChange={ onChangePFAdapter<boolean>(field) }
+                isRequired={ props.isRequired }
+                onChange={ onChangePFAdapter(field) }
             />
+            {meta.error && <FormHelperText>
+                <HelperText>
+                    <HelperTextItem>{ meta.error }</HelperTextItem>
+                </HelperText>
+            </FormHelperText>
+            }
         </FormGroup>
     );
 };
diff --git a/packages/insights-common-typescript/src/components/Formik/Patternfly/Common.ts b/packages/insights-common-typescript/src/components/Formik/Patternfly/Common.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FieldInputProps } from 'formik';
 
-export const onChangePFAdapter = <T, E = React.FormEvent<HTMLInputElement>>(field: FieldInputProps<T>) => {
+export const onChangePFAdapter = <T = React.FormEvent<HTMLInputElement>, E = boolean>(field: FieldInputProps<T>) => {
     return (_: T, e: E) => {
         return field.onChange(e);
     };

diff --git a/packages/insights-common-typescript/src/components/Formik/Patternfly/Form.tsx b/packages/insights-common-typescript/src/components/Formik/Patternfly/Form.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Form as PFForm, FormProps as PFFormProps } from '@patternfly/react-core';
+import { Form as PFForm, FormProps as PFFormProps } from '@patternfly/react-core/dist/dynamic/components/Form';
 import { OuiaComponentProps } from '../../../utils';
 import { getOuiaProps, withoutOuiaProps } from '../../../utils/Ouia';
 

diff --git a/packages/insights-common-typescript/src/components/Formik/Patternfly/FormSelect.tsx b/packages/insights-common-typescript/src/components/Formik/Patternfly/FormSelect.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { useField } from 'formik';
-import { FormGroup, FormSelect as PFFormSelect, FormSelectProps as PFFormSelectProps } from '@patternfly/react-core';
+import { FormGroup, FormHelperText } from '@patternfly/react-core/dist/dynamic/components/Form';
+import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
+import { FormSelect as PFFormSelect, FormSelectProps as PFFormSelectProps } from '@patternfly/react-core/dist/dynamic/components/FormSelect';
 
 import { onChangePFAdapter } from './Common';
 import { OuiaComponentProps } from '../../../utils';
@@ -19,20 +21,25 @@ export const FormSelect: React.FunctionComponent<FormSelectProps> = (props) => {
     return (
         <FormGroup
             fieldId={ props.id }
-            helperTextInvalid={ meta.error }
-            isRequired={ props.isRequired }
-            validated={ (isValid) ? 'default' : 'error' }
             label={ props.label }
+            isRequired={ props.isRequired }
             { ...getOuiaProps('FormikPatternfly/FormSelect', props) }
         >
             <PFFormSelect
                 { ...withoutOuiaProps(props) }
                 { ...field }
-                onChange={ onChangePFAdapter<string | number, React.FormEvent<HTMLSelectElement>>(field) }
+                onChange={ onChangePFAdapter<React.FormEvent<HTMLSelectElement>, string | number>(field) }
+                isRequired={ props.isRequired }
                 validated={ (isValid) ? 'default' : 'error' }
             >
                 { props.children }
             </PFFormSelect>
+            {meta.error && <FormHelperText>
+                <HelperText>
+                    <HelperTextItem>{ meta.error }</HelperTextItem>
+                </HelperText>
+            </FormHelperText>
+            }
         </FormGroup>
     );
 };
diff --git a/packages/insights-common-typescript/src/components/Formik/Patternfly/FormText.tsx b/packages/insights-common-typescript/src/components/Formik/Patternfly/FormText.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useField } from 'formik';
-import { FormGroup, Text, TextVariants, TextProps } from '@patternfly/react-core';
+import { Text, TextVariants, TextProps } from '@patternfly/react-core/dist/dynamic/components/Text';
+import { FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form';
 import { getOuiaProps, withoutOuiaProps } from '../../../utils/Ouia';
 
 interface FormTextProps extends Omit<TextProps, 'ref' | 'ouiaId'> {
@@ -11,15 +12,11 @@ interface FormTextProps extends Omit<TextProps, 'ref' | 'ouiaId'> {
 }
 
 export const FormText: React.FunctionComponent<FormTextProps> = (props) => {
-    const [ field, meta ] = useField({ ...props });
-    const isValid = !meta.error || !meta.touched;
+    const [ field ] = useField({ ...props });
 
     return (
         <FormGroup
             fieldId={ props.id }
-            helperTextInvalid={ meta.error }
-            isRequired={ props.isRequired }
-            validated={ (isValid) ? 'default' : 'error' }
             label={ props.label }
             { ...getOuiaProps('FormikPatternfly/FormText', props) }
         >

diff --git a/packages/insights-common-typescript/src/components/Formik/Patternfly/FormTextArea.tsx b/packages/insights-common-typescript/src/components/Formik/Patternfly/FormTextArea.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { useField } from 'formik';
-import { FormGroup, TextArea as PFTextArea, TextAreaProps as PFTextAreaProps } from '@patternfly/react-core';
+import { TextArea as PFTextArea, TextAreaProps as PFTextAreaProps } from '@patternfly/react-core/dist/dynamic/components/TextArea';
+import { FormGroup, FormHelperText } from '@patternfly/react-core/dist/dynamic/components/Form';
+import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
 
 import { onChangePFAdapter } from './Common';
 import { OuiaComponentProps, withoutOuiaProps } from '../../../utils';
@@ -19,9 +21,7 @@ export const FormTextArea: React.FunctionComponent<FormTextAreaProps> = (props)
     return (
         <FormGroup
             fieldId={ props.id }
-            helperTextInvalid={ meta.error }
             isRequired={ props.isRequired }
-            validated={ (isValid) ? 'default' : 'error' }
             label={ props.label }
             { ...getOuiaProps('FormikPatternfly/FormTextArea', props) }
         >
@@ -30,8 +30,15 @@ export const FormTextArea: React.FunctionComponent<FormTextAreaProps> = (props)
                 { ...field }
                 value={ field.value || '' }
                 validated={ (isValid) ? 'default' : 'error' }
-                onChange={ onChangePFAdapter<string | number, React.FormEvent<HTMLTextAreaElement>>(field) }
+                isRequired={ props.isRequired }
+                onChange={ onChangePFAdapter<React.FormEvent<HTMLTextAreaElement>, string | number>(field) }
             />
+            {meta.error && <FormHelperText>
+                <HelperText>
+                    <HelperTextItem>{ meta.error }</HelperTextItem>
+                </HelperText>
+            </FormHelperText>
+            }
         </FormGroup>
     );
 };
diff --git a/packages/insights-common-typescript/src/components/Formik/Patternfly/FormTextInput.tsx b/packages/insights-common-typescript/src/components/Formik/Patternfly/FormTextInput.tsx
@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { useField } from 'formik';
-import { FormGroup, Text, TextInput as PFTextInput, TextInputProps, TextVariants } from '@patternfly/react-core';
+import { Text, TextVariants } from '@patternfly/react-core/dist/dynamic/components/Text';
+import { TextInput as PFTextInput, TextInputProps } from '@patternfly/react-core/dist/dynamic/components/TextInput';
+import { FormGroup, FormHelperText } from '@patternfly/react-core/dist/dynamic/components/Form';
+import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
 
 import { onChangePFAdapter } from './Common';
 import { withoutOuiaProps } from '../../../utils';
@@ -21,20 +24,24 @@ export const FormTextInput: React.FunctionComponent<FormTextInputProps> = (props
     return (
         <FormGroup
             fieldId={ props.id }
-            helperTextInvalid={ meta.error }
             isRequired={ props.isRequired }
-            validated={ (isValid) ? 'default' : 'error' }
             label={ props.label }
             { ...getOuiaProps('FormikPatternfly/FormTextInput', props) }
         >
             <PFTextInput
                 { ...withoutOuiaProps(otherProps) }
                 { ...field }
-                value={ field.value !== undefined ? field.value.toString() : '' }
                 validated={ (isValid) ? 'default' : 'error' }
-                onChange={ onChangePFAdapter<string | number>(field) }
+                value={ field.value !== undefined ? field.value.toString() : '' }
+                onChange={ onChangePFAdapter<React.FormEvent<HTMLInputElement>, string | number>(field) }
             />
             { hint && <Text component={ TextVariants.small }>{ hint }</Text> }
+            {meta.error && <FormHelperText>
+                <HelperText>
+                    <HelperTextItem>{ meta.error }</HelperTextItem>
+                </HelperText>
+            </FormHelperText>
+            }
         </FormGroup>
     );
 };
diff --git a/packages/insights-common-typescript/src/components/Formik/Patternfly/Switch.tsx b/packages/insights-common-typescript/src/components/Formik/Patternfly/Switch.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { useField } from 'formik';
-import { FormGroup, Switch as PFSwitch, SwitchProps as PFSwitchProps } from '@patternfly/react-core';
+import { Switch as PFSwitch, SwitchProps as PFSwitchProps } from '@patternfly/react-core/dist/dynamic/components/Switch';
+import { FormGroup, FormHelperText } from '@patternfly/react-core/dist/dynamic/components/Form';
+import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
 
 import { onChangePFAdapter } from './Common';
 import { OuiaComponentProps, withoutOuiaProps } from '../../../utils';
@@ -16,14 +18,11 @@ interface SwitchProps extends OuiaComponentProps, Omit<PFSwitchProps, 'onChange'
 export const Switch: React.FunctionComponent<SwitchProps> = (props) => {
     const [ field, meta ] = useField({ ...props, type: 'checkbox' });
     const { labelOn: label, ...restProps } = props;
-    const isValid = !meta.error || !meta.touched;
 
     return (
         <FormGroup
             fieldId={ props.id }
-            helperTextInvalid={ meta.error }
             isRequired={ props.isRequired }
-            validated={ (isValid) ? 'default' : 'error' }
             label={ props.label }
             { ...getOuiaProps('FormikPatternfly/Switch', props) }
         >
@@ -35,8 +34,14 @@ export const Switch: React.FunctionComponent<SwitchProps> = (props) => {
                     ouiaId="pf-switch"
                     ouiaSafe={ props.ouiaSafe }
                     label={ label }
-                    onChange={ onChangePFAdapter<boolean>(field) }
+                    onChange={ onChangePFAdapter<React.FormEvent<HTMLInputElement>, boolean>(field) }
                 />
+                {meta.error && <FormHelperText>
+                    <HelperText>
+                        <HelperTextItem>{ meta.error }</HelperTextItem>
+                    </HelperText>
+                </FormHelperText>
+                }
             </div>
         </FormGroup>
     );

diff --git a/packages/insights-common-typescript/src/components/FrontendComponents/Section.tsx b/packages/insights-common-typescript/src/components/FrontendComponents/Section.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Section as IFCSection, DarkContext } from '@redhat-cloud-services/frontend-components';
+import { Section as IFCSection } from '@redhat-cloud-services/frontend-components/Section';
+import { DarkContext } from '@redhat-cloud-services/frontend-components/Dark';
 import { classes } from 'typestyle';
 import { OuiaComponentProps } from '../../utils';
 import { getOuiaProps } from '../../utils/Ouia';