Enabled connect external cluster

dashboard/src/main/home/onboarding/steps/ProvisionResources/ProvisionResourcesWrapper.tsx

@@ -21,7 +21,11 @@ const ProvisionResourcesWrapper = () => {
       onSaveSettings={(data) => OFState.actions.nextStep("continue", data)}
       onSuccess={() => OFState.actions.nextStep("continue")}
       onSkip={() => OFState.actions.nextStep("skip")}
-      enable_go_back={snap.StepHandler.canGoBack && !snap.StepHandler.isSubFlow}
+      enable_go_back={
+        snap.StepHandler.canGoBack &&
+        (!snap.StepHandler.isSubFlow ||
+          snap.StepHandler.currentStepName.includes("connect_own_cluster"))
+      }
       goBack={() => OFState.actions.nextStep("go_back")}
     />
   );

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/_ConnectExternalCluster.tsx

@@ -1,6 +1,8 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import TabSelector from "components/TabSelector";
+import api from "shared/api";
+import SaveButton from "components/SaveButton";
 
 type Props = {
   nextStep: () => void;
@@ -19,6 +21,36 @@ const tabOptions = [{ label: "MacOS", value: "mac" }];
 const ConnectExternalCluster: React.FC<Props> = ({ nextStep, project }) => {
   const [currentPage, setCurrentPage] = useState(0);
   const [currentTab, setCurrentTab] = useState("mac");
+  const [enableContinue, setEnableContinue] = useState(false);
+
+  const getClusters = async (
+    status: { isSubscribed: boolean },
+    retryCount = 0
+  ) => {
+    try {
+      api.getClusters("<token>", {}, { id: project.id }).then((res) => {
+        if (Array.isArray(res.data) && res.data.length > 0) {
+          if (status.isSubscribed) {
+            setEnableContinue(true);
+          }
+        } else {
+          if (status.isSubscribed) {
+            setTimeout(() => {
+              getClusters(status, retryCount + 1);
+            }, 1000);
+          }
+        }
+      });
+    } catch (error) {}
+  };
+
+  useEffect(() => {
+    let status = { isSubscribed: true };
+    getClusters(status);
+    return () => {
+      status.isSubscribed = false;
+    };
+  }, []);
 
   const renderPage = () => {
     switch (currentPage) {
@@ -118,12 +150,26 @@ const ConnectExternalCluster: React.FC<Props> = ({ nextStep, project }) => {
           arrow_forward
         </i>
       </PageSection>
+      <NextStep
+        text="Continue"
+        disabled={!enableContinue}
+        onClick={() => nextStep()}
+        status={""}
+        makeFlush={true}
+        clearPosition={true}
+        statusPosition="right"
+        saveText=""
+      />
     </StyledClusterInstructionsModal>
   );
 };
 
 export default ConnectExternalCluster;
 
+const NextStep = styled(SaveButton)`
+  margin-top: 24px;
+`;
+
 const PageCount = styled.div`
   margin-right: 9px;
   user-select: none;