@openshift-assisted/ui-lib 2.55.1 → 2.56.0

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

@@ -1,110 +0,0 @@
-import React, { ReactNode } from 'react';
-import { WizardNav } from '@patternfly/react-core';
-import {
-  canNextClusterDetails,
-  canNextHostDiscovery,
-  canNextNetwork,
-  canNextStorage,
-  ClusterWizardStepsType,
-  isStaticIpStep,
-} from './wizardTransition';
-import { useClusterWizardContext } from './ClusterWizardContext';
-import { staticIpFormViewSubSteps, wizardStepNames } from './constants';
-import WizardNavItem from '../../../common/components/ui/WizardNavItem';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-
-const isStepValid = (stepId: ClusterWizardStepsType, cluster?: Cluster): boolean => {
-  if (!cluster) {
-    return true;
-  }
-  switch (stepId) {
-    case 'cluster-details':
-      return !cluster.validationsInfo || canNextClusterDetails({ cluster });
-    case 'static-ip-yaml-view':
-    case 'static-ip-host-configurations':
-    case 'static-ip-network-wide-configurations':
-      return canNextClusterDetails({ cluster });
-    case 'host-discovery':
-      return canNextHostDiscovery({ cluster });
-    case 'storage':
-      return canNextStorage({ cluster });
-    case 'networking':
-      return canNextNetwork({ cluster });
-    default:
-      return true;
-  }
-};
-
-const ClusterWizardNavigation = ({ cluster }: { cluster?: Cluster }) => {
-  const clusterWizardContext = useClusterWizardContext();
-
-  const isStepIdxAfterCurrent = (idx: number) => {
-    return !clusterWizardContext.wizardStepIds
-      .slice(idx)
-      .includes(clusterWizardContext.currentStepId);
-  };
-
-  const isStepDisabled = (idx: number, stepId: ClusterWizardStepsType) => {
-    return stepId === 'cluster-details' ? false : isStepIdxAfterCurrent(idx);
-  };
-
-  const getNavItem = (idx: number, stepId: ClusterWizardStepsType): ReactNode => {
-    return (
-      <WizardNavItem
-        stepIndex={idx}
-        key={stepId}
-        id={`wizard-nv-${stepId}`}
-        content={wizardStepNames[stepId]}
-        onClick={() => clusterWizardContext.setCurrentStepId(stepId)}
-        isCurrent={clusterWizardContext.currentStepId === stepId}
-        isDisabled={isStepDisabled(idx, stepId)}
-        isValid={() => isStepValid(stepId, cluster)}
-        data-testid={`cluster-wizard-nav-item-${stepId}`}
-      />
-    );
-  };
-
-  const getStaticIpFormViewNavItem = (idx: number): ReactNode => {
-    return (
-      <WizardNavItem
-        stepIndex={idx}
-        isExpandable={true}
-        content="Static network configurations"
-        key="static-network-configuration-form-view"
-        isCurrent={isStaticIpStep(clusterWizardContext.currentStepId)}
-        isDisabled={isStepIdxAfterCurrent(idx)}
-        data-testid={`cluster-wizard-nav-item-static-network-configuration-form-view`}
-      >
-        <WizardNav
-          isInnerList
-          data-testid="cluster-wizard-nav-item-static-network-configuration-form-view-inner-list"
-        >
-          {staticIpFormViewSubSteps.map((stepId, subIdx) => {
-            return getNavItem(idx + subIdx, stepId);
-          })}
-        </WizardNav>
-      </WizardNavItem>
-    );
-  };
-
-  const getWizardNavItems = (): ReactNode[] => {
-    const navItems: ReactNode[] = [];
-    let i = 0;
-    while (i < clusterWizardContext.wizardStepIds.length) {
-      const stepId = clusterWizardContext.wizardStepIds[i];
-      if (stepId !== 'static-ip-network-wide-configurations') {
-        navItems.push(getNavItem(i, stepId));
-        i += 1;
-      } else {
-        navItems.push(getStaticIpFormViewNavItem(i));
-        //skip iteration on form view sub steps
-        i += 2;
-      }
-    }
-    return navItems;
-  };
-
-  return <WizardNav data-testid="cluster-wizard-nav">{getWizardNavItems()}</WizardNav>;
-};
-
-export default ClusterWizardNavigation;

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

