@openshift-assisted/ui-lib 2.14.7-cim → 2.15.1-cim

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

@@ -0,0 +1,244 @@
+import * as React from 'react';
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  CardTitle,
+  Gallery,
+  GalleryItem,
+  List,
+  ListItem,
+  Split,
+  SplitItem,
+  Stack,
+  StackItem,
+  Title,
+  Tooltip,
+} from '@patternfly/react-core';
+import {
+  Bundle,
+  PreflightHardwareRequirements,
+} from '@openshift-assisted/types/assisted-installer-service';
+import NewFeatureSupportLevelBadge, {
+  NewSupportLevelBadgeProps,
+} from '../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { ExternalLink, OperatorsValues, PopoverIcon, singleClusterBundles } from '../../../common';
+import { useFormikContext } from 'formik';
+import {
+  GetFeatureSupportLevel,
+  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';
+
+const BundleLabel = ({ bundle }: { bundle: Bundle }) => {
+  const opSpecs = useOperatorSpecs();
+  const bundleSpec = bundleSpecs[bundle.id || ''];
+
+  return (
+    <>
+      <span>{bundle.title} </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>
+        }
+      />
+    </>
+  );
+};
+
+const getBundleSupportLevel = (
+  bundle: Bundle,
+  opSpecs: ReturnType<typeof useOperatorSpecs>,
+  getFeatureSupportLevel: GetFeatureSupportLevel,
+): NewSupportLevelBadgeProps['supportLevel'] => {
+  let supportLevel: NewSupportLevelBadgeProps['supportLevel'] = undefined;
+  if (bundle.operators) {
+    for (const op of bundle.operators) {
+      const operatorSpec = opSpecs[op];
+      if (operatorSpec) {
+        const opSupportLevel = getFeatureSupportLevel(operatorSpec.featureId);
+        if (opSupportLevel === 'dev-preview') {
+          supportLevel = 'dev-preview';
+          break;
+        } else if (opSupportLevel === 'tech-preview') {
+          supportLevel = 'tech-preview';
+        }
+      }
+    }
+  }
+  return supportLevel;
+};
+
+const BundleCard = ({
+  bundle,
+  bundles,
+  preflightRequirements,
+}: {
+  bundle: Bundle;
+  bundles: Bundle[];
+  preflightRequirements: PreflightHardwareRequirements | undefined;
+}) => {
+  const { values, setFieldValue } = useFormikContext<OperatorsValues>();
+  const isSNO = useSelector(selectIsCurrentClusterSNO);
+  const { isFeatureSupported, getFeatureSupportLevel } = useNewFeatureSupportLevel();
+  const opSpecs = useOperatorSpecs();
+
+  const supportLevel = getBundleSupportLevel(bundle, opSpecs, getFeatureSupportLevel);
+
+  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.includes(b),
+  );
+
+  const disabledReason = hasUnsupportedOperators
+    ? 'Some operators in this bundle are not supported with the current configuration.'
+    : isSNO && bundleSpec?.noSNO
+    ? 'This bundle is not available when deploying a Single Node OpenShift.'
+    : incompatibleBundle
+    ? `Bundle cannot be installed together with ${
+        bundles.find(({ id }) => id === incompatibleBundle)?.title || incompatibleBundle
+      }`
+    : undefined;
+
+  const onSelect = (checked: boolean) => {
+    const newBundles = checked
+      ? [...values.selectedBundles, bundle.id || '']
+      : values.selectedBundles.filter((sb) => sb !== bundle.id);
+    setFieldValue('selectedBundles', newBundles);
+    const newOperators = getNewBundleOperators(
+      values.selectedOperators,
+      newBundles,
+      bundles,
+      bundle,
+      preflightRequirements,
+      checked,
+    );
+    setFieldValue('selectedOperators', newOperators);
+  };
+
+  const isSelected = values.selectedBundles.includes(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} />
+          </CardTitle>
+        </CardHeader>
+        <CardBody isFilled>
+          <Stack hasGutter>
+            <StackItem isFilled>
+              <div>{bundle.description}</div>
+            </StackItem>
+            <StackItem>
+              <Split>
+                <SplitItem isFilled />
+                <SplitItem>
+                  <NewFeatureSupportLevelBadge
+                    featureId={bundle.id || ''}
+                    supportLevel={supportLevel}
+                  />
+                </SplitItem>
+              </Split>
+            </StackItem>
+          </Stack>
+        </CardBody>
+      </Card>
+    </Tooltip>
+  );
+};
+
+const OperatorsBundle = ({
+  bundles,
+  preflightRequirements,
+}: {
+  bundles: Bundle[];
+  preflightRequirements: PreflightHardwareRequirements | undefined;
+}) => {
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <Title headingLevel="h2" size="lg">
+          Bundles
+        </Title>
+      </StackItem>
+      <StackItem>
+        <Gallery hasGutter minWidths={{ default: '350px' }}>
+          {(isSingleClusterFeatureEnabled
+            ? bundles.filter((b) => b.id && singleClusterBundles.includes(b.id))
+            : bundles
+          ).map((bundle) => (
+            <GalleryItem key={bundle.id}>
+              <BundleCard
+                bundle={bundle}
+                bundles={bundles}
+                preflightRequirements={preflightRequirements}
+              />
+            </GalleryItem>
+          ))}
+        </Gallery>
+      </StackItem>
+    </Stack>
+  );
+};
+
+export default OperatorsBundle;

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

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { 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';
+
+const OperatorsSelect = ({
+  cluster,
+  bundles,
+  preflightRequirements,
+}: {
+  cluster: Cluster;
+  bundles: Bundle[];
+  preflightRequirements: PreflightHardwareRequirements | undefined;
+}) => {
+  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');
+  const { values } = useFormikContext<OperatorsValues>();
+
+  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 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]);
+
+  if (isLoading) {
+    return <LoadingState />;
+  }
+
+  return (
+    <ExpandableSection
+      toggleText={`Single Operators (${operators.length} | ${values.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]) {
+            return null;
+          }
+
+          return (
+            <StackItem key={operatorKey}>
+              <OperatorCheckbox
+                bundles={bundles}
+                operatorId={operatorKey}
+                cluster={cluster}
+                openshiftVersion={cluster.openshiftVersion}
+                preflightRequirements={preflightRequirements}
+                {...opSpecs[operatorKey]}
+              />
+            </StackItem>
+          );
+        })}
+      </Stack>
+    </ExpandableSection>
+  );
+};
+
+export default OperatorsSelect;

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

@@ -1,51 +1,63 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { Stack, StackItem } from '@patternfly/react-core';
-import { ClusterOperatorProps, ClusterWizardStepHeader } from '../../../common';
-import CnvCheckbox from '../clusterConfiguration/operators/CnvCheckbox';
-import OdfCheckbox from '../clusterConfiguration/operators/OdfCheckbox';
-import LvmCheckbox from '../clusterConfiguration/operators/LvmCheckbox';
-import MceCheckbox from '../clusterConfiguration/operators/MceCheckbox';
-import { selectIsCurrentClusterSNO } from '../../store/slices/current-cluster/selectors';
-import { isOCPVersionEqualsOrMajor } from '../utils';
-import MtvOperatorCheckbox from '../clusterConfiguration/operators/MtvOperatorCheckbox';
-import OpenShiftAICheckbox from '../clusterConfiguration/operators/OpenShiftAICheckbox';
+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 { preflightRequirements, isLoading } = useClusterPreflightRequirements(cluster.id);
+  React.useEffect(() => {
+    const fetchBundles = async () => {
+      try {
+        const fetchedBundles = await BundleService.listBundles();
+        setBundles(fetchedBundles);
+      } catch (error) {
+        handleApiError(error, () =>
+          addAlert({
+            title: 'Failed to fetch operator bundles',
+            message: getApiErrorMessage(error),
+          }),
+        );
+      } finally {
+        setBundlesLoading(false);
+      }
+    };
+
+    void fetchBundles();
+  }, [addAlert]);
+
+  if (isLoading || bundlesLoading) {
+    return <LoadingState />;
+  }
 
-export const OperatorsStep = (props: ClusterOperatorProps) => {
-  const isSNO = useSelector(selectIsCurrentClusterSNO);
-  const isVersionEqualsOrMajorThan4_15 = isOCPVersionEqualsOrMajor(
-    props.openshiftVersion || '',
-    '4.15',
-  );
   return (
-    <Stack hasGutter data-testid={'operators-form'}>
+    <Stack hasGutter data-testid={'operators-page'}>
       <StackItem>
         <ClusterWizardStepHeader>Operators</ClusterWizardStepHeader>
       </StackItem>
       <StackItem>
-        <CnvCheckbox {...props} isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15} />
+        <OperatorsBundle bundles={bundles} preflightRequirements={preflightRequirements} />
       </StackItem>
       <StackItem>
-        <MceCheckbox
-          clusterId={props.clusterId}
-          isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15}
-          openshiftVersion={props.openshiftVersion}
+        <OperatorsSelect
+          bundles={bundles}
+          cluster={cluster}
+          preflightRequirements={preflightRequirements}
         />
       </StackItem>
-      {isVersionEqualsOrMajorThan4_15 ? (
-        <>
-          <StackItem>
-            <LvmCheckbox {...props} />
-          </StackItem>
-          <StackItem>
-            <OdfCheckbox />
-          </StackItem>
-        </>
-      ) : (
-        <StackItem>{isSNO ? <LvmCheckbox {...props} /> : <OdfCheckbox />}</StackItem>
-      )}
-      <MtvOperatorCheckbox clusterId={props.clusterId} />
-      <OpenShiftAICheckbox />
     </Stack>
   );
 };

package/lib/ocm/components/clusterWizard/_wizardTransition.test.ts

@@ -82,11 +82,21 @@ const validationInfoHostsDisovery: ValidationsInfo = {
       message: 'a validation message',
       status: 'success',
     },
+    {
+      id: 'osc-requirements-satisfied',
+      message: 'a validation message',
+      status: 'success',
+    },
     {
       id: 'api-vips-defined',
       message: 'a validation unrelated to the canNextHostDiscovery',
       status: 'error',
     },
+    {
+      id: 'amd-gpu-requirements-satisfied',
+      message: 'a validation message',
+      status: 'success',
+    },
   ],
 };
 
@@ -190,6 +200,21 @@ const flatValidationHostsDiscovery: HostValidation[] = [
     message: 'a host validation message',
     status: 'success',
   },
+  {
+    id: 'osc-requirements-satisfied',
+    message: 'a host validation message',
+    status: 'success',
+  },
+  {
+    id: 'mtu-valid',
+    message: 'a host validation message',
+    status: 'success',
+  },
+  {
+    id: 'amd-gpu-requirements-satisfied',
+    message: 'a host validation message',
+    status: 'success',
+  },
 ];
 
 const flatValidationHostsStorage: HostValidation[] = [

package/lib/ocm/components/clusterWizard/constants.ts

@@ -11,6 +11,7 @@ export const wizardStepNames: { [key in ClusterWizardStepsType]: string } = {
   networking: 'Networking',
   'custom-manifests': 'Custom manifests',
   review: 'Review and create',
+  'credentials-download': 'Download credentials',
 };
 
 export const defaultWizardSteps: ClusterWizardStepsType[] = [

package/lib/ocm/components/clusterWizard/index.ts

@@ -1,4 +1,5 @@
 export { default as ClusterDetailsForm } from './ClusterDetailsForm';
 export { default as NewClusterWizard } from './NewClusterWizard';
+export { default as ClusterWizard } from './ClusterWizard';
 export { default as ClusterWizardContextProvider } from './ClusterWizardContextProvider';
 export { OpenShiftVersionsContextProvider } from './OpenShiftVersionsContext';

package/lib/ocm/components/clusterWizard/wizardTransition.ts

@@ -28,7 +28,8 @@ export type ClusterWizardStepsType =
   | 'storage'
   | 'networking'
   | 'review'
-  | 'custom-manifests';
+  | 'custom-manifests'
+  | 'credentials-download';
 
 const wizardStepsOrder: ClusterWizardStepsType[] = [
   'cluster-details',
@@ -40,6 +41,7 @@ const wizardStepsOrder: ClusterWizardStepsType[] = [
   'storage',
   'networking',
   'custom-manifests',
+  'credentials-download',
   'review',
 ];
 
@@ -71,14 +73,10 @@ export const getClusterWizardFirstStep = (
   staticIpInfo: StaticIpInfo | undefined,
   state?: ClusterWizardFlowStateType,
   hosts?: Host[] | undefined,
-  isSingleClusterFeatureEnabled?: boolean,
   customManifestsStepNeedsToBeFilled?: boolean,
 ): ClusterWizardStepsType => {
   // Just for the first time when the cluster is created
   if (locationState === ClusterWizardFlowStateNew && !staticIpInfo) {
-    if (isSingleClusterFeatureEnabled) {
-      return 'host-discovery';
-    }
     return 'operators';
   }
 
@@ -173,6 +171,8 @@ const hostDiscoveryStepValidationsMap: WizardStepValidationMap = {
       'cnv-requirements-satisfied',
       'nvidia-gpu-requirements-satisfied',
       'openshift-ai-requirements-satisfied',
+      'osc-requirements-satisfied',
+      'amd-gpu-requirements-satisfied',
     ],
   },
   host: {
@@ -187,9 +187,11 @@ const hostDiscoveryStepValidationsMap: WizardStepValidationMap = {
       'cnv-requirements-satisfied',
       'nvidia-gpu-requirements-satisfied',
       'openshift-ai-requirements-satisfied',
+      'osc-requirements-satisfied',
+      'amd-gpu-requirements-satisfied',
     ],
   },
-  softValidationIds: ['no-skip-installation-disk', 'no-skip-missing-disk'],
+  softValidationIds: ['no-skip-installation-disk', 'no-skip-missing-disk', 'compatible-agent'],
 };
 
 const storageStepValidationsMap: WizardStepValidationMap = {
@@ -225,7 +227,7 @@ const networkingStepValidationsMap: WizardStepValidationMap = {
   // Alternatively we would have to whitelist network validations instead of using group
   // TODO(mlibra): remove that container-images-available from soft validations and let backend drive it via disabling it.
   //   Depends on: https://issues.redhat.com/browse/MGMT-5265
-  softValidationIds: ['ntp-synced', 'container-images-available'],
+  softValidationIds: ['ntp-synced', 'container-images-available', 'mtu-valid'],
 };
 
 const reviewStepValidationsMap: WizardStepValidationMap = {
@@ -241,6 +243,8 @@ const reviewStepValidationsMap: WizardStepValidationMap = {
   softValidationIds: [],
 };
 
+const credentialsValidationMap = buildEmptyValidationsMap();
+
 const customManifestsValidationsMap = buildEmptyValidationsMap();
 
 export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardStepsType> = {
@@ -254,6 +258,7 @@ export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardSt
   storage: storageStepValidationsMap,
   networking: networkingStepValidationsMap,
   review: reviewStepValidationsMap,
+  'credentials-download': credentialsValidationMap,
 };
 
 export const allClusterWizardSoftValidationIds =

package/lib/ocm/components/clusters/ClusterPage.tsx

@@ -38,13 +38,12 @@ import { OpenShiftVersionsContextProvider } from '../clusterWizard/OpenShiftVers
 const ClusterPageGeneric = ({
   clusterId,
   showBreadcrumbs = false,
+  resetModal,
 }: {
   clusterId: string;
   showBreadcrumbs?: boolean;
+  resetModal?: React.ReactNode;
 }) => {
-  if (!clusterId) {
-    // console.error('ClusterPageGeneric: missing clusterId');
-  }
   const fetchCluster = useFetchCluster(clusterId);
   const dispatch = useDispatch();
   const { cluster, uiState, errorDetail } = useClusterPolling(clusterId);
@@ -178,14 +177,12 @@ const ClusterPageGeneric = ({
                     openshiftVersion={cluster.openshiftVersion}
                     platformType={cluster.platform?.type}
                   >
-                    {/* TODO(mlibra): Will be reworked within https://issues.redhat.com/browse/AGENT-522
-                    <RebootNodeZeroModal cluster={cluster} />
-                    */}
                     {getContent(cluster, infraEnv)}
                     {uiState === ResourceUIState.POLLING_ERROR && <ClusterPollingErrorModal />}
                     {uiState === ResourceUIState.UPDATE_ERROR && <ClusterUpdateErrorModal />}
                     <CancelInstallationModal />
                     <ResetClusterModal />
+                    {resetModal}
                     <DiscoveryImageModal />
                   </NewFeatureSupportLevelProvider>
                 </OpenShiftVersionsContextProvider>
@@ -200,9 +197,15 @@ const ClusterPageGeneric = ({
   return <Navigate to="/clusters" />;
 };
 
-export const SingleClusterPage = ({ clusterId }: { clusterId: string }) => (
+export const SingleClusterPage = ({
+  clusterId,
+  resetModal,
+}: {
+  clusterId: string;
+  resetModal: React.ReactNode;
+}) => (
   <AlertsContextProvider>
-    <ClusterPageGeneric clusterId={clusterId} />
+    <ClusterPageGeneric clusterId={clusterId} resetModal={resetModal} />
   </AlertsContextProvider>
 );