@openshift-assisted/ui-lib 2.55.2 → 2.56.1

package/lib/ocm/components/wizard/wizardFields/CpuArchitectureDropdown.tsx

@@ -0,0 +1,184 @@
+import React from 'react';
+import {
+  FormGroup,
+  Split,
+  SplitItem,
+  Tooltip,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
+import { useField } from 'formik';
+import {
+  architectureData,
+  CpuArchitecture,
+  FeatureId,
+  getDefaultCpuArchitecture,
+  getFieldId,
+  SupportedCpuArchitecture,
+} from '../../../../common';
+import { Cluster, PlatformType } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  NewFeatureSupportLevelMap,
+  useNewFeatureSupportLevel,
+} from '../../../../common/components/newFeatureSupportLevels';
+import { useSupportLevelsAPI } from '../../../hooks/useSupportLevelsAPI';
+import { ExternalPlaformIds, ExternalPlatformLabels } from './platformIntegration/constants';
+
+const INPUT_NAME = 'cpuArchitecture';
+const fieldId = getFieldId(INPUT_NAME, 'input');
+
+const isCurrentDefaultCpuArchitecture = (
+  cpuArchitectures: SupportedCpuArchitecture[],
+  cpuArchitecture: SupportedCpuArchitecture,
+  day1CpuArchitecture?: SupportedCpuArchitecture,
+): boolean => {
+  const cpuArchFound = cpuArchitectures.find((cpuArch) => cpuArch === cpuArchitecture);
+  return (
+    cpuArchFound === undefined &&
+    cpuArchitecture !== getDefaultCpuArchitecture() &&
+    day1CpuArchitecture !== CpuArchitecture.ARM
+  );
+};
+
+type CpuArchitectureDropdownProps = {
+  openshiftVersion: Cluster['openshiftVersion'];
+  day1CpuArchitecture?: SupportedCpuArchitecture;
+  cpuArchitectures: SupportedCpuArchitecture[];
+  onChange?: (value: string) => void;
+  platformType?: PlatformType;
+};
+
+export const CpuArchitectureDropdown = ({
+  openshiftVersion,
+  day1CpuArchitecture,
+  cpuArchitectures,
+  onChange,
+  platformType,
+}: CpuArchitectureDropdownProps) => {
+  const newFeatureSupportLevelContext = useNewFeatureSupportLevel();
+
+  const [field, { value: selectedCpuArchitecture }, { setValue }] =
+    useField<SupportedCpuArchitecture>(INPUT_NAME);
+
+  const [isOpen, setOpen] = React.useState(false);
+
+  const prevVersionRef = React.useRef(openshiftVersion);
+  const [currentCpuArch, setCurrentCpuArch] = React.useState<string>(
+    day1CpuArchitecture ? architectureData[day1CpuArchitecture].label : CpuArchitecture.x86,
+  );
+
+  const supportLevelDataForAllCpuArchs = useSupportLevelsAPI(
+    'featureForAllCpus',
+    openshiftVersion,
+    undefined,
+    platformType,
+    cpuArchitectures,
+  );
+
+  const enabledItems = React.useMemo(() => {
+    if (cpuArchitectures !== undefined) {
+      return cpuArchitectures.map((cpuArch) => {
+        let isCpuSupported = true;
+        let disabledReason = `This cluster is using the  ${
+          platformType ? ExternalPlatformLabels[platformType] : ''
+        } platform which doesn't allow this CPU architecture.`;
+        if (day1CpuArchitecture === CpuArchitecture.ARM) {
+          isCpuSupported = cpuArch === CpuArchitecture.ARM;
+          disabledReason =
+            'Only hosts that have Arm64 CPU architecture can be added to this cluster.';
+        } else if (supportLevelDataForAllCpuArchs) {
+          const featureSupportLevelData = supportLevelDataForAllCpuArchs[
+            cpuArch
+          ] as NewFeatureSupportLevelMap;
+          isCpuSupported = newFeatureSupportLevelContext.isFeatureSupported(
+            ExternalPlaformIds[platformType ? platformType : 'baremetal'] as FeatureId,
+            featureSupportLevelData ?? undefined,
+          );
+        }
+
+        return (
+          <DropdownItem
+            key={cpuArch}
+            id={cpuArch}
+            description={cpuArch ? architectureData[cpuArch].description : ''}
+            isAriaDisabled={!isCpuSupported}
+          >
+            <Split>
+              <SplitItem>
+                <Tooltip hidden={isCpuSupported} content={disabledReason} position="top">
+                  <div>{cpuArch ? architectureData[cpuArch].label : ''}</div>
+                </Tooltip>
+              </SplitItem>
+              <SplitItem isFilled />
+            </Split>
+          </DropdownItem>
+        );
+      });
+    }
+  }, [
+    cpuArchitectures,
+    day1CpuArchitecture,
+    supportLevelDataForAllCpuArchs,
+    platformType,
+    newFeatureSupportLevelContext,
+  ]);
+
+  const onSelect = React.useCallback(
+    (event?: React.MouseEvent<Element, MouseEvent>): void => {
+      const selectedCpuArch = event?.currentTarget.id as SupportedCpuArchitecture;
+      setValue(selectedCpuArch);
+      setOpen(false);
+      setCurrentCpuArch(architectureData[selectedCpuArch].label);
+      onChange && onChange(selectedCpuArch);
+    },
+    [setOpen, setValue, onChange],
+  );
+
+  React.useEffect(() => {
+    const isCurrentDefaultCpuArchitectureSelected = isCurrentDefaultCpuArchitecture(
+      cpuArchitectures,
+      selectedCpuArchitecture,
+      day1CpuArchitecture,
+    );
+    if (isCurrentDefaultCpuArchitectureSelected) {
+      setValue(getDefaultCpuArchitecture());
+      setCurrentCpuArch(architectureData[getDefaultCpuArchitecture()].label);
+      setOpen(false);
+    }
+    if (prevVersionRef.current !== openshiftVersion) {
+      prevVersionRef.current = openshiftVersion;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cpuArchitectures, openshiftVersion, selectedCpuArchitecture]);
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      id={fieldId}
+      ref={toggleRef}
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      className="pf-v6-u-w-100"
+      style={{ minWidth: '420px' }}
+      data-testid="cpu-architecture-dropdown-toggle"
+    >
+      {currentCpuArch}
+    </MenuToggle>
+  );
+
+  return (
+    <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId} label={'CPU architecture'}>
+      <Dropdown
+        {...field}
+        id={`${fieldId}-dropdown`}
+        toggle={toggle}
+        isOpen={isOpen}
+        onSelect={onSelect}
+        onOpenChange={() => setOpen(!isOpen)}
+      >
+        {enabledItems}
+      </Dropdown>
+    </FormGroup>
+  );
+};

