Display options groundwork & config for boolean, number

mathesar_ui/src/component-library/button/Button.scss

@@ -9,6 +9,7 @@ button.btn {
   border-radius: 4px;
   box-shadow: #000 0 0 0 0, #000 0 0 0 0, rgba(0, 0, 0, 0.05) 0 1px 2px 0;
   font-weight: inherit;
+  position: relative;
 
   > * + * {
     margin-left: 4px;

mathesar_ui/src/component-library/common/styles/components/input.scss

@@ -19,10 +19,10 @@
   }
 
   &:disabled {
-    background: #efefef;
+    background: var(--input-disabled-background);
   }
 
   &.has-error {
-    background: #fde9e9;
+    background: var(--danger-background-color);
   }
 }

mathesar_ui/src/component-library/common/styles/main.scss

@@ -1 +1,2 @@
+@import './variables.scss';
 @import 'components/input.scss';

mathesar_ui/src/component-library/common/styles/variables.scss

@@ -1,3 +1,12 @@
 /**
  * File to place common css & scss variables for the component library
  */
+:root {
+  // Danger colors
+  --danger-color: #d67171;
+  --danger-background-color: #fde9e9;
+  --dander-border-color: #f2aaaa;
+
+  // Input specific
+  --input-disabled-background: #efefef;
+}

mathesar_ui/src/utils/storeUtils.test.ts → mathesar_ui/src/component-library/common/utils/__tests__/storeUtils.test.ts

@@ -1,5 +1,5 @@
 import { get, writable } from 'svelte/store';
