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

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentHostsSelectionAdvanced.tsx → hostSelection/ClusterDeploymentHostsSelectionAdvanced.tsx}

@@ -4,15 +4,15 @@ import React from 'react';
 import Measure from 'react-measure';
 import { Alert, AlertVariant, Grid, GridItem } from '@patternfly/react-core';
 
-import { AgentK8sResource } from '../../types';
-import { AGENT_LOCATION_LABEL_KEY, AGENT_NOLOCATION_VALUE } from '../common';
-import LocationsSelector from './LocationsSelector';
-import { ClusterDeploymentHostsSelectionValues, ScaleUpFormValues } from './types';
-import LabelsSelector, { infraEnvLabelKeys } from './LabelsSelector';
-import AgentsSelectionTable from '../Agent/AgentsSelectionTable';
-import { AgentTableActions } from './types';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import { CpuArchitecture } from '../../../common';
+import { AgentK8sResource } from '../../../types';
+import { AGENT_LOCATION_LABEL_KEY, AGENT_NOLOCATION_VALUE } from '../../common';
+import LocationsSelector from '../LocationsSelector';
+import { ClusterDeploymentHostsSelectionValues, ScaleUpFormValues } from '../types';
+import LabelsSelector, { infraEnvLabelKeys } from '../LabelsSelector';
+import AgentsSelectionTable from '../../Agent/AgentsSelectionTable';
+import { AgentTableActions } from '../types';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import { CpuArchitecture } from '../../../../common';
 
 type ClusterDeploymentHostsSelectionAdvancedProps = {
   availableAgents: AgentK8sResource[];
@@ -25,7 +25,7 @@ type ClusterDeploymentHostsSelectionAdvancedProps = {
 
 type FormValues = ClusterDeploymentHostsSelectionValues | ScaleUpFormValues;
 
-const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
+export const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
   availableAgents,
   onEditRole,
   onSetInstallationDiskId,
@@ -103,5 +103,3 @@ const ClusterDeploymentHostsSelectionAdvanced = <T extends FormValues>({
     </>
   );
 };
-
-export default ClusterDeploymentHostsSelectionAdvanced;

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentHostsSelectionBasic.tsx → hostSelection/ClusterDeploymentHostsSelectionBasic.tsx}

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Grid, GridItem } from '@patternfly/react-core';
-import { CheckboxField, NumberInputField } from '../../../common';
-import { HOSTS_MAX_COUNT, HOSTS_MIN_COUNT } from './constants';
+import { CheckboxField, NumberInputField } from '../../../../common';
+import { HOSTS_MAX_COUNT, HOSTS_MIN_COUNT } from '../constants';
 import { useFormikContext } from 'formik';
-import { ClusterDeploymentHostsSelectionValues } from './types';
-import LocationsSelector from './LocationsSelector';
-import { AgentK8sResource } from '../../types';
-import AgentsSelectionHostCountAlerts from '../Agent/AgentsSelectionHostCountAlerts';
-import AgentsSelectionHostCountLabelIcon from '../Agent/AgentsSelectionHostCountLabelIcon';
-import { useAgentsAutoSelection } from '../Agent/AgentsSelectionUtils';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { ClusterDeploymentHostsSelectionValues } from '../types';
+import LocationsSelector from '../LocationsSelector';
+import { AgentK8sResource } from '../../../types';
+import AgentsSelectionHostCountAlerts from '../../Agent/AgentsSelectionHostCountAlerts';
+import AgentsSelectionHostCountLabelIcon from '../../Agent/AgentsSelectionHostCountLabelIcon';
+import { useAgentsAutoSelection } from '../../Agent/AgentsSelectionUtils';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 
 type ClusterDeploymentHostsSelectionBasicProps = {
   availableAgents: AgentK8sResource[];

package/lib/cim/components/ClusterDeployment/hostSelection/index.tsx

@@ -0,0 +1,2 @@
+export * from './ClusterDeploymentHostSelectionStep';
+export * from './ClusterDeploymentHostsSelectionAdvanced';

package/lib/cim/components/ClusterDeployment/index.ts

@@ -1,6 +1,6 @@
 export * from './types';
 export * from './helpers';
-export * from './AdditionalNTPSourcesDialogToggle';
+export * from './components';
 export * from './LogsDownloadButton';
 export * from './wizardTransition';
 export * from './networkConfigurationValidation';
@@ -13,6 +13,6 @@ export { default as ClusterDeploymentCredentials } from './ClusterDeploymentCred
 export { default as ClusterDeploymentKubeconfigDownload } from './ClusterDeploymentKubeconfigDownload';
 export { default as ClusterInstallationError } from './ClusterInstallationError';
 export { default as NetworkConfiguration } from './NetworkConfiguration';
-export { default as ACMClusterDeploymentDetailsStep } from './ACMClusterDeploymentDetailsStep';
 
 export { getTotalCompute } from './ShortCapacitySummary';
+export { ACMClusterDeploymentDetailsStep } from './clusterDetails';

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentHostsNetworkTable.tsx → networking/ClusterDeploymentHostsNetworkTable.tsx}