package/lib/ocm/components/wizard/wizardFields/OcmOpenShiftVersion.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Stack, StackItem } from '@patternfly/react-core';
+import {
+  ClusterCpuArchitecture,
+  getOpenshiftVersionText,
+  OpenshiftVersionOptionType,
+  StaticTextField,
+} from '../../../../common';
+
+type OcmOpenShiftVersionProps = {
+  versions?: OpenshiftVersionOptionType[];
+  openshiftVersion: string;
+  clusterCpuArchitecture?: string;
+  withPreviewText?: boolean;
+  withMultiText?: boolean;
+};
+
+export const OcmOpenShiftVersion = ({
+  openshiftVersion,
+  clusterCpuArchitecture,
+  versions,
+  withPreviewText,
+  withMultiText,
+  children,
+}: React.PropsWithChildren<OcmOpenShiftVersionProps>) => {
+  return (
+    <StaticTextField name="openshiftVersion" label="OpenShift version" isRequired>
+      <Stack>
+        <StackItem>
+          OpenShift{' '}
+          {getOpenshiftVersionText({
+            openshiftVersion,
+            cpuArchitecture: clusterCpuArchitecture as ClusterCpuArchitecture,
+            versions,
+            withPreviewText,
+            withMultiText,
+          })}
+        </StackItem>
+        {children && <StackItem>{children}</StackItem>}
+      </Stack>
+    </StaticTextField>
+  );
+};

package/lib/ocm/components/wizard/wizardFields/index.tsx

@@ -0,0 +1,3 @@
+export * from './OcmOpenShiftVersion';
+export * from './CpuArchitectureDropdown';
+export * from './platformIntegration';

package/lib/ocm/components/wizard/wizardFields/platformIntegration/ExternalPlatformDropdown.tsx