-import { collapse, unite } from './storeUtils';
+import { collapse, unite } from '../storeUtils';
 
 test('collapse', () => {
   const innerA = writable(21);

mathesar_ui/src/component-library/common/utils/storeUtils.ts

@@ -1,5 +1,5 @@
 import type { Readable } from 'svelte/store';
-import { readable } from 'svelte/store';
+import { readable, derived } from 'svelte/store';
 
 export function isReadable<T>(v: Readable<T> | T): v is Readable<T> {
   return (
@@ -15,3 +15,42 @@ export function ensureReadable<T>(v: Readable<T> | T): Readable<T> {
   }
   return readable(v);
 }
+
+/**
+ * Collapse two nested stores into a single store.
+ */
+export function collapse<T>(outerStore: Readable<Readable<T>>): Readable<T> {
+  // This is memory-safe because the Unsubscriber function gets returned from
+  // the callback passed to `derive`.
+  //
+  // From https://svelte.dev/docs#run-time-svelte-store-derived
+  //
+  // > If you return a function from the callback, it will be called when a) the
+  // > callback runs again, or b) the last subscriber unsubscribes.
+  return derived(outerStore, (innerStore, set) => innerStore.subscribe(set));
+}
+
+function arrayWithValueSetAtIndex<T>(array: T[], index: number, item: T): T[] {
+  const result = [...array];
+  result[index] = item;
+  return result;
+}
+
+/**
+ * Unite an array of stores into a store of arrays.
+ */
+export function unite<T>(stores: Readable<T>[]): Readable<T[]> {
+  let results: T[] = [];
+  return readable(results, (set) => {
+    const unsubscribers = stores.map((store, index) =>
+      store.subscribe((value) => {
+        results = arrayWithValueSetAtIndex(results, index, value);
+        set(results);
+      }),
+    );
+    // This is memory safe because when the last subscriber unsubscribes from
+    // the `unite` store, the function below will ensure that we're
+    // unsubscribing from all the inner stores.
+    return () => unsubscribers.forEach((unsubscriber) => unsubscriber());
+  });
+}

mathesar_ui/src/component-library/form-builder/FormBuilder.scss

@@ -24,7 +24,7 @@
   .form-input {
     .validation-error {
       margin-top: 5px;
-      color: #d67171;
+      color: var(--danger-color);
     }
   }
 }

mathesar_ui/src/component-library/form-builder/FormBuilder.svelte

@@ -6,7 +6,7 @@
   const dispatch = createEventDispatcher();
 
   export let form: FormBuildConfiguration;
-  $: validationStore = form.validation;
+  $: validationStore = form.validationStore;
 
   function submit() {
     dispatch('submit');
@@ -18,7 +18,6 @@
   <form on:submit|preventDefault={submit}>
     <FormElement
       stores={form.stores}
-      storeUsage={form.storeUsage}
       variables={form.variables}
       element={form.layout}
       validationResult={$validationStore}

mathesar_ui/src/component-library/form-builder/FormElement.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
   import FormInput from './FormInput.svelte';
   import FormLayout from './FormLayout.svelte';
   import Switch from './Switch.svelte';
@@ -12,37 +11,10 @@
 
   export let element: FormElement;
   export let stores: FormBuildConfiguration['stores'];
-  export let storeUsage: FormBuildConfiguration['storeUsage'];
   export let variables: FormBuildConfiguration['variables'];
   export let validationResult: FormValidationResult;
 
   $: store = 'variable' in element ? stores.get(element.variable) : undefined;
-
-  onMount(() => {
-    if ('variable' in element) {
-      const variableName = element.variable;
-      storeUsage.update((existingMap) => {
-        const newMap = new Map(existingMap);
-        const existingCount = newMap.get(variableName) ?? 0;
-        newMap.set(variableName, existingCount + 1);
-        return newMap;
-      });
-
-      return () => {
-        storeUsage.update((existingMap) => {
-          const newMap = new Map(existingMap);
-          const existingCount = newMap.get(variableName) ?? 0;
-          if (existingCount > 0) {
-            newMap.set(variableName, existingCount - 1);
-          } else {
-            newMap.delete(variableName);
-          }
-          return newMap;
-        });
-      };
-    }
-    return () => {};
-  });
 </script>
 
 {#if element.type === 'input' && store}

mathesar_ui/src/component-library/form-builder/If.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
-  import { checkCondition } from './utils';
+  import { computeIfElements } from './utils';
   import type { FormInputStore, ConditionalIfElement } from './types';
 
   export let store: FormInputStore;
   export let condition: ConditionalIfElement['condition'] = 'eq';
   export let value: ConditionalIfElement['value'];
   export let elements: ConditionalIfElement['elements'];
 
-  $: isConditionSatisfied = checkCondition($store, condition, value);
+  $: elementsToDisplay = computeIfElements($store, {
+    condition,
+    value,
+    elements,
+  });
 </script>
 
-{#if isConditionSatisfied}
-  {#each elements || [] as element (element)}
-    <slot {element} />
-  {/each}
-{/if}
+{#each elementsToDisplay as element (element)}
+  <slot {element} />
+{/each}

mathesar_ui/src/component-library/form-builder/Switch.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
+  import { computeSwitchElements } from './utils';
   import type { FormInputStore, ConditionalSwitchElement } from './types';
 
   export let store: FormInputStore;
   export let cases: ConditionalSwitchElement['cases'];
 
-  // @ts-ignore: https://github.com/centerofci/mathesar/issues/1055
-  $: elements = cases[$store?.toString()] || cases.default || [];
+  $: elementsToDisplay = computeSwitchElements($store, { cases });
 </script>
 
-{#each elements as element (element)}
+{#each elementsToDisplay as element (element)}
   <slot {element} />
 {/each}

mathesar_ui/src/component-library/form-builder/__meta__/formFactory.test.ts

@@ -0,0 +1,129 @@
+import { get } from 'svelte/store';
+import { makeForm } from '../formFactory';
+
+describe('Form factory tests', () => {
+  test('values should only return values of stores in use', () => {
+    const form = makeForm({
+      variables: {
+        valueInUse: { type: 'string', default: 'valueInUse' },
+        conditionalValue: { type: 'string', default: 'valid' },
+        valueNotInUse: { type: 'string', default: 'valueNotInUse' },
+        valueHiddenByIf: { type: 'string', default: 'valueHiddenByIf' },
+        valueShownByIf: { type: 'string', default: 'valueShownByIf' },
+        valueHiddenBySwitch: { type: 'string', default: 'valueHiddenBySwitch' },
+        valueShownBySwitch: { type: 'string', default: 'valueShownBySwitch' },
+      },
+      layout: {
+        orientation: 'vertical',
+        elements: [
+          {
+            type: 'input',
+            variable: 'valueInUse',
+          },
+          {
+            type: 'if',
+            variable: 'conditionalValue',
+            condition: 'eq',
+            value: 'valid',
+            elements: [
+              {
+                type: 'input',
+                variable: 'valueShownByIf',
+              },
+            ],
+          },
+          {
+            type: 'if',
+            variable: 'conditionalValue',
+            condition: 'eq',
+            value: 'invalid',
+            elements: [
+              {
+                type: 'input',
+                variable: 'valueHiddenByIf',
+              },
+            ],
+          },
+          {
+            type: 'switch',
+            variable: 'conditionalValue',
+            cases: {
+              valid: [
+                {
+                  type: 'input',
+                  variable: 'valueShownBySwitch',
+                },
+              ],
+              invalid: [
+                {
+                  type: 'input',
+                  variable: 'valueHiddenBySwitch',
+                },
+              ],
+            },
+          },
+        ],
+      },
+    });
+
+    expect(get(form.values)).toEqual(
+      expect.objectContaining({
+        valueInUse: 'valueInUse',
+        valueShownByIf: 'valueShownByIf',
+        valueShownBySwitch: 'valueShownBySwitch',
+      }),
+    );
+  });
+
+  test('validation', () => {
+    const form = makeForm(
+      {
+        variables: {
+          validVariable: {
+            type: 'string',
+            validation: {
+              checks: ['isEmpty'],
+            },
+          },
+          invalidVariable: {
+            type: 'string',
+            validation: {
+              checks: ['isEmpty'],
+            },
+          },
+        },
+        layout: {
+          orientation: 'vertical',
+          elements: [
+            {
+              type: 'input',
+              variable: 'validVariable',
+            },
+            {
+              type: 'input',
+              variable: 'invalidVariable',
+            },
+          ],
+        },
+      },
+      {
+        validVariable: 'valid',
+      },
+    );
+    expect(form.getValidationResult()).toEqual(
+      expect.objectContaining({
+        isValid: false,
+        failedChecks: {
+          invalidVariable: ['isEmpty'],
+        },
+      }),
+    );
+    form.stores.get('invalidVariable')?.set('validValue');
+    expect(form.getValidationResult()).toEqual(
+      expect.objectContaining({
+        isValid: true,
+        failedChecks: {},
+      }),
+    );
+  });
+});