@@ -1,106 +0,0 @@
-import React from 'react';
-import {
-  ClustersAPI,
-  ClusterWizardStep,
-  ClusterWizardStepHeader,
-  getApiErrorMessage,
-  handleApiError,
-  KUBECONFIG_INFO_LINK,
-  useAlerts,
-  useTranslation,
-} from '../../../common';
-import { useClusterWizardContext } from './ClusterWizardContext';
-import ClusterWizardFooter from './ClusterWizardFooter';
-import ClusterWizardNavigation from './ClusterWizardNavigation';
-import { WithErrorBoundary } from '../../../common/components/ErrorHandling/WithErrorBoundary';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { Alert, AlertVariant, Checkbox, Stack } from '@patternfly/react-core';
-import { downloadFile } from '../../../common/utils';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-
-const CredentialsDownload: React.FC<{ cluster: Cluster }> = ({ cluster }) => {
-  const clusterWizardContext = useClusterWizardContext();
-  const [isChecked, setIsChecked] = React.useState<boolean>(false);
-  const [isDownloading, setIsDownloading] = React.useState(false);
-  const { addAlert, clearAlerts } = useAlerts();
-  const { t } = useTranslation();
-
-  const downloadSingleFile = async (fileName: string) => {
-    try {
-      const response = await ClustersAPI.downloadClusterCredentials(cluster.id, fileName);
-      downloadFile('', response.data, fileName);
-      return true;
-    } catch (e) {
-      handleApiError(e, (e) => {
-        addAlert({
-          title: t('ai:Could not download {{fileName}} file', { fileName }),
-          message: getApiErrorMessage(e),
-        });
-      });
-      return false;
-    }
-  };
-
-  const handleDownloadClick = async () => {
-    clearAlerts();
-    setIsDownloading(true);
-
-    const configSuccess = await downloadSingleFile('kubeconfig');
-    const passwordSuccess = await downloadSingleFile('kubeadmin-password');
-
-    const hasError = !configSuccess || !passwordSuccess;
-
-    setTimeout(() => {
-      setIsDownloading(false);
-
-      if (!hasError) {
-        clusterWizardContext.moveNext();
-      }
-    }, 500);
-  };
-
-  const footer = (
-    <ClusterWizardFooter
-      cluster={cluster}
-      onNext={() => void handleDownloadClick()}
-      onBack={() => clusterWizardContext.moveBack()}
-      isNextDisabled={!isChecked || isDownloading}
-      nextButtonText={t('ai:Download credentials')}
-      isNextButtonLoading={isDownloading}
-    />
-  );
-
-  return (
-    <ClusterWizardStep navigation={<ClusterWizardNavigation cluster={cluster} />} footer={footer}>
-      <WithErrorBoundary title={t('ai:Failed to load Credentials Download step')}>
-        <Stack hasGutter>
-          <ClusterWizardStepHeader>{t('ai:Download credentials')}</ClusterWizardStepHeader>
-          <Alert
-            title={t('ai:Make sure you download and store your credentials files in a safe place')}
-            variant={AlertVariant.warning}
-            isInline
-            actionLinks={
-              <a href={KUBECONFIG_INFO_LINK} target="_blank" rel="noopener noreferrer">
-                {t('ai:Learn more about Kubeconfig')} <ExternalLinkAltIcon />
-              </a>
-            }
-          >
-            {t(`ai:You should use your cluster's Kubeconfig file to gain access to the cluster.`)}
-            <br />
-            {t(`ai:You can use username and password to log-in to your console through the UI.`)}
-          </Alert>
-          <Checkbox
-            id="credentials-download-agreement"
-            isChecked={isChecked}
-            onChange={() => setIsChecked(!isChecked)}
-            label={t(
-              'ai:I understand that I need to download credentials files prior of proceeding with the cluster installation.',
-            )}
-          />
-        </Stack>
-      </WithErrorBoundary>
-    </ClusterWizardStep>
-  );
-};
-
-export default CredentialsDownload;

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

