provider select

dashboard/src/components/form-refactor/PorterFormContextProvider.tsx

@@ -188,6 +188,16 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
                     },
                   };
                 }
+                if (field.type == "provider-select") {
+                  return {
+                    ...field,
+                    type: "select",
+                    settings: {
+                      ...field.settings,
+                      type: "provider",
+                    },
+                  };
+                }
                 return field;
               }),
             };

dashboard/src/components/form-refactor/field-components/Select.tsx

@@ -1,11 +1,32 @@
-import React from "react";
+import React, { useContext } from "react";
 import { SelectField, SelectFieldState } from "../types";
 import Selector from "../../Selector";
 import styled from "styled-components";
 import useFormField from "../hooks/useFormField";
+import { Context } from "../../../shared/Context";
 
 const Select: React.FC<SelectField> = (props) => {
-  const { variables, setVars } = useFormField<SelectFieldState>(props.id, {});
+  const { currentCluster } = useContext(Context);
+  console.log(currentCluster.service);
+  const { variables, setVars } = useFormField<SelectFieldState>(props.id, {
+    initVars: {
+      [props.variable]: props.settings.default
+        ? props.settings.default
+        : props.settings.type == "provider"
+        ? ({
+            gke: "gcp",
+            eks: "aws",
+            doks: "do",
+          } as Record<string, string>)[currentCluster.service] || "aws"
+        : props.settings.options[0].value,
+    },
+  });
+
+  const providerOptions = [
+    { value: "aws", label: "Amazon Web Services (AWS)" },
+    { value: "gcp", label: "Google Cloud Platform (GCP)" },
+    { value: "do", label: "DigitalOcean" },
+  ];
 
   return (
     <StyledSelectRow>
@@ -20,7 +41,11 @@ const Select: React.FC<SelectField> = (props) => {
               };
             });
           }}
-          options={props.settings.options}
+          options={
+            props.settings.type == "provider"
+              ? providerOptions
+              : props.settings.options
+          }
           dropdownLabel={props.dropdownLabel}
           width={props.width || "270px"}
           dropdownWidth={props.width}

dashboard/src/components/form-refactor/types.ts

@@ -62,7 +62,12 @@ export interface ArrayInputField extends GenericInputField {
 export interface SelectField extends GenericInputField {
   type: "select"
   settings: {
+    type: "normal"
     options: { value: string; label: string }[]
+    default?: string,
+  }|{
+    type: "provider"
+    default?: string,
   }
   width: string;
   label?: string;

dashboard/src/components/values-form/FormDebugger.tsx

@@ -295,6 +295,9 @@ tabs:
             value: 2
           - label: Three
             value: 3
+      - type: provider-select
+        label: Testing Provider Select
+        variable: provider-select-variable
         
 - name: main
   label: Basic Inputs