select

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

@@ -6,6 +6,7 @@ import {
   CheckboxField,
   KeyValueArrayField,
   ArrayInputField,
+  SelectField,
 } from "./types";
 import TabRegion, { TabOption } from "../TabRegion";
 import Heading from "../values-form/Heading";
@@ -17,6 +18,7 @@ import KeyValueArray from "./field-components/KeyValueArray";
 import styled from "styled-components";
 import SaveButton from "../SaveButton";
 import ArrayInput from "./field-components/ArrayInput";
+import Select from "./field-components/Select";
 
 interface Props {
   leftTabOptions?: TabOption[];
@@ -55,6 +57,8 @@ const PorterForm: React.FC<Props> = (props) => {
         return <KeyValueArray {...(bundledProps as KeyValueArrayField)} />;
       case "array-input":
         return <ArrayInput {...(bundledProps as ArrayInputField)} />;
+      case "select":
+        return <Select {...(bundledProps as SelectField)} />;
     }
     return <p>Not Implemented: {(field as any).type}</p>;
   };

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

@@ -295,7 +295,7 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
     formData.tabs.map((tab) =>
       tab.sections.map((section) =>
         section.contents.map((field) => {
-          if (finalFunctions[field.type])
+          if (finalFunctions[field.type] && state.components[field.id])
             varList.push(
               finalFunctions[field.type](
                 state.variables,

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { SelectField, SelectFieldState } from "../types";
+import Selector from "../../Selector";
+import styled from "styled-components";
+import useFormField from "../hooks/useFormField";
+
+const Select: React.FC<SelectField> = (props) => {
+  const { variables, setVars } = useFormField<SelectFieldState>(props.id, {});
+
+  return (
+    <StyledSelectRow>
+      <Label>{props.label}</Label>
+      <SelectWrapper>
+        <Selector
+          activeValue={variables[props.variable]}
+          setActiveValue={(val) => {
+            setVars(() => {
+              return {
+                [props.variable]: val,
+              };
+            });
+          }}
+          options={props.settings.options}
+          dropdownLabel={props.dropdownLabel}
+          width={props.width || "270px"}
+          dropdownWidth={props.width}
+          dropdownMaxHeight={props.dropdownMaxHeight}
+        />
+      </SelectWrapper>
+    </StyledSelectRow>
+  );
+};
+
+export default Select;
+
+const SelectWrapper = styled.div``;
+
+const Label = styled.div`
+  color: #ffffff;
+  margin-bottom: 10px;
+`;
+
+const StyledSelectRow = styled.div`
+  margin-bottom: 15px;
+  margin-top: 20px;
+`;

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

@@ -59,7 +59,19 @@ export interface ArrayInputField extends GenericInputField {
   label?: string
 }
 
-export type FormField = HeadingField|SubtitleField|InputField|CheckboxField|KeyValueArrayField|ArrayInputField;
+export interface SelectField extends GenericInputField {
+  type: "select"
+  settings: {
+    options: { value: string; label: string }[]
+  }
+  width: string;
+  label?: string;
+  dropdownLabel?: string;
+  dropdownWidth?: number;
+  dropdownMaxHeight?: string;
+}
+
+export type FormField = HeadingField|SubtitleField|InputField|CheckboxField|KeyValueArrayField|ArrayInputField|SelectField;
 
 export interface ShowIfAnd {
   and: ShowIf[];
@@ -110,8 +122,9 @@ export interface KeyValueArrayFieldState {
   showEditorModal: boolean;
 }
 export interface ArrayInputFieldState {}
+export interface SelectFieldState {}
 
-export type PorterFormFieldFieldState = StringInputFieldState|CheckboxFieldState|KeyValueArrayField|ArrayInputFieldState;
+export type PorterFormFieldFieldState = StringInputFieldState|CheckboxFieldState|KeyValueArrayField|ArrayInputFieldState|SelectFieldState;
 
 // reducer interfaces
 

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

@@ -282,8 +282,20 @@ tabs:
   - name: only-section
     contents:
       - type: array-input
-        label: testing array-input
+        label: Testing Array Input
         variable: array-input-variable
+      - type: select
+        label: Testing Select
+        variable: select-variable
+        settings:
+          options:
+          - label: One
+            value: 1
+          - label: Two
+            value: 2
+          - label: Three
+            value: 3
+        
 - name: main
   label: Basic Inputs
   sections:
@@ -297,7 +309,6 @@ tabs:
     - type: string-input
       placeholder: "ex: pilsner"
       label: Required String Input A
-      required: true
       variable: field_a
       info: This is some info
       settings:
@@ -306,7 +317,6 @@ tabs:
     - type: string-input
       placeholder: "ex: pilsner"
       label: Required String Input A with unit
-      required: true
       variable: field_a_unit
       settings:
         type: text
@@ -314,7 +324,6 @@ tabs:
     - type: string-input
       placeholder: "ex: pilsner"
       label: Required Password Input B
-      required: true
       variable: field_b
       info: This is some info
       settings: