@openshift-assisted/ui-lib 2.55.1 → 2.56.0

package/lib/ocm/components/wizard/steps/operators/OperatorsSelect.test.ts

@@ -0,0 +1,169 @@
+import { describe, it, expect } from 'vitest';
+import { Bundle } from '@openshift-assisted/types/assisted-installer-service';
+import { OperatorsValues } from '../../../../../common';
+
+// Test the counting logic that was implemented in OperatorsSelect
+function calculateSelectedOperators(
+  values: OperatorsValues,
+  bundles: Bundle[],
+  opSpecs: Record<string, unknown>,
+): string[] {
+  // Calculate all selected operators (direct selections + bundle selections)
+  const bundleOperators = values.selectedBundles.flatMap(
+    (bundle) => bundles.find((b) => b.id === bundle.id)?.operators || [],
+  );
+
+  const allSelectedOperators = values.selectedOperators
+    .concat(bundleOperators)
+    .filter((op, index, array) => array.indexOf(op) === index); // Remove duplicates
+
+  return allSelectedOperators.filter((opKey) => !!opSpecs[opKey]);
+}
+
+describe('OperatorsSelect counting logic', () => {
+  const mockBundles: Bundle[] = [
+    {
+      id: 'virtualization',
+      title: 'Virtualization',
+      description: 'Virtualization bundle',
+      operators: ['cnv', 'nmstate', 'mtv'],
+    },
+    {
+      id: 'openshift-ai',
+      title: 'OpenShift AI',
+      description: 'AI bundle',
+      operators: ['nvidia-gpu', 'authorino', 'odf'],
+    },
+  ];
+
+  const mockOpSpecs = {
+    lvm: { title: 'LVM' },
+    odf: { title: 'ODF' },
+    cnv: { title: 'CNV' },
+    nmstate: { title: 'NMState' },
+    mtv: { title: 'MTV' },
+    'nvidia-gpu': { title: 'NVIDIA GPU' },
+    authorino: { title: 'Authorino' },
+  };
+
+  it('should count only manually selected operators when no bundles are selected', () => {
+    const values: OperatorsValues = {
+      selectedOperators: ['lvm', 'odf'],
+      selectedBundles: [],
+    };
+
+    const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
+
+    expect(result).toHaveLength(2);
+    expect(result).toContain('lvm');
+    expect(result).toContain('odf');
+  });
+
+  it('should count bundle operators when a bundle is selected', () => {
+    const values: OperatorsValues = {
+      selectedOperators: ['lvm'], // 1 manually selected
+      selectedBundles: [{ id: 'virtualization', optionalOperators: [] }], // bundle with 3 operators: cnv, nmstate, mtv
+    };
+
+    const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
+
+    expect(result).toHaveLength(4);
+    expect(result).toContain('lvm');
+    expect(result).toContain('cnv');
+    expect(result).toContain('nmstate');
+    expect(result).toContain('mtv');
+  });
+
+  it('should not double-count operators that are both manually selected and in a bundle', () => {
+    const values: OperatorsValues = {
+      selectedOperators: ['lvm', 'cnv'], // cnv is also in the bundle
+      selectedBundles: [{ id: 'virtualization', optionalOperators: [] }], // bundle with: cnv, nmstate, mtv
+    };
+
+    const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
+
+    expect(result).toHaveLength(4);
+    expect(result).toContain('lvm');
+    expect(result).toContain('cnv');
+    expect(result).toContain('nmstate');
+    expect(result).toContain('mtv');
+    // cnv should only appear once in the result
+    expect(result.filter((op) => op === 'cnv')).toHaveLength(1);
+  });
+
+  it('should only count operators that have valid specs', () => {
+    const values: OperatorsValues = {
+      selectedOperators: ['lvm', 'invalid-operator'], // invalid-operator not in opSpecs
+      selectedBundles: [],
+    };
+
+    const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
+
+    expect(result).toHaveLength(1);
+    expect(result).toContain('lvm');
+    expect(result).not.toContain('invalid-operator');
+  });
+
+  it('should handle multiple bundles correctly', () => {
+    const values: OperatorsValues = {
+      selectedOperators: ['lvm'],
+      selectedBundles: [
+        { id: 'virtualization', optionalOperators: [] },
+        { id: 'openshift-ai', optionalOperators: [] },
+      ], // Two bundles
+    };
+
+    const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
+
+    expect(result).toHaveLength(7); // lvm + 3 from virtualization + 3 from openshift-ai
+    expect(result).toContain('lvm');
+    expect(result).toContain('cnv');
+    expect(result).toContain('nmstate');
+    expect(result).toContain('mtv');
+    expect(result).toContain('nvidia-gpu');
+    expect(result).toContain('authorino');
+    expect(result).toContain('odf');
+  });
+
+  it('should handle overlapping operators in multiple bundles', () => {
+    const values: OperatorsValues = {
+      selectedOperators: [],
+      selectedBundles: [
+        { id: 'virtualization', optionalOperators: [] },
+        { id: 'openshift-ai', optionalOperators: [] },
+      ], // Both bundles have 'odf' (but only virtualization has it in our mock)
+    };
+
+    // Let's modify the virtualization bundle to include odf to test overlap
+    const bundlesWithOverlap: Bundle[] = [
+      {
+        id: 'virtualization',
+        title: 'Virtualization',
+        description: 'Virtualization bundle',
+        operators: ['cnv', 'nmstate', 'mtv', 'odf'], // Added odf
+      },
+      {
+        id: 'openshift-ai',
+        title: 'OpenShift AI',
+        description: 'AI bundle',
+        operators: ['nvidia-gpu', 'authorino', 'odf'], // odf is in both bundles
+      },
+    ];
+
+    const result = calculateSelectedOperators(values, bundlesWithOverlap, mockOpSpecs);
+
+    expect(result).toHaveLength(6); // cnv, nmstate, mtv, odf, nvidia-gpu, authorino (odf not double-counted)
+    expect(result.filter((op) => op === 'odf')).toHaveLength(1); // odf should only appear once
+  });
+
+  it('should handle empty selections correctly', () => {
+    const values: OperatorsValues = {
+      selectedOperators: [],
+      selectedBundles: [],
+    };
+
+    const result = calculateSelectedOperators(values, mockBundles, mockOpSpecs);
+
+    expect(result).toHaveLength(0);
+  });
+});

