From 10e39ec16fd296f8fd22fe872140b379df662986 Mon Sep 17 00:00:00 2001
From: Montse Ortega <mortegag@redhat.com>
Date: Fri, 28 Jul 2023 12:20:11 +0200
Subject: [PATCH] Changes in ExternalPlatformDropdown

---
 .../features/read-only-multi-node.cy.ts       |  2 +-
 .../ExternalPlatformDropdown.tsx              | 33 ++++++++++++++++---
 .../OcmClusterDetailsFormFields.tsx           | 33 ++++++-------------
 3 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/libs/ui-lib-tests/cypress/integration/features/read-only-multi-node.cy.ts b/libs/ui-lib-tests/cypress/integration/features/read-only-multi-node.cy.ts
index aa358552f7..fb1c638b08 100644
--- a/libs/ui-lib-tests/cypress/integration/features/read-only-multi-node.cy.ts
+++ b/libs/ui-lib-tests/cypress/integration/features/read-only-multi-node.cy.ts
@@ -21,7 +21,7 @@ describe(`Assisted Installer Read Only Cluster`, () => {
   });
 
   describe('Read Only cluster', () => {
-    it.skip('Should display the Cluster details page in viewer mode', () => {
+    it('Should display the Cluster details page in viewer mode', () => {
       commonActions.visitClusterDetailsPage();
       navbar.clickOnNavItem('Cluster details');
 
diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/ExternalPlatformDropdown.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/ExternalPlatformDropdown.tsx
index 8d3cdc2762..ae391a6eaa 100644
--- a/libs/ui-lib/lib/ocm/components/clusterConfiguration/ExternalPlatformDropdown.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterConfiguration/ExternalPlatformDropdown.tsx
@@ -80,10 +80,21 @@ export const ExternalPlatformDropdown = ({
   onChange,
   cpuArchitecture,
   externalPlatformIntegrationStateMap,
+  clusterPlatform,
 }: ExternalPlatformDropdownProps) => {
-  const [field, { value }, { setValue }] = useField<string>(INPUT_NAME);
+  const [field, , { setValue }] = useField<string>(INPUT_NAME);
   const [isOpen, setOpen] = React.useState(false);
 
+  const defaultValue = React.useMemo(() => {
+    if (clusterPlatform !== undefined) {
+      const platform = clusterPlatform === 'baremetal' ? 'none' : clusterPlatform;
+      return platform;
+    } else {
+      return 'none';
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [clusterPlatform]);
+  const [current, setCurrent] = React.useState<string>(defaultValue);
   const tooltipDropdownDisabled = `Platform integration is not supported when ${
     cpuArchitecture || ''
   } is selected`;
@@ -97,6 +108,20 @@ export const ExternalPlatformDropdown = ({
     externalPlatformIntegrationStateMap,
   );
 
+  React.useEffect(() => {
+    let isCurrentValueDisabled = false;
+
+    if (current !== 'none') {
+      isCurrentValueDisabled =
+        externalPlatformIntegrationStateMap[
+          externalPlatformTypes[current as ExternalPlatformType].featureId as FeatureIdPlatform
+        ].isDisabled;
+    }
+    if (dropdownIsDisabled || isCurrentValueDisabled) {
+      setCurrent('none');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dropdownIsDisabled, current, externalPlatformIntegrationStateMap]);
   const enabledItems = Object.keys(externalPlatformTypes)
     .filter((platformType) => {
       if (platformType === 'oci') {
@@ -139,11 +164,11 @@ export const ExternalPlatformDropdown = ({
         </DropdownItem>
       );
     });
-
   const onSelect = React.useCallback(
     (event?: React.SyntheticEvent<HTMLDivElement>) => {
       const selectedPlatform = event?.currentTarget.id as ExternalPlatformType;
       setValue(selectedPlatform);
+      setCurrent(selectedPlatform);
       setOpen(false);
       onChange(selectedPlatform);
     },
@@ -159,10 +184,10 @@ export const ExternalPlatformDropdown = ({
         className="pf-u-w-100"
         isDisabled={dropdownIsDisabled}
       >
-        {externalPlatformTypes[value as ExternalPlatformType].label}
+        {externalPlatformTypes[current as ExternalPlatformType].label}
       </DropdownToggle>
     ),
-    [dropdownIsDisabled, value],
+    [dropdownIsDisabled, current],
   );
 
   return (
diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx
index 534c7663c7..995f0bc5f2 100644
--- a/libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx
@@ -133,34 +133,20 @@ export const OcmClusterDetailsFormFields = ({
   const cpuArchitecture = (architectureData[values.cpuArchitecture] as CpuArchitectureItem).label;
   const newFeatureSupportLevelContext = useNewFeatureSupportLevel();
 
-  const externalPlatformIntegrationStateMap = getExternalPlatformIntegrationStateMap(
-    newFeatureSupportLevelContext,
-    cpuArchitecture,
-    featureSupportLevelData,
+  const externalPlatformIntegrationStateMap = React.useMemo(
+    () =>
+      getExternalPlatformIntegrationStateMap(
+        newFeatureSupportLevelContext,
+        cpuArchitecture,
+        featureSupportLevelData,
+      ),
+    [newFeatureSupportLevelContext, cpuArchitecture, featureSupportLevelData],
   );
 
   React.useEffect(() => {
     nameInputRef.current?.focus();
   }, []);
 
-  React.useEffect(() => {
-    if (clusterPlatform !== undefined) {
-      const platform = clusterPlatform === 'baremetal' ? 'none' : clusterPlatform;
-      setFieldValue('platform', platform);
-    } else {
-      if (
-        (values.platform === 'oci' &&
-          externalPlatformIntegrationStateMap['EXTERNAL_PLATFORM_OCI'].isDisabled) ||
-        (values.platform === 'nutanix' &&
-          externalPlatformIntegrationStateMap['NUTANIX_INTEGRATION'].isDisabled) ||
-        (values.platform === 'vsphere' &&
-          externalPlatformIntegrationStateMap['VSPHERE_INTEGRATION'].isDisabled)
-      ) {
-        setFieldValue('platform', 'none');
-      }
-    }
-  }, [clusterPlatform, externalPlatformIntegrationStateMap, setFieldValue, values.platform]);
-
   const handleExternalPartnerIntegrationsChange = React.useCallback(
     (selectedPlatform: ExternalPlatformType) => {
       const isOracleSelected = selectedPlatform === 'oci';
@@ -170,7 +156,8 @@ export const OcmClusterDetailsFormFields = ({
         setFieldValue('hostsNetworkConfigurationType', HostsNetworkConfigurationType.DHCP);
       }
     },
-    [clusterWizardContext, setFieldValue],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [clusterWizardContext],
   );
 
   return (