basic conditional logic

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

@@ -280,7 +280,10 @@ tabs:
     - type: subtitle
       label: "Note: Hidden required fields aren't supported yet (global only)"
   - name: controlled-by-external
-    show_if: checkbox_a
+    show_if:
+      or:
+        - checkbox_a
+        - not_a_variable
     contents:
     - type: heading
       label: Conditional Display (A)

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

@@ -1,7 +1,13 @@
 import React, { Component } from "react";
 import styled from "styled-components";
 
-import { Section, FormElement } from "shared/types";
+import {
+  Section,
+  FormElement,
+  ShowIf,
+  ShowIfOr,
+  ShowIfAnd,
+} from "shared/types";
 import { Context } from "shared/Context";
 
 import CheckboxRow from "./CheckboxRow";
@@ -304,17 +310,41 @@ export default class ValuesForm extends Component<PropsType, StateType> {
     });
   };
 
+  evalShowIf = (vals: ShowIf) => {
+    if (!vals) {
+      return false;
+    }
+    if (typeof vals == "string") {
+      return !!this.props.metaState[vals]?.value;
+    }
+    if ((vals as ShowIfOr).or) {
+      vals = vals as ShowIfOr;
+      for (let i = 0; i < vals.or.length; i++) {
+        if (this.evalShowIf(vals.or[i])) {
+          return true;
+        }
+      }
+      return false;
+    }
+    if ((vals as ShowIfAnd).and) {
+      vals = vals as ShowIfAnd;
+      for (let i = 0; i < vals.and.length; i++) {
+        if (!this.evalShowIf(vals.and[i])) {
+          return false;
+        }
+      }
+      return true;
+    }
+
+    return false;
+  };
+
   renderFormContents = () => {
     if (this.props.metaState) {
       return this.props.sections?.map((section: Section, i: number) => {
         // Hide collapsible section if deciding field is false
-        if (section.show_if) {
-          if (
-            !this.props.metaState[section.show_if] ||
-            this.props.metaState[section.show_if].value === false
-          ) {
-            return null;
-          }
+        if (section.show_if && !this.evalShowIf(section.show_if)) {
+          return null;
         }
 
         return <div key={i}>{this.renderSection(section)}</div>;

dashboard/src/shared/types.tsx

@@ -104,9 +104,19 @@ export interface FormYAML {
   }[];
 }
 
+export interface ShowIfAnd {
+  and: ShowIf[];
+}
+
+export interface ShowIfOr {
+  or: ShowIf[];
+}
+
+export type ShowIf = string | ShowIfAnd | ShowIfOr;
+
 export interface Section {
   name?: string;
-  show_if?: string;
+  show_if?: ShowIf;
   contents: FormElement[];
 }