Fix React 18 types

apps/assisted-disconnected-ui/package.json

@@ -23,7 +23,6 @@
     "react-redux": "^8.0.5",
     "react-router-dom": "5.3.x",
     "react-router-dom-v5-compat": "^6.21.2",
-    "react-tagsinput": "^3.20",
     "redux": "^4",
     "uuid": "^8.1",
     "yup": "^1.4.0"

apps/assisted-ui/package.json

@@ -23,7 +23,6 @@
     "react-redux": "^8.0.5",
     "react-router-dom": "5.3.x",
     "react-router-dom-v5-compat": "^6.21.2",
-    "react-tagsinput": "^3.20",
     "redux": "^4",
     "uuid": "^8.1",
     "yup": "^1.4.0"

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

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter, BrowserRouterProps } from 'react-router-dom';
 import { CompatRouter, Route } from 'react-router-dom-v5-compat';
 import { Page } from '@patternfly/react-core';
 import * as OCM from '@openshift-assisted/ui-lib/ocm';
@@ -9,14 +9,20 @@ import '../i18n';
 const { HostsClusterDetailTabMock, UILibRoutes, Features, Config } = OCM;
 window.__app__ = { OCM };
 
+// Add PropsWithChildren to bypass the React 18 type mismatch
+// eslint-disable-next-line
+const BrowserRouter18 = BrowserRouter as any as React.FC<
+  React.PropsWithChildren<BrowserRouterProps>
+>;
+
 export const App: React.FC = () => (
-  <BrowserRouter basename={Config.routeBasePath}>
+  <BrowserRouter18 basename={Config.routeBasePath}>
     <CompatRouter>
       <Page masthead={<Header />} isManagedSidebar defaultManagedSidebarIsOpen={false}>
         <UILibRoutes allEnabledFeatures={Features.STANDALONE_DEPLOYMENT_ENABLED_FEATURES}>
           <Route path={'/day2-flow-mock'} element={<HostsClusterDetailTabMock />} />
         </UILibRoutes>
       </Page>
     </CompatRouter>
-  </BrowserRouter>
+  </BrowserRouter18>
 );

libs/locales/lib/en/translation.json

@@ -318,7 +318,7 @@
   "ai:Enable in cluster": "Enable in cluster",
   "ai:Enabled for the installation": "Enabled for the installation",
   "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.",
-  "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.",
+  "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.",
   "ai:Enter a password for the BMC": "Enter a password for the BMC",
   "ai:Enter a username for the BMC": "Enter a username for the BMC",
   "ai:Enter an address": "Enter an address",
@@ -591,6 +591,7 @@
   "ai:Never share your downloaded ISO with anyone else.": "Never share your downloaded ISO with anyone else.",
   "ai:New hostname": "New hostname",
   "ai:New hostname will appear here...": "New hostname will appear here...",
+  "ai:New label": "New label",
   "ai:Next": "Next",
   "ai:NIC": "NIC",
   "ai:NIC_plural": "NICs",

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

