@openshift-assisted/ui-lib 2.41.1 → 2.42.0

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

@@ -1,7 +1,12 @@
 import React from 'react';
-import { HelperText, FormGroup } from '@patternfly/react-core';
-import { DropdownItem, DropdownToggle, Dropdown } from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+import {
+  HelperText,
+  FormGroup,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
 import { useField } from 'formik';
 import { getFieldId } from '../../../../../common/components/ui/formik';
 import { PopoverIcon } from '../../../../../common';
@@ -40,40 +45,34 @@ export const FolderDropdown = ({ name }: FolderDropdownProps) => {
   const [isOpen, setOpen] = React.useState(false);
   const fieldId = getFieldId(name, 'input');
 
-  const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
-      setValue(event?.currentTarget.id as string);
-      setOpen(false);
-    },
-    [setOpen, setValue],
-  );
+  const onSelect = (event?: React.MouseEvent<Element, MouseEvent>): void => {
+    setValue(event?.currentTarget.id as string);
+    setOpen(false);
+  };
 
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(val)}
-        toggleIndicator={CaretDownIcon}
-        isText
-        className="pf-v5-u-w-100"
-      >
-        {value || 'manifests'}
-      </DropdownToggle>
-    ),
-    [setOpen, value],
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      className="pf-v5-u-w-100"
+    >
+      {value || 'manifests'}
+    </MenuToggle>
   );
 
   return (
     <FormGroup fieldId={fieldId} label={<FolderLabel />} isRequired>
       <Dropdown
         {...field}
-        name={name}
         id={fieldId}
+        onOpenChange={() => setOpen(!isOpen)}
         onSelect={onSelect}
-        dropdownItems={dropdownItems}
         toggle={toggle}
         isOpen={isOpen}
-        className="pf-v5-u-w-100"
-      />
+      >
+        {dropdownItems}
+      </Dropdown>
       <HelperText style={{ display: 'inherit' }}>
         {'Manifests can be placed in "manifests" or "openshift" directories.'}
       </HelperText>

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { DropdownItem, DropdownToggle, Dropdown } from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+import { Dropdown, DropdownItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 import { useField } from 'formik';
 import { getFieldId, HostSubnet, NO_SUBNET_SET } from '../../../../common';
 
@@ -64,46 +63,43 @@ export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDro
   }, []);
 
   const dropdownItems = itemsSubnets.map(({ value, label, isDisabled }) => (
-    <DropdownItem key={value} id={value} isDisabled={isDisabled}>
+    <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
       {label}
     </DropdownItem>
   ));
 
-  const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
-      const currentValue = event?.currentTarget.innerText ?? currentDisplayValue;
-      setCurrentDisplayValue(currentValue);
-      setValue(event?.currentTarget.id);
-      setOpen(false);
-    },
-    [currentDisplayValue, setValue],
-  );
+  const onSelect = (
+    event?: React.MouseEvent<Element, MouseEvent>,
+    value?: string | number,
+  ): void => {
+    setCurrentDisplayValue(value as string);
+    setValue(event?.currentTarget.id);
+    setOpen(false);
+  };
 
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(!isDisabled && val)}
-        toggleIndicator={CaretDownIcon}
-        isDisabled={isDisabled}
-        isText
-        className="pf-v5-u-w-100"
-      >
-        {currentDisplayValue}
-      </DropdownToggle>
-    ),
-    [setOpen, currentDisplayValue, isDisabled],
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      isDisabled={isDisabled}
+      className="pf-v5-u-w-100"
+      id={fieldId}
+    >
+      {currentDisplayValue}
+    </MenuToggle>
   );
 
   return (
     <Dropdown
       {...field}
-      name={name}
-      id={fieldId}
+      id={`${fieldId}-dropdown`}
+      onOpenChange={() => setOpen(!isOpen)}
       onSelect={onSelect}
-      dropdownItems={dropdownItems}
       toggle={toggle}
       isOpen={isOpen}
-      className="pf-v5-u-w-100"
-    />
+    >
+      {dropdownItems}
+    </Dropdown>
   );
 };

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