package/lib/ocm/components/wizard/steps/operators/OperatorsSelect.tsx

@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { useFormikContext } from 'formik';
+import { Content, ExpandableSection, Stack, StackItem } from '@patternfly/react-core';
+import {
+  Bundle,
+  Cluster,
+  PreflightHardwareRequirements,
+} from '@openshift-assisted/types/assisted-installer-service';
+import {
+  getApiErrorMessage,
+  handleApiError,
+  LoadingState,
+  OperatorsValues,
+  singleClusterOperators,
+  useAlerts,
+  useStateSafely,
+  useOperatorSpecs,
+} from '../../../../../common';
+import { OperatorsService } from '../../../../services';
+import { useFeature } from '../../../../hooks/use-feature';
+import { OperatorCheckbox } from './fields';
+import { getOperatorDependencies } from './utils';
+
+export const OperatorsSelect = ({
+  cluster,
+  bundles,
+  preflightRequirements,
+  searchTerm,
+}: {
+  cluster: Cluster;
+  bundles: Bundle[];
+  preflightRequirements: PreflightHardwareRequirements | undefined;
+  searchTerm?: string;
+}) => {
+  const [isLoading, setIsLoading] = useStateSafely(true);
+  const { addAlert } = useAlerts();
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [supportedOperators, setSupportedOperators] = useStateSafely<string[]>([]);
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  React.useEffect(() => {
+    const fetchSupportedOperators = async () => {
+      try {
+        const fetchedOperators = await OperatorsService.getSupportedOperators();
+        setSupportedOperators(fetchedOperators);
+      } catch (error) {
+        handleApiError(error, () =>
+          addAlert({ title: 'Failed to fetch operators', message: getApiErrorMessage(error) }),
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    void fetchSupportedOperators();
+  }, [addAlert, setSupportedOperators, setIsLoading]);
+
+  const { values } = useFormikContext<OperatorsValues>();
+  const { byCategory, byKey: opSpecs } = useOperatorSpecs();
+
+  const operators = React.useMemo(() => {
+    return supportedOperators.filter((op) => {
+      if (!isSingleClusterFeatureEnabled) {
+        return true;
+      }
+      return singleClusterOperators.includes(op);
+    });
+  }, [isSingleClusterFeatureEnabled, supportedOperators]);
+
+  const bundleOperators = new Set<string>();
+  values.selectedBundles.forEach((b) => {
+    b.optionalOperators?.forEach((op) => bundleOperators.add(op));
+    bundles.find(({ id }) => id === b.id)?.operators?.forEach((op) => bundleOperators.add(op));
+  });
+
+  const dependencies = new Set<string>();
+  [...values.selectedOperators, ...bundleOperators].forEach((op) =>
+    getOperatorDependencies(op, preflightRequirements, dependencies),
+  );
+
+  const checkedOperatorIds = new Set([
+    ...values.selectedOperators,
+    ...bundleOperators,
+    ...dependencies,
+  ]);
+  const operatorsCount = operators.filter((op) => checkedOperatorIds.has(op)).length;
+
+  if (isLoading) {
+    return <LoadingState />;
+  }
+  let foundAtLeastOneOperator = false;
+
+  return (
+    <>
+      <ExpandableSection
+        toggleText={`Single operators (${operatorsCount} selected)`}
+        onToggle={() => setIsExpanded(!isExpanded)}
+        isExpanded={isExpanded}
+        data-testid="single-operators-section"
+      >
+        <Stack hasGutter data-testid={'operators-form'}>
+          {Object.entries(byCategory).map(([categoryName, specs]) => {
+            let categoryOperators = specs.filter((spec) => operators.includes(spec.operatorKey));
+            // Filter by searchTerm
+            if (searchTerm?.trim()) {
+              const term = searchTerm.trim().toLowerCase();
+              categoryOperators = categoryOperators.filter((spec) => {
+                const op = opSpecs[spec.operatorKey];
+                const title = op?.title?.toLowerCase() || '';
+                const description = op?.descriptionText?.toLowerCase() || '';
+                return title.includes(term) || description.includes(term);
+              });
+            }
+            if (categoryOperators.length === 0) {
+              return null;
+            }
+            foundAtLeastOneOperator = true;
+            if (!!searchTerm?.trim() && !isExpanded) {
+              //if we found some results expand operators section
+              setIsExpanded(true);
+            }
+
+            return (
+              <React.Fragment key={categoryName}>
+                <StackItem>
+                  <Content className="pf-v6-u-font-weight-bold">{categoryName}</Content>
+                </StackItem>
+                {categoryOperators.map((spec) => (
+                  <StackItem key={spec.operatorKey}>
+                    <OperatorCheckbox
+                      bundles={bundles}
+                      operatorId={spec.operatorKey}
+                      checkedOperatorIds={checkedOperatorIds}
+                      isChecked={checkedOperatorIds.has(spec.operatorKey)}
+                      cluster={cluster}
+                      openshiftVersion={cluster.openshiftVersion}
+                      preflightRequirements={preflightRequirements}
+                      searchTerm={searchTerm}
+                      {...spec}
+                    />
+                  </StackItem>
+                ))}
+              </React.Fragment>
+            );
+          })}
+        </Stack>
+      </ExpandableSection>
+      {!foundAtLeastOneOperator && !!searchTerm?.trim() && <StackItem>No results found</StackItem>}
+    </>
+  );
+};

package/lib/ocm/components/wizard/steps/operators/OperatorsStep.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { Flex, FlexItem, SearchInput, Stack, StackItem } from '@patternfly/react-core';
+import { Bundle } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  ClusterOperatorProps,
+  ClusterWizardStepHeader,
+  getApiErrorMessage,
+  handleApiError,
+  LoadingState,
+  useAlerts,
+} from '../../../../../common';
+import { BundleService } from '../../../../services';
+import { useClusterPreflightRequirements } from '../../../../hooks';
+import { OperatorsBundles } from './OperatorsBundles';
+import { OperatorsSelect } from './OperatorsSelect';
+
+export const OperatorsStep = ({ cluster }: ClusterOperatorProps) => {
+  const { addAlert } = useAlerts();
+  const [bundlesLoading, setBundlesLoading] = React.useState(true);
+  const [bundles, setBundles] = React.useState<Bundle[]>([]);
+  const [allBundles, setAllBundles] = React.useState<Bundle[]>([]);
+  const { preflightRequirements, isLoading } = useClusterPreflightRequirements(cluster.id);
+  const [searchTerm, setSearchTerm] = React.useState('');
+
+  React.useEffect(() => {
+    const fetchBundles = async () => {
+      try {
+        const fetchedBundles = await BundleService.listBundles(
+          cluster?.openshiftVersion || '',
+          cluster?.cpuArchitecture || '',
+          cluster?.platform?.type || '',
+          cluster?.controlPlaneCount === 1 ? 'SNO' : undefined,
+        );
+        const allBundles = await BundleService.listBundles(
+          cluster?.openshiftVersion || '',
+          cluster?.cpuArchitecture || '',
+          cluster?.platform?.type || '',
+          undefined,
+        );
+        setBundles(fetchedBundles);
+        setAllBundles(allBundles);
+      } catch (error) {
+        handleApiError(error, () =>
+          addAlert({
+            title: 'Failed to fetch operator bundles',
+            message: getApiErrorMessage(error),
+          }),
+        );
+      } finally {
+        setBundlesLoading(false);
+      }
+    };
+
+    void fetchBundles();
+  }, [
+    addAlert,
+    cluster.cpuArchitecture,
+    cluster.openshiftVersion,
+    cluster.platform?.type,
+    cluster.controlPlaneCount,
+  ]);
+
+  const filteredBundles = bundles.filter(
+    (bundle) =>
+      bundle.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      bundle.description?.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  if (isLoading || bundlesLoading) {
+    return <LoadingState />;
+  }
+
+  return (
+    <Stack hasGutter data-testid={'operators-page'}>
+      <StackItem>
+        <Flex
+          justifyContent={{ default: 'justifyContentSpaceBetween' }}
+          alignItems={{ default: 'alignItemsCenter' }}
+        >
+          <FlexItem>
+            <ClusterWizardStepHeader>Operators</ClusterWizardStepHeader>
+          </FlexItem>
+          <FlexItem style={{ minWidth: '300px' }}>
+            <SearchInput
+              placeholder={'Find bundles or operators'}
+              value={searchTerm}
+              onChange={(_e, value) => setSearchTerm(value)}
+              onClear={() => setSearchTerm('')}
+            />
+          </FlexItem>
+        </Flex>
+      </StackItem>
+      <StackItem>
+        <OperatorsBundles
+          bundles={filteredBundles}
+          searchTerm={searchTerm}
+          allBundles={allBundles}
+          cluster={cluster}
+        />
+      </StackItem>
+      <StackItem>
+        <OperatorsSelect
+          bundles={bundles}
+          cluster={cluster}
+          preflightRequirements={preflightRequirements}
+          searchTerm={searchTerm}
+        />
+      </StackItem>
+    </Stack>
+  );
+};

package/lib/ocm/components/wizard/steps/operators/fields/BundleCard.tsx

@@ -0,0 +1,189 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import {
+  Alert,
+  Stack,
+  StackItem,
+  List,
+  ListItem,
+  Tooltip,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+} from '@patternfly/react-core';
+import { Bundle } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  PopoverIcon,
+  ExternalLink,
+  OperatorsValues,
+  useNewFeatureSupportLevel,
+  useOperatorSpecs,
+  highlightMatch,
+} from '../../../../../../common';
+import { useClusterWizardContext } from '../../../clusterWizardContext';
+import { OptionalOperatorsDropdown } from './OptionalOperatorsDropdown';
+import { bundleSpecs } from './bundleSpecs';
+
+import './BundleCard.css';
+
+const BundleLabel = ({ bundle, searchTerm }: { bundle: Bundle; searchTerm?: string }) => {
+  const { byKey: opSpecs } = useOperatorSpecs();
+  const bundleSpec = bundleSpecs[bundle.id || ''];
+  return (
+    <>
+      <span>{highlightMatch(bundle.title || '', searchTerm)} </span>
+      <PopoverIcon
+        component={'a'}
+        headerContent={<div>Requirements and dependencies</div>}
+        bodyContent={
+          <Stack hasGutter>
+            {bundleSpec?.Description && (
+              <StackItem>
+                <bundleSpec.Description />
+              </StackItem>
+            )}
+            {bundle.operators?.length && (
+              <>
+                <StackItem>Bundle operators:</StackItem>
+                <StackItem>
+                  <List>
+                    {bundle.operators.map((op) => (
+                      <ListItem key={op}>{opSpecs[op]?.title || op}</ListItem>
+                    ))}
+                  </List>
+                </StackItem>
+              </>
+            )}
+            {bundleSpec?.docsLink && (
+              <StackItem>
+                <ExternalLink href={bundleSpec.docsLink}>Learn more</ExternalLink>
+              </StackItem>
+            )}
+          </Stack>
+        }
+      />
+    </>
+  );
+};
+
+export const BundleCard = ({
+  bundle,
+  bundles,
+  searchTerm,
+  informationalMessage,
+}: {
+  bundle: Bundle;
+  bundles: Bundle[];
+  searchTerm?: string;
+  informationalMessage?: string;
+}) => {
+  const { values, setFieldValue } = useFormikContext<OperatorsValues>();
+  const { isFeatureSupported } = useNewFeatureSupportLevel();
+  const { byKey: opSpecs } = useOperatorSpecs();
+  const { uiSettings } = useClusterWizardContext();
+
+  const hasUnsupportedOperators = !!bundle.operators?.some((op) => {
+    const operatorSpec = opSpecs[op];
+    if (!operatorSpec) {
+      return false;
+    }
+    return !isFeatureSupported(operatorSpec.featureId);
+  });
+
+  const bundleSpec = bundleSpecs[bundle.id || ''];
+
+  const incompatibleBundle = bundleSpec?.incompatibleBundles?.find((b) =>
+    values.selectedBundles.some((bundleSelection) => bundleSelection.id === b),
+  );
+  const isAssistedMigration = uiSettings?.isAssistedMigration;
+  const disabledReason = hasUnsupportedOperators
+    ? 'Some operators in this bundle are not supported with the current configuration.'
+    : incompatibleBundle
+    ? `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'
+    : !bundles.some((b) => b.id === bundle.id)
+    ? 'This bundle is not available for the current configuration, you might be able to use the standalone operators instead.'
+    : undefined;
+
+  const addBundle = (
+    selectedBundles: OperatorsValues['selectedBundles'],
+    bundle: Bundle,
+  ): OperatorsValues['selectedBundles'] => [
+    ...selectedBundles,
+    { id: bundle.id || '', optionalOperators: bundle.optionalOperators || [] },
+  ];
+
+  const removeBundle = (
+    selectedBundles: OperatorsValues['selectedBundles'],
+    bundleId: Bundle['id'],
+  ): OperatorsValues['selectedBundles'] =>
+    selectedBundles.filter((selectedBundle) => selectedBundle.id !== bundleId);
+
+  const onSelect = (checked: boolean) => {
+    const nextBundles = checked
+      ? addBundle(values.selectedBundles, bundle)
+      : removeBundle(values.selectedBundles, bundle.id);
+    setFieldValue('selectedBundles', nextBundles);
+  };
+
+  const isSelected = values.selectedBundles.some(
+    (selectedBundle) => selectedBundle.id === bundle.id,
+  );
+  const checkboxId = `bundle-${bundle.id || ''}`;
+  return (
+    <Tooltip content={disabledReason} hidden={!disabledReason}>
+      <Card
+        isDisabled={!!disabledReason}
+        isFullHeight
+        isClickable
+        isSelectable
+        isSelected={isSelected}
+        className="ai-bundle-card"
+      >
+        <CardHeader
+          selectableActions={{
+            selectableActionId: checkboxId,
+            selectableActionAriaLabelledby: checkboxId,
+            name: checkboxId,
+            onChange: (_, checked) => onSelect(!!checked),
+            isChecked: isSelected,
+          }}
+        >
+          <CardTitle>
+            <BundleLabel bundle={bundle} searchTerm={searchTerm} />
+          </CardTitle>
+        </CardHeader>
+        <CardBody isFilled>
+          <Stack hasGutter>
+            <StackItem isFilled>
+              <div>{highlightMatch(bundle.description || '', searchTerm)}</div>
+            </StackItem>
+            {!!bundle.optionalOperators?.length && (
+              <StackItem onClick={(e) => e.stopPropagation()}>
+                <OptionalOperatorsDropdown
+                  bundleId={bundle.id || ''}
+                  optionalOperatorIds={bundle.optionalOperators}
+                  selectedBundles={values.selectedBundles}
+                  setSelectedBundles={(selectedBundles) =>
+                    setFieldValue('selectedBundles', selectedBundles)
+                  }
+                  isDisabled={!isSelected || !!disabledReason}
+                  getOperatorLabel={(operatorId) => opSpecs[operatorId]?.title || operatorId}
+                />
+              </StackItem>
+            )}
+            {informationalMessage && (
+              <StackItem>
+                <Alert isInline variant="info" title={informationalMessage} />
+              </StackItem>
+            )}
+          </Stack>
+        </CardBody>
+      </Card>
+    </Tooltip>
+  );
+};