diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/ExternalPlatformDropdown.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/ExternalPlatformDropdown.tsx index b509339d42..b4618ab067 100644 --- a/libs/ui-lib/lib/ocm/components/clusterConfiguration/ExternalPlatformDropdown.tsx +++ b/libs/ui-lib/lib/ocm/components/clusterConfiguration/ExternalPlatformDropdown.tsx @@ -2,14 +2,26 @@ import React from 'react'; import { Dropdown, DropdownItem, DropdownToggle, FormGroup } from '@patternfly/react-core'; import { CaretDownIcon } from '@patternfly/react-icons'; import { useField } from 'formik'; -import { PlatformType, getFieldId } from '../../../common'; +import { + NUTANIX_CONFIG_LINK, + PlatformType, + VSPHERE_CONFIG_LINK, + getFieldId, +} from '../../../common'; +import { + NewFeatureSupportLevelMap, + useNewFeatureSupportLevel, +} from '../../../common/components/newFeatureSupportLevels'; +import { clusterExistsReason as CLUSTER_EXISTS_REASON } from '../featureSupportLevels/featureStateUtils'; const INPUT_NAME = 'platform'; const fieldId = getFieldId(INPUT_NAME, 'input'); type ExternalPlatformDropdownProps = { - isOciEnabled: boolean; + isOracleCloudPlatformIntegrationEnabled: boolean; selectedPlatform?: PlatformType; + disabledOciTooltipContent: React.ReactNode; + isOciDisabled: boolean; }; export const externalPlatformTypes: Record = { @@ -20,9 +32,11 @@ export const externalPlatformTypes: Record = { vsphere: 'vSphere', }; -const ExternalPlatformDropdown = ({ - isOciEnabled, +export const ExternalPlatformDropdown = ({ + isOracleCloudPlatformIntegrationEnabled, selectedPlatform, + disabledOciTooltipContent, + isOciDisabled, }: ExternalPlatformDropdownProps) => { const [field, { value }, { setValue }] = useField(INPUT_NAME); const [current, setCurrent] = React.useState( @@ -33,18 +47,60 @@ const ExternalPlatformDropdown = ({ const enabledItems = [ {externalPlatformTypes['none']} + + Learn more + , {externalPlatformTypes['nutanix']} - , - - {externalPlatformTypes['oci']} + + {'Learn more'} + , {externalPlatformTypes['vsphere']} + + {'Learn more'} + , ]; + if (isOracleCloudPlatformIntegrationEnabled) { + enabledItems.push( + + {externalPlatformTypes['oci']} + + {'Learn more'} + + , + ); + } + const onSelect = React.useCallback( (event?: React.SyntheticEvent) => { const selectedPlatform = event?.currentTarget.id as PlatformType; @@ -83,4 +139,42 @@ const ExternalPlatformDropdown = ({ ); }; -export default ExternalPlatformDropdown; + +export const FEATURE_ID = 'EXTERNAL_PLATFORM_OCI'; + +export interface OracleDropdownItemState { + readonly featureId: string; + readonly isSupported: boolean; + readonly isDisabled: boolean; + readonly disabledReason?: string; +} + +export const useOracleDropdownItemState = ( + hasExistentCluster: boolean, + featureSupportLevelData: NewFeatureSupportLevelMap | null, +): OracleDropdownItemState | null => { + const featureSupportLevelContext = useNewFeatureSupportLevel(); + if (!featureSupportLevelData) { + return null; + } + + const isSupported = featureSupportLevelData + ? featureSupportLevelContext.isFeatureSupported(FEATURE_ID, featureSupportLevelData) + : false; + const isDisabled = hasExistentCluster || !isSupported; + let disabledReason: string | undefined; + if (isDisabled) { + if (hasExistentCluster) { + disabledReason = CLUSTER_EXISTS_REASON; + } else { + disabledReason = featureSupportLevelContext.getFeatureDisabledReason(FEATURE_ID); + } + } + + return { + featureId: FEATURE_ID, + isSupported, + isDisabled, + disabledReason, + }; +}; diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx index f79cb9e52b..d4d5292215 100644 --- a/libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx +++ b/libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx @@ -22,7 +22,6 @@ import DiskEncryptionControlGroup from '../../../common/components/clusterConfig import { useTranslation } from '../../../common/hooks/use-translation-wrapper'; import { OcmCheckboxField, - OcmCheckboxFieldProps, OcmInputField, OcmRichInputField, OcmSelectField, @@ -37,12 +36,7 @@ import CpuArchitectureDropdown, { import OcmSNOControlGroup from './OcmSNOControlGroup'; import useSupportLevelsAPI from '../../hooks/useSupportLevelsAPI'; import { useOpenshiftVersions } from '../../hooks'; -import { useClusterWizardContext } from '../clusterWizard/ClusterWizardContext'; -import { - ExternalPartnerIntegrationsCheckbox, - useExternalPartnerIntegrationsCheckboxState, -} from './ExternalPartnerIntegrationsCheckbox'; -import ExternalPlatformDropdown from './ExternalPlatformDropdown'; +import { ExternalPlatformDropdown, useOracleDropdownItemState } from './ExternalPlatformDropdown'; export type OcmClusterDetailsFormFieldsProps = { forceOpenshiftVersion?: string; @@ -83,7 +77,7 @@ export const OcmClusterDetailsFormFields = ({ clusterId, clusterPlatform, }: OcmClusterDetailsFormFieldsProps) => { - const { values, setFieldValue } = useFormikContext(); + const { values } = useFormikContext(); const { name, baseDnsDomain, highAvailabilityMode, useRedHatDnsService } = values; const nameInputRef = React.useRef(); @@ -96,7 +90,7 @@ export const OcmClusterDetailsFormFields = ({ } = useFormikContext(); const { getCpuArchitectures } = useOpenshiftVersions(); const cpuArchitecturesByVersionImage = getCpuArchitectures(openshiftVersion); - const clusterWizardContext = useClusterWizardContext(); + const featureSupportLevelData = useSupportLevelsAPI( 'features', values.openshiftVersion, @@ -109,7 +103,7 @@ export const OcmClusterDetailsFormFields = ({ // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore const cpuArchitecture = (architectureData[values.cpuArchitecture] as CpuArchitectureItem).label; - const externalPartnerIntegrationsCheckboxState = useExternalPartnerIntegrationsCheckboxState( + const oracleDropdownItemState = useOracleDropdownItemState( clusterExists, featureSupportLevelData, ); @@ -118,17 +112,6 @@ export const OcmClusterDetailsFormFields = ({ nameInputRef.current?.focus(); }, []); - const handleExternalPartnerIntegrationsChange = React.useCallback< - NonNullable - >( - (value: boolean, _event: React.FormEvent) => { - const checked = Boolean(value); - setFieldValue('addCustomManifest', checked, false); - clusterWizardContext.setAddCustomManifests(checked); - }, - [clusterWizardContext, setFieldValue], - ); - return (
} - {isOracleCloudPlatformIntegrationEnabled && externalPartnerIntegrationsCheckboxState && ( - - To integrate with an external partner (for example, Oracle Cloud), you'll need to - provide a custom manifest. -

- } - label={'External partner integrations'} - helperText={'Integrate with other platforms using custom manifests.'} - onChange={handleExternalPartnerIntegrationsChange} - isDisabled={externalPartnerIntegrationsCheckboxState.isDisabled} - /> - )}