Merge remote-tracking branch 'origin/master' into feat/automation-naming-ux-updates

2024-07-07 15:25:52 +12:00 · 2023-10-26 16:11:42 +01:00 · 2023-10-26 16:11:42 +01:00 · 35e7dc948d
parent d864eaa9ea 2b59ae4c9b
commit 35e7dc948d
27 changed files with 164 additions and 172 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/hosting/proxy/nginx.prod.conf
+++ b/hosting/proxy/nginx.prod.conf
@ -51,7 +51,7 @@ http {
    proxy_buffering off;

    set $csp_default "default-src 'self'";
-    set $csp_script "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.budibase.net https://cdn.budi.live https://js.intercomcdn.com https://widget.intercom.io";
+    set $csp_script "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.budibase.net https://cdn.budi.live https://js.intercomcdn.com https://widget.intercom.io https://d2l5prqdbvm3op.cloudfront.net";
    set $csp_style "style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com https://rsms.me https://maxcdn.bootstrapcdn.com";
    set $csp_object "object-src 'none'";
    set $csp_base_uri "base-uri 'self'";
--- a/lerna.json
+++ b/lerna.json
@ -1,5 +1,5 @@
 {
-  "version": "2.11.44",
+  "version": "2.11.45",
  "npmClient": "yarn",
  "packages": [
    "packages/*"
--- 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/builderStore/store/screenTemplates/rowListScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
@ -2,14 +2,14 @@ import sanitizeUrl from "./utils/sanitizeUrl"
 import { Screen } from "./utils/Screen"
 import { Component } from "./utils/Component"

-export default function (datasources) {
+export default function (datasources, mode = "table") {
  if (!Array.isArray(datasources)) {
    return []
  }
  return datasources.map(datasource => {
    return {
      name: `${datasource.label} - List`,
-      create: () => createScreen(datasource),
+      create: () => createScreen(datasource, mode),
      id: ROW_LIST_TEMPLATE,
      resourceId: datasource.resourceId,
    }
@ -40,10 +40,24 @@ const generateTableBlock = datasource => {
  return tableBlock
 }

-const createScreen = datasource => {
+const generateGridBlock = datasource => {
+  const gridBlock = new Component("@budibase/standard-components/gridblock")
+  gridBlock
+    .customProps({
+      table: datasource,
+    })
+    .instanceName(`${datasource.label} - Grid block`)
+  return gridBlock
+}
+
+const createScreen = (datasource, mode) => {
  return new Screen()
    .route(rowListUrl(datasource))
    .instanceName(`${datasource.label} - List`)
-    .addChild(generateTableBlock(datasource))
+    .addChild(
+      mode === "table"
+        ? generateTableBlock(datasource)
+        : generateGridBlock(datasource)
+    )
    .json()
 }
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@ -777,7 +777,8 @@
  disabled={deleteColName !== originalName}
 >
  <p>
-    Are you sure you wish to delete the column <b>{originalName}?</b>
+    Are you sure you wish to delete the column
+    <b on:click={() => (deleteColName = originalName)}>{originalName}?</b>
    Your data will be deleted and this action cannot be undone - enter the column
    name to confirm.
  </p>
@ -810,4 +811,11 @@
    gap: 8px;
    display: flex;
  }
+  b {
+    transition: color 130ms ease-out;
+  }
+  b:hover {
+    cursor: pointer;
+    color: var(--spectrum-global-color-gray-900);
+  }
 </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]/data/table/[tableId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte
@ -53,7 +53,8 @@
  }
  .alert-wrap {
    display: flex;
-    width: 100%;
+    flex: 0 0 auto;
+    margin: -28px -40px 14px -40px;
  }
  .alert-wrap :global(> *) {
    flex: 1;
--- 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
@ -126,7 +126,7 @@
  {#if section.visible}
    <DetailSummary
      name={showSectionTitle ? section.name : ""}
-      collapsible={false}
+      show={section.collapsed !== true}
    >
      {#if section.info}
        <div class="section-info">
--- a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
@ -12,6 +12,7 @@
  import { capitalise } from "helpers"
  import { goto } from "@roxi/routify"

+  let mode
  let pendingScreen

  // Modal refs
@ -100,14 +101,15 @@
  }

  // Handler for NewScreenModal
-  export const show = mode => {
+  export const show = newMode => {
+    mode = newMode
    selectedTemplates = null
    blankScreenUrl = null
    screenMode = mode
    pendingScreen = null
    screenAccessRole = Roles.BASIC

-    if (mode === "table") {
+    if (mode === "table" || mode === "grid") {
      datasourceModal.show()
    } else if (mode === "blank") {
      let templates = getTemplates($tables.list)
@ -123,6 +125,7 @@

  // Handler for DatasourceModal confirmation, move to screen access select
  const confirmScreenDatasources = async ({ templates }) => {
+    console.log(templates)
    selectedTemplates = templates
    screenAccessRoleModal.show()
  }
@ -177,6 +180,7 @@

 <Modal bind:this={datasourceModal} autoFocus={false}>
  <DatasourceModal
+    {mode}
    onConfirm={confirmScreenDatasources}
    initialScreens={!selectedTemplates ? [] : [...selectedTemplates]}
  />
--- a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceModal.svelte
@ -7,6 +7,7 @@
  import rowListScreen from "builderStore/store/screenTemplates/rowListScreen"
  import DatasourceTemplateRow from "./DatasourceTemplateRow.svelte"

+  export let mode
  export let onCancel
  export let onConfirm
  export let initialScreens = []
@ -24,7 +25,10 @@
        screen => screen.resourceId !== resourceId
      )
    } else {
-      selectedScreens = [...selectedScreens, rowListScreen([datasource])[0]]
+      selectedScreens = [
+        ...selectedScreens,
+        rowListScreen([datasource], mode)[0],
+      ]
    }
  }

--- a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/grid.png
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/grid.png
--- a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte
@ -3,6 +3,7 @@
  import CreationPage from "components/common/CreationPage.svelte"
  import blankImage from "./blank.png"
  import tableImage from "./table.png"
+  import gridImage from "./grid.png"
  import CreateScreenModal from "./CreateScreenModal.svelte"
  import { store } from "builderStore"

@ -43,6 +44,16 @@
          <Body size="XS">View, edit and delete rows on a table</Body>
        </div>
      </div>
+
+      <div class="card" on:click={() => createScreenModal.show("grid")}>
+        <div class="image">
+          <img alt="" src={gridImage} />
+        </div>
+        <div class="text">
+          <Body size="S">Grid</Body>
+          <Body size="XS">View and manipulate rows on a grid</Body>
+        </div>
+      </div>
    </div>
  </CreationPage>
 </div>
--- a/packages/frontend-core/src/components/grid/cells/DataCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
@ -21,6 +21,7 @@
  export let invertX = false
  export let invertY = false
  export let contentLines = 1
+  export let hidden = false

  const emptyError = writable(null)

@ -78,6 +79,7 @@
  {focused}
  {selectedUser}
  {readonly}
+  {hidden}
  error={$error}
  on:click={() => focusedCellId.set(cellId)}
  on:contextmenu={e => menu.actions.open(cellId, e)}
--- a/packages/frontend-core/src/components/grid/cells/GridCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
@ -10,6 +10,7 @@
  export let defaultHeight = false
  export let center = false
  export let readonly = false
+  export let hidden = false

  $: style = getStyle(width, selectedUser)

@ -30,6 +31,7 @@
  class:error
  class:center
  class:readonly
+  class:hidden
  class:default-height={defaultHeight}
  class:selected-other={selectedUser != null}
  class:alt={rowIdx % 2 === 1}
@ -81,6 +83,9 @@
  .cell.center {
    align-items: center;
  }
+  .cell.hidden {
+    content-visibility: hidden;
+  }

  /* Cell border */
  .cell.focused:after,
--- a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
@ -17,7 +17,7 @@
    isResizing,
    rand,
    sort,
-    renderedColumns,
+    visibleColumns,
    dispatch,
    subscribe,
    config,
@ -50,7 +50,7 @@

  $: sortedBy = column.name === $sort.column
  $: canMoveLeft = orderable && idx > 0
-  $: canMoveRight = orderable && idx < $renderedColumns.length - 1
+  $: canMoveRight = orderable && idx < $visibleColumns.length - 1
  $: sortingLabels = getSortingLabels(column.schema?.type)
  $: searchable = isColumnSearchable(column)
  $: resetSearchValue(column.name)
--- a/packages/frontend-core/src/components/grid/layout/GridBody.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridBody.svelte
@ -7,7 +7,7 @@
  const {
    bounds,
    renderedRows,
-    renderedColumns,
+    visibleColumns,
    rowVerticalInversionIndex,
    hoveredRowId,
    dispatch,
@ -17,7 +17,7 @@

  let body

-  $: renderColumnsWidth = $renderedColumns.reduce(
+  $: columnsWidth = $visibleColumns.reduce(
    (total, col) => (total += col.width),
    0
  )
@ -47,7 +47,7 @@
      <div
        class="blank"
        class:highlighted={$hoveredRowId === BlankRowID}
-        style="width:{renderColumnsWidth}px"
+        style="width:{columnsWidth}px"
        on:mouseenter={$isDragging ? null : () => ($hoveredRowId = BlankRowID)}
        on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
        on:click={() => dispatch("add-row-inline")}
--- a/packages/frontend-core/src/components/grid/layout/GridRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridRow.svelte
@ -10,7 +10,7 @@
    focusedCellId,
    reorder,
    selectedRows,
-    renderedColumns,
+    visibleColumns,
    hoveredRowId,
    selectedCellMap,
    focusedRow,
@ -19,6 +19,7 @@
    isDragging,
    dispatch,
    rows,
+    columnRenderMap,
  } = getContext("grid")

  $: rowSelected = !!$selectedRows[row._id]
@ -34,7 +35,7 @@
  on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
  on:click={() => dispatch("rowclick", rows.actions.cleanRow(row))}
 >
-  {#each $renderedColumns as column, columnIdx (column.name)}
+  {#each $visibleColumns as column, columnIdx}
    {@const cellId = `${row._id}-${column.name}`}
    <DataCell
      {cellId}
@ -51,6 +52,7 @@
      selectedUser={$selectedCellMap[cellId]}
      width={column.width}
      contentLines={$contentLines}
+      hidden={!$columnRenderMap[column.name]}
    />
  {/each}
 </div>
--- a/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
@ -11,7 +11,6 @@
    maxScrollLeft,
    bounds,
    hoveredRowId,
-    hiddenColumnsWidth,
    menu,
  } = getContext("grid")

@ -23,10 +22,10 @@
  let initialTouchX
  let initialTouchY

-  $: style = generateStyle($scroll, $rowHeight, $hiddenColumnsWidth)
+  $: style = generateStyle($scroll, $rowHeight)

-  const generateStyle = (scroll, rowHeight, hiddenWidths) => {
-    const offsetX = scrollHorizontally ? -1 * scroll.left + hiddenWidths : 0
+  const generateStyle = (scroll, rowHeight) => {
+    const offsetX = scrollHorizontally ? -1 * scroll.left : 0
    const offsetY = scrollVertically ? -1 * (scroll.top % rowHeight) : 0
    return `transform: translate3d(${offsetX}px, ${offsetY}px, 0);`
  }
--- a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
@ -5,14 +5,14 @@
  import HeaderCell from "../cells/HeaderCell.svelte"
  import { TempTooltip, TooltipType } from "@budibase/bbui"

-  const { renderedColumns, config, hasNonAutoColumn, datasource, loading } =
+  const { visibleColumns, config, hasNonAutoColumn, datasource, loading } =
    getContext("grid")
 </script>

 <div class="header">
  <GridScrollWrapper scrollHorizontally>
    <div class="row">
-      {#each $renderedColumns as column, idx}
+      {#each $visibleColumns as column, idx}
        <HeaderCell {column} {idx}>
          <slot name="edit-column" />
        </HeaderCell>
--- a/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte
+++ b/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte
@ -2,17 +2,16 @@
  import { getContext, onMount } from "svelte"
  import { Icon, Popover, clickOutside } from "@budibase/bbui"

-  const { renderedColumns, scroll, hiddenColumnsWidth, width, subscribe } =
-    getContext("grid")
+  const { visibleColumns, scroll, width, subscribe } = getContext("grid")

  let anchor
  let open = false

-  $: columnsWidth = $renderedColumns.reduce(
+  $: columnsWidth = $visibleColumns.reduce(
    (total, col) => (total += col.width),
    0
  )
-  $: end = $hiddenColumnsWidth + columnsWidth - 1 - $scroll.left
+  $: end = columnsWidth - 1 - $scroll.left
  $: left = Math.min($width - 40, end)

  const close = () => {
@ -34,7 +33,7 @@
 <Popover
  bind:open
  {anchor}
-  align={$renderedColumns.length ? "right" : "left"}
+  align={$visibleColumns.length ? "right" : "left"}
  offset={0}
  popoverTarget={document.getElementById(`add-column-button`)}
  customZindex={100}
--- a/packages/frontend-core/src/components/grid/layout/NewRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
@ -20,7 +20,7 @@
    datasource,
    subscribe,
    renderedRows,
-    renderedColumns,
+    visibleColumns,
    rowHeight,
    hasNextPage,
    maxScrollTop,
@ -31,6 +31,7 @@
    refreshing,
    config,
    filter,
+    columnRenderMap,
  } = getContext("grid")

  let visible = false
@ -38,7 +39,7 @@
  let newRow
  let offset = 0

-  $: firstColumn = $stickyColumn || $renderedColumns[0]
+  $: firstColumn = $stickyColumn || $visibleColumns[0]
  $: width = GutterWidth + ($stickyColumn?.width || 0)
  $: $datasource, (visible = false)
  $: invertY = shouldInvertY(offset, $rowVerticalInversionIndex, $renderedRows)
@ -211,29 +212,28 @@
    <div class="normal-columns" transition:fade|local={{ duration: 130 }}>
      <GridScrollWrapper scrollHorizontally attachHandlers>
        <div class="row">
-          {#each $renderedColumns as column, columnIdx}
+          {#each $visibleColumns as column, columnIdx}
            {@const cellId = `new-${column.name}`}
-            {#key cellId}
-              <DataCell
-                {cellId}
-                {column}
-                {updateValue}
-                rowFocused
-                row={newRow}
-                focused={$focusedCellId === cellId}
-                width={column.width}
-                topRow={offset === 0}
-                invertX={columnIdx >= $columnHorizontalInversionIndex}
-                {invertY}
-              >
-                {#if column?.schema?.autocolumn}
-                  <div class="readonly-overlay">Can't edit auto column</div>
-                {/if}
-                {#if isAdding}
-                  <div in:fade={{ duration: 130 }} class="loading-overlay" />
-                {/if}
-              </DataCell>
-            {/key}
+            <DataCell
+              {cellId}
+              {column}
+              {updateValue}
+              rowFocused
+              row={newRow}
+              focused={$focusedCellId === cellId}
+              width={column.width}
+              topRow={offset === 0}
+              invertX={columnIdx >= $columnHorizontalInversionIndex}
+              {invertY}
+              hidden={!$columnRenderMap[column.name]}
+            >
+              {#if column?.schema?.autocolumn}
+                <div class="readonly-overlay">Can't edit auto column</div>
+              {/if}
+              {#if isAdding}
+                <div in:fade={{ duration: 130 }} class="loading-overlay" />
+              {/if}
+            </DataCell>
          {/each}
        </div>
      </GridScrollWrapper>
--- a/packages/frontend-core/src/components/grid/overlays/ResizeOverlay.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/ResizeOverlay.svelte
@ -2,7 +2,7 @@
  import { getContext } from "svelte"
  import { GutterWidth } from "../lib/constants"

-  const { resize, renderedColumns, stickyColumn, isReordering, scrollLeft } =
+  const { resize, visibleColumns, stickyColumn, isReordering, scrollLeft } =
    getContext("grid")

  $: offset = GutterWidth + ($stickyColumn?.width || 0)
@ -26,7 +26,7 @@
      <div class="resize-indicator" />
    </div>
  {/if}
-  {#each $renderedColumns as column}
+  {#each $visibleColumns as column}
    <div
      class="resize-slider"
      class:visible={activeColumn === column.name}
--- a/packages/frontend-core/src/components/grid/stores/viewport.js
+++ b/packages/frontend-core/src/components/grid/stores/viewport.js
@ -1,4 +1,4 @@
-import { derived, get } from "svelte/store"
+import { derived } from "svelte/store"
 import {
  MaxCellRenderHeight,
  MaxCellRenderWidthOverflow,
@ -50,12 +50,11 @@ export const deriveStores = context => {
    const interval = MinColumnWidth
    return Math.round($scrollLeft / interval) * interval
  })
-  const renderedColumns = derived(
+  const columnRenderMap = derived(
    [visibleColumns, scrollLeftRounded, width],
-    ([$visibleColumns, $scrollLeft, $width], set) => {
+    ([$visibleColumns, $scrollLeft, $width]) => {
      if (!$visibleColumns.length) {
-        set([])
-        return
+        return {}
      }
      let startColIdx = 0
      let rightEdge = $visibleColumns[0].width
@ -75,34 +74,16 @@ export const deriveStores = context => {
        leftEdge += $visibleColumns[endColIdx].width
        endColIdx++
      }
-      // Render an additional column on either side to account for
-      // debounce column updates based on scroll position
-      const next = $visibleColumns.slice(
-        Math.max(0, startColIdx - 1),
-        endColIdx + 1
-      )
-      const current = get(renderedColumns)
-      if (JSON.stringify(next) !== JSON.stringify(current)) {
-        set(next)
-      }
-    }
-  )

-  const hiddenColumnsWidth = derived(
-    [renderedColumns, visibleColumns],
-    ([$renderedColumns, $visibleColumns]) => {
-      const idx = $visibleColumns.findIndex(
-        col => col.name === $renderedColumns[0]?.name
-      )
-      let width = 0
-      if (idx > 0) {
-        for (let i = 0; i < idx; i++) {
-          width += $visibleColumns[i].width
-        }
-      }
-      return width
-    },
-    0
+      // Only update the store if different
+      let next = {}
+      $visibleColumns
+        .slice(Math.max(0, startColIdx), endColIdx)
+        .forEach(col => {
+          next[col.name] = true
+        })
+      return next
+    }
  )

  // Determine the row index at which we should start vertically inverting cell
@ -130,12 +111,12 @@ export const deriveStores = context => {
  // Determine the column index at which we should start horizontally inverting
  // cell dropdowns
  const columnHorizontalInversionIndex = derived(
-    [renderedColumns, scrollLeft, width],
-    ([$renderedColumns, $scrollLeft, $width]) => {
+    [visibleColumns, scrollLeft, width],
+    ([$visibleColumns, $scrollLeft, $width]) => {
      const cutoff = $width + $scrollLeft - ScrollBarSize * 3
-      let inversionIdx = $renderedColumns.length
-      for (let i = $renderedColumns.length - 1; i >= 0; i--, inversionIdx--) {
-        const rightEdge = $renderedColumns[i].left + $renderedColumns[i].width
+      let inversionIdx = $visibleColumns.length
+      for (let i = $visibleColumns.length - 1; i >= 0; i--, inversionIdx--) {
+        const rightEdge = $visibleColumns[i].left + $visibleColumns[i].width
        if (rightEdge + MaxCellRenderWidthOverflow <= cutoff) {
          break
        }
@ -148,8 +129,7 @@ export const deriveStores = context => {
    scrolledRowCount,
    visualRowCapacity,
    renderedRows,
-    renderedColumns,
-    hiddenColumnsWidth,
+    columnRenderMap,
    rowVerticalInversionIndex,
    columnHorizontalInversionIndex,
  }
--- 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/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