rename string-input and old code

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

@@ -1,9 +1,9 @@
 import React, { useContext, useState } from "react";
-import { Section, FormField, StringInputField, CheckboxField } from "./types";
+import { Section, FormField, InputField, CheckboxField } from "./types";
 import TabRegion, { TabOption } from "../TabRegion";
 import Heading from "../values-form/Heading";
 import Helper from "../values-form/Helper";
-import StringInput from "./field-components/StringInput";
+import Input from "./field-components/Input";
 import { PorterFormContext } from "./PorterFormContextProvider";
 import Checkbox from "./field-components/Checkbox";
 import styled from "styled-components";
@@ -38,8 +38,8 @@ const PorterForm: React.FC<Props> = (props) => {
         return <Heading>{field.label}</Heading>;
       case "subtitle":
         return <Helper>{field.label}</Helper>;
-      case "string-input":
-        return <StringInput {...(bundledProps as StringInputField)} />;
+      case "input":
+        return <Input {...(bundledProps as InputField)} />;
       case "checkbox":
         return <Checkbox {...(bundledProps as CheckboxField)} />;
     }

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

@@ -8,7 +8,7 @@ import {
   GetFinalVariablesFunction,
 } from "./types";
 import { ShowIf, ShowIfAnd, ShowIfNot, ShowIfOr } from "../../shared/types";
-import { getFinalVariablesForStringInput } from "./field-components/StringInput";
+import { getFinalVariablesForStringInput } from "./field-components/Input";
 
 interface Props {
   rawFormData: PorterFormData;
@@ -141,6 +141,60 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
     return false;
   };
 
+  /*
+    Takes in old form data and changes it to use newer fields
+    For example, number-input becomes input with a setting that makes it
+    a number input
+   */
+  const restructureToNewFields = (data: PorterFormData) => {
+    return {
+      ...data,
+      tabs: data.tabs.map((tab) => {
+        return {
+          ...tab,
+          sections: tab.sections.map((section) => {
+            return {
+              ...section,
+              contents: section.contents.map((field: any) => {
+                if (field.type == "number-input") {
+                  return {
+                    ...field,
+                    type: "input",
+                    settings: {
+                      ...field.settings,
+                      type: "number",
+                    },
+                  };
+                }
+                if (field.type == "string-input") {
+                  return {
+                    ...field,
+                    type: "input",
+                    settings: {
+                      ...field.settings,
+                      type: "string",
+                    },
+                  };
+                }
+                if (field.type == "string-input-password") {
+                  return {
+                    ...field,
+                    type: "input",
+                    settings: {
+                      ...field.settings,
+                      type: "password",
+                    },
+                  };
+                }
+                return field;
+              }),
+            };
+          }),
+        };
+      }),
+    };
+  };
+
   /*
   We don't want to have the actual <PorterForm> component to do as little form
   logic as possible, so this structures the form object based on show_if statements
@@ -211,7 +265,10 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
       .map((id) => state.components[id]?.validation.validated)
       .every((x) => x);
 
-  const formData = computeFormStructure(props.rawFormData, state.variables);
+  const formData = computeFormStructure(
+    restructureToNewFields(props.rawFormData),
+    state.variables
+  );
   const [requiredIds, varMapping] = computeRequiredVariables(formData);
   const isValidated = doValidation(requiredIds);
 

dashboard/src/components/form-refactor/field-components/StringInput.tsx → dashboard/src/components/form-refactor/field-components/Input.tsx

@@ -4,15 +4,15 @@ import useFormField from "../hooks/useFormField";
 import {
   GenericInputField,
   GetFinalVariablesFunction,
-  StringInputField,
+  InputField,
   StringInputFieldState,
 } from "../types";
 
-interface Props extends StringInputField {
+interface Props extends InputField {
   id: string;
 }
 
-const StringInput: React.FC<Props> = ({
+const Input: React.FC<Props> = ({
   id,
   variable,
   label,
@@ -83,7 +83,7 @@ const StringInput: React.FC<Props> = ({
 
 export const getFinalVariablesForStringInput: GetFinalVariablesFunction = (
   vars,
-  props: StringInputField
+  props: InputField
 ) => {
   if (vars[props.variable])
     return {
@@ -97,4 +97,4 @@ export const getFinalVariablesForStringInput: GetFinalVariablesFunction = (
   };
 };
 
-export default StringInput;
+export default Input;

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

@@ -32,8 +32,8 @@ export interface StringInputFieldSettings {
   default: string|number;
 }
 
-export interface StringInputField extends GenericInputField {
-  type: "string-input";
+export interface InputField extends GenericInputField {
+  type: "input";
   label?: string;
   placeholder?: string;
   info?: string;
@@ -45,7 +45,7 @@ export interface CheckboxField extends GenericInputField {
   label?: string;
 }
 
-export type FormField = HeadingField|SubtitleField|StringInputField|CheckboxField;
+export type FormField = HeadingField|SubtitleField|InputField|CheckboxField;
 
 export interface ShowIfAnd {
   and: ShowIf[];

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

@@ -311,14 +311,14 @@ tabs:
       info: This is some info
       settings:
         type: password
-    - type: string-input
+    - type: number-input
       placeholder: "ex: pilsner"
       label: Non Required Number Input C
       required: false
       variable: field_c
       settings:
         type: number
-    - type: string-input
+    - type: number-input
       placeholder: "ex: pilsner"
       label: Non Required Number Input C with unit
       required: false