Skip to content

Commit 4e20e52

Browse files
karelhalakarelhala
authored
feat(update to pf5): update dependencies to work with PF5 (#93)
1 parent 2e6778c commit 4e20e52

27 files changed

+513
-369
lines changed

‎package.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"build": "lerna run build --stream",
99
"start": "lerna run start --stream",
1010
"ci": "npm-run-all build lint test:ci",
11-
"lint": "lerna run lint --stream",
11+
"lint": "lerna run lint --stream -- --fix",
1212
"test": "lerna run test --stream",
1313
"test:ci": "lerna run test:ci --stream",
1414
"release": "lerna publish --conventional-commits --no-commit-hooks --no-verify-access --yes",
@@ -22,13 +22,13 @@
2222
"@babel/core": "7.14.6",
2323
"@lerna/project": "3.21.0",
2424
"@oat-sa/rollup-plugin-wildcard-external": "0.1.0",
25-
"@patternfly/react-core": "4.278.1",
26-
"@patternfly/react-icons": "4.93.7",
27-
"@patternfly/react-table": "4.113.7",
28-
"@patternfly/react-tokens": "4.94.7",
29-
"@redhat-cloud-services/frontend-components": "3.11.7",
30-
"@redhat-cloud-services/frontend-components-notifications": "3.2.2",
31-
"@redhat-cloud-services/frontend-components-utilities": "3.5.0",
25+
"@patternfly/react-core": "^5.0.0",
26+
"@patternfly/react-icons": "^5.0.0",
27+
"@patternfly/react-table": "^5.0.0",
28+
"@patternfly/react-tokens": "^5.0.0",
29+
"@redhat-cloud-services/frontend-components": "^4.0.0",
30+
"@redhat-cloud-services/frontend-components-notifications": "^4.0.0",
31+
"@redhat-cloud-services/frontend-components-utilities": "^4.0.0",
3232
"@redhat-cloud-services/rbac-client": "^1.0.100",
3333
"@rollup/plugin-commonjs": "19.0.0",
3434
"@rollup/plugin-json": "4.1.0",

‎packages/insights-common-typescript/package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@
2424
"react-string-format": "0.1.0"
2525
},
2626
"peerDependencies": {
27-
"@patternfly/react-core": "^4.128.2",
28-
"@patternfly/react-icons": "^4.10.11",
29-
"@redhat-cloud-services/frontend-components": "^3.2.8",
30-
"@redhat-cloud-services/frontend-components-notifications": "^3.2.2",
31-
"@redhat-cloud-services/frontend-components-utilities": "^3.2.2",
27+
"@patternfly/react-core": "^5.0.0",
28+
"@patternfly/react-icons": "^5.0.0",
29+
"@redhat-cloud-services/frontend-components": "^4.0.0",
30+
"@redhat-cloud-services/frontend-components-notifications": "^4.0.0",
31+
"@redhat-cloud-services/frontend-components-utilities": "^4.0.0",
3232
"@redhat-cloud-services/rbac-client": "^1.0.98",
3333
"axios": "0.27.2",
3434
"csx": "^10.0.2",

‎packages/insights-common-typescript/src/components/AppSkeleton/AppSkeleton.tsx

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
import * as React from 'react';
2-
3-
import {
4-
Main,
5-
PageHeader,
6-
PageHeaderTitle,
7-
Section,
8-
Skeleton,
9-
Spinner
10-
} from '@redhat-cloud-services/frontend-components';
11-
import { Bullseye } from '@patternfly/react-core';
2+
import { Main } from '@redhat-cloud-services/frontend-components/Main';
3+
import { Section } from '@redhat-cloud-services/frontend-components/Section';
4+
import { Skeleton } from '@redhat-cloud-services/frontend-components/Skeleton';
5+
import { Spinner } from '@redhat-cloud-services/frontend-components/Spinner';
6+
import { PageHeader, PageHeaderTitle } from '@redhat-cloud-services/frontend-components/PageHeader';
7+
import { Bullseye } from '@patternfly/react-core/dist/dynamic/layouts/Bullseye';
128

139
import { OuiaComponentProps, getOuiaProps } from '../../utils/Ouia';
1410

‎packages/insights-common-typescript/src/components/EmailOptIn/EmailOptIn.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react';
2-
import { Alert, AlertVariant, Text, TextContent } from '@patternfly/react-core';
2+
import { Text, TextContent } from '@patternfly/react-core/dist/dynamic/components/Text';
3+
import { Alert, AlertVariant } from '@patternfly/react-core/dist/dynamic/components/Alert';
34

45
import { Messages } from '../../properties/Messages';
56
import { Config } from '../../config';

‎packages/insights-common-typescript/src/components/EmptyState/EmptyState.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
import * as React from 'react';
2-
import { Button, EmptyState as EmptyStatePf, EmptyStateBody, EmptyStateIcon, EmptyStateVariant, Title } from '@patternfly/react-core';
2+
import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
3+
import {
4+
EmptyState as EmptyStatePf,
5+
EmptyStateBody,
6+
EmptyStateIcon,
7+
EmptyStateVariant
8+
} from '@patternfly/react-core/dist/dynamic/components/EmptyState';
9+
import { Title } from '@patternfly/react-core/dist/dynamic/components/Title';
310
import { global_spacer_3xl } from '@patternfly/react-tokens';
411
import { style } from 'typestyle';
512
import { calc } from 'csx';

‎packages/insights-common-typescript/src/components/ErrorBoundaryPage/ErrorBoundaryPage.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import * as React from 'react';
2-
import { Main, PageHeader, PageHeaderTitle } from '@redhat-cloud-services/frontend-components';
2+
import { Main } from '@redhat-cloud-services/frontend-components/Main';
3+
import { PageHeader, PageHeaderTitle } from '@redhat-cloud-services/frontend-components/PageHeader';
34
import { Messages } from '../../properties/Messages';
4-
import { ErrorCircleOIcon } from '@patternfly/react-icons';
5-
import { Text, ExpandableSection } from '@patternfly/react-core';
5+
import { ErrorCircleOIcon } from '@patternfly/react-icons/dist/dynamic/icons/error-circle-o-icon';
6+
import { ExpandableSection } from '@patternfly/react-core/dist/dynamic/components/ExpandableSection';
7+
import { Text } from '@patternfly/react-core/dist/dynamic/components/Text';
68
import { global_spacer_sm, global_BackgroundColor_dark_300 } from '@patternfly/react-tokens';
79
import { join } from '../../utils/ComponentUtils';
810
import { style } from 'typestyle';

‎packages/insights-common-typescript/src/components/ErrorBoundaryPage/__tests__/ErrorBoundaryPage.test.tsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
44
import { ErrorBoundaryPage } from '../../..';
55
import jestMock from 'jest-mock';
66

7-
jest.mock('@redhat-cloud-services/frontend-components', () => {
7+
jest.mock('@redhat-cloud-services/frontend-components/PageHeader', () => {
88

99
const Children: React.FunctionComponent = (props) => {
1010
// eslint-disable-next-line testing-library/no-node-access
@@ -16,12 +16,23 @@ jest.mock('@redhat-cloud-services/frontend-components', () => {
1616
};
1717

1818
return {
19-
Main: Children,
2019
PageHeader: Children,
2120
PageHeaderTitle: Title
2221
};
2322
});
2423

24+
jest.mock('@redhat-cloud-services/frontend-components/Main', () => {
25+
26+
const Children: React.FunctionComponent = (props) => {
27+
// eslint-disable-next-line testing-library/no-node-access
28+
return <span>{ props.children }</span>;
29+
};
30+
31+
return {
32+
Main: Children
33+
};
34+
});
35+
2536
describe('src/pages/Error/Page', () => {
2637

2738
let mockConsole;

‎packages/insights-common-typescript/src/components/Formik/Patternfly/Checkbox.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import * as React from 'react';
22
import { useField } from 'formik';
3-
import { Checkbox as PFCheckbox, FormGroup, CheckboxProps as PFCheckboxProps } from '@patternfly/react-core';
3+
import { Checkbox as PFCheckbox, CheckboxProps as PFCheckboxProps } from '@patternfly/react-core/dist/dynamic/components/Checkbox';
4+
import { FormGroup, FormHelperText } from '@patternfly/react-core/dist/dynamic/components/Form';
5+
import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
46

57
import { onChangePFAdapter } from './Common';
68
import { getOuiaProps, withoutOuiaProps } from '../../../utils/Ouia';
@@ -18,18 +20,23 @@ export const Checkbox: React.FunctionComponent<CheckboxProps> = (props) => {
1820
return (
1921
<FormGroup
2022
fieldId={ props.id }
21-
helperTextInvalid={ meta.error }
2223
isRequired={ props.isRequired }
23-
validated={ (isValid) ? 'default' : 'error' }
2424
{ ...getOuiaProps('FormikPatternfly/Checkbox', props) }
2525
>
2626
<PFCheckbox
2727
isChecked={ field.checked }
2828
{ ...withoutOuiaProps(props) }
2929
{ ...field }
3030
isValid={ isValid }
31-
onChange={ onChangePFAdapter<boolean>(field) }
31+
isRequired={ props.isRequired }
32+
onChange={ onChangePFAdapter(field) }
3233
/>
34+
{meta.error && <FormHelperText>
35+
<HelperText>
36+
<HelperTextItem>{ meta.error }</HelperTextItem>
37+
</HelperText>
38+
</FormHelperText>
39+
}
3340
</FormGroup>
3441
);
3542
};

‎packages/insights-common-typescript/src/components/Formik/Patternfly/Common.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { FieldInputProps } from 'formik';
33

4-
export const onChangePFAdapter = <T, E = React.FormEvent<HTMLInputElement>>(field: FieldInputProps<T>) => {
4+
export const onChangePFAdapter = <T = React.FormEvent<HTMLInputElement>, E = boolean>(field: FieldInputProps<T>) => {
55
return (_: T, e: E) => {
66
return field.onChange(e);
77
};

‎packages/insights-common-typescript/src/components/Formik/Patternfly/Form.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { Form as PFForm, FormProps as PFFormProps } from '@patternfly/react-core';
2+
import { Form as PFForm, FormProps as PFFormProps } from '@patternfly/react-core/dist/dynamic/components/Form';
33
import { OuiaComponentProps } from '../../../utils';
44
import { getOuiaProps, withoutOuiaProps } from '../../../utils/Ouia';
55

‎packages/insights-common-typescript/src/components/Formik/Patternfly/FormSelect.tsx

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import * as React from 'react';
22
import { useField } from 'formik';
3-
import { FormGroup, FormSelect as PFFormSelect, FormSelectProps as PFFormSelectProps } from '@patternfly/react-core';
3+
import { FormGroup, FormHelperText } from '@patternfly/react-core/dist/dynamic/components/Form';
4+
import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
5+
import { FormSelect as PFFormSelect, FormSelectProps as PFFormSelectProps } from '@patternfly/react-core/dist/dynamic/components/FormSelect';
46

57
import { onChangePFAdapter } from './Common';
68
import { OuiaComponentProps } from '../../../utils';
@@ -19,20 +21,25 @@ export const FormSelect: React.FunctionComponent<FormSelectProps> = (props) => {
1921
return (
2022
<FormGroup
2123
fieldId={ props.id }
22-
helperTextInvalid={ meta.error }
23-
isRequired={ props.isRequired }
24-
validated={ (isValid) ? 'default' : 'error' }
2524
label={ props.label }
25+
isRequired={ props.isRequired }
2626
{ ...getOuiaProps('FormikPatternfly/FormSelect', props) }
2727
>
2828
<PFFormSelect
2929
{ ...withoutOuiaProps(props) }
3030
{ ...field }
31-
onChange={ onChangePFAdapter<string | number, React.FormEvent<HTMLSelectElement>>(field) }
31+
onChange={ onChangePFAdapter<React.FormEvent<HTMLSelectElement>, string | number>(field) }
32+
isRequired={ props.isRequired }
3233
validated={ (isValid) ? 'default' : 'error' }
3334
>
3435
{ props.children }
3536
</PFFormSelect>
37+
{meta.error && <FormHelperText>
38+
<HelperText>
39+
<HelperTextItem>{ meta.error }</HelperTextItem>
40+
</HelperText>
41+
</FormHelperText>
42+
}
3643
</FormGroup>
3744
);
3845
};

‎packages/insights-common-typescript/src/components/Formik/Patternfly/FormText.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import { useField } from 'formik';
3-
import { FormGroup, Text, TextVariants, TextProps } from '@patternfly/react-core';
3+
import { Text, TextVariants, TextProps } from '@patternfly/react-core/dist/dynamic/components/Text';
4+
import { FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form';
45
import { getOuiaProps, withoutOuiaProps } from '../../../utils/Ouia';
56

67
interface FormTextProps extends Omit<TextProps, 'ref' | 'ouiaId'> {
@@ -11,15 +12,11 @@ interface FormTextProps extends Omit<TextProps, 'ref' | 'ouiaId'> {
1112
}
1213

1314
export const FormText: React.FunctionComponent<FormTextProps> = (props) => {
14-
const [ field, meta ] = useField({ ...props });
15-
const isValid = !meta.error || !meta.touched;
15+
const [ field ] = useField({ ...props });
1616

1717
return (
1818
<FormGroup
1919
fieldId={ props.id }
20-
helperTextInvalid={ meta.error }
21-
isRequired={ props.isRequired }
22-
validated={ (isValid) ? 'default' : 'error' }
2320
label={ props.label }
2421
{ ...getOuiaProps('FormikPatternfly/FormText', props) }
2522
>

‎packages/insights-common-typescript/src/components/Formik/Patternfly/FormTextArea.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import * as React from 'react';
22
import { useField } from 'formik';
3-
import { FormGroup, TextArea as PFTextArea, TextAreaProps as PFTextAreaProps } from '@patternfly/react-core';
3+
import { TextArea as PFTextArea, TextAreaProps as PFTextAreaProps } from '@patternfly/react-core/dist/dynamic/components/TextArea';
4+
import { FormGroup, FormHelperText } from '@patternfly/react-core/dist/dynamic/components/Form';
5+
import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
46

57
import { onChangePFAdapter } from './Common';
68
import { OuiaComponentProps, withoutOuiaProps } from '../../../utils';
@@ -19,9 +21,7 @@ export const FormTextArea: React.FunctionComponent<FormTextAreaProps> = (props)
1921
return (
2022
<FormGroup
2123
fieldId={ props.id }
22-
helperTextInvalid={ meta.error }
2324
isRequired={ props.isRequired }
24-
validated={ (isValid) ? 'default' : 'error' }
2525
label={ props.label }
2626
{ ...getOuiaProps('FormikPatternfly/FormTextArea', props) }
2727
>
@@ -30,8 +30,15 @@ export const FormTextArea: React.FunctionComponent<FormTextAreaProps> = (props)
3030
{ ...field }
3131
value={ field.value || '' }
3232
validated={ (isValid) ? 'default' : 'error' }
33-
onChange={ onChangePFAdapter<string | number, React.FormEvent<HTMLTextAreaElement>>(field) }
33+
isRequired={ props.isRequired }
34+
onChange={ onChangePFAdapter<React.FormEvent<HTMLTextAreaElement>, string | number>(field) }
3435
/>
36+
{meta.error && <FormHelperText>
37+
<HelperText>
38+
<HelperTextItem>{ meta.error }</HelperTextItem>
39+
</HelperText>
40+
</FormHelperText>
41+
}
3542
</FormGroup>
3643
);
3744
};

‎packages/insights-common-typescript/src/components/Formik/Patternfly/FormTextInput.tsx

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import * as React from 'react';
22
import { useField } from 'formik';
3-
import { FormGroup, Text, TextInput as PFTextInput, TextInputProps, TextVariants } from '@patternfly/react-core';
3+
import { Text, TextVariants } from '@patternfly/react-core/dist/dynamic/components/Text';
4+
import { TextInput as PFTextInput, TextInputProps } from '@patternfly/react-core/dist/dynamic/components/TextInput';
5+
import { FormGroup, FormHelperText } from '@patternfly/react-core/dist/dynamic/components/Form';
6+
import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
47

58
import { onChangePFAdapter } from './Common';
69
import { withoutOuiaProps } from '../../../utils';
@@ -21,20 +24,24 @@ export const FormTextInput: React.FunctionComponent<FormTextInputProps> = (props
2124
return (
2225
<FormGroup
2326
fieldId={ props.id }
24-
helperTextInvalid={ meta.error }
2527
isRequired={ props.isRequired }
26-
validated={ (isValid) ? 'default' : 'error' }
2728
label={ props.label }
2829
{ ...getOuiaProps('FormikPatternfly/FormTextInput', props) }
2930
>
3031
<PFTextInput
3132
{ ...withoutOuiaProps(otherProps) }
3233
{ ...field }
33-
value={ field.value !== undefined ? field.value.toString() : '' }
3434
validated={ (isValid) ? 'default' : 'error' }
35-
onChange={ onChangePFAdapter<string | number>(field) }
35+
value={ field.value !== undefined ? field.value.toString() : '' }
36+
onChange={ onChangePFAdapter<React.FormEvent<HTMLInputElement>, string | number>(field) }
3637
/>
3738
{ hint && <Text component={ TextVariants.small }>{ hint }</Text> }
39+
{meta.error && <FormHelperText>
40+
<HelperText>
41+
<HelperTextItem>{ meta.error }</HelperTextItem>
42+
</HelperText>
43+
</FormHelperText>
44+
}
3845
</FormGroup>
3946
);
4047
};

‎packages/insights-common-typescript/src/components/Formik/Patternfly/Switch.tsx

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import * as React from 'react';
22
import { useField } from 'formik';
3-
import { FormGroup, Switch as PFSwitch, SwitchProps as PFSwitchProps } from '@patternfly/react-core';
3+
import { Switch as PFSwitch, SwitchProps as PFSwitchProps } from '@patternfly/react-core/dist/dynamic/components/Switch';
4+
import { FormGroup, FormHelperText } from '@patternfly/react-core/dist/dynamic/components/Form';
5+
import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
46

57
import { onChangePFAdapter } from './Common';
68
import { OuiaComponentProps, withoutOuiaProps } from '../../../utils';
@@ -16,14 +18,11 @@ interface SwitchProps extends OuiaComponentProps, Omit<PFSwitchProps, 'onChange'
1618
export const Switch: React.FunctionComponent<SwitchProps> = (props) => {
1719
const [ field, meta ] = useField({ ...props, type: 'checkbox' });
1820
const { labelOn: label, ...restProps } = props;
19-
const isValid = !meta.error || !meta.touched;
2021

2122
return (
2223
<FormGroup
2324
fieldId={ props.id }
24-
helperTextInvalid={ meta.error }
2525
isRequired={ props.isRequired }
26-
validated={ (isValid) ? 'default' : 'error' }
2726
label={ props.label }
2827
{ ...getOuiaProps('FormikPatternfly/Switch', props) }
2928
>
@@ -35,8 +34,14 @@ export const Switch: React.FunctionComponent<SwitchProps> = (props) => {
3534
ouiaId="pf-switch"
3635
ouiaSafe={ props.ouiaSafe }
3736
label={ label }
38-
onChange={ onChangePFAdapter<boolean>(field) }
37+
onChange={ onChangePFAdapter<React.FormEvent<HTMLInputElement>, boolean>(field) }
3938
/>
39+
{meta.error && <FormHelperText>
40+
<HelperText>
41+
<HelperTextItem>{ meta.error }</HelperTextItem>
42+
</HelperText>
43+
</FormHelperText>
44+
}
4045
</div>
4146
</FormGroup>
4247
);

‎packages/insights-common-typescript/src/components/FrontendComponents/Section.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react';
2-
import { Section as IFCSection, DarkContext } from '@redhat-cloud-services/frontend-components';
2+
import { Section as IFCSection } from '@redhat-cloud-services/frontend-components/Section';
3+
import { DarkContext } from '@redhat-cloud-services/frontend-components/Dark';
34
import { classes } from 'typestyle';
45
import { OuiaComponentProps } from '../../utils';
56
import { getOuiaProps } from '../../utils/Ouia';

0 commit comments

Comments
 (0)