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

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>

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkConfiguration.tsx

@@ -2,27 +2,27 @@ import React from 'react';
 import { useFormikContext } from 'formik';
 import { useSelector } from 'react-redux';
 import { Stack, StackItem, Tooltip } from '@patternfly/react-core';
-import { VirtualIPControlGroup, VirtualIPControlGroupProps } from './VirtualIPControlGroup';
 import {
   canBeDualStack,
   canSelectNetworkTypeSDN,
-  clusterNetworksEqual,
   CpuArchitecture,
   DUAL_STACK,
   HostSubnets,
+  isAdvNetworkConf,
   isSNO,
   NetworkConfigurationValues,
   selectApiVip,
   selectIngressVip,
-  serviceNetworksEqual,
 } from '../../../../common';
 import {
   ManagedNetworkingControlGroup,
   UserManagedNetworkingTextContent,
+  StackTypeControlGroup,
+  AvailableSubnetsControl,
+  VirtualIPControlGroup,
+  VirtualIPControlGroupProps,
+  AdvancedNetworkFields,
 } from '../../../../common/components/clusterWizard/networkingSteps';
-import { StackTypeControlGroup } from './StackTypeControl';
-import { AvailableSubnetsControl } from './AvailableSubnetsControl';
-import AdvancedNetworkFields from './AdvancedNetworkFields';
 import { selectCurrentClusterPermissionsState } from '../../../store/slices/current-cluster/selectors';
 import { OcmCheckbox } from '../../ui/OcmFormFields';
 import { NetworkTypeControlGroup } from '../../../../common/components/clusterWizard/networkingSteps/NetworkTypeControlGroup';
@@ -32,7 +32,6 @@ import {
   useNewFeatureSupportLevel,
 } from '../../../../common/components/newFeatureSupportLevels';
 import {
-  Cluster,
   ClusterDefaultConfig,
   PlatformType,
 } from '@openshift-assisted/types/assisted-installer-service';
@@ -50,21 +49,6 @@ export type NetworkConfigurationProps = VirtualIPControlGroupProps & {
   >;
 };
 
