read only options

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

@@ -1,5 +1,11 @@
 import React, { useContext, useState } from "react";
-import { PorterFormData, Section, FormField } from "./types";
+import {
+  PorterFormData,
+  Section,
+  FormField,
+  StringInputField,
+  CheckboxField,
+} from "./types";
 import TabRegion, { TabOption } from "../TabRegion";
 import Heading from "../values-form/Heading";
 import Helper from "../values-form/Helper";
@@ -18,22 +24,26 @@ interface Props {
 }
 
 const PorterForm: React.FC<Props> = (props) => {
-  const { formData } = useContext(PorterFormContext);
+  const { formData, isReadOnly } = useContext(PorterFormContext);
 
   const [currentTab, setCurrentTab] = useState(
     formData.tabs.length > 0 ? formData.tabs[0].name : ""
   );
 
   const renderSectionField = (field: FormField, id: string): JSX.Element => {
+    const bundledProps = {
+      ...field,
+      isReadOnly,
+    };
     switch (field.type) {
       case "heading":
         return <Heading>{field.label}</Heading>;
       case "subtitle":
         return <Helper>{field.label}</Helper>;
       case "string-input":
-        return <StringInput id={id} {...field} />;
+        return <StringInput id={id} {...(bundledProps as StringInputField)} />;
       case "checkbox":
-        return <Checkbox id={id} {...field} />;
+        return <Checkbox id={id} {...(bundledProps as CheckboxField)} />;
     }
     return <p>Not Implemented: {(field as any).type}</p>;
   };

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

@@ -11,12 +11,14 @@ interface Props {
   rawFormData: PorterFormData;
   initialVariables?: PorterFormVariableList;
   overrideVariables?: PorterFormVariableList;
+  isReadOnly?: boolean;
 }
 
 interface ContextProps {
   formData: PorterFormData;
   formState: PorterFormState;
   dispatchAction: (event: PorterFormAction) => void;
+  isReadOnly?: boolean;
 }
 
 export const PorterFormContext = createContext<ContextProps | undefined>(
@@ -147,6 +149,7 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
         formData: formData,
         formState: state,
         dispatchAction: dispatch,
+        isReadOnly: props.isReadOnly,
       }}
     >
       {props.children}

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

@@ -7,7 +7,13 @@ interface Props extends CheckboxField {
   id: string;
 }
 
-const Checkbox: React.FC<Props> = ({ id, label, required, variable }) => {
+const Checkbox: React.FC<Props> = ({
+  id,
+  label,
+  required,
+  variable,
+  isReadOnly,
+}) => {
   const { state, variables, mutateVars } = useFormField<CheckboxFieldState>(
     id,
     {
@@ -35,6 +41,7 @@ const Checkbox: React.FC<Props> = ({ id, label, required, variable }) => {
         });
       }}
       label={label}
+      disabled={isReadOnly}
     />
   );
 };

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

@@ -1,7 +1,11 @@
 import React from "react";
 import InputRow from "../../values-form/InputRow";
 import useFormField from "../hooks/useFormField";
-import { StringInputField, StringInputFieldState } from "../types";
+import {
+  GenericFieldProps,
+  StringInputField,
+  StringInputFieldState,
+} from "../types";
 
 interface Props extends StringInputField {
   id: string;
@@ -15,6 +19,7 @@ const StringInput: React.FC<Props> = ({
   placeholder,
   info,
   settings,
+  isReadOnly,
 }) => {
   const { state, variables, mutateVars } = useFormField<StringInputFieldState>(
     id,
@@ -54,6 +59,7 @@ const StringInput: React.FC<Props> = ({
       isRequired={required}
       placeholder={placeholder}
       info={info}
+      disabled={isReadOnly}
     />
   );
 };

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

@@ -5,6 +5,11 @@
 
 // YAML Field interfaces
 
+export interface GenericFieldProps {
+  isReadOnly?: boolean;
+  required?: boolean;
+}
+
 export interface HeadingField {
   type: "heading";
   label: string;
@@ -21,21 +26,19 @@ export interface StringInputFieldSettings {
   omitUnitFromValue?: boolean;
 }
 
-export interface StringInputField {
+export interface StringInputField extends GenericFieldProps {
   type: "string-input";
   variable: string;
   label?: string;
-  required?: boolean;
   placeholder?: string;
   info?: string;
   settings?: StringInputFieldSettings;
 }
 
-export interface CheckboxField {
+export interface CheckboxField extends GenericFieldProps {
   type: "checkbox";
   label?: string;
   variable: string;
-  required?: boolean;
 }
 
 export type FormField = HeadingField|SubtitleField|StringInputField|CheckboxField;

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

@@ -163,6 +163,7 @@ export default class FormDebugger extends Component<PropsType, StateType> {
           overrideVariables={{
             input_a: this.state.valuesToOverride?.input_a?.value,
           }}
+          isReadOnly={this.state.isReadOnly}
         >
           <PorterForm
             rightTabOptions={this.state.showBonusTabs ? tabOptions : []}