@@ -1,64 +0,0 @@
-import React from 'react';
-import { ClusterWizardStep, getFormikErrorFields, useAlerts } from '../../../common';
-import { useClusterWizardContext } from './ClusterWizardContext';
-import ClusterWizardFooter from './ClusterWizardFooter';
-import ClusterWizardNavigation from './ClusterWizardNavigation';
-import { WithErrorBoundary } from '../../../common/components/ErrorHandling/WithErrorBoundary';
-import { CustomManifestsPage } from '../clusterConfiguration/manifestsConfiguration/CustomManifestsPage';
-import { CustomManifestFormState } from '../clusterConfiguration/manifestsConfiguration/components/propTypes';
-import { useSelector } from 'react-redux';
-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 CustomManifestStep = ({ cluster }: { cluster: Cluster }) => {
-  const clusterWizardContext = useClusterWizardContext();
-  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
-  const { alerts } = useAlerts();
-  const [formState, setFormStateProps] = React.useState<CustomManifestFormState>(
-    getInitialFormStateProps(),
-  );
-
-  const onFormStateChange = (formState: CustomManifestFormState) => {
-    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="Custom manifests 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 Custom manifests step">
-        <CustomManifestsPage {...{ cluster, onFormStateChange }} />
-      </WithErrorBoundary>
-    </ClusterWizardStep>
-  );
-};
-
-export default CustomManifestStep;

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

@@ -1,100 +0,0 @@
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { Formik, FormikConfig, useFormikContext } from 'formik';
-import {
-  getFormikErrorFields,
-  ClusterWizardStep,
-  HostDiscoveryValues,
-  useAlerts,
-  getHostDiscoveryInitialValues,
-  useFormikAutoSave,
-} from '../../../common';
-import HostInventory from '../clusterConfiguration/HostInventory';
-import { useClusterWizardContext } from './ClusterWizardContext';
-import { canNextHostDiscovery } from './wizardTransition';
-import { getApiErrorMessage, handleApiError, isUnknownServerError } from '../../../common/api';
-import { setServerUpdateError, updateCluster } from '../../store/slices/current-cluster/slice';
-import ClusterWizardFooter from './ClusterWizardFooter';
-import ClusterWizardNavigation from './ClusterWizardNavigation';
-import { ClustersService, HostDiscoveryService } from '../../services';
-import { selectCurrentClusterPermissionsState } from '../../store/slices/current-cluster/selectors';
-import {
-  Cluster,
-  V2ClusterUpdateParams,
-} from '@openshift-assisted/types/assisted-installer-service';
-import useLateBinding from '../../hooks/useLateBinding';
-
-const HostDiscoveryForm = ({ cluster }: { cluster: Cluster }) => {
-  const { alerts } = useAlerts();
-  const { errors, touched, isSubmitting, isValid } = useFormikContext<HostDiscoveryValues>();
-  const clusterWizardContext = useClusterWizardContext();
-  const isAutoSaveRunning = useFormikAutoSave();
-  const errorFields = getFormikErrorFields(errors, touched);
-  const isBinding = useLateBinding(cluster);
-
-  const isNextDisabled =
-    !isValid ||
-    !!alerts.length ||
-    isAutoSaveRunning ||
-    isSubmitting ||
-    isBinding ||
-    !canNextHostDiscovery({ cluster });
-
-  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}>
-      <HostInventory cluster={cluster} />
-    </ClusterWizardStep>
-  );
-};
-
-const HostDiscovery = ({ cluster }: { cluster: Cluster }) => {
-  const dispatch = useDispatch();
-  const { addAlert, clearAlerts } = useAlerts();
-  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
-  const initialValues = React.useMemo(
-    () => getHostDiscoveryInitialValues(cluster),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [], // just once, Formik does not reinitialize
-  );
-
-  const onSubmit: FormikConfig<HostDiscoveryValues>['onSubmit'] = async (values) => {
-    clearAlerts();
-
-    const params: V2ClusterUpdateParams = {};
-
-    HostDiscoveryService.setSchedulableMasters(params, values, cluster);
-
-    try {
-      const { data } = await ClustersService.update(cluster.id, cluster.tags, params);
-      dispatch(updateCluster(data));
-    } catch (e) {
-      handleApiError(e, () =>
-        addAlert({ title: 'Failed to update the cluster', message: getApiErrorMessage(e) }),
-      );
-      if (isUnknownServerError(e as Error)) {
-        dispatch(setServerUpdateError());
-      }
-    }
-  };
-
-  const handleSubmit = isViewerMode ? () => Promise.resolve() : onSubmit;
-  return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      <HostDiscoveryForm cluster={cluster} />
-    </Formik>
-  );
-};
-
-export default HostDiscovery;

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

