Merge remote-tracking branch 'origin/develop' into feature/required-field-focus

2024-07-13 18:26:06 +12:00 · 2022-05-23 16:13:26 +01:00 · 2022-05-23 16:13:26 +01:00 · b60e03f8f1
parent 253642ad1f 6a6789ca91
commit b60e03f8f1
18 changed files with 371 additions and 288 deletions
--- a/lerna.json
+++ b/lerna.json
@ -1,5 +1,5 @@
 {
-  "version": "1.0.167-alpha.8",
+  "version": "1.0.167-alpha.9",
  "npmClient": "yarn",
  "packages": [
    "packages/*"
--- a/packages/backend-core/package.json
+++ b/packages/backend-core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/backend-core",
-  "version": "1.0.167-alpha.8",
+  "version": "1.0.167-alpha.9",
  "description": "Budibase backend core libraries used in server and worker",
  "main": "src/index.js",
  "author": "Budibase",
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@ -1,7 +1,7 @@
 {
  "name": "@budibase/bbui",
  "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.167-alpha.8",
+  "version": "1.0.167-alpha.9",
  "license": "MPL-2.0",
  "svelte": "src/index.js",
  "module": "dist/bbui.es.js",
@ -38,7 +38,7 @@
  ],
  "dependencies": {
    "@adobe/spectrum-css-workflow-icons": "^1.2.1",
-    "@budibase/string-templates": "^1.0.167-alpha.8",
+    "@budibase/string-templates": "^1.0.167-alpha.9",
    "@spectrum-css/actionbutton": "^1.0.1",
    "@spectrum-css/actiongroup": "^1.0.1",
    "@spectrum-css/avatar": "^3.0.2",
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/builder",
-  "version": "1.0.167-alpha.8",
+  "version": "1.0.167-alpha.9",
  "license": "GPL-3.0",
  "private": true,
  "scripts": {
@ -69,10 +69,10 @@
    }
  },
  "dependencies": {
-    "@budibase/bbui": "^1.0.167-alpha.8",
-    "@budibase/client": "^1.0.167-alpha.8",
-    "@budibase/frontend-core": "^1.0.167-alpha.8",
-    "@budibase/string-templates": "^1.0.167-alpha.8",
+    "@budibase/bbui": "^1.0.167-alpha.9",
+    "@budibase/client": "^1.0.167-alpha.9",
+    "@budibase/frontend-core": "^1.0.167-alpha.9",
+    "@budibase/string-templates": "^1.0.167-alpha.9",
    "@sentry/browser": "5.19.1",
    "@spectrum-css/page": "^3.0.1",
    "@spectrum-css/vars": "^3.0.1",
--- a/packages/builder/src/builderStore/store/automation/index.js
+++ b/packages/builder/src/builderStore/store/automation/index.js
@ -105,9 +105,7 @@ const automationActions = store => ({
  },
  select: automation => {
    store.update(state => {
-      let testResults = state.selectedAutomation?.testResults
      state.selectedAutomation = new Automation(cloneDeep(automation))
-      state.selectedAutomation.testResults = testResults
      state.selectedBlock = null
      return state
    })
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@ -14,7 +14,6 @@
  } from "@budibase/bbui"

  export let automation
-
  let testDataModal
  let blocks
  let confirmDeleteDialog
@ -41,66 +40,70 @@
 </script>

 <div class="canvas">
-  <div class="content">
-    <div class="title">
-      <div class="subtitle">
-        <Heading size="S">{automation.name}</Heading>
-        <div style="display:flex; align-items: center;">
-          <div class="iconPadding">
-            <div class="icon">
-              <Icon
-                on:click={confirmDeleteDialog.show}
-                hoverable
-                size="M"
-                name="DeleteOutline"
-              />
-            </div>
-          </div>
+  <div style="float: left; padding-left: var(--spacing-xl);">
+    <Heading size="S">{automation.name}</Heading>
+  </div>
+  <div style="float: right; padding-right: var(--spacing-xl);" class="title">
+    <div class="subtitle">
+      <div style="display:flex; align-items: center;">
+        <div class="icon">
+          <Icon
+            on:click={confirmDeleteDialog.show}
+            hoverable
+            size="M"
+            name="DeleteOutline"
+          />
+        </div>
+        <ActionButton
+          on:click={() => {
+            testDataModal.show()
+          }}
+          icon="MultipleCheck"
+          size="M">Run test</ActionButton
+        >
+        <div style="padding-left: var(--spacing-m);">
          <ActionButton
+            disabled={!$automationStore.selectedAutomation?.testResults}
            on:click={() => {
-              testDataModal.show()
+              $automationStore.selectedAutomation.automation.showTestPanel = true
            }}
-            icon="MultipleCheck"
-            size="M">Run test</ActionButton
+            size="M">Test Details</ActionButton
          >
        </div>
      </div>
    </div>
-    {#each blocks as block, idx (block.id)}
-      <div
-        class="block"
-        animate:flip={{ duration: 500 }}
-        in:fly|local={{ x: 500, duration: 1500 }}
-      >
-        {#if block.stepId !== "LOOP"}
-          <FlowItem {testDataModal} {block} />
-        {/if}
-      </div>
-    {/each}
  </div>
-  <ConfirmDialog
-    bind:this={confirmDeleteDialog}
-    okText="Delete Automation"
-    onOk={deleteAutomation}
-    title="Confirm Deletion"
-  >
-    Are you sure you wish to delete the automation
-    <i>{automation.name}?</i>
-    This action cannot be undone.
-  </ConfirmDialog>
-
-  <Modal bind:this={testDataModal} width="30%">
-    <TestDataModal />
-  </Modal>
 </div>
+<div class="content">
+  {#each blocks as block, idx (block.id)}
+    <div
+      class="block"
+      animate:flip={{ duration: 500 }}
+      in:fly|local={{ x: 500, duration: 500 }}
+      out:fly|local={{ x: 500, duration: 500 }}
+    >
+      {#if block.stepId !== "LOOP"}
+        <FlowItem {testDataModal} {block} />
+      {/if}
+    </div>
+  {/each}
+</div>
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  okText="Delete Automation"
+  onOk={deleteAutomation}
+  title="Confirm Deletion"
+>
+  Are you sure you wish to delete the automation
+  <i>{automation.name}?</i>
+  This action cannot be undone.
+</ConfirmDialog>
+
+<Modal bind:this={testDataModal} width="30%">
+  <TestDataModal />
+</Modal>

 <style>
-  .canvas {
-    margin: 0 -40px calc(-1 * var(--spacing-l)) -40px;
-    overflow-y: auto;
-    text-align: center;
-    height: 100%;
-  }
  /* Fix for firefox not respecting bottom padding in scrolling containers */
  .canvas > *:last-child {
    padding-bottom: 40px;
@ -128,10 +131,6 @@
    justify-content: space-between;
    align-items: center;
  }
-  .iconPadding {
-    padding-top: var(--spacing-s);
-  }
-
  .icon {
    cursor: pointer;
    padding-right: var(--spacing-m);
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@ -1,30 +1,27 @@
 <script>
+  import FlowItemHeader from "./FlowItemHeader.svelte"
+
  import { automationStore } from "builderStore"
  import {
    Icon,
    Divider,
    Layout,
-    Body,
    Detail,
    Modal,
    Button,
-    StatusLight,
    Select,
    ActionButton,
    notifications,
  } from "@budibase/bbui"
  import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
  import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
-  import ResultsModal from "./ResultsModal.svelte"
  import ActionModal from "./ActionModal.svelte"
-  import { externalActions } from "./ExternalActions"

  export let block
  export let testDataModal
  let selected
  let webhookModal
  let actionModal
-  let resultsModal
  let blockComplete
  let showLooping = false

@ -32,9 +29,6 @@
  $: showBindingPicker =
    block.stepId === "CREATE_ROW" || block.stepId === "UPDATE_ROW"

-  $: testResult = $automationStore.selectedAutomation.testResults?.steps.filter(
-    step => (block.id ? step.id === block.id : step.stepId === block.stepId)
-  )
  $: isTrigger = block.type === "TRIGGER"

  $: selected = $automationStore.selectedBlock?.id === block.id
@ -182,63 +176,7 @@
    {/if}
  {/if}

-  <div class="blockSection">
-    <div
-      on:click={() => {
-        blockComplete = !blockComplete
-      }}
-      class="splitHeader"
-    >
-      <div class="center-items">
-        {#if externalActions[block.stepId]}
-          <img
-            alt={externalActions[block.stepId].name}
-            width="28px"
-            height="28px"
-            src={externalActions[block.stepId].icon}
-          />
-        {:else}
-          <svg
-            width="28px"
-            height="28px"
-            class="spectrum-Icon"
-            style="color:grey;"
-            focusable="false"
-          >
-            <use xlink:href="#spectrum-icon-18-{block.icon}" />
-          </svg>
-        {/if}
-        <div class="iconAlign">
-          {#if isTrigger}
-            <Body size="XS">When this happens:</Body>
-          {:else}
-            <Body size="XS">Do this:</Body>
-          {/if}
-
-          <Detail size="S">{block?.name?.toUpperCase() || ""}</Detail>
-        </div>
-      </div>
-      <div class="blockTitle">
-        {#if testResult && testResult[0]}
-          <div style="float: right;" on:click={() => resultsModal.show()}>
-            <StatusLight
-              positive={isTrigger || testResult[0].outputs?.success}
-              negative={!testResult[0].outputs?.success}
-              ><Body size="XS">View response</Body></StatusLight
-            >
-          </div>
-        {/if}
-        <div
-          style="margin-left: 10px;"
-          on:click={() => {
-            onSelect(block)
-          }}
-        >
-          <Icon name={blockComplete ? "ChevronDown" : "ChevronUp"} />
-        </div>
-      </div>
-    </div>
-  </div>
+  <FlowItemHeader bind:blockComplete {block} {testDataModal} />
  {#if !blockComplete}
    <Divider noMargin />
    <div class="blockSection">
@ -283,10 +221,6 @@
    </div>
  {/if}

-  <Modal bind:this={resultsModal} width="30%">
-    <ResultsModal {isTrigger} {testResult} />
-  </Modal>
-
  <Modal bind:this={actionModal} width="30%">
    <ActionModal {blockIdx} bind:blockComplete />
  </Modal>
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
@ -0,0 +1,111 @@
+<script>
+  import { automationStore } from "builderStore"
+  import { Icon, Body, Detail, StatusLight } from "@budibase/bbui"
+  import { externalActions } from "./ExternalActions"
+
+  export let block
+  export let blockComplete
+  export let showTestStatus = false
+  export let showParameters = {}
+
+  $: testResult =
+    $automationStore.selectedAutomation?.testResults?.steps.filter(step =>
+      block.id ? step.id === block.id : step.stepId === block.stepId
+    )
+  $: isTrigger = block.type === "TRIGGER"
+
+  async function onSelect(block) {
+    await automationStore.update(state => {
+      state.selectedBlock = block
+      return state
+    })
+  }
+</script>
+
+<div class="blockSection">
+  <div
+    on:click={() => {
+      blockComplete = !blockComplete
+      showParameters[block.id] = blockComplete
+    }}
+    class="splitHeader"
+  >
+    <div class="center-items">
+      {#if externalActions[block.stepId]}
+        <img
+          alt={externalActions[block.stepId].name}
+          width="28px"
+          height="28px"
+          src={externalActions[block.stepId].icon}
+        />
+      {:else}
+        <svg
+          width="28px"
+          height="28px"
+          class="spectrum-Icon"
+          style="color:grey;"
+          focusable="false"
+        >
+          <use xlink:href="#spectrum-icon-18-{block.icon}" />
+        </svg>
+      {/if}
+      <div class="iconAlign">
+        {#if isTrigger}
+          <Body size="XS">When this happens:</Body>
+        {:else}
+          <Body size="XS">Do this:</Body>
+        {/if}
+
+        <Detail size="S">{block?.name?.toUpperCase() || ""}</Detail>
+      </div>
+    </div>
+    <div class="blockTitle">
+      {#if showTestStatus && testResult && testResult[0]}
+        <div style="float: right;">
+          <StatusLight
+            positive={isTrigger || testResult[0].outputs?.success}
+            negative={!testResult[0].outputs?.success}
+            ><Body size="XS"
+              >{testResult[0].outputs?.success || isTrigger
+                ? "Success"
+                : "Error"}</Body
+            ></StatusLight
+          >
+        </div>
+      {/if}
+      <div
+        style="margin-left: 10px; margin-bottom: var(--spacing-xs);"
+        on:click={() => {
+          onSelect(block)
+        }}
+      >
+        <Icon name={blockComplete ? "ChevronUp" : "ChevronDown"} />
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .center-items {
+    display: flex;
+    align-items: center;
+  }
+  .splitHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .iconAlign {
+    padding: 0 0 0 var(--spacing-m);
+    display: inline-block;
+  }
+
+  .blockSection {
+    padding: var(--spacing-xl);
+  }
+
+  .blockTitle {
+    display: flex;
+    align-items: center;
+  }
+</style>
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte
@ -1,133 +0,0 @@
-<script>
-  import { ModalContent, Icon, Detail, TextArea, Label } from "@budibase/bbui"
-
-  export let testResult
-  export let isTrigger
-  let inputToggled
-  let outputToggled
-</script>
-
-<ModalContent
-  showCloseIcon={false}
-  showConfirmButton={false}
-  cancelText="Close"
->
-  <div slot="header" class="result-modal-header">
-    <span>Test Results</span>
-    <div>
-      {#if isTrigger || testResult[0].outputs.success}
-        <div class="iconSuccess">
-          <Icon size="S" name="CheckmarkCircle" />
-        </div>
-      {:else}
-        <div class="iconFailure">
-          <Icon size="S" name="CloseCircle" />
-        </div>
-      {/if}
-    </div>
-  </div>
-  <span>
-    {#if testResult[0].outputs.iterations}
-      <div style="display: flex;">
-        <Icon name="Reuse" />
-        <div style="margin-left: 10px;">
-          <Label>
-            This loop ran {testResult[0].outputs.iterations} times.</Label
-          >
-        </div>
-      </div>
-    {/if}
-  </span>
-  <div
-    on:click={() => {
-      inputToggled = !inputToggled
-    }}
-    class="toggle splitHeader"
-  >
-    <div>
-      <div style="display: flex; align-items: center;">
-        <span style="padding-left: var(--spacing-s);">
-          <Detail size="S">Input</Detail>
-        </span>
-      </div>
-    </div>
-    <div>
-      {#if inputToggled}
-        <Icon size="M" name="ChevronDown" />
-      {:else}
-        <Icon size="M" name="ChevronRight" />
-      {/if}
-    </div>
-  </div>
-  {#if inputToggled}
-    <div class="text-area-container">
-      <TextArea
-        disabled
-        value={JSON.stringify(testResult[0].inputs, null, 2)}
-      />
-    </div>
-  {/if}
-
-  <div
-    on:click={() => {
-      outputToggled = !outputToggled
-    }}
-    class="toggle splitHeader"
-  >
-    <div>
-      <div style="display: flex; align-items: center;">
-        <span style="padding-left: var(--spacing-s);">
-          <Detail size="S">Output</Detail>
-        </span>
-      </div>
-    </div>
-    <div>
-      {#if outputToggled}
-        <Icon size="M" name="ChevronDown" />
-      {:else}
-        <Icon size="M" name="ChevronRight" />
-      {/if}
-    </div>
-  </div>
-  {#if outputToggled}
-    <div class="text-area-container">
-      <TextArea
-        disabled
-        value={JSON.stringify(testResult[0].outputs, null, 2)}
-      />
-    </div>
-  {/if}
-</ModalContent>
-
-<style>
-  .result-modal-header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  .iconSuccess {
-    color: var(--spectrum-global-color-green-600);
-  }
-
-  .iconFailure {
-    color: var(--spectrum-global-color-red-600);
-  }
-
-  .splitHeader {
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .toggle {
-    display: flex;
-    align-items: center;
-  }
-
-  .text-area-container :global(textarea) {
-    height: 150px;
-  }
-</style>
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
@ -51,6 +51,7 @@
        $automationStore.selectedAutomation?.automation,
        testData
      )
+      $automationStore.selectedAutomation.automation.showTestPanel = true
    } catch (error) {
      notifications.error("Error testing notification")
    }
--- a/packages/builder/src/components/automation/AutomationBuilder/TestPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/TestPanel.svelte
@ -0,0 +1,146 @@
+<script>
+  import { Icon, Divider, Tabs, Tab, TextArea, Label } from "@budibase/bbui"
+  import FlowItemHeader from "./FlowChart/FlowItemHeader.svelte"
+  import { automationStore } from "builderStore"
+
+  export let automation
+
+  let showParameters
+  let blocks
+
+  $: {
+    blocks = []
+    if (automation) {
+      if (automation.definition.trigger) {
+        blocks.push(automation.definition.trigger)
+      }
+      blocks = blocks
+        .concat(automation.definition.steps || [])
+        .filter(x => x.stepId !== "LOOP")
+    }
+  }
+
+  $: testResults =
+    $automationStore.selectedAutomation?.testResults?.steps.filter(
+      x => x.stepId !== "LOOP" || []
+    )
+</script>
+
+<div class="title">
+  <div class="title-text">
+    <Icon name="MultipleCheck" />
+    <div style="padding-left: var(--spacing-l)">Test Details</div>
+  </div>
+  <div style="padding-right: var(--spacing-xl)">
+    <Icon
+      on:click={async () => {
+        $automationStore.selectedAutomation.automation.showTestPanel = false
+      }}
+      hoverable
+      name="Close"
+    />
+  </div>
+</div>
+
+<Divider />
+
+<div class="container">
+  {#each blocks as block, idx}
+    <div class="block">
+      {#if block.stepId !== "LOOP"}
+        <FlowItemHeader showTestStatus={true} bind:showParameters {block} />
+        {#if showParameters && showParameters[block.id]}
+          <Divider noMargin />
+          {#if testResults?.[idx]?.outputs.iterations}
+            <div style="display: flex; padding: 10px 10px 0px 12px;">
+              <Icon name="Reuse" />
+              <div style="margin-left: 10px;">
+                <Label>
+                  This loop ran {testResults?.[idx]?.outputs.iterations} times.</Label
+                >
+              </div>
+            </div>
+          {/if}
+
+          <div class="tabs">
+            <Tabs quiet noPadding selected="Input">
+              <Tab title="Input">
+                <div style="padding: 10px 10px 10px 10px;">
+                  <TextArea
+                    minHeight="80px"
+                    disabled
+                    value={JSON.stringify(testResults?.[idx]?.inputs, null, 2)}
+                  />
+                </div></Tab
+              >
+              <Tab title="Output">
+                <div style="padding: 10px 10px 10px 10px;">
+                  <TextArea
+                    minHeight="100px"
+                    disabled
+                    value={JSON.stringify(testResults?.[idx]?.outputs, null, 2)}
+                  />
+                </div>
+              </Tab>
+            </Tabs>
+          </div>
+        {/if}
+      {/if}
+    </div>
+    {#if blocks.length - 1 !== idx}
+      <div class="separator" />
+    {/if}
+  {/each}
+</div>
+
+<style>
+  .container {
+    padding: 0px 30px 0px 30px;
+  }
+  .title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-xs);
+    padding-left: var(--spacing-xl);
+    justify-content: space-between;
+  }
+
+  .tabs {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    position: relative;
+    flex: 1 1 auto;
+  }
+
+  .title-text {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .title :global(h1) {
+    flex: 1 1 auto;
+  }
+
+  .block {
+    display: inline-block;
+    width: 400px;
+    font-size: 16px;
+    background-color: var(--background);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px 4px 4px 4px;
+  }
+
+  .separator {
+    width: 1px;
+    height: 40px;
+    border-left: 1px dashed var(--grey-4);
+    color: var(--grey-4);
+    /* center horizontally */
+    text-align: center;
+    margin-left: 50%;
+  }
+</style>
--- a/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
@ -4,7 +4,12 @@
  import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
  import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
  import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
-  $: automation = $automationStore.automations[0]
+  import TestPanel from "components/automation/AutomationBuilder/TestPanel.svelte"
+
+  $: automation =
+    $automationStore.selectedAutomation?.automation ||
+    $automationStore.automations[0]
+
  let modal
  let webhookModal
 </script>
@ -39,6 +44,12 @@
      </div>
    {/if}
  </div>
+
+  {#if automation?.showTestPanel}
+    <div class="setup">
+      <TestPanel {automation} />
+    </div>
+  {/if}
  <Modal bind:this={modal}>
    <CreateAutomationModal {webhookModal} />
  </Modal>
@ -52,7 +63,9 @@
    flex: 1 1 auto;
    height: 0;
    display: grid;
-    grid-template-columns: 260px minmax(510px, 1fr);
+    grid-auto-flow: column dense;
+    grid-template-columns: 260px minmax(510px, 1fr) fit-content(500px);
+    overflow: hidden;
  }

  .nav {
@ -64,17 +77,18 @@
    border-right: var(--border-light);
    background-color: var(--background);
    padding-bottom: 60px;
+    overflow: hidden;
  }

  .content {
    position: relative;
-    padding: var(--spacing-l) 40px;
+    padding-top: var(--spacing-l);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--spacing-l);
-    overflow: hidden;
+    overflow: auto;
  }
  .centered {
    top: 0;
@ -92,4 +106,17 @@
  .main {
    width: 300px;
  }
+
+  .setup {
+    padding-top: var(--spectrum-global-dimension-size-200);
+    border-left: var(--border-light);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+    background-color: var(--background);
+    grid-column: 3;
+    overflow: auto;
+  }
 </style>
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/cli",
-  "version": "1.0.167-alpha.8",
+  "version": "1.0.167-alpha.9",
  "description": "Budibase CLI, for developers, self hosting and migrations.",
  "main": "src/index.js",
  "bin": {
--- a/packages/client/package.json
+++ b/packages/client/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/client",
-  "version": "1.0.167-alpha.8",
+  "version": "1.0.167-alpha.9",
  "license": "MPL-2.0",
  "module": "dist/budibase-client.js",
  "main": "dist/budibase-client.js",
@ -19,9 +19,9 @@
    "dev:builder": "rollup -cw"
  },
  "dependencies": {
-    "@budibase/bbui": "^1.0.167-alpha.8",
-    "@budibase/frontend-core": "^1.0.167-alpha.8",
-    "@budibase/string-templates": "^1.0.167-alpha.8",
+    "@budibase/bbui": "^1.0.167-alpha.9",
+    "@budibase/frontend-core": "^1.0.167-alpha.9",
+    "@budibase/string-templates": "^1.0.167-alpha.9",
    "@spectrum-css/button": "^3.0.3",
    "@spectrum-css/card": "^3.0.3",
    "@spectrum-css/divider": "^1.0.3",
--- a/packages/frontend-core/package.json
+++ b/packages/frontend-core/package.json
@ -1,12 +1,12 @@
 {
  "name": "@budibase/frontend-core",
-  "version": "1.0.167-alpha.8",
+  "version": "1.0.167-alpha.9",
  "description": "Budibase frontend core libraries used in builder and client",
  "author": "Budibase",
  "license": "MPL-2.0",
  "svelte": "src/index.js",
  "dependencies": {
-    "@budibase/bbui": "^1.0.167-alpha.8",
+    "@budibase/bbui": "^1.0.167-alpha.9",
    "lodash": "^4.17.21",
    "svelte": "^3.46.2"
  }
--- a/packages/server/package.json
+++ b/packages/server/package.json
@ -1,7 +1,7 @@
 {
  "name": "@budibase/server",
  "email": "hi@budibase.com",
-  "version": "1.0.167-alpha.8",
+  "version": "1.0.167-alpha.9",
  "description": "Budibase Web Server",
  "main": "src/index.ts",
  "repository": {
@ -69,10 +69,10 @@
  "license": "GPL-3.0",
  "dependencies": {
    "@apidevtools/swagger-parser": "^10.0.3",
-    "@budibase/backend-core": "^1.0.167-alpha.8",
-    "@budibase/client": "^1.0.167-alpha.8",
-    "@budibase/pro": "1.0.167-alpha.8",
-    "@budibase/string-templates": "^1.0.167-alpha.8",
+    "@budibase/backend-core": "^1.0.167-alpha.9",
+    "@budibase/client": "^1.0.167-alpha.9",
+    "@budibase/pro": "1.0.167-alpha.9",
+    "@budibase/string-templates": "^1.0.167-alpha.9",
    "@bull-board/api": "^3.7.0",
    "@bull-board/koa": "^3.7.0",
    "@elastic/elasticsearch": "7.10.0",
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/string-templates",
-  "version": "1.0.167-alpha.8",
+  "version": "1.0.167-alpha.9",
  "description": "Handlebars wrapper for Budibase templating.",
  "main": "src/index.cjs",
  "module": "dist/bundle.mjs",
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@ -1,7 +1,7 @@
 {
  "name": "@budibase/worker",
  "email": "hi@budibase.com",
-  "version": "1.0.167-alpha.8",
+  "version": "1.0.167-alpha.9",
  "description": "Budibase background service",
  "main": "src/index.ts",
  "repository": {
@ -31,9 +31,9 @@
  "author": "Budibase",
  "license": "GPL-3.0",
  "dependencies": {
-    "@budibase/backend-core": "^1.0.167-alpha.8",
-    "@budibase/pro": "1.0.167-alpha.8",
-    "@budibase/string-templates": "^1.0.167-alpha.8",
+    "@budibase/backend-core": "^1.0.167-alpha.9",
+    "@budibase/pro": "1.0.167-alpha.9",
+    "@budibase/string-templates": "^1.0.167-alpha.9",
    "@koa/router": "^8.0.0",
    "@sentry/node": "6.17.7",
    "@techpass/passport-openidconnect": "^0.3.0",