Added external options for provider selector

dashboard/src/main/home/onboarding/components/ProviderSelector.tsx

@@ -8,11 +8,19 @@ export type ProviderSelectorProps = {
   selectProvider: (
     provider: SupportedProviders | (SupportedProviders | "external")
   ) => void;
-  enableExternal?: boolean;
-  enableSkip?: boolean;
+  options: {
+    value: string;
+    icon: string;
+    label: string;
+  }[];
 };
 
-const baseOptions = [
+export const registryOptions = [
+  {
+    value: "skip",
+    label: "Skip / I don't know what this is",
+    icon: "",
+  },
   {
     value: "aws",
     icon: integrationList["aws"]?.icon,
@@ -30,69 +38,50 @@ const baseOptions = [
   },
 ];
 
-const skipOption = {
-  value: "skip",
-  label: "Skip / I don't know what this is",
-  icon: "",
-};
-
-const externalOption = {
-  value: "external",
-  icon: integrationList["kubernetes"]?.icon,
-  label: "Link to an existing cluster",
-};
+export const provisionerOptions = [
+  {
+    value: "aws",
+    icon: integrationList["aws"]?.icon,
+    label: "Amazon Web Services (AWS)",
+  },
+  {
+    value: "gcp",
+    icon: integrationList["gcp"]?.icon,
+    label: "Google Cloud Platform (GCP)",
+  },
+  {
+    value: "do",
+    icon: integrationList["do"]?.icon,
+    label: "DigitalOcean (DO)",
+  },
+];
 
-const dummyOption = {
-  value: "dummy",
-  icon: "",
-  label: "Select a cloud provider",
-};
+export const provisionerOptionsWithExternal = [
+  ...provisionerOptions,
+  {
+    value: "external",
+    icon: integrationList["kubernetes"]?.icon,
+    label: "Link to an existing cluster",
+  },
+];
 
 const ProviderSelector: React.FC<ProviderSelectorProps> = ({
   selectProvider,
-  enableExternal,
-  enableSkip,
+  options,
 }) => {
   const [provider, setProvider] = useState(() => {
-    if (enableSkip) {
+    if (options.find((o) => o.value === "skip")) {
       return "skip";
     }
-
     return null;
   });
 
-  const availableOptions = useMemo(() => {
-    let options = [...baseOptions];
-    if (enableSkip) {
-      // Check if dummy option was deleted or not
-      const dummyOptionIndex = options.findIndex((o) => o.value === "dummy");
-      if (dummyOptionIndex >= 0) {
-        options.splice(dummyOptionIndex, 1);
-      }
-      options.unshift(skipOption);
-    } else {
-      // Check if skip option was deleted or not
-      const skipOptionIndex = options.findIndex((o) => o.value === "skip");
-      if (skipOptionIndex >= 0) {
-        options.splice(skipOptionIndex, 1);
-      }
-    }
-
-    if (enableExternal) {
-      if (!options.find((o) => o.value === "external")) {
-        options.push(externalOption);
-      }
-    }
-
-    return [...options];
-  }, [enableSkip, enableExternal]);
-
   return (
     <>
       <Br />
       <Selector
         activeValue={provider}
-        options={availableOptions}
+        options={options}
         placeholder="Select a cloud provider"
         setActiveValue={(provider) => {
           setProvider(provider);

dashboard/src/main/home/onboarding/steps/ConnectRegistry/ConnectRegistry.tsx

@@ -5,7 +5,9 @@ import React from "react";
 import { useParams } from "react-router";
 
 import styled from "styled-components";
-import ProviderSelector from "../../components/ProviderSelector";
+import ProviderSelector, {
+  registryOptions,
+} from "../../components/ProviderSelector";
 import { SupportedProviders } from "../../types";
 import backArrow from "assets/back_arrow.png";
 
@@ -68,12 +70,12 @@ const ConnectRegistry: React.FC<{
       ) : (
         <>
           <ProviderSelector
-            enableSkip
             selectProvider={(provider) => {
               if (provider !== "external") {
                 onSelectProvider(provider);
               }
             }}
+            options={registryOptions}
           />
           <NextStep
             text="Continue"

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

@@ -4,7 +4,10 @@ import TitleSection from "components/TitleSection";
 import React from "react";
 import { useParams } from "react-router";
 import styled from "styled-components";
-import ProviderSelector from "../../components/ProviderSelector";
+import ProviderSelector, {
+  provisionerOptions,
+  provisionerOptionsWithExternal,
+} from "../../components/ProviderSelector";
 
 import FormFlowWrapper from "./forms/FormFlow";
 import ConnectExternalCluster from "./forms/_ConnectExternalCluster";
@@ -80,8 +83,11 @@ const ProvisionResources: React.FC<Props> = ({
               selectProvider={(provider) => {
                 onSelectProvider(provider);
               }}
-              enableSkip={false}
-              enableExternal={!shouldProvisionRegistry}
+              options={
+                shouldProvisionRegistry
+                  ? provisionerOptions
+                  : provisionerOptionsWithExternal
+              }
             />
           </>
         );