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

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

@@ -46,36 +46,20 @@ 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;
 
-  // 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.',
-    );
-  }
+  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.',
+      );
+    }
 
-  // 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;
+  } else {
+    // The cluster is not ready or was not installed using Assisted Installer.
+    // (see: https://issues.redhat.com/browse/HAC-3989)
+    return makeState('hidden');
   }
-
-  return tabState;
 };

package/lib/ocm/components/Routes.tsx

@@ -13,7 +13,14 @@ 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;
+  children?: React.ReactNode;
+  history?: HistoryRouterProps['history'];
+  basename?: string;
+  additionalComponents?: React.ReactNode;
+};
 
 export const UILibRoutes = ({
   allEnabledFeatures,
@@ -21,22 +28,14 @@ export const UILibRoutes = ({
   history,
   basename,
   additionalComponents,
-}: {
-  allEnabledFeatures: FeatureListType;
-  children?: React.ReactNode;
-  history?: HistoryRouterProps['history'];
-  basename?: string;
-  additionalComponents?: React.ReactNode;
-}) => {
+}: UILibRoutesProps) => {
   useFeatureDetection(allEnabledFeatures);
 
   const routes = (
     <>
       <Routes>
         <Route path="assisted-installer/clusters" element={<Outlet />}>
-          <Route path="~new" element={<NewClusterPage />}>
-            <Route path=":clusterId" element={<NewClusterPage />} />
-          </Route>
+          <Route path="~new" element={<NewClusterPage />} />
           <Route path=":clusterId" element={<ClusterPage />} />
           <Route index element={<Clusters />} />
         </Route>

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

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

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

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

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

@@ -81,9 +81,7 @@ const CustomManifestCheckbox = ({ clusterId, isDisabled }: CustomManifestCheckbo
             <FormGroup>
               <FormHelperText>
                 <HelperText id={fieldId}>
-                  <HelperTextItem
-                    data-testid={`input-custommanifestcheckbox-${fieldId}-helper-text`}
-                  >
+                  <HelperTextItem>
                     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, ModalHeader, ModalVariant } from '@patternfly/react-core';
+import { Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
 import { pluralize } from 'humanize-plus';
 import {
   AI_CISCO_INTERSIGHT_TAG,
@@ -104,17 +104,14 @@ 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,14 +93,12 @@ export const DiscoveryImageTypeDropdown = ({
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       id={fieldId}
-      className="pf-v6-u-w-100"
+      className="pf-v5-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,6 +1,14 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { Content, Button, Stack, StackItem, Split, SplitItem } from '@patternfly/react-core';
+import {
+  Text,
+  TextContent,
+  Button,
+  Stack,
+  StackItem,
+  Split,
+  SplitItem,
+} from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
 import {
   HostDiscoveryValues,
@@ -31,22 +39,24 @@ const HostInventory = ({ cluster }: { cluster: Cluster }) => {
   }, [cluster, mastersMustRunWorkloads, setFieldValue]); // Schedulable masters need to be recalculated only when forced status changes
 
   return (
-    <Stack hasGutter data-testid="host-inventory">
-      <StackItem data-testid="host-discovery-header">
+    <Stack hasGutter>
+      <StackItem>
         <ClusterWizardStepHeader>Host discovery</ClusterWizardStepHeader>
       </StackItem>
-      <StackItem data-testid="discovery-image-modal-section">
+      <StackItem>
         {!isViewerMode && !isSingleClusterFeatureEnabled && (
-          <Content component="p">
-            <DiscoveryImageModalButton
-              ButtonComponent={Button}
-              cluster={cluster}
-              idPrefix="host-inventory"
-            />
-          </Content>
+          <TextContent>
+            <Text component="p">
+              <DiscoveryImageModalButton
+                ButtonComponent={Button}
+                cluster={cluster}
+                idPrefix="host-inventory"
+              />
+            </Text>
+          </TextContent>
         )}
       </StackItem>
-      <StackItem data-testid="schedulable-masters-section">
+      <StackItem>
         <Split>
           <SplitItem>
             <OcmSwitchField
@@ -57,7 +67,6 @@ const HostInventory = ({ cluster }: { cluster: Cluster }) => {
               isDisabled={mastersMustRunWorkloads}
               name={'schedulableMasters'}
               label="Run workloads on control plane nodes&nbsp;"
-              data-testid="schedulable-masters-switch"
             />
           </SplitItem>
           <SplitItem>
@@ -66,19 +75,20 @@ 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 data-testid="information-and-alerts">
+      <StackItem>
         <InformationAndAlerts cluster={cluster} />
       </StackItem>
-      <StackItem data-testid="host-inventory-title">
-        <Content component="h3">Host Inventory</Content>
+      <StackItem>
+        <TextContent>
+          <Text component="h3">Host Inventory</Text>
+        </TextContent>
       </StackItem>
-      <StackItem data-testid="hosts-discovery-table-wrapper">
-        <HostsDiscoveryTable cluster={cluster} hosts={cluster.hosts || []} />
+      <StackItem>
+        <HostsDiscoveryTable cluster={cluster} />
       </StackItem>
     </Stack>
   );

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

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

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

@@ -32,7 +32,7 @@ export const BaseDnsHelperText = ({
 }) => (
   <FormHelperText>
     <HelperText id={fieldId}>
-      <HelperTextItem data-testid={`input-basednshelpertext-${fieldId}-helper-text`}>
+      <HelperTextItem>
         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 />
@@ -71,8 +71,7 @@ export const OcmBaseDomainField = ({
         ref={toggleRef}
         onClick={() => setOpen(!isOpen)}
         isExpanded={isOpen}
-        className="pf-v6-u-w-100"
-        data-testid="base-domain-dropdown-toggle"
+        className="pf-v5-u-w-100"
       >
         {selectedDomain ? getManagedDomainLabel(selectedDomain) : 'Base domain'}
       </MenuToggle>

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

@@ -3,14 +3,12 @@ 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 {
@@ -143,7 +141,7 @@ export const OcmDiscoveryImageConfigForm = ({
       {({ submitForm, isSubmitting, status, setStatus }) => {
         return (
           <>
-            <ModalBody>
+            <ModalBoxBody>
               <Stack hasGutter>
                 <StackItem>
                   <Alert variant={AlertVariant.info} isInline title={alertDiscoveryText} />
@@ -168,40 +166,31 @@ export const OcmDiscoveryImageConfigForm = ({
                   </Form>
                 </StackItem>
               </Stack>
-            </ModalBody>
-            <ModalFooter>
+            </ModalBoxBody>
+            <ModalBoxFooter>
               <Stack hasGutter style={{ width: '100%' }}>
-                {(status as StatusErrorType)?.error && (
-                  <StackItem>
-                    <AlertFormikError
-                      status={status as StatusErrorType}
-                      onClose={() => setStatus(undefined)}
-                    />
-                  </StackItem>
-                )}
                 <StackItem>
-                  <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>
+                  <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>
                 </StackItem>
               </Stack>
-            </ModalFooter>
+            </ModalBoxFooter>
           </>
         );
       }}

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

@@ -19,6 +19,9 @@ const OcmOpenShiftVersionSelect = ({ versions }: OcmOpenShiftVersionSelectProps)
   const {
     values: { customOpenshiftSelect },
   } = useFormikContext<ClusterDetailsValues>();
+  const { allVersions } = useOpenShiftVersionsContext();
+  const [isOpenshiftVersionModalOpen, setIsOpenshiftVersionModalOpen] = React.useState(false);
+
   const selectOptions = React.useMemo(
     () =>
       versions.map((version) => ({
@@ -32,33 +35,25 @@ const OcmOpenShiftVersionSelect = ({ versions }: OcmOpenShiftVersionSelectProps)
       })),
     [versions, t],
   );
-  const [isOpenshiftVersionModalOpen, setIsOpenshiftVersionModalOpen] = React.useState(false);
-
-  const showOpenshiftVersionModal = () => {
-    setIsOpenshiftVersionModalOpen(true);
-  };
 
   const updatedSelectOptions = React.useMemo(() => {
     if (
       customOpenshiftSelect &&
-      !selectOptions.find((option) => option.value === customOpenshiftSelect.value)
+      !selectOptions.some((version) => version.value === customOpenshiftSelect)
     ) {
-      return [
-        {
-          label: customOpenshiftSelect.label,
-          value: customOpenshiftSelect.value,
-        },
-      ];
+      return allVersions.find((version) => version.value === customOpenshiftSelect);
     }
-    return [];
-  }, [selectOptions, customOpenshiftSelect]);
-
-  const { allVersions } = useOpenShiftVersionsContext();
+    return undefined;
+  }, [allVersions, customOpenshiftSelect, selectOptions]);
 
-  const getHelperText = (value: string | undefined, inModal?: boolean) => {
+  const getHelperText = (value: string | null, inModal?: boolean) => {
     return getOpenshiftVersionHelperText(allVersions, value, t, inModal);
   };
 
+  const showOpenshiftVersionModal = () => {
+    setIsOpenshiftVersionModalOpen(true);
+  };
+
   return (
     <>
       <OpenShiftVersionDropdown
@@ -68,7 +63,7 @@ const OcmOpenShiftVersionSelect = ({ versions }: OcmOpenShiftVersionSelectProps)
         getHelperText={getHelperText}
         showReleasesLink={isInOcm}
         showOpenshiftVersionModal={showOpenshiftVersionModal}
-        customItems={updatedSelectOptions}
+        customItem={updatedSelectOptions}
       />
       {isOpenshiftVersionModalOpen && (
         <OpenShiftVersionModal

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 { 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 { 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 { pluralize } from 'humanize-plus';
 import { TFunction } from 'i18next';
 

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

@@ -22,7 +22,7 @@ const OpenShiftLifeCycleDatesLink = () => {
 
 export const getOpenshiftVersionHelperText = (
   versions: OpenshiftVersionOptionType[],
-  selectedVersionValue: string | undefined,
+  selectedVersionValue: string | null,
   t: TFunction,
   isModal?: boolean,
 ) => {

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/CustomManifestsPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Content, ContentVariants, Alert, Grid } from '@patternfly/react-core';
+import { Text, TextContent, TextVariants, Alert, Grid } from '@patternfly/react-core';
 
 import { CustomManifests } from './components/CustomManifests';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
@@ -13,13 +13,13 @@ export const CustomManifestsPage = ({
   onFormStateChange(formState: CustomManifestFormState): void;
 }) => (
   <Grid hasGutter>
-    <Content>
-      <Content component={ContentVariants.h2}>Custom manifests</Content>
-      <Content component={ContentVariants.small}>
+    <TextContent>
+      <Text component={TextVariants.h2}>Custom manifests</Text>
+      <Text component={TextVariants.small}>
         Upload additional manifests that will be applied at the install time for advanced
         configuration of the cluster.
-      </Content>
-    </Content>
+      </Text>
+    </TextContent>
     <Alert
       isInline
       variant="warning"

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/DeleteCustomManifestModal.tsx

@@ -1,13 +1,5 @@
 import * as React from 'react';
-import {
-  Button,
-  Content,
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  ModalVariant,
-} from '@patternfly/react-core';
+import { Modal, Button, ModalVariant } from '@patternfly/react-core';
 
 const DeleteCustomManifestModal = ({
   isOpen,
@@ -18,27 +10,28 @@ const DeleteCustomManifestModal = ({
   onClose: () => void;
   onDelete: () => void;
 }) => (
-  <Modal isOpen={isOpen} onClose={onClose} variant={ModalVariant.small}>
-    <ModalHeader title={'Remove custom manifests'} />
-    <ModalBody>
-      <Content>
-        All the data entered for custom manifests will be lost and there will not be any custom
-        manifests included in the installation.
-      </Content>
-    </ModalBody>
-    <ModalFooter>
+  <Modal
+    title={'Remove custom manifests'}
+    isOpen={isOpen}
+    onClose={onClose}
+    variant={ModalVariant.small}
+    actions={[
       <Button
         data-testid="delete-manifest-submit"
         key="confirm"
         variant="danger"
         onClick={onDelete}
       >
-        Remove
-      </Button>
+        {'Remove'}{' '}
+      </Button>,
       <Button key="cancel" variant="link" onClick={onClose}>
         Cancel
-      </Button>
-    </ModalFooter>
+      </Button>,
+    ]}
+  >
+    {
+      'All the data entered for custom manifests will be lost and there will not be any custom manifests included in the installation.'
+    }
   </Modal>
 );
 

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/CustomManifest.tsx

@@ -26,12 +26,13 @@ export const RemoveItemButton = ({
   dataTestId: string;
 }) => (
   <Button
-    icon={<MinusCircleIcon onClick={onRemove} />}
     data-testid={dataTestId}
     aria-label="remove manifest"
     style={{ visibility: showRemoveButton ? 'visible' : 'hidden' }}
     variant="plain"
-  />
+  >
+    <MinusCircleIcon onClick={onRemove} />
+  </Button>
 );
 
 export const CustomManifest = ({

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/ExpandedManifest.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Language } from '@patternfly/react-code-editor';
-import { ExpandableSection, Grid, GridItem } from '@patternfly/react-core';
+import { ExpandableSection, Grid, GridItem, TextInput } from '@patternfly/react-core';
 import { useField } from 'formik';
 import { OcmInputField, OcmCodeField } from '../../../ui/OcmFormFields';
 import { CustomManifestValues } from '../data/dataTypes';
@@ -30,6 +30,12 @@ const ExpandedManifest = ({ fieldName, manifestIdx }: CustomManifestComponentPro
     >
       <Grid hasGutter span={12}>
         <GridItem span={6}>
+          <TextInput
+            hidden={true}
+            name={`${fieldName}.fakeId`}
+            data-testid={`fakeId-${manifestIdx}`}
+            id={`fakeId-${manifestIdx}`}
+          />
           <FolderDropdown name={`${fieldName}.folder`} data-testid={`folder-${manifestIdx}`} />
         </GridItem>
         <GridItem span={6}>

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/FolderDropdown.tsx

@@ -55,9 +55,8 @@ export const FolderDropdown = ({ name }: FolderDropdownProps) => {
       ref={toggleRef}
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
-      className="pf-v6-u-w-100"
+      className="pf-v5-u-w-100"
       id={fieldId}
-      data-testid="folder-dropdown-toggle"
     >
       {value || 'manifests'}
     </MenuToggle>