@openshift-assisted/ui-lib 2.55.0 → 2.56.0

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

@@ -1,151 +0,0 @@
-import * as React from 'react';
-import { Content, ExpandableSection, Stack, StackItem } from '@patternfly/react-core';
-import {
-  Bundle,
-  Cluster,
-  PreflightHardwareRequirements,
-} from '@openshift-assisted/types/assisted-installer-service';
-import { useFormikContext } from 'formik';
-import {
-  getApiErrorMessage,
-  handleApiError,
-  LoadingState,
-  OperatorsValues,
-  singleClusterOperators,
-  useAlerts,
-  useStateSafely,
-} from '../../../common';
-import { OperatorsService } from '../../services';
-import { useFeature } from '../../hooks/use-feature';
-import OperatorCheckbox from '../clusterConfiguration/operators/OperatorCheckbox';
-import { useOperatorSpecs } from '../../../common/components/operators/operatorSpecs';
-import { getOperatorDependencies } from '../clusterConfiguration/operators/utils';
-
-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>}
-    </>
-  );
-};
-
-export default OperatorsSelect;

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

@@ -1,110 +0,0 @@
-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 OperatorsBundle from './OperatorsBundle';
-import OperatorsSelect from './OperatorsSelect';
-import BundleService from '../../services/BundleService';
-import { useClusterPreflightRequirements } from '../../hooks';
-
-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>
-        <OperatorsBundle
-          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/clusterWizard/OptionalOperatorsDropdown.tsx

@@ -1,106 +0,0 @@
-import * as React from 'react';
-import {
-  Badge,
-  MenuToggle,
-  MenuToggleElement,
-  Select,
-  SelectList,
-  SelectOption,
-} from '@patternfly/react-core';
-import { OperatorsValues } from '../../../common';
-
-type OptionalOperatorsDropdownProps = {
-  bundleId: string;
-  optionalOperatorIds: string[];
-  selectedBundles: OperatorsValues['selectedBundles'];
-  setSelectedBundles: (selectedBundles: OperatorsValues['selectedBundles']) => void;
-  isDisabled: boolean;
-  getOperatorLabel: (operatorId: string) => string;
-};
-
-const OptionalOperatorsDropdown = ({
-  bundleId,
-  optionalOperatorIds,
-  selectedBundles,
-  setSelectedBundles,
-  isDisabled,
-  getOperatorLabel,
-}: OptionalOperatorsDropdownProps) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const toggleLabel = bundleId === 'openshift-ai' ? 'GPU operators' : 'Optional operators';
-  const selectedBundleEntry = selectedBundles.find(
-    (bundleSelection) => bundleSelection.id === bundleId,
-  );
-  const selectedOptionalOperators = selectedBundleEntry?.optionalOperators || [];
-
-  const updateBundleOptionalOperators = (operatorId: string) => {
-    if (selectedBundleEntry) {
-      const isCurrentlySelected = selectedOptionalOperators.includes(operatorId);
-      const nextOptionalOperators = isCurrentlySelected
-        ? selectedOptionalOperators.filter((optionalOperator) => optionalOperator !== operatorId)
-        : [...selectedOptionalOperators, operatorId];
-
-      const updatedBundles = selectedBundles.map((bundleSelection) =>
-        bundleSelection.id === bundleId
-          ? {
-              ...bundleSelection,
-              optionalOperators: nextOptionalOperators,
-            }
-          : bundleSelection,
-      );
-
-      setSelectedBundles(updatedBundles);
-    }
-  };
-
-  const onSelect = (
-    _event: React.MouseEvent | React.ChangeEvent | undefined,
-    value?: string | number,
-  ) => {
-    const operatorId = value as string;
-    updateBundleOptionalOperators(operatorId);
-  };
-
-  return (
-    <Select
-      role="menu"
-      isOpen={isOpen}
-      onSelect={onSelect}
-      selected={selectedOptionalOperators}
-      onOpenChange={(nextIsOpen) => setIsOpen(nextIsOpen)}
-      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-        <MenuToggle
-          ref={toggleRef}
-          onClick={() => setIsOpen((prevIsOpen) => !prevIsOpen)}
-          isExpanded={isOpen}
-          isDisabled={isDisabled}
-          style={{ minWidth: '190px' }}
-        >
-          {toggleLabel}
-          {selectedOptionalOperators.length > 0 && (
-            <>
-              {' '}
-              <Badge isRead>{selectedOptionalOperators.length}</Badge>
-            </>
-          )}
-        </MenuToggle>
-      )}
-    >
-      <SelectList>
-        {optionalOperatorIds.map((operatorId) => (
-          <SelectOption
-            id={`optional-operator-${bundleId}-${operatorId}`}
-            key={operatorId}
-            value={operatorId}
-            hasCheckbox
-            isSelected={selectedOptionalOperators.includes(operatorId)}
-          >
-            {getOperatorLabel(operatorId)}
-          </SelectOption>
-        ))}
-      </SelectList>
-    </Select>
-  );
-};
-
-export default OptionalOperatorsDropdown;

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