@@ -45,7 +45,7 @@ export const agentHostnameColumn = (
   canEditBMH?: HostsTableActions['canEditBMH'],
 ): TableRow<Host> => ({
   header: {
-    title: t('ai:Hostname'),
+    title: t<string>('ai:Hostname'),
     props: {
       id: 'col-header-hostname', // ACM jest tests require id over testId
       modifier: 'breakWord',
@@ -92,7 +92,7 @@ export const discoveryTypeColumn = (
 ): TableRow<Host> => {
   return {
     header: {
-      title: t('ai:Discovery type'),
+      title: t<string>('ai:Discovery type'),
       props: {
         id: 'col-header-discovery-type',
       },
@@ -146,7 +146,7 @@ export const agentStatusColumn = ({
 }: AgentStatusColumnProps): TableRow<Host> => {
   return {
     header: {
-      title: t('ai:Status'),
+      title: t<string>('ai:Status'),
       props: {
         id: 'col-header-infraenvstatus',
       },
@@ -194,7 +194,7 @@ export const clusterColumn = (
 ): TableRow<Host> => {
   return {
     header: {
-      title: t('ai:Cluster'),
+      title: t<string>('ai:Cluster'),
       props: {
         id: 'col-header-cluster',
       },
@@ -234,7 +234,7 @@ export const clusterColumn = (
 export const infraEnvColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host> => {
   return {
     header: {
-      title: t('ai:Infrastructure env'),
+      title: t<string>('ai:Infrastructure env'),
       props: {
         id: 'col-header-infraenv',
       },

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import Measure from 'react-measure';
 import isMatch from 'lodash-es/isMatch.js';
 import { useFormikContext } from 'formik';
 import { Alert, AlertVariant, Grid, GridItem } from '@patternfly/react-core';
+import useResizeObserver from '@react-hook/resize-observer';
 
 import { AgentK8sResource } from '../../../types';
 import { AGENT_LOCATION_LABEL_KEY, AGENT_NOLOCATION_VALUE } from '../../common';
@@ -58,6 +58,12 @@ const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
     [availableAgents, locations, agentLabels],
   );
 
+  const tableRef = React.useRef<HTMLDivElement>(null);
+  const [tableWidth, setTableWidth] = React.useState<number>();
+  useResizeObserver(tableRef, (entry) => {
+    setTableWidth(entry.contentRect.width);
+  });
+
   return (
     <>
       <Grid hasGutter>
@@ -84,20 +90,16 @@ const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
           />
         )}
         <GridItem>
-          <Measure bounds>
-            {({ measureRef, contentRect }) => (
-              <div ref={measureRef}>
-                <AgentsSelectionTable
-                  matchingAgents={matchingAgents}
-                  onEditRole={onEditRole}
-                  onSetInstallationDiskId={onSetInstallationDiskId}
-                  width={contentRect.bounds?.width}
-                  onEditHost={onEditHost}
-                  onHostSelect={onHostSelect}
-                />
-              </div>
-            )}
-          </Measure>
+          <div ref={tableRef}>
+            <AgentsSelectionTable
+              matchingAgents={matchingAgents}
+              onEditRole={onEditRole}
+              onSetInstallationDiskId={onSetInstallationDiskId}
+              width={tableWidth}
+              onEditHost={onEditHost}
+              onHostSelect={onHostSelect}
+            />
+          </div>
         </GridItem>
       </Grid>
     </>

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

@@ -217,7 +217,7 @@ export const ConfigMapForm = ({ namespace }: { namespace: string }) => {
 
       {!isValid && errorAlert}
 
-      {isError && (
+      {!!isError && (
         <GridItem>
           <Alert
             variant={AlertVariant.danger}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Grid, GridItem, Content, OrderType } from '@patternfly/react-core';
-import Measure from 'react-measure';
+import useResizeObserver from '@react-hook/resize-observer';
 import {
   DiscoveryTroubleshootingModal,
   FormatDiskWarning,
@@ -67,6 +67,12 @@ const ClusterDeploymentHostsDiscovery: React.FC<ClusterDeploymentHostsDiscoveryP
 
   const isSNOCluster = getIsSNOCluster(agentClusterInstall);
   const { t } = useTranslation();
+
+  const tableRef = React.useRef<HTMLDivElement>(null);
+  const [tableWidth, setTableWidth] = React.useState<number>();
+  useResizeObserver(tableRef, (entry) => {
+    setTableWidth(entry.contentRect.width);
+  });
   return (
     <Grid hasGutter>
       <GridItem>
@@ -100,26 +106,22 @@ const ClusterDeploymentHostsDiscovery: React.FC<ClusterDeploymentHostsDiscoveryP
       </GridItem>
 
       <GridItem>
-        <Measure bounds>
-          {({ measureRef, contentRect }) => (
-            <div ref={measureRef}>
-              <ClusterDeploymentHostDiscoveryTable
-                agents={agents}
-                bareMetalHosts={bareMetalHosts}
-                infraEnv={infraEnv}
-                onEditHost={setEditAgent}
-                onEditRole={onEditRole}
-                onSetInstallationDiskId={onSetInstallationDiskId}
-                onEditBMH={setEditBMH}
-                onChangeHostname={onChangeHostname}
-                onChangeBMHHostname={onChangeBMHHostname}
-                onApprove={onApproveAgent}
-                width={contentRect.bounds?.width}
-                onDeleteHost={onDeleteHost}
-              />
-            </div>
-          )}
-        </Measure>
+        <div ref={tableRef}>
+          <ClusterDeploymentHostDiscoveryTable
+            agents={agents}
+            bareMetalHosts={bareMetalHosts}
+            infraEnv={infraEnv}
+            onEditHost={setEditAgent}
+            onEditRole={onEditRole}
+            onSetInstallationDiskId={onSetInstallationDiskId}
+            onEditBMH={setEditBMH}
+            onChangeHostname={onChangeHostname}
+            onChangeBMHHostname={onChangeBMHHostname}
+            onApprove={onApproveAgent}
+            width={tableWidth}
+            onDeleteHost={onDeleteHost}
+          />
+        </div>
         <EditBMHModal
           infraEnv={infraEnv}
           bmh={editBMH}

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

@@ -1,7 +1,7 @@
 import isMatch from 'lodash-es/isMatch.js';
 import { useFormikContext } from 'formik';
 import React from 'react';
-import Measure from 'react-measure';
+import useResizeObserver from '@react-hook/resize-observer';
 import { Alert, AlertVariant, Grid, GridItem } from '@patternfly/react-core';
 
 import { AgentK8sResource } from '../../../types';
@@ -58,6 +58,12 @@ export const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
     [availableAgents, locations, agentLabels],
   );
 
+  const tableRef = React.useRef<HTMLDivElement>(null);
+  const [tableWidth, setTableWidth] = React.useState<number>();
+  useResizeObserver(tableRef, (entry) => {
+    setTableWidth(entry.contentRect.width);
+  });
+
   return (
     <>
       <Grid hasGutter>
@@ -84,20 +90,16 @@ export const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
           />
         )}
         <GridItem>
-          <Measure bounds>
-            {({ measureRef, contentRect }) => (
-              <div ref={measureRef}>
-                <AgentsSelectionTable
-                  matchingAgents={matchingAgents}
-                  onEditRole={onEditRole}
-                  onSetInstallationDiskId={onSetInstallationDiskId}
-                  width={contentRect.bounds?.width}
-                  onEditHost={onEditHost}
-                  onHostSelect={onHostSelect}
-                />
-              </div>
-            )}
-          </Measure>
+          <div ref={tableRef}>
+            <AgentsSelectionTable
+              matchingAgents={matchingAgents}
+              onEditRole={onEditRole}
+              onSetInstallationDiskId={onSetInstallationDiskId}
+              width={tableWidth}
+              onEditHost={onEditHost}
+              onHostSelect={onHostSelect}
+            />
+          </div>
         </GridItem>
       </Grid>
     </>

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

@@ -92,14 +92,11 @@ const validationSchema = (usedNames: string[], t: TFunction) =>
       noProxy: noProxyValidationSchema,
       labels: Yup.array()
         .of(Yup.string())
-        .test(
-          'label-equals-validation',
-          'Label selector needs to be in a `key=value` form',
-          (values) =>
-            (values as string[]).every((value) => {
-              const parts = value.split('=');
-              return parts.length === 2;
-            }),
+        .test('label-equals-validation', 'Label needs to be in a `key=value` form', (values) =>
+          (values as string[]).every((value) => {
+            const parts = value.split('=');
+            return parts.length === 2;
+          }),
         ),
       additionalNtpSources: ntpSourceValidationSchema,
     }),
@@ -130,7 +127,7 @@ type InfraEnvFormProps = {
   osImages?: OsImage[];
 };
 
-const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
+const InfraEnvForm: React.FC<React.PropsWithChildren<InfraEnvFormProps>> = ({
   onValuesChanged,
   children,
   pullSecret,
@@ -286,7 +283,7 @@ type InfraEnvFormPageProps = InfraEnvFormProps & {
   osImages?: OsImage[];
 };
 
-export const InfraEnvFormPage: React.FC<InfraEnvFormPageProps> = ({
+export const InfraEnvFormPage: React.FC<React.PropsWithChildren<InfraEnvFormPageProps>> = ({
   usedNames,
   onSubmit,
   onClose,