@openshift-assisted/ui-lib 2.55.2 → 2.56.1

package/lib/ocm/components/HostsClusterDetailTab/HostsClusterDetailTabMock.tsx

@@ -1,97 +0,0 @@
-import React from 'react';
-import {
-  ButtonVariant,
-  EmptyState,
-  EmptyStateBody,
-  Grid,
-  PageSection,
-} from '@patternfly/react-core';
-import {
-  OcmCpuArchitecture,
-  STANDALONE_DEPLOYMENT_ENABLED_FEATURES,
-  ToolbarButton,
-} from '../../../common';
-import { OcmClusterType } from '../AddHosts';
-import HostsClusterDetailTab from './HostsClusterDetailTab';
-import clustersAPI from '../../../common/api/assisted-service/ClustersAPI';
-import { OpenShiftVersionsContextProvider } from '../clusterWizard/OpenShiftVersionsContext';
-
-const clusterWithoutMetrics = {
-  id: 'ocm-cluster-id',
-  external_id: 'day2flow-day1-ai-cluster-id',
-  openshift_version: '4.12',
-  cpu_architecture: OcmCpuArchitecture.x86,
-  name: 'day2-flow',
-} as unknown as OcmClusterType;
-
-const clusterWithMetrics = {
-  ...clusterWithoutMetrics,
-  metrics: { nodes: { total: 3 } },
-  api: { url: 'https://console-openshift-console.apps.day2-flow.redhat.com' },
-};
-
-const getCluster = (type: string) => {
-  switch (type) {
-    case 'no-metrics':
-      return clusterWithoutMetrics;
-    case 'with-metrics':
-    default:
-      return clusterWithMetrics;
-  }
-};
-
-export const HostsClusterDetailTabMock = () => {
-  const [tabShown, setTabShown] = React.useState<string>('');
-  const [isMocked, setIsMocked] = React.useState<boolean>(false);
-
-  React.useEffect(() => {
-    const checkMockedClusterLoads = async () => {
-      try {
-        await clustersAPI.get('day2flow-day1-ai-cluster-id');
-        setIsMocked(true);
-      } catch (e) {
-        setIsMocked(false);
-      }
-    };
-    void checkMockedClusterLoads();
-  }, []);
-
-  const onAddHosts = (whichCase: string) => {
-    if (!tabShown) {
-      setTabShown(whichCase);
-    }
-  };
-
-  if (!isMocked) {
-    return (
-      <PageSection hasBodyWrapper={false} isFilled>
-        <EmptyState headingLevel="h4" titleText="Mocked environment not detected">
-          <EmptyStateBody>You can only use this page on a mocked environment</EmptyStateBody>
-        </EmptyState>
-      </PageSection>
-    );
-  }
-
-  return (
-    <PageSection hasBodyWrapper={false} isFilled>
-      {tabShown ? (
-        <OpenShiftVersionsContextProvider>
-          <HostsClusterDetailTab
-            cluster={getCluster(tabShown)}
-            allEnabledFeatures={STANDALONE_DEPLOYMENT_ENABLED_FEATURES}
-            isVisible
-          />
-        </OpenShiftVersionsContextProvider>
-      ) : (
-        <Grid hasGutter>
-          <ToolbarButton variant={ButtonVariant.primary} onClick={() => onAddHosts('no-metrics')}>
-            Add hosts (No metrics)
-          </ToolbarButton>
-          <ToolbarButton variant={ButtonVariant.primary} onClick={() => onAddHosts('with-metrics')}>
-            Add hosts (With metrics)
-          </ToolbarButton>
-        </Grid>
-      )}
-    </PageSection>
-  );
-};

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

@@ -1,4 +0,0 @@
-export * from './utils';
-// Export used by OCM
-export { default as HostsClusterDetailTab } from './HostsClusterDetailTab';
-export { HostsClusterDetailTabMock } from './HostsClusterDetailTabMock';

package/lib/ocm/components/HostsClusterDetailTab/types.ts