@@ -1,39 +0,0 @@
-import React from 'react';
-import { ClusterWizardStep, ClusterWizardStepHeader } from '../../../common';
-import { useClusterWizardContext } from './ClusterWizardContext';
-import ClusterWizardFooter from './ClusterWizardFooter';
-import ClusterWizardNavigation from './ClusterWizardNavigation';
-import { WithErrorBoundary } from '../../../common/components/ErrorHandling/WithErrorBoundary';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { Checkbox } from '@patternfly/react-core';
-
-const KubeconfigDownload: React.FC<{ cluster: Cluster }> = ({ cluster }) => {
-  const [isChecked, setIsChecked] = React.useState<boolean>(false);
-  const clusterWizardContext = useClusterWizardContext();
-
-  const footer = (
-    <ClusterWizardFooter
-      cluster={cluster}
-      onNext={() => clusterWizardContext.moveNext()}
-      onBack={() => clusterWizardContext.moveBack()}
-      isNextDisabled={!isChecked}
-      nextButtonText="Download Kubeconfig"
-    />
-  );
-
-  return (
-    <ClusterWizardStep navigation={<ClusterWizardNavigation cluster={cluster} />} footer={footer}>
-      <WithErrorBoundary title="Failed to load Kubeconfig Download step">
-        <ClusterWizardStepHeader>Download Kubeconfig</ClusterWizardStepHeader>
-        <Checkbox
-          id="Kubeconfig-download-agreement"
-          isChecked={isChecked}
-          onChange={() => setIsChecked(!isChecked)}
-          label="I understand that I need to download Kubeconfig file prior of proceeding with the cluster installation."
-        />
-      </WithErrorBoundary>
-    </ClusterWizardStep>
-  );
-};
-
-export default KubeconfigDownload;

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

