MGMT-15151: Refactoring external platform integrations control

libs/ui-lib/lib/common/components/clusterWizard/clusterDetailsValidation.ts

@@ -75,6 +75,7 @@ export const getClusterDetailsInitialValues = ({
     diskEncryptionTangServers: parseTangServers(cluster?.diskEncryption?.tangServers),
     diskEncryption: cluster?.diskEncryption ?? {},
     cpuArchitecture: cluster?.cpuArchitecture || getDefaultCpuArchitecture(),
+    platform: cluster?.platform?.type || 'none',
   };
 };
 

libs/ui-lib/lib/common/components/clusterWizard/types.ts

@@ -1,4 +1,4 @@
-import { DiskEncryption, Host, Cluster } from '../../api';
+import { DiskEncryption, Host, Cluster, PlatformType } from '../../api';
 
 import {
   ValidationGroup as ClusterValidationGroup,
@@ -25,6 +25,7 @@ export type ClusterDetailsValues = {
   diskEncryptionTangServers: TangServer[];
   diskEncryption: DiskEncryption;
   cpuArchitecture: string;
+  platform: PlatformType;
 };
 
 export type HostsValidationsProps<S extends string, V extends string[]> = {

libs/ui-lib/lib/ocm/components/clusterConfiguration/ExternalPlatformDropdown.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import { Dropdown, DropdownItem, DropdownToggle, FormGroup } from '@patternfly/react-core';
+import { CaretDownIcon } from '@patternfly/react-icons';
+import { useField } from 'formik';
+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 = {
+  isOracleCloudPlatformIntegrationEnabled: boolean;
+  selectedPlatform?: PlatformType;
+  disabledOciTooltipContent: React.ReactNode;
+  isOciDisabled: boolean;
+};
+
+export const externalPlatformTypes: Record<PlatformType, string> = {
+  none: 'None',
+  baremetal: 'Baremetal',
+  nutanix: 'Nutanix',
+  oci: 'Oracle',
+  vsphere: 'vSphere',
+};
+
+export const ExternalPlatformDropdown = ({
+  isOracleCloudPlatformIntegrationEnabled,
+  selectedPlatform,
+  disabledOciTooltipContent,
+  isOciDisabled,
+}: ExternalPlatformDropdownProps) => {
+  const [field, { value }, { setValue }] = useField<string>(INPUT_NAME);
+  const [current, setCurrent] = React.useState(
+    selectedPlatform ? externalPlatformTypes[selectedPlatform] : 'None',
+  );
+  const [isOpen, setOpen] = React.useState(false);
+
+  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']}
+      <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;
+      setValue(selectedPlatform);
+      setOpen(false);
+      setCurrent(externalPlatformTypes[selectedPlatform]);
+    },
+    [setOpen, setValue],
+  );
+
+  const toggle = React.useMemo(
+    () => (
+      <DropdownToggle
+        onToggle={(val) => setOpen(val)}
+        toggleIndicator={CaretDownIcon}
+        isText
+        className="pf-u-w-100"
+      >
+        {current || value}
+      </DropdownToggle>
+    ),
+    [setOpen, current, value],
+  );
+
+  return (
+    <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId} label={'Integrate with platform'}>
+      <Dropdown
+        {...field}
+        id={fieldId}
+        dropdownItems={enabledItems}
+        toggle={toggle}
+        isOpen={isOpen}
+        className="pf-u-w-100"
+        onSelect={onSelect}
+      />
+    </FormGroup>
+  );
+};
+
+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,
+  };
+};

libs/ui-lib/lib/ocm/components/clusterConfiguration/HostInventory.tsx

@@ -24,15 +24,11 @@ import { DiscoveryImageModalButton } from './DiscoveryImageModal';
 import InformationAndAlerts from './InformationAndAlerts';
 import { OcmSwitchField } from '../ui/OcmFormFields';
 import { selectCurrentClusterPermissionsState } from '../../selectors';
-import PlatformIntegration from './platformIntegration/PlatformIntegration';
 
 const schedulableMastersTooltip =
   'Workloads must be run on control plane nodes when less than 5 hosts are discovered';
 
 const HostInventory = ({ cluster }: { cluster: Cluster }) => {
-  const isPlatformIntegrationFeatureEnabled = useFeature(
-    'ASSISTED_INSTALLER_PLATFORM_INTEGRATION_FEATURE',
-  );
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
 
   const mastersMustRunWorkloads = selectMastersMustRunWorkloads(cluster);
@@ -61,13 +57,6 @@ const HostInventory = ({ cluster }: { cluster: Cluster }) => {
           </TextContent>
         )}
       </StackItem>