@@ -1,14 +0,0 @@
-import { FeatureListType } from '../../../common';
-import { OcmClusterType } from '../AddHosts/types';
-
-export type HostsClusterDetailTabProps = {
-  cluster: OcmClusterType;
-  isVisible: boolean;
-  allEnabledFeatures: FeatureListType;
-};
-
-export interface AddHostsTabState {
-  showTab: boolean;
-  isDisabled: boolean;
-  tabTooltip: string;
-}

package/lib/ocm/components/HostsClusterDetailTab/utils.ts

@@ -1,81 +0,0 @@
-import { OcmClusterType } from '../AddHosts/types';
-import { getFeatureSupported } from '../featureSupportLevels/FeatureSupportLevelProvider';
-import { AddHostsTabState } from './types';
-
-const isSNOExpansionAllowed = (cluster: OcmClusterType) => {
-  if (cluster.aiSupportLevels) {
-    return getFeatureSupported(cluster.aiSupportLevels.features || [], 'SINGLE_NODE_EXPANSION');
-  } else {
-    return false;
-  }
-};
-
-const makeState = (
-  state: 'hidden' | 'visible' | 'disabled',
-  tooltipMessage = '',
-): AddHostsTabState => {
-  switch (state) {
-    case 'hidden':
-      return {
-        showTab: false,
-        isDisabled: false,
-        tabTooltip: '',
-      };
-    case 'visible':
-      return {
-        showTab: true,
-        isDisabled: false,
-        tabTooltip: tooltipMessage,
-      };
-    case 'disabled':
-      return {
-        showTab: true,
-        isDisabled: true,
-        tabTooltip: tooltipMessage,
-      };
-  }
-};
-
-export const getAddHostsTabState = (cluster: OcmClusterType): AddHostsTabState => {
-  // Prioritize aiCluster.status over cluster.state to prevent inconsistencies
-  // where metrics might show the cluster as ready while installation is still in progress
-  const isClusterStateReady = cluster.aiCluster?.status
-    ? /ready|installed/.test(cluster.aiCluster.status)
-    : /ready|installed/.test(cluster.state);
-  const wasInstalledUsingAssistedInstaller = cluster.product?.id === 'OCP-AssistedInstall';
-  // Checking if the Day1 cluster has reported metrics, so it can be determined if it's an SNO / multi node and has required information
-  const day1ClusterHostCount = cluster.metrics?.nodes?.total || 0;
-
-  // Disable Add Hosts with the following priority:
-  // 1) Cluster is not ready
-  // 2) Cluster was not installed using Assisted Installer
-  // 3) Cluster has no metrics
-  if (!isClusterStateReady) {
-    return makeState(
-      'disabled',
-      'Cluster is not ready. Please wait for the cluster to be ready and try again.',
-    );
-  } else if (!wasInstalledUsingAssistedInstaller) {
-    return makeState(
-      'disabled',
-      'Hosts cannot be added to an existing cluster that was not installed using Assisted Installer. Install a new cluster and try again.',
-    );
-  } else if (!cluster.metrics) {
-    return makeState(
-      'disabled',
-      'Cluster has no metrics. Please wait for the cluster to have metrics and try again.',
-    );
-  }
-
-  // At this point the cluster is ready, installed using Assisted Installer, and has metrics
-  let tabState = makeState('visible');
-  if (day1ClusterHostCount === 1 && !isSNOExpansionAllowed(cluster)) {
-    // The cluster has metrics etc., but it's an SNO with an OpenshiftVersion that doesn't support Day2 flow
-    tabState = makeState(
-      'disabled',
-      'OpenShift version not supported for SNO expansion. Hosts cannot be added to an existing SNO cluster that was installed with any OpenShift version older than 4.11. Upgrade to a newer OpenShift version and try again.',
-    );
-  }
-
-  return tabState;
-};

