@openshift-assisted/ui-lib 2.16.4-cim → 2.16.6-cim

package/lib/cim/components/helpers/toAssisted.ts

@@ -1,6 +1,11 @@
 import cloneDeep from 'lodash-es/cloneDeep.js';
 import { AgentK8sResource } from '../../types/k8s/agent';
-import { Cluster, Host, Inventory } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  Cluster,
+  Host,
+  Inventory,
+  PlatformType,
+} from '@openshift-assisted/types/assisted-installer-service';
 import { ClusterDeploymentK8sResource } from '../../types/k8s/cluster-deployment';
 import { AgentClusterInstallK8sResource } from '../../types/k8s/agent-cluster-install';
 import { getAgentStatusKey, getClusterStatus } from './status';
@@ -70,6 +75,7 @@ export const getAIHosts = (
       infraEnvId: `${agent.metadata?.namespace || ''}/${
         agent.metadata?.labels?.['infraenvs.agent-install.openshift.io'] || ''
       }`,
+      nodeLabels: JSON.stringify(agent.metadata?.labels || {}),
     };
   });
 
@@ -112,6 +118,18 @@ export const getAIHosts = (
   return [...hosts, ...restBmhs];
 };
 
+const extractVersionFromImageSetRef = (imageSetRefName?: string): string | undefined => {
+  if (!imageSetRefName) {
+    return undefined;
+  }
+  // Match pattern like "4.19.18" or "4.19" in strings like "img4.19.18-multi-appsub"
+  const versionMatch = imageSetRefName.match(/(\d+\.\d+)(?:\.\d+)?/);
+  if (versionMatch && versionMatch[1]) {
+    return versionMatch[1];
+  }
+  return undefined;
+};
+
 export const getAICluster = ({
   clusterDeployment,
   agentClusterInstall,
@@ -123,9 +141,13 @@ export const getAICluster = ({
   agents?: AgentK8sResource[];
   infraEnv?: InfraEnvK8sResource;
 }): Cluster => {
+  const imageSetRefName = agentClusterInstall?.spec?.imageSetRef?.name;
+  const extractedVersion = extractVersionFromImageSetRef(imageSetRefName);
+
   const installVersion =
     clusterDeployment.status?.installVersion ||
-    clusterDeployment.metadata?.labels?.[OCP_VERSION_MAJOR_MINOR];
+    clusterDeployment.metadata?.labels?.[OCP_VERSION_MAJOR_MINOR] ||
+    extractedVersion;
   const [status, statusInfo] = getClusterStatus(agentClusterInstall);
   const aiCluster: Cluster = {
     id: clusterDeployment.metadata?.uid || '',
@@ -174,6 +196,9 @@ export const getAICluster = ({
     cpuArchitecture: getClusterDeploymentCpuArchitecture(clusterDeployment, infraEnv),
     networkType: agentClusterInstall?.spec?.networking.networkType,
     controlPlaneCount: agentClusterInstall?.spec?.provisionRequirements.controlPlaneAgents || 3,
+    platform: {
+      type: (agentClusterInstall?.spec?.platformType?.toLowerCase() || 'baremetal') as PlatformType,
+    },
   };
   /*
   aiCluster.agentSelectorMasterLabels =

package/lib/cim/components/helpers/versions.ts

@@ -8,7 +8,7 @@ import {
 } from '../../types';
 import { CpuArchitecture, OpenshiftVersionOptionType } from '../../../common';
 import { OpenshiftVersion } from '@openshift-assisted/types/assisted-installer-service';
-import { isMajorMinorVersionEqualOrGreater } from '../../../common/utils';
+import { getComparableVersionInt } from '../../../common/utils';
 
 export const getVersionFromReleaseImage = (releaseImage = '') => {
   const match = /.+:(\d+\.\d+(?:\.\d+)?(?:-\w+)?)/gm.exec(releaseImage);
@@ -61,48 +61,65 @@ export const isValidImageSet = (
   );
 };
 
+// Extracts major.minor version, strips any non-numeric prefix (e.g., "img4.18.55" → "4.18")
+const extractMajorMinor = (version: string): string => {
+  const versionWithoutPrefix = version.replace(/^[^\d]*/, '');
+  return versionWithoutPrefix.split('.').slice(0, 2).join('.');
+};
+
+// Converts a ClusterImageSet to an OpenshiftVersionOptionType
+const toVersionOption = (
+  clusterImageSet: ClusterImageSetK8sResource,
+): OpenshiftVersionOptionType => {
+  const version =
+    getVersionFromReleaseImage(clusterImageSet.spec?.releaseImage) ||
+    clusterImageSet.metadata?.name ||
+    '';
+  const cpuArch = getCPUArchFromReleaseImage(clusterImageSet.spec?.releaseImage);
+  return {
+    label: `OpenShift ${version}`,
+    version,
+    value: clusterImageSet.metadata?.name as string,
+    default: false,
+    // (rawagner) ACM does not have the warning so changing to 'production'
+    // supportLevel : getSupportLevelFromChannel(clusterImageSet.metadata?.labels?.channel)
+    supportLevel: 'production',
+    cpuArchitectures: cpuArch ? [cpuArch as CpuArchitecture] : undefined,
+  };
+};
+
+/**
+ * In case there are osImages specified on the AgentServiceConfig, we want to limit
+ * the availability in the dropdown to only versions that are listed there.
+ * Otherwise the installation fails.
+ */
+const hasMatchingOsImage = (
+  version: OpenshiftVersionOptionType,
+  osImageVersions: (string | undefined)[],
+): boolean => {
+  if (!osImageVersions.length) return true;
+  return osImageVersions.includes(extractMajorMinor(version.version));
+};
+
 export const getOCPVersions = (
   clusterImageSets: ClusterImageSetK8sResource[],
-  isNutanix?: boolean | undefined,
+  isNutanix?: boolean,
   osImages?: OsImage[],
   extended?: boolean,
 ): OpenshiftVersionOptionType[] => {
-  const ocpImageVersions = Array.from(
-    new Set(osImages?.map((osImage) => osImage.openshiftVersion)),
-  );
+  const architectures = isNutanix ? supportedNutanixPlatforms : undefined;
+  const osImageVersions = [...new Set(osImages?.map((img) => img.openshiftVersion))];
 
   const versions = clusterImageSets
-    .filter((clusterImageSet) =>
-      isValidImageSet(clusterImageSet, isNutanix ? supportedNutanixPlatforms : undefined, extended),
-    )
-    .map((clusterImageSet): OpenshiftVersionOptionType => {
-      const version = getVersionFromReleaseImage(clusterImageSet.spec?.releaseImage);
-      const cpuArch = getCPUArchFromReleaseImage(clusterImageSet.spec?.releaseImage);
-      return {
-        label: `OpenShift ${version ? version : (clusterImageSet.metadata?.name as string)}`,
-        version: version || clusterImageSet.metadata?.name || '',
-        value: clusterImageSet.metadata?.name as string,
-        default: false,
-        // (rawagner) ACM does not have the warning so changing to 'production'
-        supportLevel: 'production', // getSupportLevelFromChannel(clusterImageSet.metadata?.labels?.channel),
-        cpuArchitectures: cpuArch ? [cpuArch as CpuArchitecture] : undefined,
-      };
-    })
-    .filter((ocpVersion) => {
-      const ver = ocpVersion.version.split('.').slice(0, 2).join('.');
-      return !!ocpImageVersions.length ? ocpImageVersions.includes(ver) : true;
-    })
-    .sort(
-      (versionA, versionB) => /* descending */ -1 * versionA.label.localeCompare(versionB.label),
-    );
-
-  if (versions.length) {
-    // make sure that the pre-selected one is the first-one after sorting
-    versions[0].default = true;
-  }
+    .filter((clusterImageSet) => isValidImageSet(clusterImageSet, architectures, extended))
+    .map(toVersionOption)
+    .filter((v) => hasMatchingOsImage(v, osImageVersions))
+    .sort((a, b) => b.label.localeCompare(a.label));
+
+  // Mark first version as the default selection
+  versions[0] && (versions[0].default = true);
 
-  const deduped = uniqBy(versions, (v) => v.version);
-  return deduped;
+  return uniqBy(versions, (v) => v.version);
 };
 
 export const getSelectedVersion = (
@@ -123,5 +140,9 @@ export const getCurrentClusterVersion = (cv?: ClusterVersionK8sResource): string
 
 export const getNetworkType = (
   ocpVersion: OpenshiftVersionOptionType | undefined,
-): 'OVNKubernetes' | 'OpenShiftSDN' =>
-  isMajorMinorVersionEqualOrGreater(ocpVersion?.version, '4.12') ? 'OVNKubernetes' : 'OpenShiftSDN';
+): 'OVNKubernetes' | 'OpenShiftSDN' => {
+  const checkVersionNum = getComparableVersionInt(ocpVersion?.version || '');
+  const toVersionNum = getComparableVersionInt('4.12');
+
+  return !checkVersionNum || checkVersionNum >= toVersionNum ? 'OVNKubernetes' : 'OpenShiftSDN';
+};

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

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

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

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

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

@@ -7,12 +7,15 @@ import {
   ButtonVariant,
   EmptyState,
   EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
   EmptyStateVariant,
+  ModalBoxBody,
+  ModalBoxFooter,
   Spinner,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import { ErrorCircleOIcon } from '@patternfly/react-icons/dist/js/icons/error-circle-o-icon';
 import { UploadIcon } from '@patternfly/react-icons/dist/js/icons/upload-icon';
 import jsYaml from 'js-yaml';
@@ -129,12 +132,12 @@ const AddBmcHostYamlForm: React.FC<
       <ModalBoxBody>
         <Stack hasGutter>
           <StackItem>
-            <EmptyState
-              headingLevel="h4"
-              icon={UploadIcon}
-              titleText={<>{t('ai:Upload a YAML file')}</>}
-              variant={EmptyStateVariant.lg}
-            >
+            <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/AddBmcHostYamlModal.tsx

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

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

@@ -1,7 +1,14 @@
 import * as React from 'react';
 import { FormikHelpers } from 'formik';
-import { EmptyState, EmptyStateBody, Spinner } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  Modal,
+  ModalVariant,
+  Spinner,
+} from '@patternfly/react-core';
 import { DownloadIso, DiscoveryImageConfigForm, DiscoveryImageFormValues } from '../../../common';
 import { AddHostModalProps } from './types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -117,7 +124,8 @@ const GeneratingIsoDownload = ({
       docVersion={docVersion}
     />
   ) : (
-    <EmptyState icon={Spinner}>
+    <EmptyState>
+      <EmptyStateHeader icon={<EmptyStateIcon icon={Spinner} />} />
       <EmptyStateBody>{t('ai:Generating discovery ISO')}</EmptyStateBody>
     </EmptyState>
   );
@@ -140,7 +148,8 @@ const GeneratingIPXEDownload = ({
       onReset={onReset}
     />
   ) : (
-    <EmptyState icon={Spinner}>
+    <EmptyState>
+      <EmptyStateHeader icon={<EmptyStateIcon icon={Spinner} />} />
       <EmptyStateBody>{t('ai:Generating iPXE script')}</EmptyStateBody>
     </EmptyState>
   );

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

@@ -65,13 +65,12 @@ export const CimConfigProgressAlert: React.FC<CimConfigProgressAlertProps> = ({
 
   const assistedServiceDeploymentLink = (
     <Button
-      icon={<ExternalLinkAltIcon />}
       variant={ButtonVariant.link}
       isInline
       key="assisted-service-deployment"
       onClick={() => navigate(assistedServiceDeploymentUrl)}
     >
-      {t('ai:Troubleshoot in the assisted service deployment')}
+      {t('ai:Troubleshoot in the assisted service deployment')} <ExternalLinkAltIcon />
     </Button>
   );
 

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

@@ -1,4 +1,4 @@
-.cim-config-form-title .pf-v6-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-v6-global--spacer--md);
+  margin-bottom: var(--pf-v5-global--spacer--md);
 }
 
 .cim-config-form-volume input {
   width: 10rem;
 }
 
-.cim-config-modal .pf-v6-c-modal-box__body {
+.cim-config-modal .pf-v5-c-modal-box__body {
   overflow: hidden;
 }

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

@@ -69,7 +69,7 @@ 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-v6-c-form__group-label-help"
+        className="pf-v5-c-form__group-label-help"
       >
         <Icon>
           <HelpIcon />
@@ -84,7 +84,7 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
         fieldId="cim-config-form-storage-title"
         label={t('ai:Storage sizes')}
         className="cim-config-form-title"
-        labelHelp={
+        labelIcon={
           <Popover
             bodyContent={t(
               'ai:The storage sizes will be used to store different files and data for cluster creation.',
@@ -102,7 +102,7 @@ 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-v6-c-form__group-label-help"
+              className="pf-v5-c-form__group-label-help"
             >
               <Icon>
                 <HelpIcon />
@@ -118,7 +118,7 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
           <FormGroup
             label={t('ai:Database storage')}
             fieldId="cim-config-form-storage-db"
-            labelHelp={
+            labelIcon={
               <Popover
                 bodyContent={t(
                   'ai:Specify how much storage is allocated for storing files such as database tables and database views for the clusters. Recommended is 10Gi or more. The value can not be updated later.',
@@ -129,7 +129,7 @@ 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-v6-c-form__group-label-help"
+                  className="pf-v5-c-form__group-label-help"
                 >
                   <Icon>
                     <HelpIcon />
@@ -168,7 +168,7 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
           <FormGroup
             label={t('ai:System storage')}
             fieldId="cim-config-form-storage-sys"
-            labelHelp={
+            labelIcon={
               <Popover
                 bodyContent={t(
                   'ai:Specify how much storage is allocated for storing logs, manifests and "kubeconfig" files for the clusters. Recommended is 100Gi or more. The value can not be updated later.',
@@ -179,7 +179,7 @@ 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-v6-c-form__group-label-help"
+                  className="pf-v5-c-form__group-label-help"
                 >
                   <Icon>
                     <HelpIcon />
@@ -218,7 +218,7 @@ export const CimConfigurationForm: React.FC<CimConfigurationFormProps> = ({
           <FormGroup
             label={t('ai:Image storage')}
             fieldId="cim-config-form-storage-img"
-            labelHelp={
+            labelIcon={
               <Popover
                 bodyContent={t(
                   'ai:Specify how much storage to allocate for the images of the clusters. There must be 1G of image storage for each instance of Red Hat Enterprise Linux CoreOS that is running. Recommended is 50Gi or more. The value can not be updated later.',
@@ -229,7 +229,7 @@ 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-v6-c-form__group-label-help"
+                  className="pf-v5-c-form__group-label-help"
                 >
                   <Icon>
                     <HelpIcon />

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

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

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

@@ -1,6 +1,12 @@
 import * as React from 'react';
-import { Alert, AlertVariant, Button, ButtonVariant } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Alert,
+  AlertVariant,
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalVariant,
+} from '@patternfly/react-core';
 
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { getStorageSizeGiB } from '../../helpers';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import { Modal, ModalVariant } from '@patternfly/react-core';
 import BMCForm from '../Agent/BMCForm';
 import { SecretK8sResource } from '../../types';
 import { LoadingState } from '../../../common';

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

@@ -1,11 +1,16 @@
 import * as React from 'react';
-import { Alert, Button, ButtonVariant, Form, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
+  ButtonVariant,
+  Form,
   Modal,
   ModalBoxBody,
   ModalBoxFooter,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { Formik, FormikProps } from 'formik';
 import { InfraEnvK8sResource } from '../../types';
 import { RadioField, AdditionalNTPSourcesField } from '../../../common';

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

@@ -1,12 +1,17 @@
 import * as React from 'react';
 import * as Yup from 'yup';
-import { Alert, Button, ButtonVariant, Form, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
+  ButtonVariant,
+  Form,
   Modal,
   ModalBoxBody,
   ModalBoxFooter,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { EditProxyModalProps } from './types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { ProxyInputFields } from '../../../common/components/clusterConfiguration/ProxyFields';
@@ -106,7 +111,7 @@ const EditProxyModal: React.FC<EditProxyModalProps> = ({
                 <Form>
                   <ProxyInputFields />
                   {error && (
-                    <Alert variant="danger" title={t('ai:An error occured')} isInline>
+                    <Alert variant="danger" title={t('ai:An error occurred')} isInline>
                       {error}
                     </Alert>
                   )}

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

@@ -1,13 +1,17 @@
 import * as React from 'react';
 import * as Yup from 'yup';
 import { TFunction } from 'i18next';
-import { Alert, Button, ButtonVariant, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
+  ButtonVariant,
   Modal,
   ModalBoxBody,
   ModalBoxFooter,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { Formik, useFormikContext } from 'formik';
 import { InfraEnvK8sResource, SecretK8sResource } from '../../types';
 import { LoadingState, PullSecretField, pullSecretValidationSchema } from '../../../common';

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

@@ -1,12 +1,16 @@
 import * as React from 'react';
 import * as Yup from 'yup';
-import { Alert, Button, ButtonVariant, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
+  ButtonVariant,
   Modal,
   ModalBoxBody,
   ModalBoxFooter,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { Formik, FormikProps } from 'formik';
 
 import { InfraEnvK8sResource } from '../../types';
@@ -64,7 +68,7 @@ const EditSSHKeyModal: React.FC<EditSSHKeyModalProps> = ({
             onClose();
           } catch (err) {
             const error = err as Error;
-            setError(error?.message || t('ai:An error occured'));
+            setError(error?.message || t('ai:An error occurred'));
           }
         }}
         validateOnMount

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

@@ -1,6 +1,14 @@
 import * as React from 'react';
-import { Alert, Button, ButtonVariant, Stack, StackItem } from '@patternfly/react-core';
-import { Modal, ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
+import {
+  Alert,
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBoxBody,
+  ModalBoxFooter,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { getAIHosts } from '../helpers';
 import { AgentK8sResource } from '../../types';
 import HostsTable from '../../../common/components/hosts/HostsTable';
@@ -19,7 +27,7 @@ type ApproveTableRowProps = {
 };
 
 const ApproveTableRow: React.FC<ApproveTableRowProps> = ({ agent, children }) => (
-  <div className={agent?.spec.approved ? 'pf-v6-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> => {
@@ -33,7 +41,7 @@ const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id);
-      const hostname = agent?.spec.hostname || agent?.status?.inventory.hostname;
+      const hostname = agent?.spec?.hostname || agent?.status?.inventory?.hostname;
       return {
         title: <ApproveTableRow agent={agent}>{hostname}</ApproveTableRow>,
         props: { 'data-testid': 'hostname' },
@@ -113,7 +121,7 @@ const MassApproveAgentModal: React.FC<MassApproveAgentModalProps> = ({
       onClose();
     } catch (err) {
       setError({
-        title: t('ai:An error occured while approving agents'),
+        title: t('ai:An error occurred while approving agents'),
         message: getErrorMessage(err),
       });
       setProgress(null);

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

@@ -2,7 +2,7 @@ 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 { t_global_icon_color_status_info_default as blueInfoColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_info_default';
+import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
 import {
   getHostname,
   getInventory,
@@ -43,7 +43,7 @@ const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host
         ?.clusterDeploymentName?.name;
       return {
         title: (
-          <div className={assignedToCluster ? 'pf-v6-u-color-200' : undefined}>
+          <div className={assignedToCluster ? 'pf-v5-u-color-200' : undefined}>
             {computedHostname}
           </div>
         ),

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

@@ -1,6 +1,9 @@
 import React from 'react';
 import * as Yup from 'yup';
 import {
+  Modal,
+  ModalBoxBody,
+  ModalBoxFooter,
   Button,
   ButtonVariant,
   Alert,
@@ -9,7 +12,6 @@ import {
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { Modal, ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import { Formik, FormikConfig, FormikProps } from 'formik';
 import { AgentK8sResource } from '../../types/k8s/agent';
 import { ClusterDeploymentK8sResource } from '../../types/k8s/cluster-deployment';

package/lib/cim/hooks/index.tsx

@@ -0,0 +1 @@
+export * from './useConfigMaps';

package/lib/cim/hooks/types.tsx

@@ -0,0 +1,8 @@
+import { WatchK8sResource } from '@openshift-console/dynamic-plugin-sdk';
+
+export type K8sWatchHookListProps = Omit<
+  WatchK8sResource,
+  'groupVersionKind' | 'name' | 'isList'
+> | null;
+
+export type K8sWatchHookProps = Pick<WatchK8sResource, 'name' | 'namespace' | 'isList'> | null;

package/lib/cim/hooks/useConfigMaps.tsx

@@ -0,0 +1,14 @@
+import { useK8sWatchResource } from './useK8sWatchResource';
+import { ConfigMapK8sResource } from '../types';
+import { K8sWatchHookProps } from './types';
+
+export const useConfigMaps = (props: K8sWatchHookProps) =>
+  useK8sWatchResource<ConfigMapK8sResource[]>(
+    {
+      groupVersionKind: {
+        kind: 'ConfigMap',
+        version: 'v1',
+      },
+    },
+    props,
+  );