Merge remote-tracking branch 'origin/master' into feature/change-global-admin-to-creator

2023-10-27 10:00:02 +01:00 · 2023-10-27 10:00:02 +01:00 · 4b1e7359b0
parent 3b3586d2bd 8e3974d912
commit 4b1e7359b0
28 changed files with 798 additions and 238 deletions
--- a/.github/workflows/release-singleimage-test.yml
+++ b/.github/workflows/release-singleimage-test.yml
@ -1,72 +0,0 @@
-name: Test
-
-on:
-  workflow_dispatch:
-
-env:
-  CI: true
-  PERSONAL_ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
-  REGISTRY_URL: registry.hub.docker.com
-  NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
-jobs:
-  build:
-    name: "build"
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [18.x]
-    steps:
-      - name: "Checkout"
-        uses: actions/checkout@v4
-        with:
-          submodules: true
-          token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
-
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: "yarn"
-      - name: Setup QEMU
-        uses: docker/setup-qemu-action@v3
-      - name: Setup Docker Buildx
-        id: buildx
-        uses: docker/setup-buildx-action@v3
-      - name: Run Yarn
-        run: yarn
-      - name: Run Yarn Build
-        run: yarn build --scope @budibase/server --scope @budibase/worker
-      - name: Login to Docker Hub
-        uses: docker/login-action@v2
-        with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_API_KEY }}
-      - name: Get the latest release version
-        id: version
-        run: |
-          release_version=$(cat lerna.json | jq -r '.version')
-          echo $release_version
-          echo "RELEASE_VERSION=$release_version" >> $GITHUB_ENV
-      - name: Tag and release Budibase service docker image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          push: true
-          pull: true
-          platforms: linux/amd64,linux/arm64
-          build-args: BUDIBASE_VERSION=0.0.0+test
-          tags: budibase/budibase-test:test
-          file: ./hosting/single/Dockerfile.v2
-          cache-from: type=registry,ref=budibase/budibase-test:test
-          cache-to: type=inline
-      - name: Tag and release Budibase Azure App Service docker image
-        uses: docker/build-push-action@v2
-        with:
-          context: .
-          push: true
-          platforms: linux/amd64
-          build-args: |
-            TARGETBUILD=aas
-            BUDIBASE_VERSION=0.0.0+test
-          tags: budibase/budibase-test:aas
-          file: ./hosting/single/Dockerfile.v2
--- a/package.json
+++ b/package.json
@ -33,7 +33,6 @@
    "build:sdk": "lerna run --stream build:sdk",
    "deps:circular": "madge packages/server/dist/index.js packages/worker/src/index.ts packages/backend-core/dist/src/index.js packages/cli/src/index.js --circular",
    "release": "lerna publish from-package --yes --force-publish --no-git-tag-version --no-push --no-git-reset",
-    "release:develop": "yarn release --dist-tag develop",
    "restore": "yarn run clean && yarn && yarn run build",
    "nuke": "yarn run nuke:packages && yarn run nuke:docker",
    "nuke:packages": "yarn run restore",
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@ -24,17 +24,23 @@

  let selectedRows = []
  let customRenderers = []
+  let parsedSchema = {}
+
+  $: if (schema) {
+    parsedSchema = Object.keys(schema).reduce((acc, key) => {
+      acc[key] =
+        typeof schema[key] === "string" ? { type: schema[key] } : schema[key]
+
+      if (!canBeSortColumn(acc[key].type)) {
+        acc[key].sortable = false
+      }
+      return acc
+    }, {})
+  }

  $: selectedRows, dispatch("selectionUpdated", selectedRows)
  $: isUsersTable = tableId === TableNames.USERS
  $: data && resetSelectedRows()
