change how input props work and add required arguments

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

@@ -22,9 +22,9 @@ const PorterForm: React.FC<Props> = () => {
       case "subtitle":
         return <Helper>{field.label}</Helper>;
       case "string-input":
-        return <StringInput id={id} />;
+        return <StringInput id={id} {...field} />;
     }
-    return <p>Not Implemented: {field.type}</p>;
+    return <p>Not Implemented: {(field as any).type}</p>;
   };
 
   const renderSection = (section: Section): JSX.Element => {

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

@@ -1,13 +1,19 @@
 import React, { useContext, useEffect } from "react";
 import InputRow from "../../values-form/InputRow";
 import useFormField from "../hooks/useFormField";
-import { StringInputFieldState } from "../types";
+import { StringInputField, StringInputFieldState } from "../types";
 
-interface Props {
+interface Props extends StringInputField {
   id: string;
 }
 
-const StringInput: React.FC<Props> = ({ id }) => {
+const StringInput: React.FC<Props> = ({
+  id,
+  label,
+  required,
+  placeholder,
+  info,
+}) => {
   const { state, updateState } = useFormField<StringInputFieldState>(id, {
     value: "",
   });
@@ -30,6 +36,10 @@ const StringInput: React.FC<Props> = ({ id }) => {
           };
         });
       }}
+      label={label}
+      isRequired={required}
+      placeholder={placeholder}
+      info={info}
     />
   );
 };

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

@@ -5,19 +5,25 @@
 
 // YAML Field interfaces
 
-export interface BasicFormField {
-  type: string;
+export interface HeadingField {
+  type: "heading";
+  label: string;
 }
 
-export interface HeadingField extends BasicFormField {
+export interface SubtitleField {
+  type: "subtitle";
   label: string;
 }
 
-export interface SubtitleField extends BasicFormField {
-  label: string;
+export interface StringInputField {
+  type: "string-input";
+  label?: string;
+  required?: boolean;
+  placeholder?: string;
+  info?: string;
 }
 
-export type FormField = HeadingField|SubtitleField;
+export type FormField = HeadingField|SubtitleField|StringInputField;
 
 export interface Section {
   name: string;

dashboard/src/main/home/dashboard/Dashboard.tsx

@@ -35,7 +35,7 @@ class Dashboard extends Component<PropsType, StateType> {
     infras: [] as InfraType[],
     pressingCtrl: false,
     pressingK: false,
-    showFormDebugger: false,
+    showFormDebugger: true,
   };
 
   refreshInfras = () => {