@@ -1,70 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import { ClusterWizardStep, getFormikErrorFields, useAlerts } from '../../../common';
-import { useClusterWizardContext } from './ClusterWizardContext';
-import ClusterWizardFooter from './ClusterWizardFooter';
-import ClusterWizardNavigation from './ClusterWizardNavigation';
-import {
-  StaticIpFormState,
-  StaticIpProps,
-} from '../clusterConfiguration/staticIp/components/propTypes';
-import { StaticIpPage } from '../clusterConfiguration/staticIp/components/StaticIpPage';
-import { WithErrorBoundary } from '../../../common/components/ErrorHandling/WithErrorBoundary';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { selectCurrentClusterPermissionsState } from '../../store/slices/current-cluster/selectors';
-
-const getInitialFormStateProps = () => {
-  return {
-    isValid: true,
-    isSubmitting: false,
-    isAutoSaveRunning: false,
-    errors: {},
-    touched: {},
-    isEmpty: true,
-  };
-};
-const StaticIp: React.FC<StaticIpProps & { cluster: Cluster }> = ({
-  cluster,
-  infraEnv,
-  updateInfraEnv,
-}) => {
-  const clusterWizardContext = useClusterWizardContext();
-  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
-  const { alerts } = useAlerts();
-  const [formState, setFormStateProps] = React.useState<StaticIpFormState>(
-    getInitialFormStateProps(),
-  );
-
-  const onFormStateChange = (formState: StaticIpFormState) => {
-    if (!isViewerMode) {
-      setFormStateProps(formState);
-    }
-  };
-
-  const isNextDisabled =
-    formState.isAutoSaveRunning || !formState.isValid || !!alerts.length || formState.isSubmitting;
-  const errorFields = getFormikErrorFields<object>(formState.errors, formState.touched);
-  const footer = (
-    <ClusterWizardFooter
-      cluster={cluster}
-      alertTitle="Static IP configuration contains missing or invalid fields"
-      alertContent={null}
-      errorFields={errorFields}
-      isSubmitting={formState.isSubmitting}
-      onNext={() => clusterWizardContext.moveNext()}
-      onBack={() => clusterWizardContext.moveBack()}
-      isNextDisabled={isNextDisabled}
-      isBackDisabled={formState.isSubmitting || formState.isAutoSaveRunning}
-    />
-  );
-
-  return (
-    <ClusterWizardStep navigation={<ClusterWizardNavigation cluster={cluster} />} footer={footer}>
-      <WithErrorBoundary title="Failed to load Static IP step">
-        <StaticIpPage {...{ infraEnv, updateInfraEnv, onFormStateChange }} />
-      </WithErrorBoundary>
-    </ClusterWizardStep>
-  );
-};
-
-export default StaticIp;

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

@@ -1,71 +0,0 @@
-import React from 'react';
-import { StackItem } from '@patternfly/react-core';
-import { Formik, FormikConfig, useFormikContext } from 'formik';
-import {
-  getFormikErrorFields,
-  FormikAutoSave,
-  ClusterWizardStep,
-  useAlerts,
-  getStorageInitialValues,
-  StorageValues,
-  useFormikAutoSave,
-  ClusterWizardStepHeader,
-} from '../../../common';
-import ClusterWizardFooter from './ClusterWizardFooter';
-import { useClusterWizardContext } from './ClusterWizardContext';
-import ClusterWizardNavigation from './ClusterWizardNavigation';
-import { canNextStorage } from './wizardTransition';
-import HostsStorageTable from '../hosts/HostsStorageTable';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-
-const StorageForm = ({ cluster }: { cluster: Cluster }) => {
-  const { alerts } = useAlerts();
-  const clusterWizardContext = useClusterWizardContext();
-  const { isSubmitting, touched, errors } = useFormikContext<StorageValues>();
-  const isAutoSaveRunning = useFormikAutoSave();
-  const errorFields = getFormikErrorFields<StorageValues>(errors, touched);
-  const isNextDisabled =
-    !canNextStorage({ cluster }) || isAutoSaveRunning || !!alerts.length || isSubmitting;
-
-  const footer = (
-    <ClusterWizardFooter
-      cluster={cluster}
-      errorFields={errorFields}
-      isSubmitting={isSubmitting}
-      isNextDisabled={isNextDisabled}
-      onNext={() => clusterWizardContext.moveNext()}
-      onBack={() => clusterWizardContext.moveBack()}
-      isBackDisabled={isSubmitting || isAutoSaveRunning}
-    />
-  );
-  return (
-    <ClusterWizardStep navigation={<ClusterWizardNavigation cluster={cluster} />} footer={footer}>
-      <StackItem>
-        <ClusterWizardStepHeader>Storage</ClusterWizardStepHeader>
-      </StackItem>
-      <StackItem>
-        <HostsStorageTable cluster={cluster} />
-      </StackItem>
-      <FormikAutoSave />
-    </ClusterWizardStep>
-  );
-};
-
-const Storage = ({ cluster }: { cluster: Cluster }) => {
-  const { clearAlerts } = useAlerts();
-  const initialValues = React.useMemo(
-    () => getStorageInitialValues(),
-    [], // just once, Formik does not reinitialize
-  );
-  const handleSubmit: FormikConfig<StorageValues>['onSubmit'] = () => {
-    clearAlerts();
-  };
-
-  return (
-    <Formik onSubmit={handleSubmit} initialValues={initialValues}>
-      <StorageForm cluster={cluster} />
-    </Formik>
-  );
-};
-
-export default Storage;