@@ -1,26 +1,26 @@
 import * as React from 'react';
 import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
-import { EmptyState } from '../../../common';
-import { AgentTableActions } from './types';
+import { EmptyState } from '../../../../common';
+import { AgentTableActions } from '../types';
 import {
   AgentClusterInstallK8sResource,
   AgentK8sResource,
   ClusterDeploymentK8sResource,
-} from '../../types';
-import { getAICluster, getIsSNOCluster } from '../helpers';
-import { AdditionalNTPSourcesDialogToggle } from './AdditionalNTPSourcesDialogToggle';
-import { agentStatusColumn, useAgentsTable } from '../Agent/tableUtils';
-import HostsTable from '../../../common/components/hosts/HostsTable';
-import { HostDetail } from '../../../common/components/hosts/HostRowDetail';
+} from '../../../types';
+import { getAICluster, getIsSNOCluster } from '../../helpers';
+import { AdditionalNTPSourcesDialogToggle } from '../components/AdditionalNTPSourcesDialogToggle';
+import { agentStatusColumn, useAgentsTable } from '../../Agent/tableUtils';
+import HostsTable from '../../../../common/components/hosts/HostsTable';
+import { HostDetail } from '../../../../common/components/hosts/HostRowDetail';
 import {
   activeNICColumn,
   hostnameColumn,
   roleColumn,
-} from '../../../common/components/hosts/tableUtils';
-import { usePagination } from '../../../common/components/hosts/usePagination';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+} from '../../../../common/components/hosts/tableUtils';
+import { usePagination } from '../../../../common/components/hosts/usePagination';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
-import { agentStatus } from '../helpers/agentStatus';
+import { agentStatus } from '../../helpers/agentStatus';
 
 type ExpandComponentContextType = {
   onSetInstallationDiskId?: ClusterDeploymentHostsNetworkTableProps['onSetInstallationDiskId'];

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentNetworkingForm.tsx → networking/ClusterDeploymentNetworkingForm.tsx}

@@ -5,8 +5,9 @@ import {
   Grid,
   GridItem,
   Spinner,
-  Content,
-  ContentVariants,
+  Text,
+  TextContent,
+  TextVariants,
   Checkbox,
   Split,
   SplitItem,
@@ -19,25 +20,21 @@ import {
   SecurityFields,
   ProxyFields,
   ProxyInputFields,
-} from '../../../common';
-import NetworkConfiguration from './NetworkConfiguration';
+} from '../../../../common';
+import NetworkConfiguration from '../NetworkConfiguration';
 import ClusterDeploymentHostsNetworkTable from './ClusterDeploymentHostsNetworkTable';
-import { getAICluster, getIsSNOCluster } from '../helpers';
+import { getAICluster, getIsSNOCluster } from '../../helpers';
 import {
   AgentClusterInstallK8sResource,
   AgentK8sResource,
   ClusterDeploymentK8sResource,
   InfraEnvK8sResource,
-} from '../../types';
-import { AgentTableActions, ClusterDeploymentNetworkingValues } from './types';
+} from '../../../types';
+import { AgentTableActions, ClusterDeploymentNetworkingValues } from '../types';
 import { useFormikContext } from 'formik';