-      {isPlatformIntegrationFeatureEnabled && (
-        <StackItem>
-          <Split>
-            <PlatformIntegration clusterId={cluster.id} />
-          </Split>
-        </StackItem>
-      )}
       <StackItem>
         <Split>
           <SplitItem>

libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx

@@ -16,12 +16,12 @@ import {
   useFeature,
   ClusterCreateParams,
   getSupportedCpuArchitectures,
+  PlatformType,
 } from '../../../common';
 import DiskEncryptionControlGroup from '../../../common/components/clusterConfiguration/DiskEncryptionFields/DiskEncryptionControlGroup';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import {
   OcmCheckboxField,
-  OcmCheckboxFieldProps,
   OcmInputField,
   OcmRichInputField,
   OcmSelectField,
@@ -36,11 +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, useOracleDropdownItemState } from './ExternalPlatformDropdown';
 
 export type OcmClusterDetailsFormFieldsProps = {
   forceOpenshiftVersion?: string;
@@ -54,6 +50,7 @@ export type OcmClusterDetailsFormFieldsProps = {
   clusterExists: boolean;
   clusterCpuArchitecture?: string;
   clusterId?: string;
+  clusterPlatform?: PlatformType;
 };
 
 const BaseDnsHelperText = ({ name, baseDnsDomain }: { name?: string; baseDnsDomain?: string }) => (
@@ -78,8 +75,9 @@ export const OcmClusterDetailsFormFields = ({
   clusterExists,
   clusterCpuArchitecture,
   clusterId,
+  clusterPlatform,
 }: OcmClusterDetailsFormFieldsProps) => {
-  const { values, setFieldValue } = useFormikContext<ClusterDetailsValues>();
+  const { values } = useFormikContext<ClusterDetailsValues>();
   const { name, baseDnsDomain, highAvailabilityMode, useRedHatDnsService } = values;
   const nameInputRef = React.useRef<HTMLInputElement>();
 
@@ -92,7 +90,7 @@ export const OcmClusterDetailsFormFields = ({
   } = useFormikContext<ClusterCreateParams>();
   const { getCpuArchitectures } = useOpenshiftVersions();
   const cpuArchitecturesByVersionImage = getCpuArchitectures(openshiftVersion);
-  const clusterWizardContext = useClusterWizardContext();
+
   const featureSupportLevelData = useSupportLevelsAPI(
     'features',
     values.openshiftVersion,
@@ -105,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,
   );
@@ -114,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
@@ -198,21 +185,12 @@ export const OcmClusterDetailsFormFields = ({
 
       {!isPullSecretSet && <PullSecret isOcm={isOcm} defaultPullSecret={defaultPullSecret} />}
 
-      {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}
-        />
-      )}
+      <ExternalPlatformDropdown
+        isOracleCloudPlatformIntegrationEnabled={isOracleCloudPlatformIntegrationEnabled}
+        selectedPlatform={clusterPlatform}
+        disabledOciTooltipContent={oracleDropdownItemState?.disabledReason}
+        isOciDisabled={oracleDropdownItemState?.isDisabled || false}
+      />
 
       <CustomManifestCheckbox clusterId={clusterId || ''} />
 

libs/ui-lib/lib/ocm/components/clusterWizard/ClusterDetailsForm.tsx

@@ -175,6 +175,7 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
                   clusterExists={!!cluster}
                   clusterCpuArchitecture={cluster?.cpuArchitecture as CpuArchitecture}
                   clusterId={cluster?.id}
+                  clusterPlatform={cluster?.platform?.type}
                 />
               </GridItem>
             </Grid>

libs/ui-lib/lib/ocm/services/ClusterDetailsService.ts

@@ -39,6 +39,9 @@ const ClusterDetailsService = {
       baseDnsDomain: values.baseDnsDomain,
       cpuArchitecture: values.cpuArchitecture as ClusterCpuArchitecture,
       diskEncryption: DiskEncryptionService.getDiskEncryptionParams(values),
+      platform: {
+        type: values.platform,
+      },
     };
 
     if (values.externalPartnerIntegrations) {