-const isAdvNetworkConf = (
-  cluster: Cluster,
-  defaultNetworkValues: Pick<ClusterDefaultConfig, 'clusterNetworksIpv4' | 'serviceNetworksIpv4'>,
-) =>
-  !(
-    serviceNetworksEqual(
-      cluster.serviceNetworks || [],
-      defaultNetworkValues.serviceNetworksIpv4 || [],
-    ) &&
-    clusterNetworksEqual(
-      cluster.clusterNetworks || [],
-      defaultNetworkValues.clusterNetworksIpv4 || [],
-    )
-  );
-
 const getManagedNetworkingDisabledReason = (
   isDualStack: boolean,
   isOracleCloudInfrastructure: boolean,
@@ -224,10 +208,10 @@ const NetworkConfiguration = ({
   );
 
   React.useEffect(() => {
-    if (!isViewerMode && isDualStack && !isUserManagedNetworking) {
+    if (!isViewerMode && isDualStack) {
       toggleAdvConfiguration(true);
     }
-  }, [isDualStack, isUserManagedNetworking, isViewerMode, toggleAdvConfiguration]);
+  }, [isDualStack, isViewerMode, toggleAdvConfiguration]);
 
   const managedNetworkingState = React.useMemo(
     () =>
@@ -270,6 +254,8 @@ const NetworkConfiguration = ({
             clusterId={cluster.id}
             isDualStackSelectable={isDualStackSelectable}
             hostSubnets={hostSubnets}
+            defaultNetworkValues={defaultNetworkSettings}
+            isViewerMode={isViewerMode}
           />
         </StackItem>
       )}
@@ -292,6 +278,8 @@ const NetworkConfiguration = ({
               hostSubnets.length === 0 ||
               false
             }
+            openshiftVersion={cluster.openshiftVersion}
+            isViewerMode={isViewerMode}
           />
         </StackItem>
       )}
@@ -300,8 +288,10 @@ const NetworkConfiguration = ({
         <StackItem>
           <VirtualIPControlGroup
             cluster={cluster}
+            hostSubnets={hostSubnets}
             isVipDhcpAllocationDisabled={isVipDhcpAllocationDisabled || !isSDNSupported}
             supportLevel={featureSupportLevelContext.getFeatureSupportLevel('VIP_AUTO_ALLOC')}
+            isViewerMode={isViewerMode}
           />
         </StackItem>
       )}
@@ -323,7 +313,7 @@ const NetworkConfiguration = ({
       </StackItem>
       {isAdvanced && (
         <StackItem>
-          <AdvancedNetworkFields />
+          <AdvancedNetworkFields isDisabled={isViewerMode} />
         </StackItem>
       )}
     </Stack>

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkConfigurationForm.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Formik, FormikConfig, useFormikContext } from 'formik';
-import { Form, Grid, GridItem, Text, TextContent } from '@patternfly/react-core';
+import { Form, Grid, GridItem, Content } from '@patternfly/react-core';
 import {
   ClusterWizardStep,
   ClusterWizardStepHeader,
@@ -92,7 +92,7 @@ const NetworkConfigurationForm: React.FC<{
           JSON.stringify(
             JSON.stringify({
               featureSet: 'CustomNoUpgrade',
-              featureGates: ['NoRegistryClusterOperations=true'],
+              featureGates: ['NoRegistryClusterInstall=true'],
             }),
           ),
         );
@@ -153,9 +153,7 @@ const NetworkConfigurationForm: React.FC<{
             </Grid>
           </GridItem>
           <GridItem>
-            <TextContent>
-              <Text component="h2">Host inventory</Text>
-            </TextContent>
+            <Content component="h2">Host inventory</Content>
             <NetworkConfigurationTable cluster={cluster} />
           </GridItem>
         </Grid>
@@ -202,8 +200,9 @@ const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
   );
 
   const memoizedValidationSchema = React.useMemo(
-    () => getNetworkConfigurationValidationSchema(initialValues, hostSubnets),
-    [hostSubnets, initialValues],
+    () =>
+      getNetworkConfigurationValidationSchema(initialValues, hostSubnets, cluster.openshiftVersion),
+    [hostSubnets, initialValues, cluster.openshiftVersion],
   );
 
   React.useEffect(() => {

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkConfigurationTableBase.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { HostsTableActions, selectSchedulableMasters } from '../../../../common';
 import NetworkingStatus from '../../hosts/NetworkingStatus';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import {
+  HostsTableActions,
+  selectSchedulableMasters,
   hostnameColumn,
   roleColumn,
   activeNICColumn,
@@ -10,7 +11,7 @@ import {
   ipv6Column,
   macAddressColumn,
   countColumn,
-} from '../../../../common/components/hosts/tableUtils';
+} from '../../../../common';
 import { ActionsResolver, TableRow } from '../../../../common/components/hosts/AITable';
 import { usePagination } from '../../../../common/components/hosts/usePagination';
 import { HostDetail } from '../../../../common/components/hosts/HostRowDetail';

package/lib/ocm/components/clusterConfiguration/networkConfiguration/networkConfigurationValidation.ts

@@ -9,7 +9,7 @@ import {
   NetworkConfigurationValues,
   serviceNetworkValidationSchema,
   IPv4ValidationSchema,
-  sshPublicKeyListValidationSchema,
+  sshPublicKeyValidationSchema,
   IPV4_STACK,
   DUAL_STACK,
   vipArrayValidationSchema,
@@ -54,28 +54,31 @@ export const getNetworkInitialValues = (
       cluster.clusterNetworks ||
       (isDualStackType
         ? defaultNetworkValues.clusterNetworksDualstack
-        : defaultNetworkValues.clusterNetworksIpv4),
+        : defaultNetworkValues.clusterNetworksIpv4?.map((network) => ({
+            ...network,
+            clusterId: cluster?.id,
+          }))),
     serviceNetworks:
       cluster.serviceNetworks ||
       (isDualStackType
         ? defaultNetworkValues.serviceNetworksDualstack
-        : defaultNetworkValues.serviceNetworksIpv4),
+        : defaultNetworkValues.serviceNetworksIpv4?.map((network) => ({
+            ...network,
+            clusterId: cluster?.id,
+          }))),
   };
 };
 
 export const getNetworkConfigurationValidationSchema = (
   initialValues: NetworkConfigurationValues,
   hostSubnets: HostSubnets,
+  openshiftVersion?: string,
 ) =>
   Yup.lazy((values: NetworkConfigurationValues) =>
     Yup.object<NetworkConfigurationValues>().shape({
-      apiVips: vipArrayValidationSchema<ApiVip>(hostSubnets, values, initialValues.apiVips),
-      ingressVips: vipArrayValidationSchema<IngressVip>(
-        hostSubnets,
-        values,
-        initialValues.ingressVips,
-      ),
-      sshPublicKey: sshPublicKeyListValidationSchema,
+      apiVips: vipArrayValidationSchema<ApiVip>(hostSubnets, values),
+      ingressVips: vipArrayValidationSchema<IngressVip>(hostSubnets, values),
+      sshPublicKey: sshPublicKeyValidationSchema,
       machineNetworks:
         values.managedNetworkingType === 'userManaged'
           ? Yup.array()
@@ -85,7 +88,7 @@ export const getNetworkConfigurationValidationSchema = (
               otherwise: () =>
                 values.machineNetworks && values.machineNetworks?.length >= 2
                   ? machineNetworksValidationSchema.concat(
-                      dualStackValidationSchema('machine networks'),
+                      dualStackValidationSchema('machine networks', openshiftVersion),
                     )
                   : Yup.array(),
             }),
@@ -93,17 +96,17 @@ export const getNetworkConfigurationValidationSchema = (
         is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
         then: () => clusterNetworksValidationSchema.concat(IPv4ValidationSchema),
         otherwise: () =>
-          values.clusterNetworks && values.clusterNetworks?.length >= 2
-            ? clusterNetworksValidationSchema.concat(dualStackValidationSchema('cluster network'))
-            : Yup.array(),
+          clusterNetworksValidationSchema.concat(
+            dualStackValidationSchema('cluster network', openshiftVersion),
+          ),
       }),
       serviceNetworks: serviceNetworkValidationSchema.when('stackType', {
         is: (stackType: NetworkConfigurationValues['stackType']) => stackType === IPV4_STACK,
         then: () => serviceNetworkValidationSchema.concat(IPv4ValidationSchema),
         otherwise: () =>
-          values.serviceNetworks && values.serviceNetworks?.length >= 2
-            ? serviceNetworkValidationSchema.concat(dualStackValidationSchema('service network'))
-            : Yup.array(),
+          serviceNetworkValidationSchema.concat(
+            dualStackValidationSchema('service network', openshiftVersion),
+          ),
       }),
     }),
   );

package/lib/ocm/components/clusterConfiguration/operators/OperatorCheckbox.tsx

@@ -198,7 +198,7 @@ const OperatorCheckbox = ({
         description={
           !!Description && (
             <HelperText>
-              <HelperTextItem variant="indeterminate">
+              <HelperTextItem data-testid={`operator-checkbox-description-${operatorId}`}>
                 <Description openshiftVersion={openshiftVersion} searchTerm={searchTerm} />
               </HelperTextItem>
             </HelperText>

package/lib/ocm/components/clusterConfiguration/operators/bundleSpecs.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { List, ListItem } from '@patternfly/react-core';
 
 export type BundleSpec = {
-  noSNO?: boolean;
   incompatibleBundles?: string[];
   Description: React.ComponentType;
   docsLink?: string;
@@ -10,7 +9,6 @@ export type BundleSpec = {
 
 export const bundleSpecs: { [key: string]: BundleSpec } = {
   virtualization: {
-    noSNO: true,
     Description: () => (
       <List>
         <ListItem>
@@ -29,7 +27,6 @@ export const bundleSpecs: { [key: string]: BundleSpec } = {
     ),
   },
   'openshift-ai': {
-    noSNO: true,
     incompatibleBundles: [],
     Description: () => (
       <List>

package/lib/ocm/components/clusterConfiguration/operators/utils.tsx

@@ -40,13 +40,17 @@ export const getNewOperators = (
   }
 
   const newOperators = currentOperators.filter((op) => op !== operatorId);
-  // uncheck unneeded not-standalone dependencies too
   const notStandaloneDeps = dependencies
     .filter((dep) => opSpecs[dep]?.notStandalone)
-    .filter((dep) =>
-      // some other operator may still depend on the not-standalone operator
-      newOperators.every((op) => !getOperatorDependencies(op, preflightRequirements).includes(dep)),
-    );
+    .filter((dep) => {
+      const hasDependency = newOperators.some((op) =>
+        getOperatorDependencies(op, preflightRequirements).includes(dep),
+      );
+      if (!hasDependency) {
+        newOperators.splice(newOperators.indexOf(dep), 1);
+      }
+      return !hasDependency;
+    });
 
   return currentOperators.filter((op) => op !== operatorId && !notStandaloneDeps.includes(op));
 };
@@ -59,7 +63,7 @@ const getBundleOperators = (
   bundle.operators?.forEach((op) => {
     getOperatorDependencies(op, preflightRequirements).forEach((dep) => bundleOperators.add(dep));
   });
-  return [...bundleOperators];
+  return Array.from(bundleOperators);
 };
 
 export const getNewBundleOperators = (
@@ -73,7 +77,8 @@ export const getNewBundleOperators = (
   const newBundleOperators = getBundleOperators(newBundle, preflightRequirements);
 
   if (add) {
-    return [...new Set([...currentOperators, ...newBundleOperators])];
+    const combined = [...currentOperators, ...newBundleOperators];
+    return Array.from(new Set(combined));
   }
 
   const newBundles = currentBundles.filter((b) => b !== newBundle.id);

package/lib/ocm/components/clusterConfiguration/platformIntegration/ExternalPlatformDropdown.tsx

@@ -11,6 +11,9 @@ import {
   MenuToggle,
   MenuToggleElement,
   DropdownList,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
 } from '@patternfly/react-core';
 import { useField } from 'formik';
 import {
@@ -19,6 +22,8 @@ import {
   SupportedCpuArchitecture,
   architectureData,
   getFieldId,
+  ExternalLink,
+  VSPHERE_LIMITATIONS_LINK,
 } from '../../../../common';
 import { ExternalPlaformIds, ExternalPlatformLabels, ExternalPlatformLinks } from './constants';
 import { PlatformType, SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
@@ -245,44 +250,59 @@ export const ExternalPlatformDropdown = ({
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       id={fieldId}
-      className="pf-v5-u-w-100"
+      className="pf-v6-u-w-100"
+      style={{ minWidth: '420px' }}
       ref={toggleRef}
       onClick={() => setOpen(!isOpen)}
       isDisabled={dropdownIsDisabled}
       isExpanded={isOpen}
+      data-testid="external-platform-dropdown-toggle"
     >
       {externalPlatformTypes[field.value as PlatformType]?.label}
     </MenuToggle>
   );
 
   return (
-    <FormGroup
-      id={`form-control__${fieldId}`}
-      fieldId={fieldId}
-      label={'Integrate with external partner platforms'}
-    >
-      <Tooltip
-        content={tooltipDropdownDisabled}
-        hidden={!dropdownIsDisabled}
-        position="top"
-        distance={7}
+    <>
+      <FormGroup
+        id={`form-control__${fieldId}`}
+        fieldId={fieldId}
+        label={'Integrate with external partner platforms'}
       >
-        <Dropdown
-          id={`${fieldId}-dropdown`}
-          toggle={toggle}
-          isOpen={isOpen}
-          onOpenChange={() => setOpen(!isOpen)}
-          onSelect={(event) => {
-            const selectedPlatform = event?.currentTarget.id as PlatformType;
-            setValue(selectedPlatform);
-            setOpen(false);
-            onChange(selectedPlatform);
-          }}
-          shouldFocusToggleOnSelect
+        <Tooltip
+          content={tooltipDropdownDisabled}
+          hidden={!dropdownIsDisabled}
+          position="top"
+          distance={7}
         >
-          <DropdownList>{enabledItems}</DropdownList>
-        </Dropdown>
-      </Tooltip>
-    </FormGroup>
+          <Dropdown
+            id={`${fieldId}-dropdown`}
+            toggle={toggle}
+            isOpen={isOpen}
+            onOpenChange={() => setOpen(!isOpen)}
+            onSelect={(event) => {
+              const selectedPlatform = event?.currentTarget.id as PlatformType;
+              setValue(selectedPlatform);
+              setOpen(false);
+              onChange(selectedPlatform);
+            }}
+            shouldFocusToggleOnSelect
+          >
+            <DropdownList>{enabledItems}</DropdownList>
+          </Dropdown>
+        </Tooltip>
+      </FormGroup>
+      {field.value === 'vsphere' && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>
+              <ExternalLink href={VSPHERE_LIMITATIONS_LINK}>
+                Learn more about vSphere limitations
+              </ExternalLink>
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
+    </>
   );
 };

package/lib/ocm/components/clusterConfiguration/review/ReviewCluster.css

@@ -8,24 +8,22 @@
   padding-left: 0;
 }
 
-.review-expandable > .pf-v5-c-expandable-section__toggle {
+.review-expandable > .pf-v6-c-expandable-section__toggle {
   margin-right: 0;
   width: 100%;
   display: inline-flex;
 }
 
-.review-expandable .pf-v5-c-expandable-section__toggle-text {
+.review-expandable .pf-v6-c-expandable-section__toggle-text {
   width: 100%;
 }
 
-.summary-expandable .pf-v5-c-expandable-section__toggle,
-.review-expandable > .pf-v5-c-expandable-section__toggle {
+#summary-expandable > .pf-v6-c-expandable-section__toggle .pf-v6-c-button__text,
+.review-expandable > .pf-v6-c-expandable-section__toggle {
   color: initial;
   text-align: left;
 }
 
-.summary-expandable
-  > .pf-v5-c-expandable-section__toggle
-  > .pf-v5-c-expandable-section__toggle-icon {
+#summary-expandable > .pf-v6-c-expandable-section__toggle .pf-v6-c-button__icon {
   visibility: hidden;
 }