-import { getGridSpans } from './helpers';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { getGridSpans } from '../helpers';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
-import { ClusterDefaultConfig } from '@openshift-assisted/types/assisted-installer-service';
-
-// TODO(mlibra): So far a constant. Should be queried from somewhere.
-export const defaultNetworkSettings: ClusterDefaultConfig = CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4;
 
 type ClusterDeploymentNetworkingFormProps = {
   clusterDeployment: ClusterDeploymentK8sResource;
@@ -99,14 +96,16 @@ const ClusterDeploymentNetworkingForm: React.FC<ClusterDeploymentNetworkingFormP
     if (!sameProxies) {
       proxyConfig = (
         <>
-          <Content component="h2">{t('ai:Cluster-wide proxy')}</Content>
-          <Content component={ContentVariants.p}>
-            <Trans
-              t={t}
-              components={{ bold: <strong /> }}
-              i18nKey="ai:The hosts you selected are using different proxy settings. Configure a proxy that will be applied for these hosts. <bold>Configure at least one of the proxy settings below.</bold>"
-            />
-          </Content>
+          <TextContent>
+            <Text component="h2">{t('ai:Cluster-wide proxy')}</Text>
+            <Text component={TextVariants.p}>
+              <Trans
+                t={t}
+                components={{ bold: <strong /> }}
+                i18nKey="ai:The hosts you selected are using different proxy settings. Configure a proxy that will be applied for these hosts. <bold>Configure at least one of the proxy settings below.</bold>"
+              />
+            </Text>
+          </TextContent>
           <ProxyInputFields />
         </>
       );
@@ -137,7 +136,7 @@ const ClusterDeploymentNetworkingForm: React.FC<ClusterDeploymentNetworkingFormP
                 cluster={cluster}
                 hostSubnets={hostSubnets}
                 isVipDhcpAllocationDisabled
-                defaultNetworkSettings={defaultNetworkSettings}
+                defaultNetworkSettings={CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4}
                 hideManagedNetworking={getIsSNOCluster(agentClusterInstall) || isNutanix}
               />
             </GridItem>
@@ -161,7 +160,9 @@ const ClusterDeploymentNetworkingForm: React.FC<ClusterDeploymentNetworkingFormP
           <SecurityFields clusterSshKey={cluster.sshPublicKey} />
         </StackItem>
         <StackItem>
-          <Content component="h2">{t('ai:Host inventory')}</Content>
+          <TextContent>
+            <Text component="h2">{t('ai:Host inventory')}</Text>
+          </TextContent>
           <ClusterDeploymentHostsNetworkTable
             clusterDeployment={clusterDeployment}
             agentClusterInstall={agentClusterInstall}

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentNetworkingStep.tsx → networking/ClusterDeploymentNetworkingStep.tsx}

@@ -17,21 +17,21 @@ import {
   getFormikErrorFields,
   clusterFieldLabels,
   Alerts,
-} from '../../../common';
+} from '../../../../common';
 
 import {
   ClusterDeploymentDetailsNetworkingProps,
   AgentTableActions,
   ClusterDeploymentNetworkingValues,
-} from './types';
+} from '../types';
 import ClusterDeploymentNetworkingForm from './ClusterDeploymentNetworkingForm';
-import { isAgentOfCluster } from './helpers';
-import { useInfraEnvProxies, useNetworkingFormik } from './use-networking-formik';
-import { canNextFromNetworkingStep } from './wizardTransition';
-import { AgentK8sResource } from '../../types';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import { ValidationSection } from './components/ValidationSection';
-import { ClusterDeploymentWizardContext } from './ClusterDeploymentWizardContext';
+import { isAgentOfCluster } from '../helpers';
+import { useInfraEnvProxies, useNetworkingFormik } from '../use-networking-formik';
+import { canNextFromNetworkingStep } from '../wizardTransition';
+import { AgentK8sResource } from '../../../types';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import { ValidationSection } from '../components/ValidationSection';
+import { ClusterDeploymentWizardContext } from '../ClusterDeploymentWizardContext';
 
 type NetworkingFormProps = {
   clusterDeployment: ClusterDeploymentDetailsNetworkingProps['clusterDeployment'];
@@ -200,7 +200,7 @@ export const NetworkingForm = ({
         {syncError && (
           <GridItem>
             <ValidationSection currentStepId={'networking'} hosts={[]}>
-              <Alert variant={AlertVariant.danger} title={t('ai:An error occured')} isInline>
+              <Alert variant={AlertVariant.danger} title={t('ai:An error occurred')} isInline>
                 {syncError}
               </Alert>
             </ValidationSection>
@@ -212,7 +212,7 @@ export const NetworkingForm = ({
   );
 };
 
-const ClusterDeploymentNetworkingStep = ({
+export const ClusterDeploymentNetworkingStep = ({
   clusterDeployment,
   agentClusterInstall,
   agents,
@@ -261,5 +261,3 @@ const ClusterDeploymentNetworkingStep = ({
     </Formik>
   );
 };
-
-export default ClusterDeploymentNetworkingStep;

package/lib/cim/components/ClusterDeployment/networking/index.tsx

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

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentReviewStep.tsx → review/ClusterDeploymentReviewStep.tsx}

@@ -8,14 +8,14 @@ import {
   WizardFooter,
 } from '@patternfly/react-core';
 import * as React from 'react';
-import { canNextFromReviewStep } from './wizardTransition';
+import { canNextFromReviewStep } from '../wizardTransition';
 import {
   AgentClusterInstallK8sResource,
   AgentK8sResource,
   ClusterDeploymentK8sResource,
   ClusterImageSetK8sResource,
   InfraEnvK8sResource,
-} from '../../types';
+} from '../../../types';
 import {
   ClusterWizardStepHeader,
   DetailList,
@@ -24,18 +24,25 @@ import {
   ClusterValidations,
   HostsValidations,
   useAlerts,
-} from '../../../common';
-import { getSelectedVersion, getAICluster, getClusterDeploymentCpuArchitecture } from '../helpers';
-import { isAgentOfCluster } from './helpers';
-import { wizardStepNames } from './constants';
+  getPlatforms,
+} from '../../../../common';
+import {
+  getSelectedVersion,
+  getAICluster,
+  getClusterDeploymentCpuArchitecture,
+} from '../../helpers';
+import { isAgentOfCluster } from '../helpers';
+import { wizardStepNames } from '../constants';
 import {
   wizardStepsValidationsMap,
   ClusterWizardStepsType,
   allClusterWizardSoftValidationIds,
-} from './wizardTransition';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import { ClusterDeploymentWizardContext } from './ClusterDeploymentWizardContext';
-import { ValidationSection } from './components/ValidationSection';
+} from '../wizardTransition';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import { ClusterDeploymentWizardContext } from '../ClusterDeploymentWizardContext';
+import { ReviewConfigMapsTable } from './ReviewConfigMapsTable';
+import { ValidationSection } from '../components/ValidationSection';
+import { PlatformType } from '@openshift-assisted/types/assisted-installer-service';
 
 type ClusterDeploymentReviewStepProps = {
   clusterDeployment: ClusterDeploymentK8sResource;
@@ -47,7 +54,7 @@ type ClusterDeploymentReviewStepProps = {
   infraEnv?: InfraEnvK8sResource;
 };
 
-const ClusterDeploymentReviewStep = ({
+export const ClusterDeploymentReviewStep = ({
   agentClusterInstall,
   agents,
   onFinish,
@@ -77,7 +84,7 @@ const ClusterDeploymentReviewStep = ({
       await onFinish();
     } catch (err) {
       const error = err as Error;
-      addAlert({ title: error.message || t('ai:An error occured while starting installation.') });
+      addAlert({ title: error.message || t('ai:An error occurred while starting installation.') });
     } finally {
       setSubmitting(false);
     }
@@ -97,6 +104,10 @@ const ClusterDeploymentReviewStep = ({
   useWizardFooter(footer);
 
   const openShiftVersion = getSelectedVersion(clusterImages, agentClusterInstall);
+  const platform =
+    getPlatforms(t)[
+      (agentClusterInstall?.spec?.platformType?.toLowerCase() || 'baremetal') as PlatformType
+    ];
 
   const cluster = React.useMemo(
     () => getAICluster({ clusterDeployment, agentClusterInstall, agents: clusterAgents }),
@@ -127,6 +138,11 @@ const ClusterDeploymentReviewStep = ({
             value={cpuArchitecture}
             testId="cpu-architecture"
           />
+          <DetailItem
+            title={t('ai:External partner platform')}
+            value={platform}
+            testId="platform-type"
+          />
           <DetailItem
             title={t('ai:API IP')}
             value={agentClusterInstall?.status?.apiVIP || agentClusterInstall?.spec?.apiVIP}
@@ -143,6 +159,13 @@ const ClusterDeploymentReviewStep = ({
             value={<ReviewHostsInventory hosts={cluster.hosts} />}
           />
 
+          {!!agentClusterInstall.spec?.manifestsConfigMapRefs?.length ? (
+            <DetailItem
+              title={t('ai:Custom manifests')}
+              value={<ReviewConfigMapsTable agentClusterInstall={agentClusterInstall} />}
+            />
+          ) : undefined}
+
           <DetailItem
             title={t('ai:Cluster validations')}
             value={
@@ -173,7 +196,7 @@ const ClusterDeploymentReviewStep = ({
       {syncError && (
         <GridItem>
           <ValidationSection currentStepId={'review'} hosts={[]}>
-            <Alert variant={AlertVariant.danger} title={t('ai:An error occured')} isInline>
+            <Alert variant={AlertVariant.danger} title={t('ai:An error occurred')} isInline>
               {syncError}
             </Alert>
           </ValidationSection>
@@ -182,5 +205,3 @@ const ClusterDeploymentReviewStep = ({
     </Grid>
   );
 };
-
-export default ClusterDeploymentReviewStep;

package/lib/cim/components/ClusterDeployment/review/ReviewConfigMapsTable.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useConfigMaps } from '../../../hooks';
+import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
+import { genericTableRowKey, LoadingState } from '../../../../common';
+import { AgentClusterInstallK8sResource } from '../../../types';
+
+export const ReviewConfigMapsTable = ({
+  agentClusterInstall,
+}: {
+  agentClusterInstall: AgentClusterInstallK8sResource;
+}) => {
+  const [configMaps, loaded] = useConfigMaps({
+    namespace: agentClusterInstall.metadata?.namespace,
+    isList: true,
+  });
+
+  const customManifests = React.useMemo(() => {
+    const maps = configMaps.filter((configMap) =>
+      agentClusterInstall.spec?.manifestsConfigMapRefs
+        ?.flatMap((ref) => ref.name)
+        .includes(configMap.metadata?.name || ''),
+    );
+
+    return maps
+      .map((map, index) => [
+        {
+          rowId: `config-map-${index}`,
+          cells: [{ title: map.metadata?.name as string, isExpanded: true, level: 1, posInset: 1 }],
+        },
+        ...Object.keys(map.data || {}).map((key) => ({
+          rowId: `config-map-${index}-${key}`,
+          cells: [
+            {
+              title: (
+                <>
+                  <span style={{ width: '1rem', display: 'inline-block' }} />
+                  {key}
+                </>
+              ),
+              posInset: 2,
+              level: 2,
+            },
+          ],
+        })),
+      ])
+      .flat();
+  }, [agentClusterInstall.spec?.manifestsConfigMapRefs, configMaps]);
+
+  return loaded ? (
+    <Table
+      variant={TableVariant.compact}
+      borders={false}
+      data-testid="review-custom-manifests-table"
+    >
+      <Tbody>
+        {customManifests.map((row, i) => (
+          <Tr key={genericTableRowKey(row.rowId)}>
+            {row.cells.map(({ title, ...props }, j) => (
+              <Td key={`cell-${i}-${j}`} {...props}>
+                {title}
+              </Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  ) : (
+    <LoadingState />
+  );
+};

package/lib/cim/components/ClusterDeployment/review/index.tsx

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

package/lib/cim/components/ClusterDeployment/types.ts

@@ -44,6 +44,7 @@ export type ClusterDeploymentWizardStepsType =
   | 'hosts-selection'
   | 'hosts-discovery'
   | 'networking'
+  | 'custom-manifests'
   | 'review';
 
 export type ClusterDeploymentDetailsProps = {
@@ -177,6 +178,7 @@ export type ClusterDeploymentHostsSelectionProps = {
   onAutoSelectChange: VoidFunction;
   onHostSelect: VoidFunction;
   isNutanix: boolean;
+  hostsBinding?: boolean;
 };
 
 export type InfraEnvAgentTableProps = Pick<

package/lib/cim/components/ClusterDeployment/use-networking-formik.ts

@@ -11,7 +11,6 @@ import {
   InfraEnvK8sResource,
 } from '../../types';
 import { getAICluster } from '../helpers';
-import { defaultNetworkSettings } from './ClusterDeploymentNetworkingForm';
 import { useDeepCompareMemoize } from '../../../common/hooks';
 import {
   HostSubnets,
@@ -22,6 +21,7 @@ import {
   hostSubnetValidationSchema,
   httpProxyValidationSchema,
   noProxyValidationSchema,
+  CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4,
 } from '../../../common';
 import { ClusterDeploymentNetworkingValues } from './types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -79,7 +79,7 @@ export const useNetworkingFormik = ({
         agents,
       });
       return {
-        ...getNetworkInitialValues(cluster, defaultNetworkSettings),
+        ...getNetworkInitialValues(cluster, CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4),
         enableProxy: false,
         editProxy: false,
       };

package/lib/cim/components/ClusterDeployment/wizardTransition.ts

@@ -15,6 +15,7 @@ export type ClusterWizardStepsType =
   | 'hosts-selection'
   | 'hosts-discovery'
   | 'networking'
+  | 'custom-manifests'
   | 'review';
 
 const clusterDetailsStepValidationsMap: WizardStepValidationMap = {
@@ -98,6 +99,7 @@ export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardSt
   'hosts-discovery': hostDiscoveryStepValidationsMap,
   'hosts-selection': hostDiscoveryStepValidationsMap,
   networking: networkingStepValidationsMap,
+  'custom-manifests': networkingStepValidationsMap,
   review: reviewStepValidationsMap,
 };
 

package/lib/cim/components/Hypershift/DetailsPage/ClusterInstallationProgress.css

@@ -2,6 +2,6 @@
   margin-left: 1.75rem;
 }
 
-.ai-progress-item__header .pf-v6-c-expandable-section__toggle {
+.ai-progress-item__header .pf-v5-c-expandable-section__toggle {
   padding: 0 !important;
 }

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

@@ -4,7 +4,7 @@ import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exc
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { UnknownIcon } from '@patternfly/react-icons/dist/js/icons/unknown-icon';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
+import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
 
 import * as React from 'react';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';

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

@@ -6,7 +6,7 @@ import {
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
+import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
 
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';

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

@@ -7,7 +7,7 @@ import {
   StackItem,
 } from '@patternfly/react-core';
 import { TFunction } from 'i18next';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
+import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 
 import {

package/lib/cim/components/Hypershift/HostedClusterWizard/DetailsStep/DetailsForm.tsx

@@ -8,7 +8,7 @@ import {
   PullSecret,
 } from '../../../../../common';
 import { useTranslation } from '../../../../../common/hooks/use-translation-wrapper';
-import { BaseDnsHelperText } from '../../../ClusterDeployment/ClusterDetailsFormFields';
+import { BaseDnsHelperText } from '../../../ClusterDeployment/clusterDetails/ClusterDetailsFormFields';
 import { useTemptiflySync } from '../../hooks/useTemptiflySync';
 import { DetailsFormProps, DetailsFormValues } from './types';
 
@@ -37,20 +37,15 @@ const DetailsForm: React.FC<DetailsFormProps> = ({
     [ocpVersions],
   );
 
-  const additionalSelectOptions = React.useMemo(() => {
+  const additionalSelectOption = React.useMemo(() => {
     if (
       values.customOpenshiftSelect &&
-      !selectOptions.some((option) => option.value === values.customOpenshiftSelect?.value)
+      !selectOptions.some((option) => option.value === values.customOpenshiftSelect)
     ) {
-      return [
-        {
-          value: values.customOpenshiftSelect.value,
-          label: values.customOpenshiftSelect.label,
-        },
-      ];
+      return allVersions.find((version) => version.value === values.customOpenshiftSelect);
     }
-    return [];
-  }, [selectOptions, values.customOpenshiftSelect]);
+    return undefined;
+  }, [allVersions, selectOptions, values.customOpenshiftSelect]);
 
   return (
     <Form>
@@ -75,7 +70,7 @@ const DetailsForm: React.FC<DetailsFormProps> = ({
         versions={ocpVersions}
         showReleasesLink={false}
         showOpenshiftVersionModal={() => setOpenshiftVersionModalOpen(true)}
-        customItems={additionalSelectOptions}
+        customItem={additionalSelectOption}
       />
       {openshiftVersionModalOpen && (
         <OpenShiftVersionModal

package/lib/cim/components/Hypershift/HostedClusterWizard/DetailsStep/types.ts

@@ -8,7 +8,7 @@ export type DetailsFormValues = {
   openshiftVersion: string;
   pullSecret: string;
   baseDnsDomain: string;
-  customOpenshiftSelect: OpenshiftVersionOptionType | null;
+  customOpenshiftSelect: string | null;
 };
 
 type UseDetailsFormikArgs = {