@openshift-assisted/ui-lib 2.13.0-cim → 2.14.0-cim

package/lib/cim/components/Hypershift/DetailsPage/NodePoolsTable.tsx

@@ -2,17 +2,7 @@ import * as React from 'react';
 import { Link } from 'react-router-dom-v5-compat';
 import { Button, Label, Popover, Stack, StackItem } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
-import {
-  breakWord,
-  expandable,
-  sortable,
-  TableComposable,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from '@patternfly/react-table';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import classnames from 'classnames';
 
 import { TableRow } from '../../../../common/components/hosts/AITable';
@@ -61,10 +51,9 @@ export const nodePoolNameColumn = (): TableRow<NodePoolWithAgents> => {
       title: 'Nodepool',
       props: {
         id: 'col-header-hostname', // ACM jest tests require id over testId
+        modifier: 'breakWord',
       },
-      transforms: [sortable],
-      cellFormatters: [expandable],
-      cellTransforms: [breakWord],
+      sort: true,
     },
     cell: ({ nodePool }) => {
       return {
@@ -99,7 +88,7 @@ const NodePoolsTable = ({
     <>
       <Stack hasGutter>
         <StackItem>
-          <TableComposable variant="compact">
+          <Table variant="compact">
             <Thead>
               <Tr>
                 <Th />
@@ -230,7 +219,7 @@ const NodePoolsTable = ({
                 return rows;
               }, [])}
             </Tbody>
-          </TableComposable>
+          </Table>
         </StackItem>
         <StackItem>
           <Button

package/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/HostsStep.tsx

@@ -12,7 +12,7 @@ import { TFunction } from 'i18next';
 import { NodePoolK8sResource } from '../../types';
 
 const validationSchema = (clusterName: string, nodePools: NodePoolK8sResource[], t: TFunction) =>
-  Yup.lazy<HostsFormValues>((values) =>
+  Yup.lazy((values: HostsFormValues) =>
     Yup.object<HostsFormValues>().shape({
       agentNamespace: Yup.string().required(t('ai:Required field')),
       nodePools: Yup.array().of(

package/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/NodePoolForm.css

@@ -2,11 +2,11 @@
   padding-left: 1.75rem;
 }
 
-.ai-node-pool__expandable-button .pf-c-expandable-section__toggle {
+.ai-node-pool__expandable-button .pf-v5-c-expandable-section__toggle {
   padding-right: 0;
 }
 
-.ai-node-pool__expandable-button .pf-c-expandable-section__toggle-text {
+.ai-node-pool__expandable-button .pf-v5-c-expandable-section__toggle-text {
   color: black;
 }
 

package/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/NodePoolForm.tsx

@@ -135,7 +135,7 @@ const NodePoolForm: React.FC<NodePoolFormProps> = ({ infraEnvs, agents, index, o
               {!isExpanded && (
                 <>
                   <FlexItem>
-                    <Divider />
+                    <Divider orientation={{ default: 'vertical' }} />
                   </FlexItem>
                   <FlexItem>
                     <Label variant="outline">

package/lib/cim/components/Hypershift/HostedClusterWizard/NetworkStep/NetworkForm.css

@@ -1,7 +1,7 @@
-.ai-advanced-fields .pf-c-check__body {
+.ai-advanced-fields .pf-v5-c-check__body {
   width: 100%;
 }
 
-.ai-nodeport-fields .pf-c-radio__body {
+.ai-nodeport-fields .pf-v5-c-radio__body {
   width: 100%;
 }

package/lib/cim/components/Hypershift/HostedClusterWizard/NetworkStep/NetworkStep.tsx

@@ -16,7 +16,7 @@ import {
 import { useTranslation } from '../../../../../common/hooks/use-translation-wrapper';
 
 const getValidationSchema = (t: TFunction) =>
-  Yup.lazy<NetworkFormValues>((values) =>
+  Yup.lazy((values: NetworkFormValues) =>
     Yup.object<NetworkFormValues>().shape({
       sshPublicKey: sshPublicKeyValidationSchema.required(t('ai:Required field')),
       clusterNetworkCidr: values.isAdvanced

package/lib/cim/components/InfraEnv/AddHostDropdown.tsx

@@ -1,3 +1,4 @@
+import { Split, SplitItem, Spinner } from '@patternfly/react-core';
 import {
   Dropdown,
   DropdownGroup,
@@ -5,10 +6,7 @@ import {
   DropdownItemProps,
   DropdownSeparator,
   DropdownToggle,
-  Split,
-  SplitItem,
-  Spinner,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import * as React from 'react';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { AddBmcHostModal, AddBmcHostYamlModal, AddHostModal } from '../modals';
@@ -57,7 +55,11 @@ const AddHostDropdown = ({
       <Dropdown
         id="infraenv-actions"
         toggle={
-          <DropdownToggle id="dropdown-basic" onToggle={setIsKebabOpen} toggleVariant="primary">
+          <DropdownToggle
+            id="dropdown-basic"
+            onToggle={(_event, value) => setIsKebabOpen(value)}
+            toggleVariant="primary"
+          >
             {t('ai:Add hosts')}
           </DropdownToggle>
         }

package/lib/cim/components/InfraEnv/EnvironmentDetails.tsx

@@ -46,7 +46,7 @@ type EditItemProps = {
 const EditItem: React.FC<EditItemProps> = ({ title, onEdit, isLoading, isWarning, noIcon }) => {
   let icon = <CheckCircleIcon color={okColor.value} />;
   if (isLoading) {
-    icon = <Spinner isSVG size="md" />;
+    icon = <Spinner size="md" />;
   } else if (isWarning) {
     icon = <ExclamationTriangleIcon color={warningColor.value} />;
   }

package/lib/cim/components/InfraEnv/InfraEnvAgentTable.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Button, DropdownItem, Stack, StackItem } from '@patternfly/react-core';
+import { Button, Stack, StackItem } from '@patternfly/react-core';
+import { DropdownItem } from '@patternfly/react-core/deprecated';
 import noop from 'lodash-es/noop.js';
 
 import { Host } from '@openshift-assisted/types/assisted-installer-service';

package/lib/cim/components/InfraEnv/InfraEnvFormPage.tsx

@@ -73,7 +73,7 @@ export type EnvironmentStepFormValues = {
 };
 
 const validationSchema = (usedNames: string[], t: TFunction) =>
-  Yup.lazy<EnvironmentStepFormValues>((values) =>
+  Yup.lazy((values: EnvironmentStepFormValues) =>
     Yup.object<EnvironmentStepFormValues>().shape({
       name: richNameValidationSchema(t, usedNames),
       location: locationValidationSchema(t).required(t('ai:Location is a required field.')),
@@ -95,8 +95,8 @@ const validationSchema = (usedNames: string[], t: TFunction) =>
         .test(
           'label-equals-validation',
           'Label selector needs to be in a `key=value` form',
-          (values: string[]) =>
-            values.every((value) => {
+          (values) =>
+            (values as string[]).every((value) => {
               const parts = value.split('=');
               return parts.length === 2;
             }),
@@ -353,7 +353,7 @@ export const InfraEnvFormPage: React.FC<InfraEnvFormPageProps> = ({
                   // eslint-disable-next-line @typescript-eslint/no-misused-promises
                   onClick={submitForm}
                 >
-                  {t('ai:Create')} {isSubmitting && <Spinner isSVG size="md" />}
+                  {t('ai:Create')} {isSubmitting && <Spinner size="md" />}
                 </Button>
                 <Button variant="link" onClick={onClose} isDisabled={isSubmitting}>
                   {t('ai:Cancel')}

package/lib/cim/components/InfraEnv/InfraTableToolbar.tsx

@@ -3,15 +3,17 @@ import {
   Grid,
   GridItem,
   SearchInput,
-  Select,
-  SelectGroup,
-  SelectOption,
-  SelectVariant,
   Split,
   SplitItem,
   ToolbarFilter,
   ToolbarItem,
 } from '@patternfly/react-core';
+import {
+  Select,
+  SelectGroup,
+  SelectOption,
+  SelectVariant,
+} from '@patternfly/react-core/deprecated';
 import { FilterIcon } from '@patternfly/react-icons/dist/js/icons/filter-icon';
 import * as React from 'react';
 import { HostStatus, HostStatusDef } from '../../../common/components/hosts/types';
@@ -119,7 +121,7 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
           <Select
             variant={SelectVariant.checkbox}
             aria-label={t('ai:Status')}
-            onToggle={setStatusFilterOpen}
+            onToggle={(_event, value) => setStatusFilterOpen(value)}
             onSelect={(e, value) => {
               // eslint-disable-next-line
               if ((e.target as any).checked) {

package/lib/cim/components/InfraEnv/OpenshiftVersionDropdown.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Dropdown, DropdownItem, DropdownToggle, FormGroup, Tooltip } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
+import { FormGroup, Tooltip } from '@patternfly/react-core';
 import { useField } from 'formik';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { architectureData, getFieldId, SupportedCpuArchitecture } from '../../../common';

package/lib/cim/components/InfraEnv/infra-env.css

@@ -1,7 +1,7 @@
 .infra-env__form {
-  padding-right: var(--pf-c-wizard__main-body--PaddingRight);
+  padding-right: var(--pf-v5-c-wizard__main-body--PaddingRight);
 }
 
 .infra-env-hosts-tab-title__icon {
-  margin-left: var(--pf-global--spacer--xs);
+  margin-left: var(--pf-v5-global--spacer--xs);
 }

package/lib/cim/components/common/CpuArchitectureDropdown.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Dropdown, DropdownItem, DropdownToggle, FormGroup } from '@patternfly/react-core';
+import { FormGroup } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import {
   architectureData,

package/lib/cim/components/common/ResourceAlerts.css

@@ -1,5 +1,5 @@
 .cim-resource-alerts {
-  margin-bottom: var(--pf-global--spacer--sm);
+  margin-bottom: var(--pf-v5-global--spacer--sm);
 }
 
 .cim-resource-alerts--noul ul {

package/lib/cim/components/modals/AddBmcHostYamlForm.css

@@ -1,5 +1,5 @@
 .ai-bmc-yaml__error {
   display: block;
-  font-size: var(--pf-global--FontSize--md);
+  font-size: var(--pf-v5-global--FontSize--md);
   color: red;
 }

package/lib/cim/components/modals/AddBmcHostYamlForm.tsx

@@ -7,6 +7,7 @@ import {
   ButtonVariant,
   EmptyState,
   EmptyStateBody,
+  EmptyStateHeader,
   EmptyStateIcon,
   EmptyStateVariant,
   ModalBoxBody,
@@ -14,7 +15,6 @@ import {
   Spinner,
   Stack,
   StackItem,
-  Title,
 } from '@patternfly/react-core';
 import { ErrorCircleOIcon } from '@patternfly/react-icons/dist/js/icons/error-circle-o-icon';
 import { UploadIcon } from '@patternfly/react-icons/dist/js/icons/upload-icon';
@@ -132,11 +132,12 @@ const AddBmcHostYamlForm: React.FC<
       <ModalBoxBody>
         <Stack hasGutter>
           <StackItem>
-            <EmptyState variant={EmptyStateVariant.large}>
-              <EmptyStateIcon icon={UploadIcon} />
-              <Title headingLevel="h4" size="lg">
-                {t('ai:Upload a YAML file')}
-              </Title>
+            <EmptyState variant={EmptyStateVariant.lg}>
+              <EmptyStateHeader
+                titleText={<>{t('ai:Upload a YAML file')}</>}
+                icon={<EmptyStateIcon icon={UploadIcon} />}
+                headingLevel="h4"
+              />
               <EmptyStateBody>
                 <p>
                   {t(

package/lib/cim/components/modals/AddHostModal.tsx

@@ -3,6 +3,7 @@ import { FormikHelpers } from 'formik';
 import {
   EmptyState,
   EmptyStateBody,
+  EmptyStateHeader,
   EmptyStateIcon,
   Modal,
   ModalVariant,
@@ -125,7 +126,7 @@ const GeneratingIsoDownload = ({
     />
   ) : (
     <EmptyState>
-      <EmptyStateIcon icon={Spinner} />
+      <EmptyStateHeader icon={<EmptyStateIcon icon={Spinner} />} />
       <EmptyStateBody>{t('ai:Generating discovery ISO')}</EmptyStateBody>
     </EmptyState>
   );
@@ -149,7 +150,7 @@ const GeneratingIPXEDownload = ({
     />
   ) : (
     <EmptyState>
-      <EmptyStateIcon icon={Spinner} />
+      <EmptyStateHeader icon={<EmptyStateIcon icon={Spinner} />} />
       <EmptyStateBody>{t('ai:Generating iPXE script')}</EmptyStateBody>
     </EmptyState>
   );

package/lib/cim/components/modals/CimConfiguration/CimConfigurationForm.css

@@ -1,4 +1,4 @@
-.cim-config-form-title .pf-c-form__label-text {
+.cim-config-form-title .pf-v5-c-form__label-text {
   font-size: larger;
 }
 
@@ -11,13 +11,13 @@
 }
 
 .cim-config-form-aws {
-  margin-bottom: var(--pf-global--spacer--md);
+  margin-bottom: var(--pf-v5-global--spacer--md);
 }
 
 .cim-config-form-volume input {
   width: 10rem;
 }
 
-.cim-config-modal .pf-c-modal-box__body {
+.cim-config-modal .pf-v5-c-modal-box__body {
   overflow: hidden;
 }

package/lib/cim/components/modals/CimConfiguration/CimConfigurationForm.tsx

@@ -8,8 +8,13 @@ import {
   Popover,
   Checkbox,
   TextInput,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Icon,
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { HelpIcon } from '@patternfly/react-icons/dist/js/icons/help-icon';
 
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
@@ -22,7 +27,6 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
   docConfigAwsUrl,
   isEdit,
   isInProgressPeriod,
-
   dbVolSize,
   dbVolSizeValidation,
   setDbVolSize,
@@ -65,9 +69,11 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
         aria-label={t('ai:More info for load balancer on Amazon web services')}
         aria-describedby="cim-config-form-aws-title"
         onClick={(e) => e.preventDefault()}
-        className="pf-c-form__group-label-help"
+        className="pf-v5-c-form__group-label-help"
       >
-        <HelpIcon noVerticalAlign />
+        <Icon>
+          <HelpIcon />
+        </Icon>
       </button>
     </Popover>
   );
@@ -96,9 +102,11 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
               aria-label={t('ai:More info for configure storage sizes')}
               aria-describedby="cim-config-form-storage-title"
               onClick={(e) => e.preventDefault()}
-              className="pf-c-form__group-label-help"
+              className="pf-v5-c-form__group-label-help"
             >
-              <HelpIcon noVerticalAlign />
+              <Icon>
+                <HelpIcon />
+              </Icon>
             </button>
           </Popover>
         }
@@ -121,29 +129,39 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
                   aria-label={t('ai:More info for database storage')}
                   aria-describedby="cim-config-form-storage-db"
                   onClick={(e) => e.preventDefault()}
-                  className="pf-c-form__group-label-help"
+                  className="pf-v5-c-form__group-label-help"
                 >
-                  <HelpIcon noVerticalAlign />
+                  <Icon>
+                    <HelpIcon />
+                  </Icon>
                 </button>
               </Popover>
             }
-            helperTextInvalid={dbVolSizeValidation}
-            validated={dbVolSizeValidation ? 'error' : 'default'}
             isRequired
           >
             <span className="cim-config-form-volume">
               <TextInput
+                validated={dbVolSizeValidation ? 'error' : 'default'}
                 isRequired
                 isDisabled={isEdit /* Not supported by backend */}
                 type="number"
                 id="cim-config-form-storage-db"
                 name="cim-config-form-storage-db"
                 value={dbVolSize}
-                onChange={(v: string) => setDbVolSize(getNumber(v, 1))}
+                onChange={(_event, v: string) => setDbVolSize(getNumber(v, 1))}
                 min={0 /* Do the validation elsewhere */}
               />{' '}
               Gi
             </span>
+            {dbVolSizeValidation !== undefined && (
+              <FormHelperText>
+                <HelperText>
+                  <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
+                    {dbVolSizeValidation}
+                  </HelperTextItem>
+                </HelperText>
+              </FormHelperText>
+            )}
           </FormGroup>
         </FlexItem>
         <FlexItem>
@@ -161,29 +179,39 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
                   aria-label={t('ai:More info for system storage')}
                   aria-describedby="cim-config-form-storage-sys"
                   onClick={(e) => e.preventDefault()}
-                  className="pf-c-form__group-label-help"
+                  className="pf-v5-c-form__group-label-help"
                 >
-                  <HelpIcon noVerticalAlign />
+                  <Icon>
+                    <HelpIcon />
+                  </Icon>
                 </button>
               </Popover>
             }
-            helperTextInvalid={fsVolSizeValidation}
-            validated={fsVolSizeValidation ? 'error' : 'default'}
             isRequired
           >
             <span className="cim-config-form-volume">
               <TextInput
+                validated={fsVolSizeValidation ? 'error' : 'default'}
                 isRequired
                 isDisabled={isEdit /* Not supported by backend */}
                 type="number"
                 id="cim-config-form-storage-sys"
                 name="cim-config-form-storage-sys"
                 value={fsVolSize}
-                onChange={(v: string) => setFsVolSize(getNumber(v, 1))}
+                onChange={(_event, v: string) => setFsVolSize(getNumber(v, 1))}
                 min={0}
               />{' '}
               Gi
             </span>
+            {fsVolSizeValidation !== undefined && (
+              <FormHelperText>
+                <HelperText>
+                  <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
+                    {fsVolSizeValidation}
+                  </HelperTextItem>
+                </HelperText>
+              </FormHelperText>
+            )}
           </FormGroup>
         </FlexItem>
         <FlexItem>
@@ -201,33 +229,42 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
                   aria-label={t('ai:More info for image storage')}
                   aria-describedby="cim-config-form-storage-img"
                   onClick={(e) => e.preventDefault()}
-                  className="pf-c-form__group-label-help"
+                  className="pf-v5-c-form__group-label-help"
                 >
-                  <HelpIcon noVerticalAlign />
+                  <Icon>
+                    <HelpIcon />
+                  </Icon>
                 </button>
               </Popover>
             }
-            helperTextInvalid={imgVolSizeValidation}
-            validated={imgVolSizeValidation ? 'error' : 'default'}
             isRequired
           >
             <span className="cim-config-form-volume">
               <TextInput
+                validated={imgVolSizeValidation ? 'error' : 'default'}
                 isRequired
                 isDisabled={isEdit /* Not supported by backend */}
                 type="number"
                 id="cim-config-form-storage-img"
                 name="cim-config-form-storage-img"
                 value={imgVolSize}
-                onChange={(v: string) => setImgVolSize(getNumber(v, 10))}
+                onChange={(_event, v: string) => setImgVolSize(getNumber(v, 10))}
                 min={0}
               />{' '}
               Gi
             </span>
+            {imgVolSizeValidation !== undefined && (
+              <FormHelperText>
+                <HelperText>
+                  <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
+                    {imgVolSizeValidation}
+                  </HelperTextItem>
+                </HelperText>
+              </FormHelperText>
+            )}
           </FormGroup>
         </FlexItem>
       </Flex>
-
       <Checkbox
         label={
           <span className="cim-config-form-aws-label">
@@ -246,7 +283,7 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
           (isEdit &&
             configureLoadBalancerInitial) /* For edit flow, only No to Yes transition is possible */
         }
-        onChange={setConfigureLoadBalancer}
+        onChange={(_event, value) => setConfigureLoadBalancer(value)}
       />
     </Form>
   );

package/lib/cim/components/modals/CimConfiguration/CimConfigurationModal.css

@@ -1,3 +1,3 @@
-.cim-config-modal .pf-c-alert {
-  margin-bottom: var(--pf-global--spacer--md);
+.cim-config-modal .pf-v5-c-alert {
+  margin-bottom: var(--pf-v5-global--spacer--md);
 }

package/lib/cim/components/modals/EditProxyModal.tsx

@@ -25,7 +25,7 @@ import { getErrorMessage } from '../../../common/utils';
 import { getWarningMessage } from './utils';
 
 const validationSchema = () =>
-  Yup.lazy<ProxyFieldsType>((values) =>
+  Yup.lazy((values: ProxyFieldsType) =>
     Yup.object<ProxyFieldsType>().shape({
       httpProxy: httpProxyValidationSchema({
         values,

package/lib/cim/components/modals/MassApproveAction.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropdownItem } from '@patternfly/react-core';
+import { DropdownItem } from '@patternfly/react-core/deprecated';
 import { AgentK8sResource } from '../../types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 

package/lib/cim/components/modals/MassApproveAgentModal.tsx

@@ -9,7 +9,6 @@ import {
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { sortable } from '@patternfly/react-table';
 import { getAIHosts } from '../helpers';
 import { AgentK8sResource } from '../../types';
 import HostsTable from '../../../common/components/hosts/HostsTable';
@@ -28,7 +27,7 @@ type ApproveTableRowProps = {
 };
 
 const ApproveTableRow: React.FC<ApproveTableRowProps> = ({ agent, children }) => (
-  <div className={agent?.spec.approved ? 'pf-u-color-200' : undefined}>{children}</div>
+  <div className={agent?.spec.approved ? 'pf-v5-u-color-200' : undefined}>{children}</div>
 );
 
 const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host> => {
@@ -38,7 +37,7 @@ const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host
       props: {
         id: 'col-header-hostname', // ACM jest tests require id over testId
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id);
@@ -63,7 +62,7 @@ const statusColumn = (
       props: {
         id: 'col-header-status', // ACM jest tests require id over testId
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id);

package/lib/cim/components/modals/MassDeleteAgentModal.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Button, Flex, FlexItem, Popover } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { Link } from 'react-router-dom-v5-compat';
-import { sortable } from '@patternfly/react-table';
 import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
 import {
   getHostname,
@@ -35,7 +34,7 @@ const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host
       props: {
         id: 'col-header-hostname', // ACM jest tests require id over testId
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const inventory = getInventory(host);
@@ -44,7 +43,9 @@ const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host
         ?.clusterDeploymentName?.name;
       return {
         title: (
-          <div className={assignedToCluster ? 'pf-u-color-200' : undefined}>{computedHostname}</div>
+          <div className={assignedToCluster ? 'pf-v5-u-color-200' : undefined}>
+            {computedHostname}
+          </div>
         ),
         props: { 'data-testid': 'hostname' },
         sortableValue: computedHostname,
@@ -66,7 +67,7 @@ const statusColumn = (
       props: {
         id: 'col-header-status',
       },
-      transforms: [sortable],
+      sort: true,
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id);

package/lib/cim/components/modals/ScaleUpModal.tsx

@@ -37,15 +37,15 @@ const getAgentsToAdd = (
   );
 
 const getValidationSchema = (agentsCount: number) => {
-  return Yup.lazy<ScaleUpFormValues>((values) => {
+  return Yup.lazy((values: ScaleUpFormValues) => {
     return Yup.object<ScaleUpFormValues>().shape({
       hostCount: Yup.number().min(1).max(agentsCount),
       autoSelectedHostIds: values.autoSelectHosts
-        ? Yup.array<string>().min(1).max(agentsCount)
-        : Yup.array<string>(),
+        ? Yup.array(Yup.string()).min(1).max(agentsCount)
+        : Yup.array(Yup.string()),
       selectedHostIds: values.autoSelectHosts
-        ? Yup.array<string>()
-        : Yup.array<string>().min(1).max(agentsCount),
+        ? Yup.array(Yup.string())
+        : Yup.array(Yup.string()).min(1).max(agentsCount),
     });
   });
 };