@@ -0,0 +1,306 @@
+import React, { MouseEvent } from 'react';
+import {
+  Button,
+  ButtonVariant,
+  FormGroup,
+  Split,
+  SplitItem,
+  Tooltip,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  DropdownList,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+} from '@patternfly/react-core';
+import { useField } from 'formik';
+import { PlatformType, SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  getFieldId,
+  SupportedCpuArchitecture,
+  NewFeatureSupportLevelMap,
+  GetFeatureDisabledReason,
+  CpuArchitecture,
+  FeatureId,
+  GetFeatureSupportLevel,
+  useFeature,
+  architectureData,
+  useNewFeatureSupportLevel,
+  ExternalLink,
+  VSPHERE_LIMITATIONS_LINK,
+} from '../../../../../common';
+import { NewFeatureSupportLevelBadge } from '../../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { ExternalPlatformLabels, ExternalPlaformIds, ExternalPlatformLinks } from './constants';
+
+const INPUT_NAME = 'platform';
+const fieldId = getFieldId(INPUT_NAME, 'input');
+
+type ExternalPlatformDropdownProps = {
+  onChange: (selectedPlatform: PlatformType) => void;
+  cpuArchitecture?: SupportedCpuArchitecture;
+  featureSupportLevelData: NewFeatureSupportLevelMap | null;
+  isSNO: boolean;
+};
+
+export type ExternalPlatformInfo = {
+  label: string;
+  href?: string;
+  disabledReason?: string;
+  supportLevel?: SupportLevel;
+};
+
+const getDisabledReasonForExternalPlatform = (
+  isSNO: boolean,
+  getFeatureDisabledReason: GetFeatureDisabledReason,
+  platform: PlatformType,
+  featureSupportLevelData?: NewFeatureSupportLevelMap | null,
+  cpuArchitecture?: SupportedCpuArchitecture,
+): string | undefined => {
+  if (isSNO && (platform === 'nutanix' || platform === 'vsphere')) {
+    return `${ExternalPlatformLabels[platform]} integration is not supported for Single-Node OpenShift.`;
+  } else if (
+    isSNO &&
+    (cpuArchitecture === CpuArchitecture.ppc64le || cpuArchitecture === CpuArchitecture.s390x)
+  ) {
+    return `Plaform integration is not supported for Single-Node OpenShift with the selected CPU architecture.`;
+  } else {
+    return getFeatureDisabledReason(
+      ExternalPlaformIds[platform] as FeatureId,
+      featureSupportLevelData ?? undefined,
+      cpuArchitecture,
+    );
+  }
+};
+
+const isAvailablePlatform = (platform: PlatformType, isDisconnected?: boolean) => {
+  if (isDisconnected && platform === 'nutanix') {
+    return false;
+  }
+  return platform !== undefined;
+};
+
+const getExternalPlatformTypes = (
+  isSNO: boolean,
+  getFeatureSupportLevel: GetFeatureSupportLevel,
+  getFeatureDisabledReason: GetFeatureDisabledReason,
+  featureSupportLevelData?: NewFeatureSupportLevelMap | null,
+  cpuArchitecture?: SupportedCpuArchitecture,
+  isDisconnected?: boolean,
+): Partial<{ [key in PlatformType]: ExternalPlatformInfo }> => {
+  const platforms = ['none', 'nutanix', 'external', 'vsphere'] as PlatformType[];
+
+  const newPlatform = platforms
+    .filter((platform) => isAvailablePlatform(platform, isDisconnected))
+    .reduce(
+      (a, platform) => ({
+        ...a,
+        [platform]: {
+          label: ExternalPlatformLabels[platform],
+          href: ExternalPlatformLinks[platform],
+          disabledReason: getDisabledReasonForExternalPlatform(
+            isSNO,
+            getFeatureDisabledReason,
+            platform,
+            featureSupportLevelData ?? undefined,
+            cpuArchitecture,
+          ),
+          supportLevel: getFeatureSupportLevel(
+            ExternalPlaformIds[platform] as FeatureId,
+            featureSupportLevelData ?? undefined,
+          ),
+        },
+      }),
+      {},
+    );
+  return newPlatform;
+};
+
+export const areAllExternalPlatformIntegrationDisabled = (
+  externalPlatformTypes: Partial<{ [key in PlatformType]: ExternalPlatformInfo }>,
+): boolean => {
+  return Object.values(externalPlatformTypes)
+    .filter((info) => info.label !== 'No platform integration')
+    .every((info) => info.disabledReason !== undefined);
+};
+
+const getReasonForDropdownDisabled = (isSNO: boolean, labelCpuArch: string): string => {
+  if (!isSNO) {
+    return `Platform integration is not supported when ${labelCpuArch} is selected`;
+  } else {
+    return `Platform integration is not supported for SNO clusters`;
+  }
+};
+
+export const ExternalPlatformDropdown = ({
+  onChange,
+  cpuArchitecture,
+  featureSupportLevelData,
+  isSNO,
+}: ExternalPlatformDropdownProps) => {
+  const [field, , { setValue }] = useField<string>(INPUT_NAME);
+  const [isOpen, setOpen] = React.useState(false);
+  const [externalPlatformTypes, setExternalPlatformTypes] = React.useState<
+    Partial<{ [key in PlatformType]: ExternalPlatformInfo }>
+  >({});
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+
+  const tooltipDropdownDisabled = getReasonForDropdownDisabled(
+    isSNO,
+    cpuArchitecture ? architectureData[cpuArchitecture].label : '',
+  );
+
+  const handleClick = (event: MouseEvent<HTMLButtonElement>, href: string): void => {
+    event.stopPropagation(); // Stop event propagation here
+    window.open(href, '_blank', 'noopener,noreferrer');
+  };
+
+  const { getFeatureSupportLevel, getFeatureDisabledReason } = useNewFeatureSupportLevel();
+
+  React.useEffect(() => {
+    // Calculate updated externalPlatformTypes based on the dependencies
+    const updatedExternalPlatformTypes = getExternalPlatformTypes(
+      isSNO,
+      getFeatureSupportLevel,
+      getFeatureDisabledReason,
+      featureSupportLevelData,
+      cpuArchitecture,
+      isSingleClusterFeatureEnabled,
+    );
+
+    // Update the state with the new externalPlatformTypes
+    setExternalPlatformTypes(updatedExternalPlatformTypes);
+  }, [
+    featureSupportLevelData,
+    cpuArchitecture,
+    isSNO,
+    isSingleClusterFeatureEnabled,
+    getFeatureSupportLevel,
+    getFeatureDisabledReason,
+  ]);
+
+  const dropdownIsDisabled = React.useMemo(() => {
+    return areAllExternalPlatformIntegrationDisabled(externalPlatformTypes);
+  }, [externalPlatformTypes]);
+
+  React.useEffect(() => {
+    let isCurrentValueDisabled = false;
+
+    if (field.value !== 'none') {
+      isCurrentValueDisabled =
+        externalPlatformTypes[field.value as PlatformType]?.disabledReason !== undefined;
+    }
+    if (dropdownIsDisabled || isCurrentValueDisabled) {
+      setValue('none');
+      onChange('none');
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dropdownIsDisabled, externalPlatformTypes]);
+
+  const enabledItems = Object.keys(externalPlatformTypes).map((platform) => {
+    const { label, href, disabledReason, supportLevel } = externalPlatformTypes[
+      platform as PlatformType
+    ] as ExternalPlatformInfo;
+
+    return (
+      <DropdownItem
+        value={platform}
+        key={platform}
+        id={platform}
+        isAriaDisabled={disabledReason !== undefined}
+      >
+        <Split>
+          <SplitItem>
+            <Tooltip hidden={!disabledReason} content={disabledReason} position="top">
+              <div>
+                {label}
+                <span onClick={(event) => event.stopPropagation()}>
+                  <NewFeatureSupportLevelBadge
+                    featureId={ExternalPlaformIds[platform as PlatformType] as FeatureId}
+                    supportLevel={supportLevel}
+                  />
+                </span>
+              </div>
+            </Tooltip>
+          </SplitItem>
+          {!!href && (
+            <>
+              <SplitItem isFilled />
+              <SplitItem>
+                <Button
+                  variant={ButtonVariant.link}
+                  isInline
+                  style={{ float: 'right' }}
+                  onClick={(event) => handleClick(event, href)}
+                >
+                  Learn more <i className="fas fa-external-link-alt" />
+                </Button>
+              </SplitItem>
+            </>
+          )}
+        </Split>
+      </DropdownItem>
+    );
+  });
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      id={fieldId}
+      className="pf-v6-u-w-100"
+      style={{ minWidth: '420px' }}
+      ref={toggleRef}
+      onClick={() => setOpen(!isOpen)}
+      isDisabled={dropdownIsDisabled}
+      isExpanded={isOpen}
+      data-testid="external-platform-dropdown-toggle"
+    >
+      {externalPlatformTypes[field.value as PlatformType]?.label}
+    </MenuToggle>
+  );
+
+  return (
+    <>
+      <FormGroup
+        id={`form-control__${fieldId}`}
+        fieldId={fieldId}
+        label={'Integrate with external partner platforms'}
+      >
+        <Tooltip
+          content={tooltipDropdownDisabled}
+          hidden={!dropdownIsDisabled}
+          position="top"
+          distance={7}
+        >
+          <Dropdown
+            id={`${fieldId}-dropdown`}
+            toggle={toggle}
+            isOpen={isOpen}
+            onOpenChange={() => setOpen(!isOpen)}
+            onSelect={(event) => {
+              const selectedPlatform = event?.currentTarget.id as PlatformType;
+              setValue(selectedPlatform);
+              setOpen(false);
+              onChange(selectedPlatform);
+            }}
+            shouldFocusToggleOnSelect
+          >
+            <DropdownList>{enabledItems}</DropdownList>
+          </Dropdown>
+        </Tooltip>
+      </FormGroup>
+      {field.value === 'vsphere' && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>
+              <ExternalLink href={VSPHERE_LIMITATIONS_LINK}>
+                Learn more about vSphere limitations
+              </ExternalLink>
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
+    </>
+  );
+};

package/lib/ocm/components/wizard/wizardFields/platformIntegration/PlatformIntegrationNote.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Icon } from '@patternfly/react-core';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import { SupportedPlatformType } from '../../../../../common';
+import { ExternalPlatformLinks } from './constants';
+
+export const PlatformIntegrationNote = ({
+  platformType,
+}: {
+  platformType: SupportedPlatformType;
+}) => {
+  const integrationPlatformLink = ExternalPlatformLinks[platformType];
+  return (
+    <p>
+      <Icon status="warning">
+        <ExclamationTriangleIcon />
+      </Icon>{' '}
+      You will need to modify your platform configuration after cluster installation is completed.{' '}
+      {!!integrationPlatformLink && (
+        <a
+          href={integrationPlatformLink || ''}
+          target="_blank"
+          rel="noopener noreferrer"
+          data-ouia-component-id="vm-integration-kb-page"
+        >
+          Learn more <i className="fas fa-external-link-alt" />
+        </a>
+      )}
+    </p>
+  );
+};