@@ -35,7 +35,8 @@ export const getNewOperators = (
   const dependencies = getOperatorDependencies(operatorId, preflightRequirements);
 
   if (add) {
-    return [...new Set([...currentOperators, ...dependencies, operatorId])];
+    const uniqueOps = new Set([...currentOperators, ...dependencies, operatorId]);
+    return Array.from(uniqueOps);
   }
 
   const newOperators = currentOperators.filter((op) => op !== operatorId);

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

@@ -6,9 +6,12 @@ import {
   Split,
   SplitItem,
   Tooltip,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  DropdownList,
 } from '@patternfly/react-core';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { useField } from 'formik';
 import {
   CpuArchitecture,
@@ -199,7 +202,12 @@ export const ExternalPlatformDropdown = ({
     ] as ExternalPlatformInfo;
 
     return (
-      <DropdownItem key={platform} id={platform} isAriaDisabled={disabledReason !== undefined}>
+      <DropdownItem
+        value={platform}
+        key={platform}
+        id={platform}
+        isAriaDisabled={disabledReason !== undefined}
+      >
         <Split>
           <SplitItem>
             <Tooltip hidden={!disabledReason} content={disabledReason} position="top">
@@ -234,29 +242,17 @@ export const ExternalPlatformDropdown = ({
     );
   });
 
-  const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
-      const selectedPlatform = event?.currentTarget.id as PlatformType;
-      setValue(selectedPlatform);
-      setOpen(false);
-      onChange(selectedPlatform);
-    },
-    [setOpen, setValue, onChange],
-  );
-
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(val)}
-        toggleIndicator={CaretDownIcon}
-        isText
-        className="pf-v5-u-w-100"
-        isDisabled={dropdownIsDisabled}
-      >
-        {externalPlatformTypes[field.value as PlatformType]?.label}
-      </DropdownToggle>
-    ),
-    [externalPlatformTypes, field, dropdownIsDisabled],
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      id={fieldId}
+      className="pf-v5-u-w-100"
+      ref={toggleRef}
+      onClick={() => setOpen(!isOpen)}
+      isDisabled={dropdownIsDisabled}
+      isExpanded={isOpen}
+    >
+      {externalPlatformTypes[field.value as PlatformType]?.label}
+    </MenuToggle>
   );
 
   return (
@@ -272,15 +268,20 @@ export const ExternalPlatformDropdown = ({
         distance={7}
       >
         <Dropdown
-          {...field}
-          id={fieldId}
-          dropdownItems={enabledItems}
+          id={`${fieldId}-dropdown`}
           toggle={toggle}
           isOpen={isOpen}
-          className="pf-v5-u-w-100"
-          onSelect={onSelect}
-          disabled={dropdownIsDisabled}
-        />
+          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>
   );

package/lib/ocm/components/clusterConfiguration/staticIp/commonValidationSchemas.tsx

@@ -232,6 +232,10 @@ export const getIpIsNotNetworkOrBroadcastAddressSchema = (
     'is-not-network-or-broadcast',
     `The IP address must not match the network or broadcast address`,
     (value) => {
+      // Allow both addresses for IPv4 /31 subnets (RFC 3021)
+      if (protocolVersion === ProtocolVersion.ipv4 && subnet.endsWith('/31')) {
+        return true;
+      }
       const subnetAddr = getAddressObject(subnet, protocolVersion);
       if (!subnetAddr) {
         return true;

package/lib/ocm/components/clusterWizard/ClusterDetails.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { useDispatch } from 'react-redux';
-import { useAlerts, LoadingState, ClusterWizardStep, ErrorState } from '../../../common';
+import {
+  useAlerts,
+  LoadingState,
+  ClusterWizardStep,
+  ErrorState,
+  UISettingsValues,
+} from '../../../common';
 import { usePullSecret } from '../../hooks';
 import { getApiErrorMessage, handleApiError, isUnknownServerError } from '../../../common/api';
 import { setServerUpdateError, updateCluster } from '../../store/slices/current-cluster/slice';
@@ -81,11 +87,15 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
         }
         const cluster = await ClustersService.create(params, isAssistedMigration);
         navigate(`../${cluster.id}`, { state: ClusterWizardFlowStateNew });
-        await UISettingService.update(cluster.id, { addCustomManifests });
-        //For Assisted Migration we need to enable virtualization bundle
+
+        const uiPatch: UISettingsValues = { addCustomManifests };
         if (isAssistedMigration) {
-          await UISettingService.update(cluster.id, { bundlesSelected: ['virtualization'] });
+          //For Assisted Migration we need to enable virtualization bundle
+          uiPatch.bundlesSelected = ['virtualization'];
+          uiPatch.isAssistedMigration = true;
         }
+        await UISettingService.update(cluster.id, uiPatch);
+        await clusterWizardContext.updateUISettings(uiPatch); // keeps local state current
       } catch (e) {
         handleApiError(e, () =>
           addAlert({ title: 'Failed to create new cluster', message: getApiErrorMessage(e) }),
@@ -95,7 +105,7 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
         }
       }
     },
-    [clearAlerts, location.search, navigate, addAlert, dispatch],
+    [clearAlerts, location.search, navigate, clusterWizardContext, addAlert, dispatch],
   );
 
   const navigation = <ClusterWizardNavigation cluster={cluster} />;

package/lib/ocm/components/clusterWizard/OperatorsBundle.tsx

@@ -36,6 +36,7 @@ import { bundleSpecs } from '../clusterConfiguration/operators/bundleSpecs';
 import { useOperatorSpecs } from '../../../common/components/operators/operatorSpecs';
 
 import './OperatorsBundle.css';
+import { useClusterWizardContext } from './ClusterWizardContext';
 
 const BundleLabel = ({ bundle }: { bundle: Bundle }) => {
   const opSpecs = useOperatorSpecs();
@@ -114,6 +115,7 @@ const BundleCard = ({
   const isSNO = useSelector(selectIsCurrentClusterSNO);
   const { isFeatureSupported, getFeatureSupportLevel } = useNewFeatureSupportLevel();
   const opSpecs = useOperatorSpecs();
+  const { uiSettings } = useClusterWizardContext();
 
   const supportLevel = getBundleSupportLevel(bundle, opSpecs, getFeatureSupportLevel);
 
@@ -130,7 +132,7 @@ const BundleCard = ({
   const incompatibleBundle = bundleSpec?.incompatibleBundles?.find((b) =>
     values.selectedBundles.includes(b),
   );
-
+  const isAssistedMigration = uiSettings?.isAssistedMigration;
   const disabledReason = hasUnsupportedOperators
     ? 'Some operators in this bundle are not supported with the current configuration.'
     : isSNO && bundleSpec?.noSNO
@@ -139,6 +141,8 @@ const BundleCard = ({
     ? `Bundle cannot be installed together with ${
         bundles.find(({ id }) => id === incompatibleBundle)?.title || incompatibleBundle
       }`
+    : isAssistedMigration
+    ? 'This bundle needs to be selected for clusters created from Migration Assessment'
     : undefined;
 
   const onSelect = (checked: boolean) => {

package/lib/ocm/components/clusterWizard/OperatorsSelect.tsx

@@ -74,9 +74,13 @@ const OperatorsSelect = ({
     return <LoadingState />;
   }
 
+  const selectedOperators = values.selectedOperators.filter(
+    (opKey) => operators.includes(opKey) && !!opSpecs[opKey],
+  );
+
   return (
     <ExpandableSection
-      toggleText={`Single Operators (${operators.length} | ${values.selectedOperators.length} selected)`}
+      toggleText={`Single Operators (${operators.length} | ${selectedOperators.length} selected)`}
       onToggle={() => setIsExpanded(!isExpanded)}
       isExpanded={isExpanded}
       data-testid="single-operators-section"

package/lib/ocm/components/hosts/use-hosts-table.tsx

@@ -60,8 +60,10 @@ import {
   selectCurrentClusterPermissionsState,
   selectCurrentClusterState,
 } from '../../store/slices/current-cluster/selectors';
+import { useFeature } from '../../hooks/use-feature';
 
 export const useHostsTable = (cluster: Cluster) => {
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const { addAlert } = useAlerts();
   const {
     eventsDialog,
@@ -248,8 +250,12 @@ export const useHostsTable = (cluster: Cluster) => {
 
   const actionChecks = React.useMemo(
     () => ({
-      canEditRole: (host: Host) =>
-        !isViewerMode && canEditRoleUtil(cluster.status, host.status, isSNO(cluster)),
+      canEditRole: (host: Host) => {
+        if (isSingleClusterFeatureEnabled && host.bootstrap) {
+          return false;
+        }
+        return !isViewerMode && canEditRoleUtil(cluster.status, host.status, isSNO(cluster));
+      },
       canInstallHost: (host: Host) => !isViewerMode && canInstallHostUtil(cluster, host.status),
       canEditDisks: (host: Host) => !isViewerMode && canEditDisksUtil(cluster.status, host.status),
       canEnable: (host: Host) => !isViewerMode && canEnableUtil(cluster.status, host.status),
@@ -259,7 +265,7 @@ export const useHostsTable = (cluster: Cluster) => {
       canReset: (host: Host) => !isViewerMode && canResetUtil(cluster.status, host.status),
       canEditHostname: () => !isViewerMode && canEditHostnameUtil(cluster.status),
     }),
-    [cluster, isViewerMode],
+    [cluster, isViewerMode, isSingleClusterFeatureEnabled],
   );
 
   const onReset = React.useCallback(() => {

package/lib/ocm/services/DiskEncryptionService.ts

@@ -8,9 +8,14 @@ const DiskEncryptionService = {
   diskEncryptionEnableOn(
     isEnableOnMasters: boolean,
     isEnableOnWorkers: boolean,
+    isEnableOnArbiters: boolean,
   ): DiskEncryption['enableOn'] {
     let enableOnParam: DiskEncryption['enableOn'];
-    if (isEnableOnMasters && isEnableOnWorkers) enableOnParam = 'all';
+    if (isEnableOnMasters && isEnableOnWorkers && isEnableOnArbiters) enableOnParam = 'all';
+    else if (isEnableOnMasters && isEnableOnWorkers) enableOnParam = 'masters,workers';
+    else if (isEnableOnMasters && isEnableOnArbiters) enableOnParam = 'masters,arbiters';
+    else if (isEnableOnWorkers && isEnableOnArbiters) enableOnParam = 'arbiters,workers';
+    else if (isEnableOnArbiters) enableOnParam = 'arbiters';
     else if (isEnableOnWorkers) enableOnParam = 'workers';
     else if (isEnableOnMasters) enableOnParam = 'masters';
     else enableOnParam = 'none';
@@ -28,6 +33,7 @@ const DiskEncryptionService = {
           : DiskEncryptionService.diskEncryptionEnableOn(
               values.enableDiskEncryptionOnMasters,
               values.enableDiskEncryptionOnWorkers,
+              values.enableDiskEncryptionOnArbiters,
             ),
       tangServers:
         values.diskEncryptionMode === 'tang'

package/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@openshift-assisted/locales": "2.41.1",
-    "@openshift-assisted/types": "2.41.1",
+    "@openshift-assisted/locales": "2.42.0",
+    "@openshift-assisted/types": "2.42.0",
     "@openshift-console/dynamic-plugin-sdk": "0.0.3",
     "@patternfly/patternfly": "5.2.0",
     "@patternfly/react-code-editor": "5.2.0",
@@ -140,5 +140,5 @@
       ]
     }
   },
-  "version": "2.41.1"
+  "version": "2.42.0"
 }

package/build/cjs/common/components/ui/OpenShiftVersionDropdown.css

@@ -1,9 +0,0 @@
-#form-input-openshiftVersion-field .pf-v5-c-dropdown__menu {
-  max-height: 22vh;
-  overflow: auto;
-}
-
-#form-input-openshiftVersion-field .pf-v5-c-dropdown__menu ul {
-  list-style: none;
-  padding-left: 0;
-}

package/lib/common/components/ui/OpenShiftVersionDropdown.css

@@ -1,9 +0,0 @@
-#form-input-openshiftVersion-field .pf-v5-c-dropdown__menu {
-  max-height: 22vh;
-  overflow: auto;
-}
-
-#form-input-openshiftVersion-field .pf-v5-c-dropdown__menu ul {
-  list-style: none;
-  padding-left: 0;
-}