@openshift-assisted/ui-lib 2.41.2 → 2.42.1

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

@@ -24,21 +24,18 @@ import NewFeatureSupportLevelBadge, {
 } from '../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 import { ExternalLink, OperatorsValues, PopoverIcon, singleClusterBundles } from '../../../common';
 import { useFormikContext } from 'formik';
-import {
-  GetFeatureSupportLevel,
-  useNewFeatureSupportLevel,
-} from '../../../common/components/newFeatureSupportLevels';
+import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
 import { useFeature } from '../../hooks/use-feature';
 import { useSelector } from 'react-redux';
 import { selectIsCurrentClusterSNO } from '../../store/slices/current-cluster/selectors';
 import { getNewBundleOperators } from '../clusterConfiguration/operators/utils';
 import { bundleSpecs } from '../clusterConfiguration/operators/bundleSpecs';
-import { useOperatorSpecs } from '../../../common/components/operators/operatorSpecs';
-
+import { OperatorSpec, useOperatorSpecs } from '../../../common/components/operators/operatorSpecs';
+import { useClusterWizardContext } from './ClusterWizardContext';
 import './OperatorsBundle.css';
 
 const BundleLabel = ({ bundle }: { bundle: Bundle }) => {
-  const opSpecs = useOperatorSpecs();
+  const { byKey: opSpecs } = useOperatorSpecs();
   const bundleSpec = bundleSpecs[bundle.id || ''];
 
   return (
@@ -80,19 +77,17 @@ const BundleLabel = ({ bundle }: { bundle: Bundle }) => {
 
 const getBundleSupportLevel = (
   bundle: Bundle,
-  opSpecs: ReturnType<typeof useOperatorSpecs>,
-  getFeatureSupportLevel: GetFeatureSupportLevel,
+  opSpecsByKey: Record<string, OperatorSpec>,
 ): NewSupportLevelBadgeProps['supportLevel'] => {
   let supportLevel: NewSupportLevelBadgeProps['supportLevel'] = undefined;
   if (bundle.operators) {
     for (const op of bundle.operators) {
-      const operatorSpec = opSpecs[op];
+      const operatorSpec = opSpecsByKey[op];
       if (operatorSpec) {
-        const opSupportLevel = getFeatureSupportLevel(operatorSpec.featureId);
-        if (opSupportLevel === 'dev-preview') {
+        if (operatorSpec.supportLevel === 'dev-preview') {
           supportLevel = 'dev-preview';
           break;
-        } else if (opSupportLevel === 'tech-preview') {
+        } else if (operatorSpec.supportLevel === 'tech-preview') {
           supportLevel = 'tech-preview';
         }
       }
@@ -112,10 +107,11 @@ const BundleCard = ({
 }) => {
   const { values, setFieldValue } = useFormikContext<OperatorsValues>();
   const isSNO = useSelector(selectIsCurrentClusterSNO);
-  const { isFeatureSupported, getFeatureSupportLevel } = useNewFeatureSupportLevel();
-  const opSpecs = useOperatorSpecs();
+  const { isFeatureSupported } = useNewFeatureSupportLevel();
+  const { byKey: opSpecs } = useOperatorSpecs();
+  const { uiSettings } = useClusterWizardContext();
 
-  const supportLevel = getBundleSupportLevel(bundle, opSpecs, getFeatureSupportLevel);
+  const supportLevel = getBundleSupportLevel(bundle, opSpecs);
 
   const hasUnsupportedOperators = !!bundle.operators?.some((op) => {
     const operatorSpec = opSpecs[op];
@@ -130,7 +126,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 +135,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

@@ -53,51 +53,57 @@ const OperatorsSelect = ({
     void fetchSupportedOperators();
   }, [addAlert, setSupportedOperators, setIsLoading]);
 
-  const opSpecs = useOperatorSpecs();
+  const { byCategory, byKey: opSpecs } = useOperatorSpecs();
 
   const operators = React.useMemo(() => {
-    return supportedOperators
-      .sort((a, b) => {
-        const aTitle = opSpecs[a]?.title || a;
-        const bTitle = opSpecs[b]?.title || b;
-        return aTitle.localeCompare(bTitle);
-      })
-      .filter((op) => {
-        if (!isSingleClusterFeatureEnabled) {
-          return true;
-        }
-        return singleClusterOperators.includes(op);
-      });
-  }, [isSingleClusterFeatureEnabled, supportedOperators, opSpecs]);
+    return supportedOperators.filter((op) => {
+      if (!isSingleClusterFeatureEnabled) {
+        return true;
+      }
+      return singleClusterOperators.includes(op);
+    });
+  }, [isSingleClusterFeatureEnabled, supportedOperators]);
 
   if (isLoading) {
     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"
     >
       <Stack hasGutter data-testid={'operators-form'}>
-        {operators.map((operatorKey) => {
-          if (!opSpecs[operatorKey]) {
+        {Object.entries(byCategory).map(([categoryName, specs]) => {
+          const categoryOperators = specs.filter((spec) => operators.includes(spec.operatorKey));
+          if (categoryOperators.length === 0) {
             return null;
           }
 
           return (
-            <StackItem key={operatorKey}>
-              <OperatorCheckbox
-                bundles={bundles}
-                operatorId={operatorKey}
-                cluster={cluster}
-                openshiftVersion={cluster.openshiftVersion}
-                preflightRequirements={preflightRequirements}
-                {...opSpecs[operatorKey]}
-              />
-            </StackItem>
+            <React.Fragment key={categoryName}>
+              <StackItem>
+                <strong>{categoryName}</strong>
+              </StackItem>
+              {categoryOperators.map((spec) => (
+                <StackItem key={spec.operatorKey}>
+                  <OperatorCheckbox
+                    bundles={bundles}
+                    operatorId={spec.operatorKey}
+                    cluster={cluster}
+                    openshiftVersion={cluster.openshiftVersion}
+                    preflightRequirements={preflightRequirements}
+                    {...spec}
+                  />
+                </StackItem>
+              ))}
+            </React.Fragment>
           );
         })}
       </Stack>

package/lib/ocm/components/featureSupportLevels/featureStateUtils.ts

@@ -4,11 +4,6 @@ import {
   CpuArchitecture,
   FeatureId,
   isSNO,
-  OPERATOR_NAME_CNV,
-  OPERATOR_NAME_LVM,
-  OPERATOR_NAME_ODF,
-  OPERATOR_NAME_OPENSHIFT_AI,
-  OPERATOR_NAME_OSC,
   SupportedCpuArchitecture,
 } from '../../../common';
 import {
@@ -17,7 +12,7 @@ import {
   SupportLevel,
 } from '@openshift-assisted/types/assisted-installer-service';
 import { ExternalPlatformLabels } from '../clusterConfiguration/platformIntegration/constants';
-import { getOperatorSpecs } from '../../../common/components/operators/operatorSpecs';
+import { getOperatorTitleByFeatureId } from '../../../common/components/operators/operatorSpecs';
 
 export const clusterExistsReason = 'This option is not editable after the draft cluster is created';
 
@@ -46,10 +41,7 @@ const getOdfDisabledReason = (
     return undefined;
   }
 
-  const opSpecs = getOperatorSpecs();
-
-  const operatorTitle = opSpecs[OPERATOR_NAME_ODF]?.title || '';
-
+  const operatorTitle = getOperatorTitleByFeatureId('ODF') || '';
   const isArm = activeFeatureConfiguration?.underlyingCpuArchitecture === CpuArchitecture.ARM;
   if (isArm && isSNO(cluster)) {
     return `${operatorTitle} is not available when using Single Node OpenShift or ARM CPU architecture.`;
@@ -75,8 +67,8 @@ const getCnvDisabledReason = (
     return undefined;
   }
 
-  const opSpecs = getOperatorSpecs();
-  const operatorTitle = opSpecs[OPERATOR_NAME_CNV]?.title || '';
+  const operatorTitle = getOperatorTitleByFeatureId('CNV') || '';
+
   if (platformType === 'nutanix') {
     return `${operatorTitle} is not available when Nutanix platform type is selected.`;
   }
@@ -105,8 +97,7 @@ const getLvmDisabledReason = (
     return undefined;
   }
 
-  const opSpecs = getOperatorSpecs();
-  const operatorTitle = opSpecs[OPERATOR_NAME_LVM]?.title;
+  const operatorTitle = getOperatorTitleByFeatureId('LVM') || '';
   if (platformType === 'nutanix') {
     return `${operatorTitle} is not supported when Nutanix platform type is selected.`;
   }
@@ -125,8 +116,7 @@ const getOscDisabledReason = (
     return undefined;
   }
 
-  const opSpecs = getOperatorSpecs();
-  const operatorTitle = opSpecs[OPERATOR_NAME_OSC]?.title || '';
+  const operatorTitle = getOperatorTitleByFeatureId('OSC') || '';
   if (!isSupported) {
     return `${operatorTitle} is not supported in this OpenShift version.`;
   }
@@ -299,8 +289,7 @@ const getOpenShiftAIDisabledReason = (
     return undefined;
   }
 
-  const opSpecs = getOperatorSpecs();
-  const operatorTitle = opSpecs[OPERATOR_NAME_OPENSHIFT_AI]?.title || '';
+  const operatorTitle = getOperatorTitleByFeatureId('OPENSHIFT_AI') || '';
   const isArm = activeFeatureConfiguration?.underlyingCpuArchitecture === CpuArchitecture.ARM;
   if (isArm) {
     return `${operatorTitle} is not available when ARM CPU architecture is selected.`;

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.2",
-    "@openshift-assisted/types": "2.41.2",
+    "@openshift-assisted/locales": "2.42.1",
+    "@openshift-assisted/types": "2.42.1",
     "@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.2"
+  "version": "2.42.1"
 }

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;
-}