@@ -1,37 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import ClusterDetails from './ClusterDetails';
-import { useClusterWizardContext } from './ClusterWizardContext';
-import ReviewStep from './disconnected/ReviewStep';
-import BasicStep from './disconnected/BasicStep';
-import OptionalConfigurationsStep from './disconnected/OptionalConfigurationsStep';
-import { ClusterWizardStepsType } from './wizardTransition';
-import { useInfraEnv } from '../../hooks';
-import { CpuArchitecture } from '../../../common/types';
-import { InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
-
-const getCurrentStep = (currentStepId: ClusterWizardStepsType, infraEnv?: InfraEnv) => {
-  switch (currentStepId) {
-    case 'disconnected-review':
-      return <ReviewStep />;
-    case 'disconnected-optional-configurations':
-      return <OptionalConfigurationsStep />;
-    case 'disconnected-basic':
-      return <BasicStep />;
-    default:
-      return <ClusterDetails infraEnv={infraEnv} />;
-  }
-};
-
-const NewClusterWizard: React.FC = () => {
-  const { infraEnv } = useInfraEnv('', CpuArchitecture.USE_DAY1_ARCHITECTURE);
-  const { currentStepId } = useClusterWizardContext();
-
-  return (
-    <div className={classNames('pf-v6-c-wizard', 'cluster-wizard')}>
-      {getCurrentStep(currentStepId, infraEnv)}
-    </div>
-  );
-};
-
-export default NewClusterWizard;

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

@@ -1,135 +0,0 @@
-import React, { createContext } from 'react';
-import { CpuArchitecture, OpenshiftVersionOptionType } from '../../../common';
-import { getApiErrorMessage, handleApiError } from '../../../common/api';
-import { SupportedOpenshiftVersionsAPI } from '../../services/apis';
-import { Cluster, OpenshiftVersion } from '@openshift-assisted/types/assisted-installer-service';
-import { getKeys } from '../../../common/utils';
-
-const supportedVersionLevels = ['production', 'maintenance'];
-
-type OpenShiftVersion = Cluster['openshiftVersion'];
-type OpenShiftVersionsContextType = {
-  allVersions: OpenshiftVersionOptionType[];
-  latestVersions: OpenshiftVersionOptionType[];
-  isSupportedOpenShiftVersion: (version: OpenShiftVersion) => boolean;
-  getCpuArchitectures: (version: OpenShiftVersion) => CpuArchitecture[];
-  error?: { title: string; message: string };
-  loading: boolean;
-};
-
-const OpenShiftVersionsContext = createContext<OpenShiftVersionsContextType | null>(null);
-
-export const OpenShiftVersionsContextProvider = ({ children }: { children: React.ReactNode }) => {
-  const [allVersions, setAllVersions] = React.useState<OpenshiftVersionOptionType[]>([]);
-  const [latestVersions, setLatestVersions] = React.useState<OpenshiftVersionOptionType[]>([]);
-  const [error, setError] = React.useState<{ title: string; message: string }>();
-  const [isLoading, setIsLoading] = React.useState(true);
-
-  const sortVersions = (versions: OpenshiftVersionOptionType[]) => {
-    return versions.sort((version1, version2) =>
-      version1.value.localeCompare(version2.value, undefined, { numeric: true }),
-    );
-  };
-
-  React.useEffect(() => {
-    const getVersions = async (
-      latest: boolean,
-      setVersions: (versions: OpenshiftVersionOptionType[]) => void,
-    ) => {
-      try {
-        const { data } = await SupportedOpenshiftVersionsAPI.list(latest);
-
-        const versions = getKeys(data).map((key) => {
-          const versionItem = data[key] as OpenshiftVersion;
-          const version = versionItem.displayName;
-
-          return {
-            label: `OpenShift ${version}`,
-            value: key as string,
-            version,
-            default: Boolean(versionItem.default),
-            supportLevel: versionItem.supportLevel,
-            cpuArchitectures: versionItem.cpuArchitectures as CpuArchitecture[],
-          };
-        }) as OpenshiftVersionOptionType[];
-
-        const sorted = sortVersions(versions);
-        setVersions(sorted);
-
-        if (!latest && sorted.length === 0) {
-          setError({
-            title: 'Failed to retrieve list of supported OpenShift versions.',
-            message: 'No OpenShift versions available.',
-          });
-        }
-      } catch (e) {
-        handleApiError(e, (e) => {
-          setError({
-            title: 'Failed to retrieve list of supported OpenShift versions.',
-            message: getApiErrorMessage(e),
-          });
-        });
-      }
-    };
-
-    void Promise.allSettled([
-      getVersions(false, setAllVersions),
-      getVersions(true, setLatestVersions),
-    ]).finally(() => setIsLoading(false));
-  }, []);
-
-  const findVersionItemByVersion = React.useCallback(
-    (version: OpenShiftVersion) => {
-      return allVersions?.find(({ value: versionKey }) => {
-        // For version 4.10 match 4.10, 4.10.3, not 4.1, 4.1.5
-        const versionNameMatch = new RegExp(`^${versionKey}(\\..+)?$`);
-        return versionNameMatch.test(version || '');
-      });
-    },
-    [allVersions],
-  );
-
-  const isSupportedOpenShiftVersion = React.useCallback(
-    (version: OpenShiftVersion) => {
-      if (allVersions?.length === 0) {
-        // Till the data are loaded
-        return true;
-      }
-      const selectedVersion = findVersionItemByVersion(version);
-      return supportedVersionLevels.includes(selectedVersion?.supportLevel || '');
-    },
-    [findVersionItemByVersion, allVersions],
-  );
-
-  const getCpuArchitectures = React.useCallback(
-    (version: OpenShiftVersion) => {
-      // TODO (multi-arch) confirm this is correctly retrieving the associated version
-      const matchingVersion = findVersionItemByVersion(version);
-      return matchingVersion?.cpuArchitectures ?? [];
-    },
-    [findVersionItemByVersion],
-  );
-
-  return (
-    <OpenShiftVersionsContext.Provider
-      value={{
-        allVersions,
-        latestVersions,
-        loading: !error && isLoading,
-        error,
-        isSupportedOpenShiftVersion,
-        getCpuArchitectures,
-      }}
-    >
-      {children}
-    </OpenShiftVersionsContext.Provider>
-  );
-};
-
-export const useOpenShiftVersionsContext = () => {
-  const context = React.useContext(OpenShiftVersionsContext);
-  if (!context) {
-    throw new Error('useOpenShiftVersionsContext must be used within OpenShiftVersionsContext');
-  }
-  return context;
-};