package/lib/ocm/components/Routes.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import { Provider } from 'react-redux';
-import {
-  Routes,
-  Route,
-  Navigate,
-  Outlet,
-  unstable_HistoryRouter as HistoryRouter,
-  HistoryRouterProps,
-} from 'react-router';
-import { Clusters, ClusterPage, NewClusterPage } from './clusters';
-import type { FeatureListType } from '../../common/features/featureGate';
-import { AssistedUILibVersion } from './ui';
-import { storeDay1 } from '../store';
-import { useFeatureDetection } from '../hooks/use-feature-detection';
-import './Routes.css';
-
-type UILibRoutesProps = {
-  allEnabledFeatures: FeatureListType;
-  children?: React.ReactNode;
-  history?: HistoryRouterProps['history'];
-  basename?: string;
-};
-
-export const UILibRoutes = ({
-  allEnabledFeatures,
-  children,
-  history,
-  basename,
-}: UILibRoutesProps) => {
-  useFeatureDetection(allEnabledFeatures);
-
-  const routes = (
-    <>
-      <Routes>
-        <Route path="assisted-installer/clusters" element={<Outlet />}>
-          <Route path="~new" element={<NewClusterPage />} />
-          <Route path=":clusterId" element={<ClusterPage />} />
-          <Route index element={<Clusters />} />
-        </Route>
-        {children}
-        <Route path="*" element={<Navigate to="/assisted-installer/clusters" />} />
-      </Routes>
-    </>
-  );
-
-  return (
-    <Provider store={storeDay1}>
-      <AssistedUILibVersion />
-      {history ? (
-        <HistoryRouter history={history} basename={basename || '/'}>
-          {routes}
-        </HistoryRouter>
-      ) : (
-        routes
-      )}
-    </Provider>
-  );
-};

package/lib/ocm/components/SentryErrorMonitorContextProvider.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import {
-  ErrorMonitorContextProvider,
-  ErrorSeverity,
-  ExceptionReporter,
-} from '../../common/components/ErrorHandling/ErrorMonitorContext';
-import { handleApiError } from '../../common/api';
-import { isApiError } from '../../common/api/utils';
-import { captureException } from '../sentry';
-
-export const SentryErrorMonitorContextProvider: React.FC<React.PropsWithChildren> = ({
-  children,
-}) => {
-  const exceptionReporter: ExceptionReporter = (
-    error: unknown,
-    message?: string,
-    severity?: ErrorSeverity,
-  ) => {
-    if (isApiError(error)) {
-      handleApiError(error);
-    } else {
-      captureException(error, message, severity);
-    }
-  };
-  return (
-    <ErrorMonitorContextProvider {...{ exceptionReporter }}>{children}</ErrorMonitorContextProvider>
-  );
-};

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

