@openshift-assisted/ui-lib 2.16.5-cim → 2.17.1-cim

package/lib/ocm/components/AddHosts/InventoryAddHost.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, TextContent, Alert, AlertVariant, Stack, StackItem } from '@patternfly/react-core';
+import { Content, Alert, AlertVariant, Stack, StackItem } from '@patternfly/react-core';
 import ClusterHostsTable from '../hosts/ClusterHostsTable';
 import InformationAndAlerts from '../clusterConfiguration/InformationAndAlerts';
 import { CpuArchitecture } from '../../../common';
@@ -17,14 +17,12 @@ const InventoryAddHosts = ({ cluster }: { cluster?: Cluster }) => {
   return (
     <Stack hasGutter>
       <StackItem>
-        <TextContent>
-          <Text component="p">
-            <Day2WizardContextProvider>
-              <Day2DiscoveryImageModalButton cluster={cluster} />
-              <Day2Wizard />
-            </Day2WizardContextProvider>
-          </Text>
-        </TextContent>
+        <Day2WizardContextProvider>
+          <Content component="p">
+            <Day2DiscoveryImageModalButton cluster={cluster} />
+          </Content>
+          <Day2Wizard />
+        </Day2WizardContextProvider>
       </StackItem>
       <StackItem>
         <InformationAndAlerts cluster={cluster} />

package/lib/ocm/components/AddHosts/day2Wizard/Day2StaticIP.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import {
   Grid,
-  TextContent,
-  Text,
-  TextVariants,
+  Content,
+  ContentVariants,
   PageSection,
-  PageSectionVariants,
   Button,
   ButtonVariant,
 } from '@patternfly/react-core';
@@ -93,7 +91,7 @@ const Day2StaticIP = () => {
 
   if (hasLoadError) {
     return (
-      <PageSection variant={PageSectionVariants.light} isFilled>
+      <PageSection hasBodyWrapper={false} isFilled>
         <ErrorState
           title="Cannot load the Static IP configuration for this cluster"
           content="For non-multi-architecture clusters, make sure you select the Day1 cpu architecture"
@@ -165,13 +163,13 @@ const Day2StaticIP = () => {
       }
     >
       <Grid hasGutter>
-        <TextContent>
-          <Text component={TextVariants.h2}>Static network configurations</Text>
-          <Text component={TextVariants.small}>
+        <Content>
+          <Content component={ContentVariants.h2}>Static network configurations</Content>
+          <Content component={ContentVariants.small}>
             Network configuration can be done using either the form view or YAML view.
             Configurations done in this step are for discovering hosts.
-          </Text>
-        </TextContent>
+          </Content>
+        </Content>
 
         <StaticIpViewRadioGroup
           initialView={initialStaticIpInfo.view}

package/lib/ocm/components/AddHosts/day2Wizard/Day2StaticIpHostConfigurations.tsx

@@ -3,9 +3,8 @@ import {
   Flex,
   FlexItem,
   FormGroup,
-  TextContent,
-  TextVariants,
-  Text,
+  Content,
+  ContentVariants,
   Tooltip,
 } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
@@ -24,11 +23,7 @@ const Day2HostStaticIpConfigurations = ({ isDisabled }: { isDisabled: boolean })
 
   return (
     <FormGroup
-      label={
-        <TextContent>
-          <Text component={TextVariants.h4}>Hosts' network configuration</Text>
-        </TextContent>
-      }
+      label={<Content component={ContentVariants.h4}>Hosts' network configuration</Content>}
       fieldId={getFieldId(GROUP_NAME, 'radio')}
       isInline
       onChange={onChangeNetworkType}

package/lib/ocm/components/AddHosts/day2Wizard/Day2Wizard.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core';
-import { WizardHeader } from '@patternfly/react-core';
+import { Modal, ModalVariant, WizardHeader } from '@patternfly/react-core';
 import classNames from 'classnames';
 import { ClusterWizardStep } from '../../../../common';
 import { useModalDialogsContext } from '../../hosts/ModalDialogsContext';
@@ -40,15 +39,15 @@ const Day2Wizard = () => {
       aria-label={'Day 2 Wizard'}
       isOpen={isOpen}
       variant={ModalVariant.large}
-      showClose={false}
-      hasNoBodyWrapper
+      onClose={undefined}
       id="generate-discovery-iso-modal"
     >
-      <div className={classNames('pf-v5-c-wizard', 'cluster-wizard')}>
+      <div className={classNames('pf-v6-c-wizard', 'cluster-wizard')}>
         <WizardHeader
           title={'Add hosts'}
           description={'Choose the settings for adding a new host'}
           onClose={close}
+          data-testid="day2-wizard-header"
         />
         <Day2WizardStep />
       </div>

package/lib/ocm/components/AddHosts/day2Wizard/Day2WizardFooter.tsx

@@ -41,6 +41,7 @@ const Day2WizardFooter = ({
       isBackDisabled={wizardContext.currentStepId === 'cluster-details'}
       isNextDisabled={disableNext}
       onCancel={closeWizard}
+      data-testid="day2-wizard-footer"
     />
   );
 };

package/lib/ocm/components/AddHosts/day2Wizard/Day2WizardNav.tsx

@@ -24,6 +24,7 @@ const Day2WizardNav = () => {
         onClick={() => wizardContext.setCurrentStepId(stepId)}
         isCurrent={wizardContext.currentStepId === stepId}
         isDisabled={isStepDisabled(idx, stepId)}
+        data-testid={`day2-wizard-nav-item-${stepId}`}
       />
     );
   };
@@ -37,8 +38,12 @@ const Day2WizardNav = () => {
         key="static-network-configuration-form-view"
         isCurrent={isStaticIpStep(wizardContext.currentStepId)}
         isDisabled={isStepIdxAfterCurrent(idx)}
+        data-testid={`day2-wizard-nav-item-static-network-configuration-form-view`}
       >
-        <WizardNav isInnerList>
+        <WizardNav
+          isInnerList
+          data-testid="day2-wizard-nav-item-static-network-configuration-form-view-inner-list"
+        >
           {staticIpFormViewSubSteps.map((stepId, subIdx) => {
             return getNavItem(idx + subIdx, stepId);
           })}
@@ -64,7 +69,7 @@ const Day2WizardNav = () => {
     return navItems;
   };
 
-  return <WizardNav>{getWizardNavItems()}</WizardNav>;
+  return <WizardNav data-testid="day2-wizard-nav">{getWizardNavItems()}</WizardNav>;
 };
 
 export default Day2WizardNav;

package/lib/ocm/components/HostsClusterDetailTab/HostsClusterDetailTabMock.tsx

@@ -5,8 +5,6 @@ import {
   EmptyStateBody,
   Grid,
   PageSection,
-  PageSectionVariants,
-  EmptyStateHeader,
 } from '@patternfly/react-core';
 import {
   OcmCpuArchitecture,
@@ -66,9 +64,8 @@ export const HostsClusterDetailTabMock = () => {
 
   if (!isMocked) {
     return (
-      <PageSection variant={PageSectionVariants.light} isFilled>
-        <EmptyState>
-          <EmptyStateHeader titleText="Mocked environment not detected" headingLevel="h4" />
+      <PageSection hasBodyWrapper={false} isFilled>
+        <EmptyState headingLevel="h4" titleText="Mocked environment not detected">
           <EmptyStateBody>You can only use this page on a mocked environment</EmptyStateBody>
         </EmptyState>
       </PageSection>
@@ -76,7 +73,7 @@ export const HostsClusterDetailTabMock = () => {
   }
 
   return (
-    <PageSection variant={PageSectionVariants.light} isFilled>
+    <PageSection hasBodyWrapper={false} isFilled>
       {tabShown ? (
         <OpenShiftVersionsContextProvider>
           <HostsClusterDetailTab

package/lib/ocm/components/HostsClusterDetailTab/utils.ts

@@ -46,20 +46,36 @@ export const getAddHostsTabState = (cluster: OcmClusterType): AddHostsTabState =
   // Checking if the Day1 cluster has reported metrics, so it can be determined if it's an SNO / multi node and has required information
   const day1ClusterHostCount = cluster.metrics?.nodes?.total || 0;
 
-  if (isClusterStateReady && wasInstalledUsingAssistedInstaller) {
-    let tabState = makeState('visible');
-    if (day1ClusterHostCount === 1 && !isSNOExpansionAllowed(cluster)) {
-      // The cluster has metrics etc., but it's an SNO with an OpenshiftVersion that doesn't support Day2 flow
-      tabState = makeState(
-        'disabled',
-        'OpenShift version not supported for SNO expansion. Hosts cannot be added to an existing SNO cluster that was installed with any OpenShift version older than 4.11. Upgrade to a newer OpenShift version and try again.',
-      );
-    }
+  // Disable Add Hosts with the following priority:
+  // 1) Cluster is not ready
+  // 2) Cluster was not installed using Assisted Installer
+  // 3) Cluster has no metrics
+  if (!isClusterStateReady) {
+    return makeState(
+      'disabled',
+      'Cluster is not ready. Please wait for the cluster to be ready and try again.',
+    );
+  } else if (!wasInstalledUsingAssistedInstaller) {
+    return makeState(
+      'disabled',
+      'Hosts cannot be added to an existing cluster that was not installed using Assisted Installer. Install a new cluster and try again.',
+    );
+  } else if (!cluster.metrics) {
+    return makeState(
+      'disabled',
+      'Cluster has no metrics. Please wait for the cluster to have metrics and try again.',
+    );
+  }
 
-    return tabState;
-  } else {
-    // The cluster is not ready or was not installed using Assisted Installer.
-    // (see: https://issues.redhat.com/browse/HAC-3989)
-    return makeState('hidden');
+  // At this point the cluster is ready, installed using Assisted Installer, and has metrics
+  let tabState = makeState('visible');
+  if (day1ClusterHostCount === 1 && !isSNOExpansionAllowed(cluster)) {
+    // The cluster has metrics etc., but it's an SNO with an OpenshiftVersion that doesn't support Day2 flow
+    tabState = makeState(
+      'disabled',
+      'OpenShift version not supported for SNO expansion. Hosts cannot be added to an existing SNO cluster that was installed with any OpenShift version older than 4.11. Upgrade to a newer OpenShift version and try again.',
+    );
   }
+
+  return tabState;
 };

package/lib/ocm/components/Routes.css

@@ -0,0 +1,10 @@
+#app-outer-div {
+  overflow-y: auto !important;
+  /* Hide scrollbar while maintaining scroll functionality */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* Internet Explorer and Edge */
+}
+
+#app-outer-div::-webkit-scrollbar {
+  display: none; /* Webkit browsers (Chrome, Safari, newer Edge) */
+}

package/lib/ocm/components/Routes.tsx

@@ -13,6 +13,7 @@ import type { FeatureListType } from '../../common/features/featureGate';
 import { AssistedUILibVersion } from './ui';
 import { storeDay1 } from '../store';
 import { useFeatureDetection } from '../hooks/use-feature-detection';
+import './Routes.css';
 
 type UILibRoutesProps = {
   allEnabledFeatures: FeatureListType;
@@ -35,7 +36,9 @@ export const UILibRoutes = ({
     <>
       <Routes>
         <Route path="assisted-installer/clusters" element={<Outlet />}>
-          <Route path="~new" element={<NewClusterPage />} />
+          <Route path="~new" element={<NewClusterPage />}>
+            <Route path=":clusterId" element={<NewClusterPage />} />
+          </Route>
           <Route path=":clusterId" element={<ClusterPage />} />
           <Route index element={<Clusters />} />
         </Route>

package/lib/ocm/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx

@@ -141,7 +141,8 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
       ref={toggleRef}
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
-      className="pf-v5-u-w-100"
+      className="pf-v6-u-w-100"
+      data-testid="control-plane-nodes-dropdown-toggle"
     >
       {options.find((opt) => opt.value === field.value)?.label || 'Select'}
     </MenuToggle>

package/lib/ocm/components/clusterConfiguration/CpuArchitectureDropdown.tsx

@@ -159,7 +159,9 @@ const CpuArchitectureDropdown = ({
       ref={toggleRef}
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
-      className="pf-v5-u-w-100"
+      className="pf-v6-u-w-100"
+      style={{ minWidth: '420px' }}
+      data-testid="cpu-architecture-dropdown-toggle"
     >
       {currentCpuArch}
     </MenuToggle>

package/lib/ocm/components/clusterConfiguration/CustomManifestCheckbox.tsx

@@ -81,7 +81,9 @@ const CustomManifestCheckbox = ({ clusterId, isDisabled }: CustomManifestCheckbo
             <FormGroup>
               <FormHelperText>
                 <HelperText id={fieldId}>
-                  <HelperTextItem>
+                  <HelperTextItem
+                    data-testid={`input-custommanifestcheckbox-${fieldId}-helper-text`}
+                  >
                     Additional manifests will be applied at the install time for advanced
                     configuration of the cluster.
                   </HelperTextItem>

package/lib/ocm/components/clusterConfiguration/DiscoveryImageModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
+import { Button, ButtonVariant, Modal, ModalHeader, ModalVariant } from '@patternfly/react-core';
 import { pluralize } from 'humanize-plus';
 import {
   AI_CISCO_INTERSIGHT_TAG,
@@ -104,14 +104,17 @@ export const DiscoveryImageModal = () => {
   return (
     <Modal
       aria-label="Add hosts dialog"
-      title={`Add ${pluralize(+isSNOCluster, 'host')}`}
       isOpen={isOpen}
       onClose={close}
       variant={ModalVariant.small}
-      hasNoBodyWrapper
       id="generate-discovery-iso-modal"
+      ouiaId="discovery-image-modal"
       tabIndex={0}
     >
+      <ModalHeader
+        data-testid="discovery-modal-title"
+        title={`Add ${pluralize(+isSNOCluster, 'host')}`}
+      />
       {(isoDownloadError || ipxeDownloadError) && <ErrorState />}
       {isoDownloadUrl ? (
         <DownloadIso

package/lib/ocm/components/clusterConfiguration/DiscoveryImageTypeDropdown.tsx

@@ -93,12 +93,14 @@ export const DiscoveryImageTypeDropdown = ({
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       id={fieldId}
-      className="pf-v5-u-w-100"
+      className="pf-v6-u-w-100"
       ref={toggleRef}
       isFullWidth
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
       isDisabled={isDisabled}
+      style={{ minWidth: '510px' }}
+      data-testid="discovery-image-type-dropdown-toggle"
     >
       {current || value}
     </MenuToggle>

package/lib/ocm/components/clusterConfiguration/HostInventory.tsx

@@ -1,14 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import {
-  Text,
-  TextContent,
-  Button,
-  Stack,
-  StackItem,
-  Split,
-  SplitItem,
-} from '@patternfly/react-core';
+import { Content, Button, Stack, StackItem, Split, SplitItem } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
 import {
   HostDiscoveryValues,
@@ -39,24 +31,22 @@ const HostInventory = ({ cluster }: { cluster: Cluster }) => {
   }, [cluster, mastersMustRunWorkloads, setFieldValue]); // Schedulable masters need to be recalculated only when forced status changes
 
   return (
-    <Stack hasGutter>
-      <StackItem>
+    <Stack hasGutter data-testid="host-inventory">
+      <StackItem data-testid="host-discovery-header">
         <ClusterWizardStepHeader>Host discovery</ClusterWizardStepHeader>
       </StackItem>
-      <StackItem>
+      <StackItem data-testid="discovery-image-modal-section">
         {!isViewerMode && !isSingleClusterFeatureEnabled && (
-          <TextContent>
-            <Text component="p">
-              <DiscoveryImageModalButton
-                ButtonComponent={Button}
-                cluster={cluster}
-                idPrefix="host-inventory"
-              />
-            </Text>
-          </TextContent>
+          <Content component="p">
+            <DiscoveryImageModalButton
+              ButtonComponent={Button}
+              cluster={cluster}
+              idPrefix="host-inventory"
+            />
+          </Content>
         )}
       </StackItem>
-      <StackItem>
+      <StackItem data-testid="schedulable-masters-section">
         <Split>
           <SplitItem>
             <OcmSwitchField
@@ -67,6 +57,7 @@ const HostInventory = ({ cluster }: { cluster: Cluster }) => {
               isDisabled={mastersMustRunWorkloads}
               name={'schedulableMasters'}
               label="Run workloads on control plane nodes&nbsp;"
+              data-testid="schedulable-masters-switch"
             />
           </SplitItem>
           <SplitItem>
@@ -75,20 +66,19 @@ const HostInventory = ({ cluster }: { cluster: Cluster }) => {
                 <p>Enables your control plane nodes to be used for running applications.</p>
               }
               buttonStyle={{ marginTop: '4px' }}
+              data-testid="schedulable-masters-popover"
             />
           </SplitItem>
         </Split>
       </StackItem>
-      <StackItem>
+      <StackItem data-testid="information-and-alerts">
         <InformationAndAlerts cluster={cluster} />
       </StackItem>
-      <StackItem>
-        <TextContent>
-          <Text component="h3">Host Inventory</Text>
-        </TextContent>
+      <StackItem data-testid="host-inventory-title">
+        <Content component="h3">Host Inventory</Content>
       </StackItem>
-      <StackItem>
-        <HostsDiscoveryTable cluster={cluster} />
+      <StackItem data-testid="hosts-discovery-table-wrapper">
+        <HostsDiscoveryTable cluster={cluster} hosts={cluster.hosts || []} />
       </StackItem>
     </Stack>
   );

package/lib/ocm/components/clusterConfiguration/HostsNetworkConfigurationControlGroup.tsx

@@ -44,6 +44,7 @@ export const HostsNetworkConfigurationControlGroup = ({
       fieldId={fieldId}
       isInline
       role="radiogroup"
+      data-testid="hosts-network-configuration-control-group"
     >
       <RadioFieldWithTooltip
         name={GROUP_NAME}
@@ -51,7 +52,7 @@ export const HostsNetworkConfigurationControlGroup = ({
         value={HostsNetworkConfigurationType.DHCP}
         label="DHCP only"
         tooltipProps={tooltipProps}
-        className="pf-v5-u-mr-md"
+        className="pf-v6-u-mr-md"
       />
       <RadioFieldWithTooltip
         name={GROUP_NAME}

package/lib/ocm/components/clusterConfiguration/OcmBaseDomainField.tsx

@@ -32,13 +32,13 @@ export const BaseDnsHelperText = ({
 }) => (
   <FormHelperText>
     <HelperText id={fieldId}>
-      <HelperTextItem>
+      <HelperTextItem data-testid={`input-basednshelpertext-${fieldId}-helper-text`}>
         Enter the name of your domain [domainname] or [domainname.com]. This cannot be changed after
         cluster installed. All DNS records must include the cluster name and be subdomains of the
         base you enter. The full cluster address will be: <br />
-        <strong>
+        <span className="pf-v6-u-font-weight-bold">
           {name || '[Cluster Name]'}.{baseDnsDomain || '[domainname.com]'}
-        </strong>
+        </span>
       </HelperTextItem>
     </HelperText>
   </FormHelperText>
@@ -71,7 +71,8 @@ export const OcmBaseDomainField = ({
         ref={toggleRef}
         onClick={() => setOpen(!isOpen)}
         isExpanded={isOpen}
-        className="pf-v5-u-w-100"
+        className="pf-v6-u-w-100"
+        data-testid="base-domain-dropdown-toggle"
       >
         {selectedDomain ? getManagedDomainLabel(selectedDomain) : 'Base domain'}
       </MenuToggle>

package/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx

@@ -189,22 +189,23 @@ export const OcmClusterDetailsFormFields = ({
 
       {!isPullSecretSet && <PullSecret isOcm={isOcm} defaultPullSecret={defaultPullSecret} />}
 
-      {clusterExists ? (
-        <StaticTextField
-          name="platform"
-          label="Integrate with external partner platforms"
-          isRequired
-        >
-          {ExternalPlatformLabels[values.platform]}
-        </StaticTextField>
-      ) : (
-        <ExternalPlatformDropdown
-          onChange={handleExternalPartnerIntegrationsChange}
-          cpuArchitecture={values.cpuArchitecture as SupportedCpuArchitecture}
-          featureSupportLevelData={featureSupportLevelData}
-          isSNO={values.controlPlaneCount === 1}
-        />
-      )}
+      {!isSingleClusterFeatureEnabled &&
+        (clusterExists ? (
+          <StaticTextField
+            name="platform"
+            label="Integrate with external partner platforms"
+            isRequired
+          >
+            {ExternalPlatformLabels[values.platform]}
+          </StaticTextField>
+        ) : (
+          <ExternalPlatformDropdown
+            onChange={handleExternalPartnerIntegrationsChange}
+            cpuArchitecture={values.cpuArchitecture as SupportedCpuArchitecture}
+            featureSupportLevelData={featureSupportLevelData}
+            isSNO={values.controlPlaneCount === 1}
+          />
+        ))}
 
       {clusterExists ? (
         <StaticTextField name="controlPlaneCount" label={<ControlPlaneNodesLabel />}>

package/lib/ocm/components/clusterConfiguration/OcmDiscoveryImageConfigForm.tsx

@@ -3,12 +3,14 @@ import * as Yup from 'yup';
 import {
   Button,
   Form,
-  ModalBoxBody,
-  ModalBoxFooter,
   AlertVariant,
   Alert,
   Stack,
   StackItem,
+  ModalBody,
+  ModalFooter,
+  Flex,
+  FlexItem,
 } from '@patternfly/react-core';
 import { Formik, FormikHelpers } from 'formik';
 import {
@@ -21,7 +23,7 @@ import {
   AlertFormikError,
   httpProxyValidationSchema,
   noProxyValidationSchema,
-  sshPublicKeyListValidationSchema,
+  sshPublicKeyValidationSchema,
 } from '../../../common/components/ui';
 import {
   DiscoveryImageType,
@@ -54,7 +56,7 @@ export type OcmDiscoveryImageFormValues = OcmImageCreateParams &
 
 const validationSchema = Yup.lazy((values: OcmDiscoveryImageFormValues) =>
   Yup.object<OcmDiscoveryImageFormValues>().shape({
-    sshPublicKey: sshPublicKeyListValidationSchema,
+    sshPublicKey: sshPublicKeyValidationSchema,
     httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy' }),
     httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy' }), // share the schema, httpS is currently not supported
     noProxy: noProxyValidationSchema,
@@ -141,7 +143,7 @@ export const OcmDiscoveryImageConfigForm = ({
       {({ submitForm, isSubmitting, status, setStatus }) => {
         return (
           <>
-            <ModalBoxBody>
+            <ModalBody>
               <Stack hasGutter>
                 <StackItem>
                   <Alert variant={AlertVariant.info} isInline title={alertDiscoveryText} />
@@ -166,31 +168,40 @@ export const OcmDiscoveryImageConfigForm = ({
                   </Form>
                 </StackItem>
               </Stack>
-            </ModalBoxBody>
-            <ModalBoxFooter>
+            </ModalBody>
+            <ModalFooter>
               <Stack hasGutter style={{ width: '100%' }}>
+                {(status as StatusErrorType)?.error && (
+                  <StackItem>
+                    <AlertFormikError
+                      status={status as StatusErrorType}
+                      onClose={() => setStatus(undefined)}
+                    />
+                  </StackItem>
+                )}
                 <StackItem>
-                  <AlertFormikError
-                    status={status as StatusErrorType}
-                    onClose={() => setStatus(undefined)}
-                  />
-                </StackItem>
-                <StackItem>
-                  <Button
-                    onClick={() => {
-                      void submitForm();
-                    }}
-                    isDisabled={isSubmitting}
-                    isLoading={isSubmitting}
-                  >
-                    {isSubmitting ? t('ai:Generating') : buttonText}
-                  </Button>
-                  <Button key="cancel" variant="link" onClick={onCancel}>
-                    {t('ai:Cancel')}
-                  </Button>
+                  <Flex>
+                    <FlexItem>
+                      <Button
+                        onClick={() => {
+                          void submitForm();
+                        }}
+                        isDisabled={isSubmitting}
+                        isLoading={isSubmitting}
+                        data-testid="generate-discovery-iso-button"
+                      >
+                        {isSubmitting ? t('ai:Generating') : buttonText}
+                      </Button>
+                    </FlexItem>
+                    <FlexItem>
+                      <Button key="cancel" variant="link" onClick={onCancel}>
+                        {t('ai:Cancel')}
+                      </Button>
+                    </FlexItem>
+                  </Flex>
                 </StackItem>
               </Stack>
-            </ModalBoxFooter>
+            </ModalFooter>
           </>
         );
       }}

package/lib/ocm/components/clusterConfiguration/OcmOperatorProgressItem.tsx

@@ -4,8 +4,8 @@ import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-cir
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
-import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
+import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
+import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 import { pluralize } from 'humanize-plus';
 import { TFunction } from 'i18next';