Skip to content

Commit a0b51ec

Browse files
rawagnerrawagner
authored
Fix React 18 types (#3361)
Replace/remove deprecated deps
1 parent 8bb681c commit a0b51ec

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+381
-321
lines changed

‎apps/assisted-disconnected-ui/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
"react-redux": "^8.0.5",
2424
"react-router-dom": "5.3.x",
2525
"react-router-dom-v5-compat": "^6.21.2",
26-
"react-tagsinput": "^3.20",
2726
"redux": "^4",
2827
"uuid": "^8.1",
2928
"yup": "^1.4.0"

‎apps/assisted-ui/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
"react-redux": "^8.0.5",
2424
"react-router-dom": "5.3.x",
2525
"react-router-dom-v5-compat": "^6.21.2",
26-
"react-tagsinput": "^3.20",
2726
"redux": "^4",
2827
"uuid": "^8.1",
2928
"yup": "^1.4.0"

‎apps/assisted-ui/src/components/App.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type React from 'react';
2-
import { BrowserRouter } from 'react-router-dom';
2+
import { BrowserRouter, BrowserRouterProps } from 'react-router-dom';
33
import { CompatRouter, Route } from 'react-router-dom-v5-compat';
44
import { Page } from '@patternfly/react-core';
55
import * as OCM from '@openshift-assisted/ui-lib/ocm';
@@ -9,14 +9,20 @@ import '../i18n';
99
const { HostsClusterDetailTabMock, UILibRoutes, Features, Config } = OCM;
1010
window.__app__ = { OCM };
1111

12+
// Add PropsWithChildren to bypass the React 18 type mismatch
13+
// eslint-disable-next-line
14+
const BrowserRouter18 = BrowserRouter as any as React.FC<
15+
React.PropsWithChildren<BrowserRouterProps>
16+
>;
17+
1218
export const App: React.FC = () => (
13-
<BrowserRouter basename={Config.routeBasePath}>
19+
<BrowserRouter18 basename={Config.routeBasePath}>
1420
<CompatRouter>
1521
<Page masthead={<Header />} isManagedSidebar defaultManagedSidebarIsOpen={false}>
1622
<UILibRoutes allEnabledFeatures={Features.STANDALONE_DEPLOYMENT_ENABLED_FEATURES}>
1723
<Route path={'/day2-flow-mock'} element={<HostsClusterDetailTabMock />} />
1824
</UILibRoutes>
1925
</Page>
2026
</CompatRouter>
21-
</BrowserRouter>
27+
</BrowserRouter18>
2228
);

‎libs/locales/lib/en/translation.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -318,7 +318,7 @@
318318
"ai:Enable in cluster": "Enable in cluster",
319319
"ai:Enabled for the installation": "Enabled for the installation",
320320
"ai:Ensure the host is running, responsive, and is able to contact the installer.": "Ensure the host is running, responsive, and is able to contact the installer.",
321-
"ai:Enter a key=value and then press 'enter' or 'space' or use a ',' to input the label.": "Enter a key=value and then press 'enter' or 'space' or use a ',' to input the label.",
321+
"ai:Enter a key=value and then press 'enter' to input the label.": "Enter a key=value and then press 'enter' to input the label.",
322322
"ai:Enter a password for the BMC": "Enter a password for the BMC",
323323
"ai:Enter a username for the BMC": "Enter a username for the BMC",
324324
"ai:Enter an address": "Enter an address",
@@ -591,6 +591,7 @@
591591
"ai:Never share your downloaded ISO with anyone else.": "Never share your downloaded ISO with anyone else.",
592592
"ai:New hostname": "New hostname",
593593
"ai:New hostname will appear here...": "New hostname will appear here...",
594+
"ai:New label": "New label",
594595
"ai:Next": "Next",
595596
"ai:NIC": "NIC",
596597
"ai:NIC_plural": "NICs",

‎libs/ui-lib/lib/cim/components/Agent/tableUtils.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const agentHostnameColumn = (
4545
canEditBMH?: HostsTableActions['canEditBMH'],
4646
): TableRow<Host> => ({
4747
header: {
48-
title: t('ai:Hostname'),
48+
title: t<string>('ai:Hostname'),
4949
props: {
5050
id: 'col-header-hostname', // ACM jest tests require id over testId
5151
modifier: 'breakWord',
@@ -92,7 +92,7 @@ export const discoveryTypeColumn = (
9292
): TableRow<Host> => {
9393
return {
9494
header: {
95-
title: t('ai:Discovery type'),
95+
title: t<string>('ai:Discovery type'),
9696
props: {
9797
id: 'col-header-discovery-type',
9898
},
@@ -146,7 +146,7 @@ export const agentStatusColumn = ({
146146
}: AgentStatusColumnProps): TableRow<Host> => {
147147
return {
148148
header: {
149-
title: t('ai:Status'),
149+
title: t<string>('ai:Status'),
150150
props: {
151151
id: 'col-header-infraenvstatus',
152152
},
@@ -194,7 +194,7 @@ export const clusterColumn = (
194194
): TableRow<Host> => {
195195
return {
196196
header: {
197-
title: t('ai:Cluster'),
197+
title: t<string>('ai:Cluster'),
198198
props: {
199199
id: 'col-header-cluster',
200200
},
@@ -234,7 +234,7 @@ export const clusterColumn = (
234234
export const infraEnvColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host> => {
235235
return {
236236
header: {
237-
title: t('ai:Infrastructure env'),
237+
title: t<string>('ai:Infrastructure env'),
238238
props: {
239239
id: 'col-header-infraenv',
240240
},

‎libs/ui-lib/lib/cim/components/ClusterDeployment/components/ClusterDeploymentHostsSelectionAdvanced.tsx‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
2-
import Measure from 'react-measure';
32
import isMatch from 'lodash-es/isMatch.js';
43
import { useFormikContext } from 'formik';
54
import { Alert, AlertVariant, Grid, GridItem } from '@patternfly/react-core';
5+
import useResizeObserver from '@react-hook/resize-observer';
66

77
import { AgentK8sResource } from '../../../types';
88
import { AGENT_LOCATION_LABEL_KEY, AGENT_NOLOCATION_VALUE } from '../../common';
@@ -58,6 +58,12 @@ const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
5858
[availableAgents, locations, agentLabels],
5959
);
6060

61+
const tableRef = React.useRef<HTMLDivElement>(null);
62+
const [tableWidth, setTableWidth] = React.useState<number>();
63+
useResizeObserver(tableRef, (entry) => {
64+
setTableWidth(entry.contentRect.width);
65+
});
66+
6167
return (
6268
<>
6369
<Grid hasGutter>
@@ -84,20 +90,16 @@ const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
8490
/>
8591
)}
8692
<GridItem>
87-
<Measure bounds>
88-
{({ measureRef, contentRect }) => (
89-
<div ref={measureRef}>
90-
<AgentsSelectionTable
91-
matchingAgents={matchingAgents}
92-
onEditRole={onEditRole}
93-
onSetInstallationDiskId={onSetInstallationDiskId}
94-
width={contentRect.bounds?.width}
95-
onEditHost={onEditHost}
96-
onHostSelect={onHostSelect}
97-
/>
98-
</div>
99-
)}
100-
</Measure>
93+
<div ref={tableRef}>
94+
<AgentsSelectionTable
95+
matchingAgents={matchingAgents}
96+
onEditRole={onEditRole}
97+
onSetInstallationDiskId={onSetInstallationDiskId}
98+
width={tableWidth}
99+
onEditHost={onEditHost}
100+
onHostSelect={onHostSelect}
101+
/>
102+
</div>
101103
</GridItem>
102104
</Grid>
103105
</>

‎libs/ui-lib/lib/cim/components/ClusterDeployment/customManifests/ConfigMapForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,7 @@ export const ConfigMapForm = ({ namespace }: { namespace: string }) => {
217217

218218
{!isValid && errorAlert}
219219

220-
{isError && (
220+
{!!isError && (
221221
<GridItem>
222222
<Alert
223223
variant={AlertVariant.danger}

‎libs/ui-lib/lib/cim/components/ClusterDeployment/hostDiscovery/ClusterDeploymentHostsDiscovery.tsx‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { Grid, GridItem, Content, OrderType } from '@patternfly/react-core';
3-
import Measure from 'react-measure';
3+
import useResizeObserver from '@react-hook/resize-observer';
44
import {
55
DiscoveryTroubleshootingModal,
66
FormatDiskWarning,
@@ -67,6 +67,12 @@ const ClusterDeploymentHostsDiscovery: React.FC<ClusterDeploymentHostsDiscoveryP
6767

6868
const isSNOCluster = getIsSNOCluster(agentClusterInstall);
6969
const { t } = useTranslation();
70+
71+
const tableRef = React.useRef<HTMLDivElement>(null);
72+
const [tableWidth, setTableWidth] = React.useState<number>();
73+
useResizeObserver(tableRef, (entry) => {
74+
setTableWidth(entry.contentRect.width);
75+
});
7076
return (
7177
<Grid hasGutter>
7278
<GridItem>
@@ -100,26 +106,22 @@ const ClusterDeploymentHostsDiscovery: React.FC<ClusterDeploymentHostsDiscoveryP
100106
</GridItem>
101107

102108
<GridItem>
103-
<Measure bounds>
104-
{({ measureRef, contentRect }) => (
105-
<div ref={measureRef}>
106-
<ClusterDeploymentHostDiscoveryTable
107-
agents={agents}
108-
bareMetalHosts={bareMetalHosts}
109-
infraEnv={infraEnv}
110-
onEditHost={setEditAgent}
111-
onEditRole={onEditRole}
112-
onSetInstallationDiskId={onSetInstallationDiskId}
113-
onEditBMH={setEditBMH}
114-
onChangeHostname={onChangeHostname}
115-
onChangeBMHHostname={onChangeBMHHostname}
116-
onApprove={onApproveAgent}
117-
width={contentRect.bounds?.width}
118-
onDeleteHost={onDeleteHost}
119-
/>
120-
</div>
121-
)}
122-
</Measure>
109+
<div ref={tableRef}>
110+
<ClusterDeploymentHostDiscoveryTable
111+
agents={agents}
112+
bareMetalHosts={bareMetalHosts}
113+
infraEnv={infraEnv}
114+
onEditHost={setEditAgent}
115+
onEditRole={onEditRole}
116+
onSetInstallationDiskId={onSetInstallationDiskId}
117+
onEditBMH={setEditBMH}
118+
onChangeHostname={onChangeHostname}
119+
onChangeBMHHostname={onChangeBMHHostname}
120+
onApprove={onApproveAgent}
121+
width={tableWidth}
122+
onDeleteHost={onDeleteHost}
123+
/>
124+
</div>
123125
<EditBMHModal
124126
infraEnv={infraEnv}
125127
bmh={editBMH}

‎libs/ui-lib/lib/cim/components/ClusterDeployment/hostSelection/ClusterDeploymentHostsSelectionAdvanced.tsx‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import isMatch from 'lodash-es/isMatch.js';
22
import { useFormikContext } from 'formik';
33
import React from 'react';
4-
import Measure from 'react-measure';
4+
import useResizeObserver from '@react-hook/resize-observer';
55
import { Alert, AlertVariant, Grid, GridItem } from '@patternfly/react-core';
66

77
import { AgentK8sResource } from '../../../types';
@@ -58,6 +58,12 @@ export const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
5858
[availableAgents, locations, agentLabels],
5959
);
6060

61+
const tableRef = React.useRef<HTMLDivElement>(null);
62+
const [tableWidth, setTableWidth] = React.useState<number>();
63+
useResizeObserver(tableRef, (entry) => {
64+
setTableWidth(entry.contentRect.width);
65+
});
66+
6167
return (
6268
<>
6369
<Grid hasGutter>
@@ -84,20 +90,16 @@ export const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
8490
/>
8591
)}
8692
<GridItem>
87-
<Measure bounds>
88-
{({ measureRef, contentRect }) => (
89-
<div ref={measureRef}>
90-
<AgentsSelectionTable
91-
matchingAgents={matchingAgents}
92-
onEditRole={onEditRole}
93-
onSetInstallationDiskId={onSetInstallationDiskId}
94-
width={contentRect.bounds?.width}
95-
onEditHost={onEditHost}
96-
onHostSelect={onHostSelect}
97-
/>
98-
</div>
99-
)}
100-
</Measure>
93+
<div ref={tableRef}>
94+
<AgentsSelectionTable
95+
matchingAgents={matchingAgents}
96+
onEditRole={onEditRole}
97+
onSetInstallationDiskId={onSetInstallationDiskId}
98+
width={tableWidth}
99+
onEditHost={onEditHost}
100+
onHostSelect={onHostSelect}
101+
/>
102+
</div>
101103
</GridItem>
102104
</Grid>
103105
</>

‎libs/ui-lib/lib/cim/components/InfraEnv/InfraEnvFormPage.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -92,14 +92,11 @@ const validationSchema = (usedNames: string[], t: TFunction) =>
9292
noProxy: noProxyValidationSchema,
9393
labels: Yup.array()
9494
.of(Yup.string())
95-
.test(
96-
'label-equals-validation',
97-
'Label selector needs to be in a `key=value` form',
98-
(values) =>
99-
(values as string[]).every((value) => {
100-
const parts = value.split('=');
101-
return parts.length === 2;
102-
}),
95+
.test('label-equals-validation', 'Label needs to be in a `key=value` form', (values) =>
96+
(values as string[]).every((value) => {
97+
const parts = value.split('=');
98+
return parts.length === 2;
99+
}),
103100
),
104101
additionalNtpSources: ntpSourceValidationSchema,
105102
}),
@@ -130,7 +127,7 @@ type InfraEnvFormProps = {
130127
osImages?: OsImage[];
131128
};
132129

133-
const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
130+
const InfraEnvForm: React.FC<React.PropsWithChildren<InfraEnvFormProps>> = ({
134131
onValuesChanged,
135132
children,
136133
pullSecret,
@@ -286,7 +283,7 @@ type InfraEnvFormPageProps = InfraEnvFormProps & {
286283
osImages?: OsImage[];
287284
};
288285

289-
export const InfraEnvFormPage: React.FC<InfraEnvFormPageProps> = ({
286+
export const InfraEnvFormPage: React.FC<React.PropsWithChildren<InfraEnvFormPageProps>> = ({
290287
usedNames,
291288
onSubmit,
292289
onClose,

0 commit comments

Comments
 (0)