@@ -1,92 +0,0 @@
-import pick from 'lodash-es/pick.js';
-import React, { PropsWithChildren, useContext, useEffect } from 'react';
-import { ClusterDefaultConfig } from '@openshift-assisted/types/assisted-installer-service';
-import { ClustersAPI } from '../../services/apis';
-
-type State<T> = { status: 'idle' | 'loading' | 'succeeded' | 'failed'; data: T };
-type Actions<T> = { type: 'request' } | { type: 'failure' | 'success'; data: T };
-
-const reducer: React.Reducer<State<ClusterDefaultConfig>, Actions<ClusterDefaultConfig>> = (
-  state,
-  action,
-) => {
-  let newState: State<ClusterDefaultConfig>;
-  switch (action.type) {
-    case 'request':
-      newState = { status: 'loading', data: {} };
-      break;
-    case 'success':
-      newState = { status: 'succeeded', data: action.data };
-      break;
-    case 'failure':
-      newState = { status: 'failed', data: action.data };
-      break;
-    default:
-      newState = state;
-      break;
-  }
-
-  return newState;
-};
-
-export const ClusterDefaultConfigurationContext = React.createContext<ClusterDefaultConfig>({});
-
-export const ClusterDefaultConfigurationProvider = ({
-  children,
-  errorUI,
-  loadingUI,
-}: PropsWithChildren<{ errorUI: React.ReactNode; loadingUI: React.ReactNode }>) => {
-  const [state, dispatch] = React.useReducer(reducer, { status: 'idle', data: {} });
-
-  useEffect(() => {
-    let mounted = true;
-    const fetchAndSetDefaultConfiguration = async () => {
-      try {
-        if (mounted) dispatch({ type: 'request' });
-        const { data } = await ClustersAPI.getDefaultConfig();
-        if (mounted) dispatch({ type: 'success', data });
-      } catch {
-        if (mounted) dispatch({ type: 'failure', data: {} });
-      }
-    };
-    void fetchAndSetDefaultConfiguration();
-
-    return () => {
-      mounted = false;
-    };
-  }, []);
-
-  const render = (state: State<ClusterDefaultConfig>) => {
-    let result: {
-      ui: React.ReactNode;
-      value: ClusterDefaultConfig;
-    } = { ui: loadingUI, value: state.data };
-
-    switch (state.status) {
-      case 'idle':
-      case 'loading':
-        break;
-      case 'failed':
-        result = { ...result, ui: errorUI };
-        break;
-      case 'succeeded':
-        result = { ...result, ui: children };
-        break;
-    }
-
-    return result;
-  };
-
-  const { ui, value } = render(state);
-
-  return (
-    <ClusterDefaultConfigurationContext.Provider value={value}>
-      {ui}
-    </ClusterDefaultConfigurationContext.Provider>
-  );
-};
-
-export const useDefaultConfiguration = (keys: Array<keyof ClusterDefaultConfig>) => {
-  // TODO(mlibra): There is no more the need to pick just selected values here, we can pass all the retrieved data
-  return pick(useContext(ClusterDefaultConfigurationContext), keys);
-};

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