-  $: {
-    Object.values(schema || {}).forEach(col => {
-      if (!canBeSortColumn(col.type)) {
-        col.sortable = false
-      }
-    })
-  }
  $: {
    if (isUsersTable) {
      customRenderers = [
@ -44,24 +50,24 @@
        },
      ]
      UNEDITABLE_USER_FIELDS.forEach(field => {
-        if (schema[field]) {
-          schema[field].editable = false
+        if (parsedSchema[field]) {
+          parsedSchema[field].editable = false
        }
      })
-      if (schema.email) {
-        schema.email.displayName = "Email"
+      if (parsedSchema.email) {
+        parsedSchema.email.displayName = "Email"
      }
-      if (schema.roleId) {
-        schema.roleId.displayName = "Role"
+      if (parsedSchema.roleId) {
+        parsedSchema.roleId.displayName = "Role"
      }
-      if (schema.firstName) {
-        schema.firstName.displayName = "First Name"
+      if (parsedSchema.firstName) {
+        parsedSchema.firstName.displayName = "First Name"
      }
-      if (schema.lastName) {
-        schema.lastName.displayName = "Last Name"
+      if (parsedSchema.lastName) {
+        parsedSchema.lastName.displayName = "Last Name"
      }
-      if (schema.status) {
-        schema.status.displayName = "Status"
+      if (parsedSchema.status) {
+        parsedSchema.status.displayName = "Status"
      }
    }
  }
@ -97,7 +103,7 @@
    <div class="table-wrapper">
      <Table
        {data}
-        {schema}
+        schema={parsedSchema}
        {loading}
        {customRenderers}
        {rowCount}
--- a/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
@ -20,6 +20,7 @@
  let type = "internal"

  $: name = view.name
+  $: schema = view.schema
  $: calculation = view.calculation

  $: supportedFormats = Object.values(ROW_EXPORT_FORMATS).filter(key => {
@ -61,7 +62,7 @@

 <Table
  title={decodeURI(name)}
-  schema={view.schema}
+  {schema}
  tableId={view.tableId}
  {data}
  {loading}
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@ -23,6 +23,7 @@ import BasicColumnEditor from "./controls/ColumnEditor/BasicColumnEditor.svelte"
 import GridColumnEditor from "./controls/ColumnEditor/GridColumnEditor.svelte"
 import BarButtonList from "./controls/BarButtonList.svelte"
 import FieldConfiguration from "./controls/FieldConfiguration/FieldConfiguration.svelte"
+import ButtonConfiguration from "./controls/ButtonConfiguration/ButtonConfiguration.svelte"
 import RelationshipFilterEditor from "./controls/RelationshipFilterEditor.svelte"

 const componentMap = {
@ -48,6 +49,7 @@ const componentMap = {
  "filter/relationship": RelationshipFilterEditor,
  url: URLSelect,
  fieldConfiguration: FieldConfiguration,
+  buttonConfiguration: ButtonConfiguration,
  columns: ColumnEditor,
  "columns/basic": BasicColumnEditor,
  "columns/grid": GridColumnEditor,
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte
@ -0,0 +1,134 @@
+<script>
+  import DraggableList from "../DraggableList/DraggableList.svelte"
+  import ButtonSetting from "./ButtonSetting.svelte"
+  import { createEventDispatcher } from "svelte"
+  import { store } from "builderStore"
+  import { Helpers } from "@budibase/bbui"
+
+  export let componentBindings
+  export let bindings
+  export let value
+
+  const dispatch = createEventDispatcher()
+
+  let focusItem
+
+  $: buttonList = sanitizeValue(value) || []
+  $: buttonCount = buttonList.length
+  $: itemProps = {
+    componentBindings: componentBindings || [],
+    bindings,
+    removeButton,
+    canRemove: buttonCount > 1,
+  }
+
+  const sanitizeValue = val => {
+    return val?.map(button => {
+      return button._component ? button : buildPseudoInstance(button)
+    })
+  }
+
+  const processItemUpdate = e => {
+    const updatedField = e.detail
+    const newButtonList = [...buttonList]
+    const fieldIdx = newButtonList.findIndex(pSetting => {
+      return pSetting._id === updatedField?._id
+    })
+    if (fieldIdx === -1) {
+      newButtonList.push(updatedField)
+    } else {
+      newButtonList[fieldIdx] = updatedField
+    }
+    dispatch("change", newButtonList)
+  }
+
+  const listUpdated = e => {
+    dispatch("change", [...e.detail])
+  }
+
+  const buildPseudoInstance = cfg => {
+    return store.actions.components.createInstance(
+      `@budibase/standard-components/button`,
+      {
+        _instanceName: Helpers.uuid(),
+        text: cfg.text,
+        type: cfg.type || "primary",
+      },
+      {}
+    )
+  }
+
+  const addButton = () => {
+    const newButton = buildPseudoInstance({
+      text: `Button ${buttonCount + 1}`,
+    })
+    dispatch("change", [...buttonList, newButton])
+    focusItem = newButton._id
+  }
+
+  const removeButton = id => {
+    dispatch(
+      "change",
+      buttonList.filter(button => button._id !== id)
+    )
+  }
+</script>
+
+<div class="button-configuration">
+  {#if buttonCount}
+    <DraggableList
+      on:change={listUpdated}
+      on:itemChange={processItemUpdate}
+      items={buttonList}
+      listItemKey={"_id"}
+      listType={ButtonSetting}
+      listTypeProps={itemProps}
+      focus={focusItem}
+      draggable={buttonCount > 1}
+    />
+
+    <div class="list-footer" on:click={addButton}>
+      <div class="add-button">Add button</div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .button-configuration :global(.spectrum-ActionButton) {
+    width: 100%;
+  }
+
+  .button-configuration :global(.list-wrap > li:last-child),
+  .button-configuration :global(.list-wrap) {
+    border-bottom-left-radius: unset;
+    border-bottom-right-radius: unset;
+    border-bottom: 0px;
+  }
+
+  .list-footer {
+    width: 100%;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    background-color: var(
+      --spectrum-table-background-color,
+      var(--spectrum-global-color-gray-50)
+    );
+    transition: background-color ease-in-out 130ms;
+    display: flex;
+    justify-content: center;
+    border: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
+    cursor: pointer;
+  }
+
+  .add-button {
+    margin: var(--spacing-s);
+  }
+
+  .list-footer:hover {
+    background-color: var(
+      --spectrum-table-row-background-color-hover,
+      var(--spectrum-alias-highlight-hover)
+    );
+  }
+</style>
--- a/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonSetting.svelte
@ -0,0 +1,64 @@
+<script>
+  import EditComponentPopover from "../EditComponentPopover.svelte"
+  import { Icon } from "@budibase/bbui"
+  import { runtimeToReadableBinding } from "builderStore/dataBinding"
+  import { isJSBinding } from "@budibase/string-templates"
+
+  export let item
+  export let componentBindings
+  export let bindings
+  export let anchor
+  export let removeButton
+  export let canRemove
+
+  $: readableText = isJSBinding(item.text)
+    ? "(JavaScript function)"
+    : runtimeToReadableBinding([...bindings, componentBindings], item.text)
+</script>
+
+<div class="list-item-body">
+  <div class="list-item-left">
+    <EditComponentPopover
+      {anchor}
+      componentInstance={item}
+      {componentBindings}
+      {bindings}
+      on:change
+    />
+    <div class="field-label">{readableText || "Button"}</div>
+  </div>
+  <div class="list-item-right">
+    <Icon
+      disabled={!canRemove}
+      size="S"
+      name="Close"
+      hoverable
+      on:click={() => removeButton(item._id)}
+    />
+  </div>
+</div>
+
+<style>
+  .field-label {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .list-item-body,
+  .list-item-left {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-m);
+    min-width: 0;
+  }
+  .list-item-body {
+    margin-top: 8px;
+    margin-bottom: 8px;
+  }
+  .list-item-right :global(div.spectrum-Switch) {
+    margin: 0px;
+  }
+  .list-item-body {
+    justify-content: space-between;
+  }
+</style>
--- a/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte
+++ b/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte
@ -1,10 +1,10 @@
 <script>
-  import { Icon } from "@budibase/bbui"
  import { dndzone } from "svelte-dnd-action"
  import { createEventDispatcher } from "svelte"
  import { generate } from "shortid"
  import { setContext } from "svelte"
-  import { writable } from "svelte/store"
+  import { writable, get } from "svelte/store"
+  import DragHandle from "./drag-handle.svelte"

  export let items = []
  export let showHandle = true
@ -12,6 +12,7 @@
  export let listTypeProps = {}
  export let listItemKey
  export let draggable = true
+  export let focus

  let store = writable({
    selected: null,
@ -27,6 +28,10 @@

  setContext("draggable", store)

+  $: if (focus && store) {
+    get(store).actions.select(focus)
+  }
+
  const dispatch = createEventDispatcher()
  const flipDurationMs = 150

@ -82,13 +87,16 @@
 >
  {#each draggableItems as draggable (draggable.id)}
    <li
+      on:mousedown={() => {
+        get(store).actions.select()
+      }}
      bind:this={anchors[draggable.id]}
      class:highlighted={draggable.id === $store.selected}
    >
      <div class="left-content">
        {#if showHandle}
-          <div class="handle" aria-label="drag-handle">
-            <Icon name="DragHandle" size="XL" />
+          <div class="handle">
+            <DragHandle />
          </div>
        {/if}
      </div>
@ -142,8 +150,9 @@
    border-top-right-radius: 4px;
  }
  .list-wrap > li:last-child {
-    border-top-left-radius: var(--spectrum-table-regular-border-radius);
-    border-top-right-radius: var(--spectrum-table-regular-border-radius);
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border-bottom: 0px;
  }
  .right-content {
    flex: 1;
@ -153,4 +162,15 @@
    padding-left: var(--spacing-s);
    padding-right: var(--spacing-s);
  }
+  .handle {
+    display: flex;
+    height: var(--spectrum-global-dimension-size-150);
+  }
+  .handle :global(svg) {
+    fill: var(--spectrum-global-color-gray-500);
+    margin-right: var(--spacing-m);
+    margin-left: 2px;
+    width: var(--spectrum-global-dimension-size-65);
+    height: 100%;
+  }
 </style>
--- a/packages/builder/src/components/design/settings/controls/DraggableList/drag-handle.svelte
+++ b/packages/builder/src/components/design/settings/controls/DraggableList/drag-handle.svelte
@ -0,0 +1,31 @@
+<svg
+  class="drag-handle spectrum-Icon spectrum-Icon--sizeS"
+  focusable="false"
+  aria-hidden="true"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="m1,11c0.55228,0 1,-0.4477 1,-1c0,-0.5523 -0.44772,-1 -1,-1c-0.55228,0 -1,0.4477 -1,1c0,0.5523 0.44772,1 1,1z"
+  />
+  <path
+    d="m1,8c0.55228,0 1,-0.4477 1,-1c0,-0.55228 -0.44772,-1 -1,-1c-0.55228,0 -1,0.44772 -1,1c0,0.5523 0.44772,1 1,1z"
+  />
+  <path
+    d="m1,5c0.55228,0 1,-0.44772 1,-1c0,-0.55228 -0.44772,-1 -1,-1c-0.55228,0 -1,0.44772 -1,1c0,0.55228 0.44772,1 1,1z"
+  />
+  <path
+    d="m1,2c0.55228,0 1,-0.44772 1,-1c0,-0.55228 -0.44772,-1 -1,-1c-0.55228,0 -1,0.44772 -1,1c0,0.55228 0.44772,1 1,1z"
+  />
+  <path
+    d="m4,11c0.5523,0 1,-0.4477 1,-1c0,-0.5523 -0.4477,-1 -1,-1c-0.55228,0 -1,0.4477 -1,1c0,0.5523 0.44772,1 1,1z"
+  />
+  <path
+    d="m4,8c0.5523,0 1,-0.4477 1,-1c0,-0.55228 -0.4477,-1 -1,-1c-0.55228,0 -1,0.44772 -1,1c0,0.5523 0.44772,1 1,1z"
+  />
+  <path
+    d="m4,5c0.5523,0 1,-0.44772 1,-1c0,-0.55228 -0.4477,-1 -1,-1c-0.55228,0 -1,0.44772 -1,1c0,0.55228 0.44772,1 1,1z"
+  />
+  <path
+    d="m4,2c0.5523,0 1,-0.44772 1,-1c0,-0.55228 -0.4477,-1 -1,-1c-0.55228,0 -1,0.44772 -1,1c0,0.55228 0.44772,1 1,1z"
+  />
+</svg>
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
@ -3,31 +3,35 @@
  import { store } from "builderStore"
  import { cloneDeep } from "lodash/fp"
  import { createEventDispatcher } from "svelte"
-  import ComponentSettingsSection from "../../../../../pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
+  import ComponentSettingsSection from "../../../../pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
  import { getContext } from "svelte"

  export let anchor
-  export let field
+  export let componentInstance
  export let componentBindings
  export let bindings
+  export let parseSettings

  const draggable = getContext("draggable")
  const dispatch = createEventDispatcher()

  let popover
  let drawers = []
-  let pseudoComponentInstance
  let open = false

-  $: if (open && $draggable.selected && $draggable.selected != field._id) {
+  // Auto hide the component when another item is selected
+  $: if (open && $draggable.selected != componentInstance._id) {
    popover.hide()
  }

-  $: if (field) {
-    pseudoComponentInstance = field
+  // Open automatically if the component is marked as selected
+  $: if (!open && $draggable.selected === componentInstance._id && popover) {
+    popover.show()
+    open = true
  }
+
  $: componentDef = store.actions.components.getDefinition(
-    pseudoComponentInstance._component
+    componentInstance._component
  )
  $: parsedComponentDef = processComponentDefinitionSettings(componentDef)

@ -36,17 +40,16 @@
      return {}
    }
    const clone = cloneDeep(componentDef)
-    const updatedSettings = clone.settings
-      .filter(setting => setting.key !== "field")
-      .map(setting => {
-        return { ...setting, nested: true }
-      })
-    clone.settings = updatedSettings
+
+    if (typeof parseSettings === "function") {
+      clone.settings = parseSettings(clone.settings)
+    }
+
    return clone
  }

  const updateSetting = async (setting, value) => {
-    const nestedComponentInstance = cloneDeep(pseudoComponentInstance)
+    const nestedComponentInstance = cloneDeep(componentInstance)

    const patchFn = store.actions.components.updateComponentSetting(
      setting.key,
@ -54,12 +57,26 @@
    )
    patchFn(nestedComponentInstance)

-    const update = {
-      ...nestedComponentInstance,
-      active: pseudoComponentInstance.active,
+    dispatch("change", nestedComponentInstance)
+  }
+
+  const customPositionHandler = (anchorBounds, eleBounds, cfg) => {
+    let { left, top } = cfg
+    let percentageOffset = 30
+    // left-outside
+    left = anchorBounds.left - eleBounds.width - 18
+
+    // shift up from the anchor, if space allows
+    let offsetPos = Math.floor(eleBounds.height / 100) * percentageOffset
+    let defaultTop = anchorBounds.top - offsetPos
+
+    if (window.innerHeight - defaultTop < eleBounds.height) {
+      top = window.innerHeight - eleBounds.height - 5
+    } else {
+      top = anchorBounds.top - offsetPos
    }

-    dispatch("change", update)
+    return { ...cfg, left, top }
  }
 </script>

@ -79,11 +96,11 @@
  bind:this={popover}
  on:open={() => {
    drawers = []
-    $draggable.actions.select(field._id)
+    $draggable.actions.select(componentInstance._id)
  }}
  on:close={() => {
    open = false
-    if ($draggable.selected == field._id) {
+    if ($draggable.selected == componentInstance._id) {
      $draggable.actions.select()
    }
  }}
@ -92,33 +109,13 @@
  showPopover={drawers.length == 0}
  clickOutsideOverride={drawers.length > 0}
  maxHeight={600}
-  handlePostionUpdate={(anchorBounds, eleBounds, cfg) => {
-    let { left, top } = cfg
-    let percentageOffset = 30
-    // left-outside
-    left = anchorBounds.left - eleBounds.width - 18
-
-    // shift up from the anchor, if space allows
-    let offsetPos = Math.floor(eleBounds.height / 100) * percentageOffset
-    let defaultTop = anchorBounds.top - offsetPos
-
-    if (window.innerHeight - defaultTop < eleBounds.height) {
-      top = window.innerHeight - eleBounds.height - 5
-    } else {
-      top = anchorBounds.top - offsetPos
-    }
-
-    return { ...cfg, left, top }
-  }}
+  handlePostionUpdate={customPositionHandler}
 >
  <span class="popover-wrap">
    <Layout noPadding noGap>
-      <div class="type-icon">
-        <Icon name={parsedComponentDef.icon} />
-        <span>{field.field}</span>
-      </div>
+      <slot name="header" />
      <ComponentSettingsSection
-        componentInstance={pseudoComponentInstance}
+        {componentInstance}
        componentDefinition={parsedComponentDef}
        isScreen={false}
        onUpdateSetting={updateSetting}
@ -141,20 +138,4 @@
  .popover-wrap {
    background-color: var(--spectrum-alias-background-color-primary);
  }
-  .type-icon {
-    display: flex;
-    gap: var(--spacing-m);
-    margin: var(--spacing-xl);
-    margin-bottom: 0px;
-    height: var(--spectrum-alias-item-height-m);
-    padding: 0px var(--spectrum-alias-item-padding-m);
-    border-width: var(--spectrum-actionbutton-border-size);
-    border-radius: var(--spectrum-alias-border-radius-regular);
-    border: 1px solid
-      var(
-        --spectrum-actionbutton-m-border-color,
-        var(--spectrum-alias-border-color)
-      );
-    align-items: center;
-  }
 </style>
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
@ -7,7 +7,7 @@
    getComponentBindableProperties,
  } from "builderStore/dataBinding"
  import { currentAsset } from "builderStore"
-  import DraggableList from "../DraggableList.svelte"
+  import DraggableList from "../DraggableList/DraggableList.svelte"
  import { createEventDispatcher } from "svelte"
  import { store, selectedScreen } from "builderStore"
  import FieldSetting from "./FieldSetting.svelte"
@ -50,7 +50,7 @@
    updateSanitsedFields(sanitisedValue)
    unconfigured = buildUnconfiguredOptions(schema, sanitisedFields)
    fieldList = [...sanitisedFields, ...unconfigured]
-      .map(buildSudoInstance)
+      .map(buildPseudoInstance)
      .filter(x => x != null)
  }

@ -104,7 +104,7 @@
    })
  }

-  const buildSudoInstance = instance => {
+  const buildPseudoInstance = instance => {
    if (instance._component) {
      return instance
    }
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte
@ -1,8 +1,11 @@
 <script>
-  import EditFieldPopover from "./EditFieldPopover.svelte"
-  import { Toggle } from "@budibase/bbui"
+  import EditComponentPopover from "../EditComponentPopover.svelte"
+  import { Toggle, Icon } from "@budibase/bbui"
  import { createEventDispatcher } from "svelte"
  import { cloneDeep } from "lodash/fp"
+  import { store } from "builderStore"
+  import { runtimeToReadableBinding } from "builderStore/dataBinding"
+  import { isJSBinding } from "@budibase/string-templates"

  export let item
  export let componentBindings
@ -16,18 +19,43 @@
      dispatch("change", { ...cloneDeep(item), active: e.detail })
    }
  }
+  const getReadableText = () => {
+    if (item.label) {
+      return isJSBinding(item.label)
+        ? "(JavaScript function)"
+        : runtimeToReadableBinding([...bindings, componentBindings], item.label)
+    }
+    return item.field
+  }
+
+  const parseSettings = settings => {
+    return settings
+      .filter(setting => setting.key !== "field")
+      .map(setting => {
+        return { ...setting, nested: true }
+      })
+  }
+
+  $: readableText = getReadableText(item)
+  $: componentDef = store.actions.components.getDefinition(item._component)
 </script>

 <div class="list-item-body">
  <div class="list-item-left">
-    <EditFieldPopover
+    <EditComponentPopover
      {anchor}
-      field={item}
+      componentInstance={item}
      {componentBindings}
      {bindings}
+      {parseSettings}
      on:change
-    />
-    <div class="field-label">{item.label || item.field}</div>
+    >
+      <div slot="header" class="type-icon">
+        <Icon name={componentDef.icon} />
+        <span>{item.field}</span>
+      </div>
+    </EditComponentPopover>
+    <div class="field-label">{readableText}</div>
  </div>
  <div class="list-item-right">
    <Toggle on:change={onToggle(item)} text="" value={item.active} thin />
@ -53,4 +81,20 @@
  .list-item-body {
    justify-content: space-between;
  }
+  .type-icon {
+    display: flex;
+    gap: var(--spacing-m);
+    margin: var(--spacing-xl);
+    margin-bottom: 0px;
+    height: var(--spectrum-alias-item-height-m);
+    padding: 0px var(--spectrum-alias-item-padding-m);
+    border-width: var(--spectrum-actionbutton-border-size);
+    border-radius: var(--spectrum-alias-border-radius-regular);
+    border: 1px solid
+      var(
+        --spectrum-actionbutton-m-border-color,
+        var(--spectrum-alias-border-color)
+      );
+    align-items: center;
+  }
 </style>
--- a/packages/builder/src/components/integration/RestQueryViewer.svelte
+++ b/packages/builder/src/components/integration/RestQueryViewer.svelte
@ -196,8 +196,36 @@
    }
  }

+  const validateQuery = async () => {
+    const forbiddenBindings = /{{\s?user(\.(\w|\$)*\s?|\s?)}}/g
+    const bindingError = new Error(
+      "'user' is a protected binding and cannot be used"
+    )
+
+    if (forbiddenBindings.test(url)) {
+      throw bindingError
+    }
+
+    if (forbiddenBindings.test(query.fields.requestBody ?? "")) {
+      throw bindingError
+    }
+
+    Object.values(requestBindings).forEach(bindingValue => {
+      if (forbiddenBindings.test(bindingValue)) {
+        throw bindingError
+      }
+    })
+
+    Object.values(query.fields.headers).forEach(headerValue => {
+      if (forbiddenBindings.test(headerValue)) {
+        throw bindingError
+      }
+    })
+  }
+
  async function runQuery() {
    try {
+      await validateQuery()
      response = await queries.preview(buildQuery())
      if (response.rows.length === 0) {
        notifications.info("Request did not return any data")
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
@ -91,7 +91,12 @@
        />
      {/if}
      {#if section == "styles"}
-        <DesignSection {componentInstance} {componentDefinition} {bindings} />
+        <DesignSection
+          {componentInstance}
+          {componentBindings}
+          {componentDefinition}
+          {bindings}
+        />
        <CustomStylesSection
          {componentInstance}
          {componentDefinition}
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
@ -16,18 +16,32 @@
  export let isScreen = false
  export let onUpdateSetting
  export let showSectionTitle = true
+  export let tag

-  $: sections = getSections(componentInstance, componentDefinition, isScreen)
+  $: sections = getSections(
+    componentInstance,
+    componentDefinition,
+    isScreen,
+    tag
+  )

-  const getSections = (instance, definition, isScreen) => {
+  const getSections = (instance, definition, isScreen, tag) => {
    const settings = definition?.settings ?? []
-    const generalSettings = settings.filter(setting => !setting.section)
-    const customSections = settings.filter(setting => setting.section)
+    const generalSettings = settings.filter(
+      setting => !setting.section && setting.tag === tag
+    )
+    const customSections = settings.filter(
+      setting => setting.section && setting.tag === tag
+    )
    let sections = [
-      {
-        name: "General",
-        settings: generalSettings,
-      },
+      ...(generalSettings?.length
+        ? [
+            {
+              name: "General",
+              settings: generalSettings,
+            },
+          ]
+        : []),
      ...(customSections || []),
    ]

@ -132,7 +146,7 @@
        <div class="section-info">
          <InfoDisplay body={section.info} />
        </div>
-      {:else if idx === 0 && section.name === "General" && componentDefinition.info}
+      {:else if idx === 0 && section.name === "General" && componentDefinition?.info && !tag}
        <InfoDisplay
          title={componentDefinition.name}
          body={componentDefinition.info}
@ -181,7 +195,7 @@
    </DetailSummary>
  {/if}
 {/each}
-{#if componentDefinition?.block}
+{#if componentDefinition?.block && !tag}
  <DetailSummary name="Eject" collapsible={false}>
    <EjectBlockButton />
  </DetailSummary>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/DesignSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/DesignSection.svelte
@ -1,10 +1,12 @@
 <script>
  import StyleSection from "./StyleSection.svelte"
  import * as ComponentStyles from "./componentStyles"
+  import ComponentSettingsSection from "./ComponentSettingsSection.svelte"

  export let componentDefinition
  export let componentInstance
  export let bindings
+  export let componentBindings

  const getStyles = def => {
    if (!def?.styles?.length) {
@ -22,6 +24,19 @@
  $: styles = getStyles(componentDefinition)
 </script>

+<!--
+  Load any general settings or sections tagged as "style"
+-->
+<ComponentSettingsSection
+  {componentInstance}
+  {componentDefinition}
+  isScreen={false}
+  showInstanceName={false}
+  {bindings}
+  {componentBindings}
+  tag="style"
+/>
+
 {#if styles?.length > 0}
  {#each styles as style}
    <StyleSection
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
@ -36,6 +36,7 @@
      "heading",
      "text",
      "button",
+      "buttongroup",
      "tag",
      "spectrumcard",
      "cardstat",
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@ -258,6 +258,186 @@
    "description": "Contains your app screens",
    "static": true
  },
+  "buttongroup": {
+    "name": "Button group",
+    "icon": "Button",
+    "hasChildren": false,
+    "settings": [
+      {
+        "section": true,
+        "name": "Buttons",
+        "settings": [
+          {
+            "type": "buttonConfiguration",
+            "key": "buttons",
+            "nested": true,
+            "defaultValue": [
+              {
+                "type": "cta",
+                "text": "Button 1"
+              },
+              {
+                "type": "primary",
+                "text": "Button 2"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "section": true,
+        "name": "Layout",
+        "settings": [
+          {
+            "type": "select",
+            "label": "Direction",
+            "key": "direction",
+            "showInBar": true,
+            "barStyle": "buttons",
+            "options": [
+              {
+                "label": "Column",
+                "value": "column",
+                "barIcon": "ViewColumn",
+                "barTitle": "Column layout"
+              },
+              {
+                "label": "Row",
+                "value": "row",
+                "barIcon": "ViewRow",
+                "barTitle": "Row layout"
+              }
+            ],
+            "defaultValue": "row"
+          },
+          {
+            "type": "select",
+            "label": "Horiz. align",
+            "key": "hAlign",
+            "showInBar": true,
+            "barStyle": "buttons",
+            "options": [
+              {
+                "label": "Left",
+                "value": "left",
+                "barIcon": "AlignLeft",
+                "barTitle": "Align left"
+              },
+              {
+                "label": "Center",
+                "value": "center",
+                "barIcon": "AlignCenter",
+                "barTitle": "Align center"
+              },
+              {
+                "label": "Right",
+                "value": "right",
+                "barIcon": "AlignRight",
+                "barTitle": "Align right"
+              },
+              {
+                "label": "Stretch",
+                "value": "stretch",
+                "barIcon": "MoveLeftRight",
+                "barTitle": "Align stretched horizontally"
+              }
+            ],
+            "defaultValue": "left"
+          },
+          {
+            "type": "select",
+            "label": "Vert. align",
+            "key": "vAlign",
+            "showInBar": true,
+            "barStyle": "buttons",
+            "options": [
+              {
+                "label": "Top",
+                "value": "top",
+                "barIcon": "AlignTop",
+                "barTitle": "Align top"
+              },
+              {
+                "label": "Middle",
+                "value": "middle",
+                "barIcon": "AlignMiddle",
+                "barTitle": "Align middle"
+              },
+              {
+                "label": "Bottom",
+                "value": "bottom",
+                "barIcon": "AlignBottom",
+                "barTitle": "Align bottom"
+              },
+              {
+                "label": "Stretch",
+                "value": "stretch",
+                "barIcon": "MoveUpDown",
+                "barTitle": "Align stretched vertically"
+              }
+            ],
+            "defaultValue": "top"
+          },
+          {
+            "type": "select",
+            "label": "Size",
+            "key": "size",
+            "showInBar": true,
+            "barStyle": "buttons",
+            "options": [
+              {
+                "label": "Shrink",
+                "value": "shrink",
+                "barIcon": "Minimize",
+                "barTitle": "Shrink container"
+              },
+              {
+                "label": "Grow",
+                "value": "grow",
+                "barIcon": "Maximize",
+                "barTitle": "Grow container"
+              }
+            ],
+            "defaultValue": "shrink"
+          },
+          {
+            "type": "select",
+            "label": "Gap",
+            "key": "gap",
+            "showInBar": true,
+            "barStyle": "picker",
+            "options": [
+              {
+                "label": "None",
+                "value": "N"
+              },
+              {
+                "label": "Small",
+                "value": "S"
+              },
+              {
+                "label": "Medium",
+                "value": "M"
+              },
+              {
+                "label": "Large",
+                "value": "L"
+              }
+            ],
+            "defaultValue": "M"
+          },
+          {
+            "type": "boolean",
+            "label": "Wrap",
+            "key": "wrap",
+            "showInBar": true,
+            "barIcon": "ModernGridView",
+            "barTitle": "Wrap"
+          }
+        ]
+      }
+    ]
+  },
  "button": {
    "name": "Button",
    "description": "A basic html button that is ready for styling",
@ -2409,7 +2589,6 @@
        "key": "disabled",
        "defaultValue": false
      },
-
      {
        "type": "text",
        "label": "Initial form step",
@ -5391,38 +5570,6 @@
        "section": true,
        "name": "Fields",
        "settings": [
-          {
-            "type": "select",
-            "label": "Align labels",
-            "key": "labelPosition",
-            "defaultValue": "left",
-            "options": [
-              {
-                "label": "Left",
-                "value": "left"
-              },
-              {
-                "label": "Above",
-                "value": "above"
-              }
-            ]
-          },
-          {
-            "type": "select",
-            "label": "Size",
-            "key": "size",
-            "options": [
-              {
-                "label": "Medium",
-                "value": "spectrum--medium"
-              },
-              {
-                "label": "Large",
-                "value": "spectrum--large"
-              }
-            ],
-            "defaultValue": "spectrum--medium"
-          },
          {
            "type": "fieldConfiguration",
            "key": "fields",
@ -5442,6 +5589,40 @@
            }
          }
        ]
+      },
+      {
+        "tag": "style",
+        "type": "select",
+        "label": "Align labels",
+        "key": "labelPosition",
+        "defaultValue": "left",
+        "options": [
+          {
+            "label": "Left",
+            "value": "left"
+          },
+          {
+            "label": "Above",
+            "value": "above"
+          }
+        ]
+      },
+      {
+        "tag": "style",
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "options": [
+          {
+            "label": "Medium",
+            "value": "spectrum--medium"
+          },
+          {
+            "label": "Large",
+            "value": "spectrum--large"
+          }
+        ],
+        "defaultValue": "spectrum--medium"
      }
    ],
    "context": [
@ -5743,4 +5924,4 @@
      }
    ]
  }
-}
+}
--- a/packages/client/src/components/app/ButtonGroup.svelte
+++ b/packages/client/src/components/app/ButtonGroup.svelte
@ -0,0 +1,37 @@
+<script>
+  import BlockComponent from "../BlockComponent.svelte"
+  import Block from "../Block.svelte"
+
+  export let buttons = []
+  export let direction
+  export let hAlign
+  export let vAlign
+  export let gap = "S"
+</script>
+
+<Block>
+  <BlockComponent
+    type="container"
+    props={{
+      direction,
+      hAlign,
+      vAlign,
+      gap,
+      wrap: true,
+    }}
+  >
+    {#each buttons as { text, type, quiet, disabled, onClick, size }}
+      <BlockComponent
+        type="button"
+        props={{
+          text: text || "Button",
+          onClick,
+          type,
+          quiet,
+          disabled,
+          size,
+        }}
+      />
+    {/each}
+  </BlockComponent>
+</Block>
--- a/packages/client/src/components/app/index.js
+++ b/packages/client/src/components/app/index.js
@ -19,6 +19,7 @@ export { default as dataprovider } from "./DataProvider.svelte"
 export { default as divider } from "./Divider.svelte"
 export { default as screenslot } from "./ScreenSlot.svelte"
 export { default as button } from "./Button.svelte"
+export { default as buttongroup } from "./ButtonGroup.svelte"
 export { default as repeater } from "./Repeater.svelte"
 export { default as text } from "./Text.svelte"
 export { default as layout } from "./Layout.svelte"
--- a/packages/server/Dockerfile.v2
+++ b/packages/server/Dockerfile.v2
@ -44,7 +44,7 @@ RUN chmod +x ./scripts/removeWorkspaceDependencies.sh
 WORKDIR /string-templates
 COPY packages/string-templates/package.json package.json
 RUN ../scripts/removeWorkspaceDependencies.sh package.json
-RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production=true
+RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production=true --network-timeout 1000000
 COPY packages/string-templates .


@ -57,7 +57,7 @@ COPY scripts/removeWorkspaceDependencies.sh scripts/removeWorkspaceDependencies.
 RUN chmod +x ./scripts/removeWorkspaceDependencies.sh
 RUN ./scripts/removeWorkspaceDependencies.sh  package.json

-RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production=true \
+RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production=true --network-timeout 1000000 \
    # Remove unneeded data from file system to reduce image size
    && yarn cache clean && apt-get remove -y --purge --auto-remove g++ make python jq \
    && rm -rf /tmp/* /root/.node-gyp /usr/local/lib/node_modules/npm/node_modules/node-gyp
--- a/packages/server/src/api/controllers/role.ts
+++ b/packages/server/src/api/controllers/role.ts
@ -1,4 +1,10 @@
-import { context, db as dbCore, events, roles } from "@budibase/backend-core"
+import {
+  context,
+  db as dbCore,
+  events,
+  roles,
+  Header,
+} from "@budibase/backend-core"
 import { getUserMetadataParams, InternalTables } from "../../db/utils"
 import { Database, Role, UserCtx, UserRoles } from "@budibase/types"
 import { sdk as sharedSdk } from "@budibase/shared-core"
@ -143,4 +149,20 @@ export async function accessible(ctx: UserCtx) {
  } else {
    ctx.body = await roles.getUserRoleIdHierarchy(roleId!)
  }
+
+  // If a custom role is provided in the header, filter out higher level roles
+  const roleHeader = ctx.header?.[Header.PREVIEW_ROLE] as string
+  if (roleHeader && !Object.keys(roles.BUILTIN_ROLE_IDS).includes(roleHeader)) {
+    const inherits = (await roles.getRole(roleHeader))?.inherits
+    const orderedRoles = ctx.body.reverse()
+    let filteredRoles = [roleHeader]
+    for (let role of orderedRoles) {
+      filteredRoles = [role, ...filteredRoles]
+      if (role === inherits) {
+        break
+      }
+    }
+    filteredRoles.pop()
+    ctx.body = [roleHeader, ...filteredRoles]
+  }
 }
--- a/packages/server/src/api/routes/tests/role.spec.js
+++ b/packages/server/src/api/routes/tests/role.spec.js
@ -158,5 +158,25 @@ describe("/roles", () => {
      expect(res.body.length).toBe(1)
      expect(res.body[0]).toBe("PUBLIC")
    })
+
+    it("should not fetch higher level accessible roles when a custom role header is provided", async () => {
+      await createRole({
+        name: `CUSTOM_ROLE`,
+        inherits: roles.BUILTIN_ROLE_IDS.BASIC,
+        permissionId: permissions.BuiltinPermissionID.READ_ONLY,
+        version: "name",
+      })
+      const res = await request
+        .get("/api/roles/accessible")
+        .set({
+          ...config.defaultHeaders(),
+          "x-budibase-role": "CUSTOM_ROLE"
+        })
+        .expect(200)
+      expect(res.body.length).toBe(3)
+      expect(res.body[0]).toBe("CUSTOM_ROLE")
+      expect(res.body[1]).toBe("BASIC")
+      expect(res.body[2]).toBe("PUBLIC")
+    })
  })
 })
--- a/packages/server/src/api/routes/tests/routing.spec.js
+++ b/packages/server/src/api/routes/tests/routing.spec.js
@ -1,5 +1,5 @@
 const setup = require("./utilities")
-const { basicScreen } = setup.structures
+const { basicScreen, powerScreen } = setup.structures
 const { checkBuilderEndpoint, runInProd } = require("./utilities/TestFunctions")
 const { roles } = require("@budibase/backend-core")
 const { BUILTIN_ROLE_IDS } = roles
@ -12,19 +12,14 @@ const route = "/test"
 describe("/routing", () => {
  let request = setup.getRequest()
  let config = setup.getConfig()
-  let screen, screen2
+  let basic, power

  afterAll(setup.afterAll)

  beforeAll(async () => {
    await config.init()
-    screen = basicScreen()
-    screen.routing.route = route
-    screen = await config.createScreen(screen)
-    screen2 = basicScreen()
-    screen2.routing.roleId = BUILTIN_ROLE_IDS.POWER
-    screen2.routing.route = route
-    screen2 = await config.createScreen(screen2)
+    basic = await config.createScreen(basicScreen(route))
+    power = await config.createScreen(powerScreen(route))
    await config.publish()
  })

@ -61,8 +56,8 @@ describe("/routing", () => {
      expect(res.body.routes[route]).toEqual({
        subpaths: {
          [route]: {
-            screenId: screen._id,
-            roleId: screen.routing.roleId
+            screenId: basic._id,
+            roleId: basic.routing.roleId
          }
        }
      })
@ -80,8 +75,8 @@ describe("/routing", () => {
      expect(res.body.routes[route]).toEqual({
        subpaths: {
          [route]: {
-            screenId: screen2._id,
-            roleId: screen2.routing.roleId
+            screenId: power._id,
+            roleId: power.routing.roleId
          }
        }
      })
@ -101,8 +96,8 @@ describe("/routing", () => {
      expect(res.body.routes).toBeDefined()
      expect(res.body.routes[route].subpaths[route]).toBeDefined()
      const subpath = res.body.routes[route].subpaths[route]
-      expect(subpath.screens[screen2.routing.roleId]).toEqual(screen2._id)
-      expect(subpath.screens[screen.routing.roleId]).toEqual(screen._id)
+      expect(subpath.screens[power.routing.roleId]).toEqual(power._id)
+      expect(subpath.screens[basic.routing.roleId]).toEqual(basic._id)
    })

    it("make sure it is a builder only endpoint", async () => {
--- a/packages/server/src/constants/screens.ts
+++ b/packages/server/src/constants/screens.ts
@ -1,7 +1,15 @@
 import { roles } from "@budibase/backend-core"
 import { BASE_LAYOUT_PROP_IDS } from "./layouts"

-export function createHomeScreen() {
+export function createHomeScreen(
+  config: {
+    roleId: string
+    route: string
+  } = {
+    roleId: roles.BUILTIN_ROLE_IDS.BASIC,
+    route: "/",
+  }
+) {
  return {
    description: "",
    url: "",
@ -40,8 +48,8 @@ export function createHomeScreen() {
      gap: "M",
    },
    routing: {
-      route: "/",
-      roleId: roles.BUILTIN_ROLE_IDS.BASIC,
+      route: config.route,
+      roleId: config.roleId,
    },
    name: "home-screen",
  }
--- a/packages/server/src/tests/utilities/structures.ts
+++ b/packages/server/src/tests/utilities/structures.ts
@ -20,6 +20,7 @@ import {
  SourceName,
  Table,
 } from "@budibase/types"
+const { BUILTIN_ROLE_IDS } = roles

 export function basicTable(): Table {
  return {
@ -322,8 +323,22 @@ export function basicUser(role: string) {
  }
 }

-export function basicScreen() {
-  return createHomeScreen()
+export function basicScreen(route: string = "/") {
+  return createHomeScreen({
+    roleId: BUILTIN_ROLE_IDS.BASIC,
+    route,
+  })
+}
+
+export function powerScreen(route: string = "/") {
+  return createHomeScreen({
+    roleId: BUILTIN_ROLE_IDS.POWER,
+    route,
+  })
+}
+
+export function customScreen(config: { roleId: string; route: string }) {
+  return createHomeScreen(config)
 }

 export function basicLayout() {
--- a/packages/worker/Dockerfile.v2
+++ b/packages/worker/Dockerfile.v2
@ -19,7 +19,7 @@ RUN chmod +x ./scripts/removeWorkspaceDependencies.sh
 WORKDIR /string-templates
 COPY packages/string-templates/package.json package.json
 RUN ../scripts/removeWorkspaceDependencies.sh package.json
-RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production=true
+RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production=true --network-timeout 1000000
 COPY packages/string-templates .


@ -30,7 +30,7 @@ RUN cd ../string-templates && yarn link && cd - && yarn link @budibase/string-te

 RUN ../scripts/removeWorkspaceDependencies.sh package.json

-RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production=true
+RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install --production=true --network-timeout 1000000
 # Remove unneeded data from file system to reduce image size
 RUN apk del .gyp \
    && yarn cache clean
--- a/scripts/updateWorkspaceVersions.V2.sh
+++ b/scripts/updateWorkspaceVersions.V2.sh
@ -0,0 +1,8 @@
+#!/bin/bash
+version=$1
+echo "Setting version $version"
+yarn lerna exec "yarn version --no-git-tag-version --new-version=$version"
+echo "Updating dependencies"
+node scripts/syncLocalDependencies.js $version
+echo "Syncing yarn workspace"
+yarn