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

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,7 +32,7 @@ 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 />
@@ -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';
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, TextContent, TextVariants, Alert, Grid } from '@patternfly/react-core';
+import { Content, ContentVariants, 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>
-    <TextContent>
-      <Text component={TextVariants.h2}>Custom manifests</Text>
-      <Text component={TextVariants.small}>
+    <Content>
+      <Content component={ContentVariants.h2}>Custom manifests</Content>
+      <Content component={ContentVariants.small}>
         Upload additional manifests that will be applied at the install time for advanced
         configuration of the cluster.
-      </Text>
-    </TextContent>
+      </Content>
+    </Content>
     <Alert
       isInline
       variant="warning"

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

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

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

@@ -26,13 +26,12 @@ 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, TextInput } from '@patternfly/react-core';
+import { ExpandableSection, Grid, GridItem } from '@patternfly/react-core';
 import { useField } from 'formik';
 import { OcmInputField, OcmCodeField } from '../../../ui/OcmFormFields';
 import { CustomManifestValues } from '../data/dataTypes';
@@ -30,12 +30,6 @@ 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,8 +55,9 @@ export const FolderDropdown = ({ name }: FolderDropdownProps) => {
       ref={toggleRef}
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
-      className="pf-v5-u-w-100"
+      className="pf-v6-u-w-100"
       id={fieldId}
+      data-testid="folder-dropdown-toggle"
     >
       {value || 'manifests'}
     </MenuToggle>