@@ -1,177 +0,0 @@
-import React from 'react';
-import {
-  FormGroup,
-  Tooltip,
-  Dropdown,
-  DropdownItem,
-  MenuToggle,
-  MenuToggleElement,
-  DropdownList,
-} from '@patternfly/react-core';
-import { useField } from 'formik';
-import toNumber from 'lodash-es/toNumber';
-import { getFieldId, PopoverIcon, PreviewBadgePosition, TechnologyPreview } from '../../../common';
-import { useFeature } from '../../hooks/use-feature';
-import {
-  NewFeatureSupportLevelMap,
-  useNewFeatureSupportLevel,
-} from '../../../common/components/newFeatureSupportLevels';
-import { isFeatureSupportedAndAvailable } from '../featureSupportLevels/featureStateUtils';
-import OcmTNADisclaimer from '../../../common/components/clusterConfiguration/OcmTNADisclaimer';
-import OcmSNODisclaimer from './OcmSNODisclaimer';
-
-const INPUT_NAME = 'controlPlaneCount';
-const fieldId = getFieldId(INPUT_NAME, 'input');
-export const DEFAULT_VALUE_CPN = 3;
-
-export const ControlPlaneNodesLabel = () => {
-  return (
-    <>
-      Number of control plane nodes{' '}
-      <PopoverIcon
-        bodyContent={
-          <>
-            Control plane nodes manage workloads, maintain cluster state, and ensure stability.
-            Using more than three nodes boosts fault tolerance and availability, reducing downtime
-            during failures.
-          </>
-        }
-      />
-    </>
-  );
-};
-
-interface ControlPlaneNodesOption {
-  value: number;
-  label: string;
-  badge?: React.ReactNode;
-  /** When true, option is omitted from the list (e.g. product mode does not offer this topology). */
-  hidden?: boolean;
-}
-
-interface ControlPlaneNodesDropdownProps {
-  featureSupportLevelData?: NewFeatureSupportLevelMap | null;
-}
-
-export const isCPNDropdownItemEnabled = (
-  controlPlaneNodeCount: number,
-  isNonStandardControlPlaneEnabled: boolean,
-  isTnaEnabled: boolean,
-): boolean => {
-  if (controlPlaneNodeCount === 4 || controlPlaneNodeCount === 5) {
-    return isNonStandardControlPlaneEnabled;
-  }
-  if (controlPlaneNodeCount === 2) {
-    return isTnaEnabled;
-  }
-  return true;
-};
-
-const ControlPlaneNodesDropdown: React.FC<ControlPlaneNodesDropdownProps> = ({
-  featureSupportLevelData,
-}) => {
-  const [field, , { setValue }] = useField<number>(INPUT_NAME);
-  const [isOpen, setOpen] = React.useState<boolean>(false);
-  const newFeatureSupportLevelContext = useNewFeatureSupportLevel();
-  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
-  const snoExpansion = newFeatureSupportLevelContext.isFeatureSupported(
-    'SINGLE_NODE_EXPANSION',
-    featureSupportLevelData ?? undefined,
-  );
-
-  const disabledReason =
-    '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',
-    featureSupportLevelData ?? undefined,
-  );
-
-  const tnaSupport = newFeatureSupportLevelContext.getFeatureSupportLevel(
-    'TNA',
-    featureSupportLevelData ?? undefined,
-  );
-  const isTnaEnabled = isFeatureSupportedAndAvailable(tnaSupport || 'unsupported');
-
-  const options: ControlPlaneNodesOption[] = [
-    { value: 1, label: '1 (Single Node OpenShift)' },
-    {
-      value: 2,
-      label: '2 (Two-Nodes Arbiter)',
-      badge:
-        tnaSupport === 'tech-preview' ? (
-          <TechnologyPreview position={PreviewBadgePosition.default} />
-        ) : undefined,
-      hidden: isSingleClusterFeatureEnabled,
-    },
-    { value: 3, label: '3 (highly available cluster)' },
-    { value: 4, label: '4 (highly available cluster+)' },
-    { value: 5, label: '5 (highly available cluster++)' },
-  ].filter(({ hidden }) => !hidden);
-
-  React.useEffect(() => {
-    if (!field.value) {
-      setValue(DEFAULT_VALUE_CPN);
-    }
-  }, [field.value, setValue]);
-
-  const onSelect = (event?: React.MouseEvent<Element, MouseEvent>): void => {
-    const selectedValue = event?.currentTarget.id as string;
-    setValue(toNumber(selectedValue));
-    setOpen(false);
-  };
-
-  const dropdownItems = options.map(({ value, label, badge }) => {
-    const isItemEnabled = isCPNDropdownItemEnabled(
-      value,
-      isNonStandardControlPlaneEnabled,
-      isTnaEnabled,
-    );
-    return (
-      <DropdownItem key={value} id={value.toString()} isAriaDisabled={!isItemEnabled}>
-        <Tooltip hidden={isItemEnabled} content={disabledReason} position="top">
-          <div>
-            {label} {badge}
-          </div>
-        </Tooltip>
-      </DropdownItem>
-    );
-  });
-
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle
-      id={fieldId}
-      ref={toggleRef}
-      onClick={() => setOpen(!isOpen)}
-      isExpanded={isOpen}
-      className="pf-v6-u-w-100"
-      data-testid="control-plane-nodes-dropdown-toggle"
-    >
-      {options.find((opt) => opt.value === field.value)?.label || 'Select'}
-    </MenuToggle>
-  );
-
-  return (
-    <>
-      <FormGroup
-        id={`form-control__${fieldId}`}
-        label={<ControlPlaneNodesLabel />}
-        fieldId={fieldId}
-      >
-        <Dropdown
-          id={`${fieldId}-dropdown`}
-          isOpen={isOpen}
-          toggle={toggle}
-          onOpenChange={() => setOpen(!isOpen)}
-          onSelect={onSelect}
-        >
-          <DropdownList>{dropdownItems}</DropdownList>
-        </Dropdown>
-      </FormGroup>
-      {field.value === 1 && <OcmSNODisclaimer snoExpansionSupported={snoExpansion} />}
-      {field.value === 2 && <OcmTNADisclaimer />}
-    </>
-  );
-};
-
-export default ControlPlaneNodesDropdown;