Skip to content

Commit

Permalink
Disabling Oci option in dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@ammont82
ammont82 committed Jul 11, 2023
1 parent 22a4c9a commit 209fb0c
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 45 deletions.
110 changes: 102 additions & 8 deletions libs/ui-lib/lib/ocm/components/clusterConfiguration/ExternalPlatformDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 } from '../newFeatureSupportLevels/newFeatureStateUtils';

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<PlatformType, string> = {
Expand All @@ -20,9 +32,11 @@ export const externalPlatformTypes: Record<PlatformType, string> = {
vsphere: 'vSphere',
};

const ExternalPlatformDropdown = ({
isOciEnabled,
export const ExternalPlatformDropdown = ({
isOracleCloudPlatformIntegrationEnabled,
selectedPlatform,
disabledOciTooltipContent,
isOciDisabled,
}: ExternalPlatformDropdownProps) => {
const [field, { value }, { setValue }] = useField<string>(INPUT_NAME);
const [current, setCurrent] = React.useState(
Expand All @@ -33,18 +47,60 @@ const ExternalPlatformDropdown = ({
const enabledItems = [
<DropdownItem key="none" id="none">
{externalPlatformTypes['none']}
<a
href={'www.google.es'}
target="_blank"
rel="noopener noreferrer"
style={{ float: 'right' }}
>
Learn more <i className="fas fa-external-link-alt" />
</a>
</DropdownItem>,
<DropdownItem key="nutanix-platform" id="nutanix">
{externalPlatformTypes['nutanix']}
</DropdownItem>,
<DropdownItem key="oracle-platform" id="oci" disabled={!isOciEnabled}>
{externalPlatformTypes['oci']}
<a
href={NUTANIX_CONFIG_LINK}
target="_blank"
rel="noopener noreferrer"
style={{ float: 'right' }}
>
{'Learn more'} <i className="fas fa-external-link-alt" />
</a>
</DropdownItem>,
<DropdownItem key="vsphere-platform" id="vsphere">
{externalPlatformTypes['vsphere']}
<a
href={VSPHERE_CONFIG_LINK}
target="_blank"
rel="noopener noreferrer"
style={{ float: 'right' }}
>
{'Learn more'} <i className="fas fa-external-link-alt" />
</a>
</DropdownItem>,
];

if (isOracleCloudPlatformIntegrationEnabled) {
enabledItems.push(
<DropdownItem
key="oracle-platform"
id="oci"
tooltip={isOciDisabled ? disabledOciTooltipContent : undefined}
isAriaDisabled={!!isOciDisabled}
>
{externalPlatformTypes['oci']}
<a
href={VSPHERE_CONFIG_LINK}
target="_blank"
rel="noopener noreferrer"
style={{ float: 'right' }}
>
{'Learn more'} <i className="fas fa-external-link-alt" />
</a>
</DropdownItem>,
);
}

const onSelect = React.useCallback(
(event?: React.SyntheticEvent<HTMLDivElement>) => {
const selectedPlatform = event?.currentTarget.id as PlatformType;
Expand Down Expand Up @@ -83,4 +139,42 @@ const ExternalPlatformDropdown = ({
</FormGroup>
);
};
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 = clusterExistsReason;
} else {
disabledReason = featureSupportLevelContext.getFeatureDisabledReason(FEATURE_ID);
}
}

return {
featureId: FEATURE_ID,
isSupported,
isDisabled,
disabledReason,
};
};
44 changes: 7 additions & 37 deletions libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ import DiskEncryptionControlGroup from '../../../common/components/clusterConfig
import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
import {
OcmCheckboxField,
OcmCheckboxFieldProps,
OcmInputField,
OcmRichInputField,
OcmSelectField,
Expand All @@ -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;
Expand Down Expand Up @@ -83,7 +77,7 @@ export const OcmClusterDetailsFormFields = ({
clusterId,
clusterPlatform,
}: OcmClusterDetailsFormFieldsProps) => {
const { values, setFieldValue } = useFormikContext<ClusterDetailsValues>();
const { values } = useFormikContext<ClusterDetailsValues>();
const { name, baseDnsDomain, highAvailabilityMode, useRedHatDnsService } = values;
const nameInputRef = React.useRef<HTMLInputElement>();

Expand All @@ -96,7 +90,7 @@ export const OcmClusterDetailsFormFields = ({
} = useFormikContext<ClusterCreateParams>();
const { getCpuArchitectures } = useOpenshiftVersions();
const cpuArchitecturesByVersionImage = getCpuArchitectures(openshiftVersion);
const clusterWizardContext = useClusterWizardContext();

const featureSupportLevelData = useSupportLevelsAPI(
'features',
values.openshiftVersion,
Expand All @@ -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,
);
Expand All @@ -118,17 +112,6 @@ export const OcmClusterDetailsFormFields = ({
nameInputRef.current?.focus();
}, []);

const handleExternalPartnerIntegrationsChange = React.useCallback<
NonNullable<OcmCheckboxFieldProps['onChange']>
>(
(value: boolean, _event: React.FormEvent<HTMLInputElement>) => {
const checked = Boolean(value);
setFieldValue('addCustomManifest', checked, false);
clusterWizardContext.setAddCustomManifests(checked);
},
[clusterWizardContext, setFieldValue],
);

return (
<Form id="wizard-cluster-details__form">
<OcmRichInputField
Expand Down Expand Up @@ -203,24 +186,11 @@ export const OcmClusterDetailsFormFields = ({
{!isPullSecretSet && <PullSecret isOcm={isOcm} defaultPullSecret={defaultPullSecret} />}

<ExternalPlatformDropdown
isOciEnabled={isOracleCloudPlatformIntegrationEnabled}
isOracleCloudPlatformIntegrationEnabled={isOracleCloudPlatformIntegrationEnabled}
selectedPlatform={clusterPlatform}
disabledOciTooltipContent={oracleDropdownItemState?.disabledReason}
isOciDisabled={oracleDropdownItemState?.isDisabled || false}
/>
{isOracleCloudPlatformIntegrationEnabled && externalPartnerIntegrationsCheckboxState && (
<ExternalPartnerIntegrationsCheckbox
disabledStateTooltipContent={externalPartnerIntegrationsCheckboxState.disabledReason}
popoverContent={
<p>
To integrate with an external partner (for example, Oracle Cloud), you'll need to
provide a custom manifest.
</p>
}
label={'External partner integrations'}
helperText={'Integrate with other platforms using custom manifests.'}
onChange={handleExternalPartnerIntegrationsChange}
isDisabled={externalPartnerIntegrationsCheckboxState.isDisabled}
/>
)}

<CustomManifestCheckbox clusterId={clusterId || ''} />

Expand Down

0 comments on commit 209fb0c

Please sign in to comment.