package/lib/ocm/components/wizard/wizardFields/platformIntegration/constants.tsx

@@ -0,0 +1,24 @@
+import { PlatformType } from '@openshift-assisted/types/assisted-installer-service';
+import { NUTANIX_CONFIG_LINK, OCI_CONFIG_LINK, VSPHERE_CONFIG_LINK } from '../../../../../common';
+
+export const ExternalPlatformLabels: { [key in PlatformType]: string } = {
+  baremetal: 'No platform integration',
+  none: 'No platform integration',
+  nutanix: 'Nutanix',
+  external: 'Oracle Cloud Infrastructure (Requires a custom manifest)',
+  vsphere: 'vSphere',
+};
+
+export const ExternalPlatformLinks: Partial<{ [key in PlatformType]: string }> = {
+  nutanix: NUTANIX_CONFIG_LINK,
+  vsphere: VSPHERE_CONFIG_LINK,
+  external: OCI_CONFIG_LINK,
+};
+
+export const ExternalPlaformIds: { [key in PlatformType]: string } = {
+  baremetal: '',
+  none: '',
+  nutanix: 'NUTANIX_INTEGRATION',
+  external: 'EXTERNAL_PLATFORM_OCI',
+  vsphere: 'VSPHERE_INTEGRATION',
+};

package/lib/ocm/components/wizard/wizardFields/platformIntegration/index.tsx

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './ExternalPlatformDropdown';
+export * from './PlatformIntegrationNote';

package/lib/ocm/contexts/ClusterDefaultConfigurationContext.tsx

@@ -0,0 +1,92 @@
+import React, { PropsWithChildren, useContext, useEffect } from 'react';
+import pick from 'lodash-es/pick.js';
+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);
+};