@openshift-assisted/ui-lib 2.42.0 → 2.42.1

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

@@ -20,7 +20,7 @@ import OcmSNODisclaimer from './OcmSNODisclaimer';
 
 const INPUT_NAME = 'controlPlaneCount';
 const fieldId = getFieldId(INPUT_NAME, 'input');
-const DEFAULT_VALUE = 3;
+export const DEFAULT_VALUE_CPN = 3;
 
 export const ControlPlaneNodesLabel = () => {
   return (
@@ -48,7 +48,7 @@ interface ControlPlaneNodesDropdownProps {
   featureSupportLevelData?: NewFeatureSupportLevelMap | null;
 }
 
-const isDropdownItemEnabled = (
+export const isCPNDropdownItemEnabled = (
   controlPlaneNodeCount: number,
   isNonStandardControlPlaneEnabled: boolean,
   isTnaEnabled: boolean,
@@ -83,7 +83,7 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
   );
 
   const disabledReason =
-    'This option is not available with the current configurations. Make sure that OpenShift version is 4.18 or newer, CPU architecture is x86_64 and no external platform integration is selected.';
+    'This option is not available with the current configurations. Make sure that OpenShift version is 4.19 or newer and no external platform integration is selected.';
 
   const isNonStandardControlPlaneEnabled = newFeatureSupportLevelContext.isFeatureSupported(
     'NON_STANDARD_HA_CONTROL_PLANE',
@@ -105,7 +105,7 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
 
   React.useEffect(() => {
     if (!field.value) {
-      setValue(DEFAULT_VALUE);
+      setValue(DEFAULT_VALUE_CPN);
     }
   }, [field.value, setValue]);
 
@@ -116,7 +116,7 @@ const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
   };
 
   const dropdownItems = options.map(({ value, label }) => {
-    const isItemEnabled = isDropdownItemEnabled(
+    const isItemEnabled = isCPNDropdownItemEnabled(
       value,
       isNonStandardControlPlaneEnabled,
       isTnaEnabled,

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import * as React from 'react';
 import { Form } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
@@ -32,7 +33,11 @@ import { ExternalPlatformLabels } from './platformIntegration/constants';
 import { ManagedDomain, PlatformType } from '@openshift-assisted/types/assisted-installer-service';
 import { useClusterWizardContext } from '../clusterWizard/ClusterWizardContext';
 import { useFeature } from '../../hooks/use-feature';
-import ControlPlaneNodesDropdown, { ControlPlaneNodesLabel } from './ControlPlaneNodesDropdown';
+import ControlPlaneNodesDropdown, {
+  ControlPlaneNodesLabel,
+  DEFAULT_VALUE_CPN,
+  isCPNDropdownItemEnabled,
+} from './ControlPlaneNodesDropdown';
 
 export type OcmClusterDetailsFormFieldsProps = {
   forceOpenshiftVersion?: string;
@@ -115,6 +120,33 @@ export const OcmClusterDetailsFormFields = ({
     );
   }, [setFieldValue, featureSupportLevelContext, featureSupportLevelData]);
 
+  React.useEffect(() => {
+    const currentCount = values.controlPlaneCount;
+    const isNonStandardControlPlaneEnabled = featureSupportLevelContext.isFeatureSupported(
+      'NON_STANDARD_HA_CONTROL_PLANE',
+      featureSupportLevelData ?? undefined,
+    );
+    const isTnaEnabled = featureSupportLevelContext.isFeatureSupported(
+      'TNA',
+      featureSupportLevelData ?? undefined,
+    );
+
+    const isItemEnabled = isCPNDropdownItemEnabled(
+      currentCount,
+      isNonStandardControlPlaneEnabled,
+      isTnaEnabled,
+    );
+
+    if (!isItemEnabled) {
+      setFieldValue('controlPlaneCount', DEFAULT_VALUE_CPN, false);
+    }
+  }, [
+    values.openshiftVersion,
+    featureSupportLevelData,
+    featureSupportLevelContext,
+    values.controlPlaneCount,
+    setFieldValue,
+  ]);
   return (
     <Form id="wizard-cluster-details__form">
       <OcmRichInputField

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

@@ -80,7 +80,7 @@ type OperatorsPopoverProps = OperatorListProps & {
 
 const OperatorsPopover = ({ operators, children }: OperatorsPopoverProps) => {
   const { t } = useTranslation();
-  const opSpecs = useOperatorSpecs();
+  const { byKey: opSpecs } = useOperatorSpecs();
 
   return (
     <Popover

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

@@ -56,6 +56,7 @@ export const FolderDropdown = ({ name }: FolderDropdownProps) => {
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
       className="pf-v5-u-w-100"
+      id={fieldId}
     >
       {value || 'manifests'}
     </MenuToggle>

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

@@ -126,7 +126,7 @@ const OperatorCheckbox = ({
   preflightRequirements: PreflightHardwareRequirements | undefined;
 } & OperatorSpec) => {
   const { getFeatureSupportLevel, getFeatureDisabledReason } = useNewFeatureSupportLevel();
-  const opSpecs = useOperatorSpecs();
+  const { byKey: opSpecs } = useOperatorSpecs();
 
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
   const { values, setFieldValue } = useFormikContext<OperatorsValues>();

package/lib/ocm/components/clusterConfiguration/review/ReviewOperatorsTable.tsx

@@ -6,7 +6,8 @@ import { TableSummaryExpandable } from './TableSummaryExpandable';
 import { useOperatorSpecs } from '../../../../common/components/operators/operatorSpecs';
 
 export const ReviewOperatorsTable = ({ cluster }: { cluster: Cluster }) => {
-  const opSpecs = useOperatorSpecs();
+  const { byKey: opSpecs } = useOperatorSpecs();
+
   const rows = React.useMemo(
     () =>
       cluster.monitoredOperators

package/lib/ocm/components/clusterDetail/ProgressBarAlerts.tsx

@@ -66,7 +66,7 @@ export const HostInstallationWarning = ({
   message,
 }: InstallationProgressWarningProps) => {
   const { addAlert, clearAlerts } = useAlerts();
-  const opSpecs = useOperatorSpecs();
+  const { byKey: opSpecs } = useOperatorSpecs();
 
   return (
     <>

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

@@ -24,22 +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 './OperatorsBundle.css';
+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 (
@@ -81,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';
         }
       }
@@ -113,11 +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];

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

@@ -53,22 +53,16 @@ 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 />;
@@ -86,22 +80,30 @@ const OperatorsSelect = ({
       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/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@openshift-assisted/locales": "2.42.0",
-    "@openshift-assisted/types": "2.42.0",
+    "@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.42.0"
+  "version": "2.42.1"
 }