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 (
- }
- label={'External partner integrations'}
- helperText={'Integrate with other platforms using custom manifests.'}
- onChange={handleExternalPartnerIntegrationsChange}
- isDisabled={externalPartnerIntegrationsCheckboxState.isDisabled}
- />
- )}