Update builder to support new block definitions with JSON schema

packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte

@@ -2,19 +2,10 @@
   import { backendUiStore } from "builderStore"
 
   export let value
-  $: modelId = value ? value._id : ""
-
-  function onChange(e) {
-    value = $backendUiStore.models.find(model => model._id === e.target.value)
-  }
 </script>
 
 <div class="block-field">
-  <select
+  <select class="budibase__input" bind:value>
-    class="budibase__input"
-    value={modelId}
-    on:blur={onChange}
-    on:change={onChange}>
     <option value="">Choose an option</option>
     {#each $backendUiStore.models as model}
       <option value={model._id}>{model.name}</option>

packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte

@@ -3,31 +3,24 @@
   import { Input, Label } from "@budibase/bbui"
 
   export let value
-  $: modelId = value && value.model ? value.model._id : ""
+  $: value = value || {}
-  $: schemaFields = Object.keys(value && value.model ? value.model.schema : {})
+  $: model = $backendUiStore.models.find(model => model._id === value?.modelId)
-
+  $: schemaFields = Object.keys(model?.schema ?? {})
-  function onChangeModel(e) {
-    value.model = $backendUiStore.models.find(
-      model => model._id === e.target.value
-    )
-  }
 
   function setParsedValue(evt, field) {
-    const fieldSchema = value.model.schema[field]
+    const fieldSchema = model?.schema[field]
+    if (fieldSchema) {
       if (fieldSchema.type === "number") {
         value[field] = parseInt(evt.target.value)
         return
       }
+    }
     value[field] = evt.target.value
   }
 </script>
 
 <div class="block-field">
-  <select
+  <select class="budibase__input" bind:value={value.modelId}>
-    class="budibase__input"
-    value={modelId}
-    on:blur={onChangeModel}
-    on:change={onChangeModel}>
     <option value="">Choose an option</option>
     {#each $backendUiStore.models as model}
       <option value={model._id}>{model.name}</option>
@@ -37,9 +30,8 @@
 
 {#if schemaFields.length}
   <div class="bb-margin-xl block-field">
-    <Label small forAttr={'fields'}>Fields</Label>
     {#each schemaFields as field}
-      <div class="bb-margin-xl">
+      <div class="bb-margin-xl capitalise">
         <Input
           thin
           value={value[field]}
@@ -49,3 +41,9 @@
     {/each}
   </div>
 {/if}
+
+<style>
+  .capitalise :global(label) {
+    text-transform: capitalize !important;
+  }
+</style>

packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte

@@ -1,41 +1,36 @@
 <script>
   import ModelSelector from "./ParamInputs/ModelSelector.svelte"
   import RecordSelector from "./ParamInputs/RecordSelector.svelte"
-  import { Input, TextArea, Select } from "@budibase/bbui"
+  import { Input, TextArea, Select, Label } from "@budibase/bbui"
 
   export let block
-  $: params = block.params ? Object.entries(block.params) : []
+  $: inputs = Object.entries(block.schema?.inputs?.properties || {})
 </script>
 
 <div class="container">
-  <div class="selected-label">{block.name}</div>
+  <div class="block-label">{block.name}</div>
-  {#each params as [parameter, type]}
+  {#each inputs as [key, value]}
-    <div class="block-field">
+    <div class="bb-margin-xl block-field">
-      <label class="label">{parameter}</label>
+      <div class="field-label">{value.title}</div>
-      {#if Array.isArray(type)}
+      {#if value.type === 'string' && value.enum}
-        <Select bind:value={block.args[parameter]} thin secondary>
+        <Select bind:value={block.inputs[key]} thin secondary>
           <option value="">Choose an option</option>
-          {#each type as option}
+          {#each value.enum as option}
             <option value={option}>{option}</option>
           {/each}
         </Select>
-      {:else if type === 'accessLevel'}
+      {:else if value.customType === 'password'}
-        <Select bind:value={block.args[parameter]} thin secondary>
+        <Input type="password" thin bind:value={block.inputs[key]} />
-          <option value="ADMIN">Admin</option>
+      {:else if value.type === 'number'}
-          <option value="POWER_USER">Power User</option>
+        <Input type="number" thin bind:value={block.inputs[key]} />
-        </Select>
+      {:else if value.customType === 'longText'}
-      {:else if type === 'password'}
+        <TextArea type="text" thin bind:value={block.inputs[key]} />
-        <Input type="password" thin bind:value={block.args[parameter]} />
+      {:else if value.customType === 'model'}
-      {:else if type === 'number'}
+        <ModelSelector bind:value={block.inputs[key]} />
-        <Input type="number" thin bind:value={block.args[parameter]} />
+      {:else if value.customType === 'record'}
-      {:else if type === 'longText'}
+        <RecordSelector bind:value={block.inputs[key]} />
-        <TextArea type="text" thin bind:value={block.args[parameter]} />
+      {:else if value.type === 'string'}
-      {:else if type === 'model'}
+        <Input type="text" thin bind:value={block.inputs[key]} />
-        <ModelSelector bind:value={block.args[parameter]} />
-      {:else if type === 'record'}
-        <RecordSelector bind:value={block.args[parameter]} />
-      {:else if type === 'string'}
-        <Input type="text" thin bind:value={block.args[parameter]} />
       {/if}
     </div>
   {/each}
@@ -46,17 +41,16 @@
     display: grid;
   }
 
-  label {
+  .field-label {
-    font-size: 14px;
-    font-family: sans-serif;
-    font-weight: 500;
     color: var(--ink);
     margin-bottom: 12px;
-    text-transform: capitalize;
+    display: flex;
-    margin-top: 20px;
+    font-size: 14px;
+    font-weight: 500;
+    font-family: sans-serif;
   }
 
-  .selected-label {
+  .block-label {
     font-weight: 500;
     font-size: 14px;
     color: var(--grey-7);

packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte

@@ -1,6 +1,6 @@
 <script>
   import mustache from "mustache"
-  import { workflowStore } from "builderStore"
+  import { workflowStore, backendUiStore } from "builderStore"
 
   export let onSelect
   export let block
@@ -13,6 +13,22 @@
   function selectBlock() {
     onSelect(block)
   }
+
+  function enrichInputs(inputs) {
+    let enrichedInputs = { ...inputs, enriched: {} }
+    const modelId = inputs.modelId || inputs.record?.modelId
+    if (modelId) {
+      enrichedInputs.enriched.model = $backendUiStore.models.find(
+        model => model._id === modelId
+      )
+    }
+    return enrichedInputs
+  }
+
+  $: inputs = enrichInputs(block.inputs)
+  $: tagline = block.tagline
+    .replaceAll("{{", "<b>{{")
+    .replaceAll("}}", "}}</b>")
 </script>
 
 <div class={`${block.type} hoverable`} class:selected on:click={selectBlock}>
@@ -30,7 +46,7 @@
   </header>
   <hr />
   <p>
-    {@html mustache.render(block.tagline, block.args)}
+    {@html mustache.render(tagline, { inputs })}
   </p>
 </div>