From 5ef5106f07b94ec93a61c5cd205fa371d01800cf Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 8 Apr 2021 15:57:24 +0100
Subject: [PATCH 01/25] Add spectrum table to BBUI and update builder

---
 packages/bbui/package.json                    |   8 +
 .../bbui/src/Table/AttachmentRenderer.svelte  |  39 ++
 .../bbui/src/Table/BooleanRenderer.svelte     |  38 ++
 packages/bbui/src/Table/CellRenderer.svelte   |  27 ++
 .../bbui/src/Table/DateTimeRenderer.svelte    |  13 +
 .../src/Table/RelationshipRenderer.svelte     |  20 +
 .../bbui/src/Table/SelectEditRenderer.svelte  |  48 +++
 packages/bbui/src/Table/StringRenderer.svelte |  13 +
 packages/bbui/src/Table/Table.svelte          | 356 ++++++++++++++++++
 packages/bbui/src/Table/index.js              |   1 +
 packages/bbui/src/index.js                    |   1 +
 packages/bbui/yarn.lock                       |  40 ++
 .../components/backend/DataTable/Table.svelte | 258 +++----------
 13 files changed, 649 insertions(+), 213 deletions(-)
 create mode 100644 packages/bbui/src/Table/AttachmentRenderer.svelte
 create mode 100644 packages/bbui/src/Table/BooleanRenderer.svelte
 create mode 100644 packages/bbui/src/Table/CellRenderer.svelte
 create mode 100644 packages/bbui/src/Table/DateTimeRenderer.svelte
 create mode 100644 packages/bbui/src/Table/RelationshipRenderer.svelte
 create mode 100644 packages/bbui/src/Table/SelectEditRenderer.svelte
 create mode 100644 packages/bbui/src/Table/StringRenderer.svelte
 create mode 100644 packages/bbui/src/Table/Table.svelte
 create mode 100644 packages/bbui/src/Table/index.js

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 7d34c5c6d7..67277ac2f0 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -43,6 +43,14 @@
     "dist"
   ],
   "dependencies": {
+    "@spectrum-css/actionbutton": "^1.0.1",
+    "@spectrum-css/button": "^3.0.1",
+    "@spectrum-css/checkbox": "^3.0.1",
+    "@spectrum-css/icon": "^3.0.1",
+    "@spectrum-css/label": "^2.0.9",
+    "@spectrum-css/table": "^3.0.1",
+    "@spectrum-css/vars": "^3.0.1",
+    "dayjs": "^1.10.4",
     "markdown-it": "^12.0.4",
     "quill": "^1.3.7",
     "sirv-cli": "^0.4.6",
diff --git a/packages/bbui/src/Table/AttachmentRenderer.svelte b/packages/bbui/src/Table/AttachmentRenderer.svelte
new file mode 100644
index 0000000000..45bd97a849
--- /dev/null
+++ b/packages/bbui/src/Table/AttachmentRenderer.svelte
@@ -0,0 +1,39 @@
+<script>
+  export let value
+
+  const displayLimit = 5
+  $: attachments = value?.slice(0, displayLimit) ?? []
+  $: leftover = (value?.length ?? 0) - attachments.length
+</script>
+
+{#each attachments as attachment}
+  {#if attachment.type.startsWith('image')}
+    <img src={attachment.url} alt={attachment.extension} />
+  {:else}
+    <div class="file">{attachment.extension}</div>
+  {/if}
+{/each}
+{#if leftover}
+  <div>+{leftover} more</div>
+{/if}
+
+<style>
+  img {
+    height: 32px;
+    max-width: 64px;
+  }
+  .file {
+    height: 32px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0 8px;
+    color: var(--spectrum-global-color-gray-800);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 2px;
+    text-transform: uppercase;
+    font-weight: 500;
+    font-size: 11px;
+  }
+</style>
diff --git a/packages/bbui/src/Table/BooleanRenderer.svelte b/packages/bbui/src/Table/BooleanRenderer.svelte
new file mode 100644
index 0000000000..a71e28cb91
--- /dev/null
+++ b/packages/bbui/src/Table/BooleanRenderer.svelte
@@ -0,0 +1,38 @@
+<script>
+  import "@spectrum-css/checkbox/dist/index-vars.css"
+
+  export let value
+</script>
+
+<label
+  class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized">
+  <input
+    type="checkbox"
+    class="spectrum-Checkbox-input"
+    id="checkbox-1"
+    disabled
+    checked={!!value} />
+  <span class="spectrum-Checkbox-box">
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
+      focusable="false"
+      aria-hidden="true">
+      <use xlink:href="#spectrum-css-icon-Checkmark100" />
+    </svg>
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
+      focusable="false"
+      aria-hidden="true">
+      <use xlink:href="#spectrum-css-icon-Dash100" />
+    </svg>
+  </span>
+</label>
+
+<style>
+  .spectrum-Checkbox {
+    min-height: 0;
+  }
+  .spectrum-Checkbox-box {
+    margin: 0;
+  }
+</style>
diff --git a/packages/bbui/src/Table/CellRenderer.svelte b/packages/bbui/src/Table/CellRenderer.svelte
new file mode 100644
index 0000000000..0c14ec2aa5
--- /dev/null
+++ b/packages/bbui/src/Table/CellRenderer.svelte
@@ -0,0 +1,27 @@
+<script>
+  import StringRenderer from "./StringRenderer.svelte"
+  import BooleanRenderer from "./BooleanRenderer.svelte"
+  import DateTimeRenderer from "./DateTimeRenderer.svelte"
+  import RelationshipRenderer from "./RelationshipRenderer.svelte"
+  import AttachmentRenderer from "./AttachmentRenderer.svelte"
+
+  export let schema
+  export let value
+
+  const plainTypes = ["string", "options", "number", "longform"]
+  $: type = schema?.type ?? "string"
+</script>
+
+{#if value != null && value !== ''}
+  {#if plainTypes.includes(type)}
+    <StringRenderer {value} />
+  {:else if type === 'boolean'}
+    <BooleanRenderer {value} />
+  {:else if type === 'datetime'}
+    <DateTimeRenderer {value} />
+  {:else if type === 'link'}
+    <RelationshipRenderer {value} />
+  {:else if type === 'attachment'}
+    <AttachmentRenderer {value} />
+  {/if}
+{/if}
diff --git a/packages/bbui/src/Table/DateTimeRenderer.svelte b/packages/bbui/src/Table/DateTimeRenderer.svelte
new file mode 100644
index 0000000000..169adab163
--- /dev/null
+++ b/packages/bbui/src/Table/DateTimeRenderer.svelte
@@ -0,0 +1,13 @@
+<script>
+  import dayjs from "dayjs"
+
+  export let value
+</script>
+
+<div>{dayjs(value).format('MMMM D YYYY, HH:mm')}</div>
+
+<style>
+  div {
+    width: 200px;
+  }
+</style>
diff --git a/packages/bbui/src/Table/RelationshipRenderer.svelte b/packages/bbui/src/Table/RelationshipRenderer.svelte
new file mode 100644
index 0000000000..6c04000fa7
--- /dev/null
+++ b/packages/bbui/src/Table/RelationshipRenderer.svelte
@@ -0,0 +1,20 @@
+<script>
+  import "@spectrum-css/label/dist/index-vars.css"
+
+  export let value
+
+  const displayLimit = 5
+  $: relationships = value?.slice(0, displayLimit) ?? []
+  $: leftover = (value?.length ?? 0) - relationships.length
+</script>
+
+{#each relationships as relationship}
+  {#if relationship?.primaryDisplay}
+    <span class="spectrum-Label spectrum-Label--grey">
+      {relationship.primaryDisplay}
+    </span>
+  {/if}
+{/each}
+{#if leftover}
+  <div>+{leftover} more</div>
+{/if}
diff --git a/packages/bbui/src/Table/SelectEditRenderer.svelte b/packages/bbui/src/Table/SelectEditRenderer.svelte
new file mode 100644
index 0000000000..89a97f3866
--- /dev/null
+++ b/packages/bbui/src/Table/SelectEditRenderer.svelte
@@ -0,0 +1,48 @@
+<script>
+  import "@spectrum-css/checkbox/dist/index-vars.css"
+  import "@spectrum-css/actionbutton/dist/index-vars.css"
+
+  export let selected
+  export let onToggleSelection
+  export let onEdit
+  export let allowSelectRows = false
+  export let allowEditRows = false
+</script>
+
+{#if allowSelectRows}
+  <label
+    class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized">
+    <input
+      type="checkbox"
+      class="spectrum-Checkbox-input"
+      id="checkbox-1"
+      bind:checked={selected} />
+    <span class="spectrum-Checkbox-box">
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
+        focusable="false"
+        aria-hidden="true">
+        <use xlink:href="#spectrum-css-icon-Checkmark100" />
+      </svg>
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
+        focusable="false"
+        aria-hidden="true">
+        <use xlink:href="#spectrum-css-icon-Dash100" />
+      </svg>
+    </span>
+  </label>
+{/if}
+{#if allowEditRows}
+  <button
+    class="spectrum-ActionButton spectrum-ActionButton--sizeS"
+    on:click={onEdit}>
+    <span class="spectrum-ActionButton-label">Edit</span>
+  </button>
+{/if}
+
+<style>
+  label {
+    margin-right: 5px;
+  }
+</style>
diff --git a/packages/bbui/src/Table/StringRenderer.svelte b/packages/bbui/src/Table/StringRenderer.svelte
new file mode 100644
index 0000000000..2756839616
--- /dev/null
+++ b/packages/bbui/src/Table/StringRenderer.svelte
@@ -0,0 +1,13 @@
+<script>
+  export let value
+</script>
+
+<div>{value}</div>
+
+<style>
+  div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 150px;
+  }
+</style>
diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
new file mode 100644
index 0000000000..475c1e2a09
--- /dev/null
+++ b/packages/bbui/src/Table/Table.svelte
@@ -0,0 +1,356 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import "@spectrum-css/table/dist/index-vars.css"
+  import CellRenderer from "./CellRenderer.svelte"
+  import SelectEditRenderer from "./SelectEditRenderer.svelte"
+
+  export let data = []
+  export let schema = {}
+  export let showAutoColumns = false
+  export let rowCount = 14
+  export let quiet = true
+  export let loading = false
+  export let allowSelectRows = true
+  export let allowEditRows = true
+  export let allowEditColumns = true
+  export let selectedRows = []
+  export let customColumnRenderer = SelectEditRenderer
+  export let customColumnTitle
+
+  const dispatch = createEventDispatcher()
+
+  // Config
+  const rowHeight = 55
+  const headerHeight = 36
+  const rowPreload = 5
+  const maxRows = 100
+
+  // Sorting state
+  let sortColumn
+  let sortOrder
+
+  // Table state
+  let loaded = false
+  $: if (!loading) loaded = true
+  $: rows = data ?? []
+  $: visibleRowCount = loaded
+    ? Math.min(rows.length, rowCount || maxRows, maxRows)
+    : rowCount || 8
+  $: scroll = rows.length > visibleRowCount
+  $: contentStyle = getContentStyle(visibleRowCount, scroll || !loaded)
+  $: sortedRows = sortRows(rows, sortColumn, sortOrder)
+  $: fields = getFields(schema, showAutoColumns)
+
+  // Scrolling state
+  let timeout
+  let nextScrollTop = 0
+  let scrollTop = 0
+  $: firstVisibleRow = calculateFirstVisibleRow(scrollTop)
+  $: lastVisibleRow = calculateLastVisibleRow(
+    firstVisibleRow,
+    visibleRowCount,
+    rows.length
+  )
+
+  const getContentStyle = (visibleRows, useFixedHeight) => {
+    if (!useFixedHeight) {
+      return ""
+    }
+    return `height: ${headerHeight - 1 + visibleRows * (rowHeight + 1)}px;`
+  }
+
+  const sortRows = (rows, sortColumn, sortOrder) => {
+    if (!sortColumn || !sortOrder) {
+      return rows
+    }
+    return rows.slice().sort((a, b) => {
+      const colA = a[sortColumn]
+      const colB = b[sortColumn]
+      if (sortOrder === "Descending") {
+        return colA > colB ? -1 : 1
+      } else {
+        return colA > colB ? 1 : -1
+      }
+    })
+  }
+
+  const sortBy = field => {
+    if (field === sortColumn) {
+      sortOrder = sortOrder === "Descending" ? "Ascending" : "Descending"
+    } else {
+      sortColumn = field
+      sortOrder = "Descending"
+    }
+  }
+
+  const getFields = (schema, showAutoColumns) => {
+    let columns = []
+    let autoColumns = []
+    Object.entries(schema).forEach(([field, fieldSchema]) => {
+      if (!fieldSchema?.autocolumn) {
+        columns.push(field)
+      } else if (showAutoColumns) {
+        autoColumns.push(field)
+      }
+    })
+    return columns.sort().concat(autoColumns)
+  }
+
+  const onScroll = event => {
+    nextScrollTop = event.target.scrollTop
+    if (timeout) {
+      return
+    }
+    timeout = setTimeout(() => {
+      scrollTop = nextScrollTop
+      timeout = null
+    }, 50)
+  }
+
+  const calculateFirstVisibleRow = scrollTop => {
+    return Math.max(Math.floor(scrollTop / (rowHeight + 1)) - rowPreload, 0)
+  }
+
+  const calculateLastVisibleRow = (firstRow, visibleRowCount, allRowCount) => {
+    return Math.min(firstRow + visibleRowCount + 2 * rowPreload, allRowCount)
+  }
+
+  const editColumn = (e, field) => {
+    e.stopPropagation()
+    dispatch("editcolumn", field)
+  }
+
+  const editRow = (e, row) => {
+    e.stopPropagation()
+    dispatch("editrow", row)
+  }
+
+  const toggleSelectRow = row => {
+    if (!allowSelectRows) {
+      return
+    }
+    if (selectedRows.includes(row)) {
+      selectedRows = selectedRows.filter(selectedRow => selectedRow !== row)
+    } else {
+      selectedRows = [...selectedRows, row]
+    }
+  }
+</script>
+
+{#if !loaded}
+  <div class="loading" style={contentStyle} />
+{:else}
+  <div
+    on:scroll={onScroll}
+    class:quiet
+    style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
+    class="container">
+    <div style={contentStyle}>
+      <table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
+        <thead class="spectrum-Table-head">
+          <tr>
+            {#if customColumnRenderer}
+              <th class="spectrum-Table-headCell">
+                <div class="spectrum-Table-headCell-content">
+                  {customColumnTitle || ''}
+                </div>
+              </th>
+            {/if}
+            {#each fields as field}
+              <th
+                class="spectrum-Table-headCell is-sortable"
+                class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
+                class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
+                on:click={() => sortBy(field)}>
+                <div class="spectrum-Table-headCell-content">
+                  <div class="title">
+                    {schema[field]?.displayName || schema[field]?.name}
+                  </div>
+                  {#if schema[field]?.autocolumn}
+                    <svg
+                      class="spectrum-Icon spectrum-Table-autoIcon"
+                      focusable="false">
+                      <use xlink:href="#spectrum-icon-18-MagicWand" />
+                    </svg>
+                  {/if}
+                  {#if sortColumn === field}
+                    <svg
+                      class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
+                      focusable="false"
+                      aria-hidden="true">
+                      <use xlink:href="#spectrum-css-icon-Arrow100" />
+                    </svg>
+                  {/if}
+                  {#if allowEditColumns}
+                    <svg
+                      class="spectrum-Icon spectrum-Table-editIcon"
+                      focusable="false"
+                      on:click={e => editColumn(e, field)}>
+                      <use xlink:href="#spectrum-icon-18-Edit" />
+                    </svg>
+                  {/if}
+                </div>
+              </th>
+            {/each}
+          </tr>
+        </thead>
+        <tbody class="spectrum-Table-body">
+          {#each sortedRows as row, idx}
+            <tr
+              on:click={() => toggleSelectRow(row)}
+              class="spectrum-Table-row"
+              class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}>
+              {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
+                {#if customColumnRenderer}
+                  <td class="spectrum-Table-cell spectrum-Table-cell--divider">
+                    <div class="spectrum-Table-cell-content">
+                      <svelte:component
+                        this={customColumnRenderer}
+                        data={row}
+                        selected={selectedRows.includes(row)}
+                        onToggleSelection={() => toggleSelectRow(row)}
+                        onEdit={e => editRow(e, row)}
+                        {allowSelectRows}
+                        {allowEditRows} />
+                    </div>
+                  </td>
+                {/if}
+                {#each fields as field}
+                  <td class="spectrum-Table-cell">
+                    <div class="spectrum-Table-cell-content">
+                      <CellRenderer schema={schema[field]} value={row[field]} />
+                    </div>
+                  </td>
+                {/each}
+              {/if}
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .loading,
+  .container,
+  th {
+    background-color: var(--spectrum-global-color-gray-100);
+  }
+
+  .container {
+    position: relative;
+    overflow: auto;
+    border: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
+    scrollbar-width: thin;
+    scrollbar-color: var(--spectrum-global-color-gray-300)
+      var(--spectrum-global-color-gray-100);
+  }
+  .container::-webkit-scrollbar {
+    width: 18px;
+    height: 18px;
+  }
+  .container::-webkit-scrollbar-track {
+    background: var(--spectrum-global-color-gray-100);
+  }
+  .container::-webkit-scrollbar-thumb {
+    background-color: var(--spectrum-global-color-gray-300);
+    border-radius: 20px;
+    border: 4px solid var(--spectrum-global-color-gray-100);
+  }
+  .container::-webkit-scrollbar-corner {
+    background: var(--spectrum-global-color-gray-100);
+  }
+  .container.quiet {
+    border: none !important;
+  }
+  table {
+    width: 100%;
+  }
+
+  .spectrum-Table-headCell .spectrum-Icon {
+    pointer-events: all;
+    margin-left: var(
+      --spectrum-table-header-sort-icon-gap,
+      var(--spectrum-global-dimension-size-125)
+    );
+  }
+  .spectrum-Table-editIcon,
+  .spectrum-Table-autoIcon {
+    width: var(--spectrum-global-dimension-size-150);
+    height: var(--spectrum-global-dimension-size-150);
+  }
+  .spectrum-Table-editIcon {
+    opacity: 0;
+  }
+  .spectrum-Table-headCell:hover .spectrum-Table-editIcon {
+    opacity: 1;
+    transition: opacity 0.2s ease;
+  }
+
+  .spectrum,
+  th {
+    border-bottom: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
+  }
+  th {
+    vertical-align: middle;
+    height: var(--header-height);
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
+  .spectrum-Table-headCell-content {
+    white-space: nowrap;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    user-select: none;
+  }
+  .spectrum-Table-headCell-content .title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  tbody {
+    z-index: 1;
+  }
+  tbody tr {
+    height: var(--row-height);
+  }
+  tbody tr.hidden {
+    height: calc(var(--row-height) + 1px);
+  }
+  tbody tr.offset {
+    background-color: red;
+    display: block;
+  }
+  td {
+    padding-top: 0;
+    padding-bottom: 0;
+    border-bottom: none !important;
+    border-left: none !important;
+    border-right: none !important;
+    border-top: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
+  }
+  tr:first-child td {
+    border-top: none !important;
+  }
+  .spectrum:not(.quiet) td.spectrum-Table-cell--divider {
+    width: 1px;
+    border-right: 1px solid
+      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
+  }
+  .spectrum-Table-cell-content {
+    height: var(--row-height);
+    white-space: nowrap;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 4px;
+  }
+</style>
diff --git a/packages/bbui/src/Table/index.js b/packages/bbui/src/Table/index.js
new file mode 100644
index 0000000000..16b81c6eb6
--- /dev/null
+++ b/packages/bbui/src/Table/index.js
@@ -0,0 +1 @@
+export { default as Table } from "./Table.svelte"
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 1a156697c9..d21260ecf8 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -30,6 +30,7 @@ export { default as DatePicker } from "./DatePicker/DatePicker.svelte"
 export { default as Multiselect } from "./Form/Multiselect.svelte"
 export { default as Slider } from "./Form/Slider.svelte"
 export { default as Context } from "./context"
+export { default as Table } from "./Table/Table.svelte"
 
 // Actions
 export { default as autoResizeTextArea } from "./Actions/autoresize_textarea"
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index e444c1fb18..6b2a232b14 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -410,6 +410,41 @@
     lodash "^4.17.4"
     read-pkg-up "^7.0.0"
 
+"@spectrum-css/actionbutton@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577"
+  integrity sha512-AUqtyNabHF451Aj9i3xz82TxS5Z6k1dttA68/1hMeU9kbPCSS4P6Viw3vaRGs9CSspuR8xnnhDgrq+F+zMy2Hw==
+
+"@spectrum-css/button@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.1.tgz#6db8c3e851baecd0f1c2d88fef37d49d01c6e643"
+  integrity sha512-YXrBtjIYisk4Vaxnp0RiE4gdElQX04P2mc4Pi2GlQ27dJKlHmufYcF+kAqGdtiyK5yjdN/vKRcC8y13aA4rusA==
+
+"@spectrum-css/checkbox@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.1.tgz#6f36377d8bd556989ddd1dec2506dc295c5fcda8"
+  integrity sha512-fI0q2Cp6yU4ORyE6JWUSMYNgEtGf6AjYViZ2Weg3UPTYBQuWdQd8J0ZTcH38pDMyARFPRdiXgQ3KnyX5Hk5huw==
+
+"@spectrum-css/icon@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.1.tgz#e300a6fc353c85c6b5d6e7a364408a940c31b177"
+  integrity sha512-cGFtIrcQ/7tthdkHK1npuEFiCdYVHLqwmLxghUYQw8Tb8KgJaw3OBO1tpjgsUizexNgu26BjVRIbGxNWuBXIHQ==
+
+"@spectrum-css/label@^2.0.9":
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/label/-/label-2.0.9.tgz#792f34b906ba81118f4d0edcc81a18da1ecd57cb"
+  integrity sha512-0vXhWIZoQDTg+I6MyMpwmeJ+yQHtxkZ7lLcEqxhJ2y7JXP2ftblz2sO4+9jB11ljepeVlV+B6LF1drU8mMu82A==
+
+"@spectrum-css/table@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.1.tgz#753e0e2498082c0c36b9600828516aff3ac338cd"
+  integrity sha512-XQ+srMTv9hK1H0nctWUtqyzitmvyb5TNR+7mjAmKRdkBRSTQQSipDhenxZp72ekzMtMoSYZVZ77kgo0Iw3Fpug==
+
+"@spectrum-css/vars@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.1.tgz#561fd69098f896a647242dd8d6108af603bfa31e"
+  integrity sha512-l4oRcCOqInChYXZN6OQhpe3isk6l4OE6Ys8cgdlsiKp53suNoQxyyd9p/eGRbCjZgH3xQ8nK0t4DHa7QYC0S6w==
+
 "@sveltejs/vite-plugin-svelte@^1.0.0-next.5":
   version "1.0.0-next.5"
   resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.5.tgz#8cf608f7a3c33dfa5b648397aae1ba90e6a4883f"
@@ -1638,6 +1673,11 @@ dateformat@^3.0.0:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
+dayjs@^1.10.4:
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
+  integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
+
 debug@2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 059fe1e123..fa15f3f886 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -1,19 +1,15 @@
 <script>
   import { fade } from "svelte/transition"
   import { goto, params } from "@roxi/routify"
-  import AgGrid from "@budibase/svelte-ag-grid"
+  import { Table, Modal } from "@budibase/bbui"
 
   import api from "builderStore/api"
   import { notifier } from "builderStore/store/notifications"
   import Spinner from "components/common/Spinner.svelte"
   import DeleteRowsButton from "./buttons/DeleteRowsButton.svelte"
-  import {
-    getRenderer,
-    editRowRenderer,
-    userRowRenderer,
-  } from "./cells/cellRenderers"
-  import TableLoadingOverlay from "./TableLoadingOverlay"
-  import TableHeader from "./TableHeader"
+  import CreateEditRow from "./modals/CreateEditRow.svelte"
+  import CreateEditUser from "./modals/CreateEditUser.svelte"
+  import CreateEditColumn from "./modals/CreateEditColumn.svelte"
   import "@budibase/svelte-ag-grid/dist/index.css"
   import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
 
@@ -28,105 +24,24 @@
 
   let columnDefs = []
   let selectedRows = []
-
-  let options = {
-    defaultColDef: {
-      flex: 1,
-      filter: true,
-    },
-    rowSelection: allowEditing ? "multiple" : false,
-    rowMultiSelectWithClick: true,
-    suppressRowClickSelection: false,
-    suppressFieldDotNotation: true,
-    paginationAutoPageSize: true,
-    pagination: true,
-    enableRangeSelection: true,
-    popupParent: document.body,
-    components: {
-      customLoadingOverlay: TableLoadingOverlay,
-    },
-    loadingOverlayComponent: "customLoadingOverlay",
-    animateRows: true,
-  }
+  let editableColumn
+  let editableRow
+  let editRowModal
+  let editColumnModal
 
   $: isUsersTable = tableId === TableNames.USERS
+  $: editRowComponent = isUsersTable ? CreateEditUser : CreateEditRow
   $: {
     if (isUsersTable) {
-      schema.email.displayFieldName = "Email"
-      schema.roleId.displayFieldName = "Role"
+      console.log(schema)
+      schema.email.displayName = "Email"
+      schema.roleId.displayName = "Role"
       if (schema.status) {
-        schema.status.displayFieldName = "Status"
+        schema.status.displayName = "Status"
       }
     }
   }
 
-  $: {
-    // Reset selection every time data changes
-    selectedRows = []
-
-    let result = []
-    if (allowEditing) {
-      result = [
-        {
-          checkboxSelection: true,
-          lockPosition: true,
-          headerName: "Edit",
-          pinned: "left",
-          sortable: false,
-          resizable: false,
-          suppressMovable: true,
-          suppressMenu: true,
-          minWidth: 114,
-          width: 114,
-          cellRenderer: isUsersTable ? userRowRenderer : editRowRenderer,
-        },
-      ]
-    }
-
-    const canEditColumn = key => {
-      if (!allowEditing) {
-        return false
-      }
-      return !(isUsersTable && UNEDITABLE_USER_FIELDS.includes(key))
-    }
-
-    for (let [key, value] of Object.entries(schema || {})) {
-      // skip autocolumns if hiding
-      if (hideAutocolumns && value.autocolumn) {
-        continue
-      }
-      let config = {
-        headerCheckboxSelection: false,
-        headerComponent: TableHeader,
-        headerComponentParams: {
-          field: schema[key],
-          editable: canEditColumn(key),
-        },
-        headerName: value.displayFieldName || key,
-        field: key,
-        sortable: true,
-        cellRenderer: getRenderer({
-          schema: schema[key],
-          editable: true,
-          isUsersTable,
-        }),
-        cellRendererParams: {
-          selectRelationship,
-        },
-        autoHeight: true,
-        resizable: true,
-        minWidth: 200,
-      }
-      // sort auto-columns to the end if they are present
-      if (value.autocolumn) {
-        result.push(config)
-      } else {
-        result.unshift(config)
-      }
-    }
-    columnDefs = result
-  }
-
   function selectRelationship(row, fieldName) {
     if (!row?.[fieldName]?.length) {
       return
@@ -145,6 +60,20 @@
     notifier.success(`Successfully deleted ${selectedRows.length} rows`)
     selectedRows = []
   }
+
+  const editRow = row => {
+    editableRow = row
+    if (row) {
+      editRowModal.show()
+    }
+  }
+
+  const editColumn = field => {
+    editableColumn = schema?.[field]
+    if (editableColumn) {
+      editColumnModal.show()
+    }
+  }
 </script>
 
 <div>
@@ -163,17 +92,24 @@
     {/if}
   </div>
 </div>
-<div class="grid-wrapper">
-  {#key columnDefs.length}
-    <AgGrid
-      {theme}
-      {options}
-      {data}
-      {columnDefs}
-      {loading}
-      on:select={({ detail }) => (selectedRows = detail)} />
-  {/key}
-</div>
+{#key tableId}
+  <Table
+    {data}
+    {schema}
+    {loading}
+    customColumnTitle="Edit"
+    bind:selectedRows
+    showAutoColumns={!hideAutocolumns}
+    on:editcolumn={e => editColumn(e.detail)}
+    on:editrow={e => editRow(e.detail)} />
+{/key}
+
+<Modal bind:this={editRowModal}>
+  <svelte:component this={editRowComponent} row={editableRow} />
+</Modal>
+<Modal bind:this={editColumnModal}>
+  <CreateEditColumn field={editableColumn} onClosed={editColumnModal.hide} />
+</Modal>
 
 <style>
   .table-title {
@@ -206,108 +142,4 @@
   .popovers :global(button svg) {
     margin-right: var(--spacing-xs);
   }
-
-  .grid-wrapper {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-  }
-  .grid-wrapper :global(> *) {
-    flex: 1 1 auto;
-  }
-  :global(.grid-wrapper) {
-    --ag-modal-overlay-background-color: transparent;
-    --ag-border-color: var(--grey-3);
-    --ag-header-background-color: var(--grey-1);
-    --ag-odd-row-background-color: var(--grey-1);
-    --ag-row-border-color: var(--grey-3);
-    --ag-background-color: var(--background);
-    --ag-foreground-color: var(--ink);
-  }
-  :global(.ag-overlay-loading-center) {
-    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.05) !important;
-    border-color: var(--grey-2);
-  }
-
-  :global(.ag-menu) {
-    border: var(--border-dark) !important;
-  }
-
-  :global(.ag-popup-child) {
-    border-radius: var(--border-radius-m) !important;
-    box-shadow: none !important;
-  }
-
-  :global(.ag-header-cell-text) {
-    font-family: var(--font-sans);
-    font-weight: 600;
-    color: var(--ink);
-  }
-
-  :global(.ag-filter) {
-    background: var(--background);
-    padding: var(--spacing-s);
-    outline: none;
-    box-sizing: border-box;
-    color: var(--ink);
-    border-radius: var(--border-radius-m);
-    font-family: var(--font-sans) !important;
-    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
-  }
-
-  :global(.ag-menu) {
-    border: none;
-  }
-
-  :global(.ag-simple-filter-body-wrapper > *) {
-    margin-bottom: var(--spacing-m) !important;
-  }
-
-  :global(.ag-select) {
-    height: inherit !important;
-  }
-
-  :global(.ag-menu input) {
-    color: var(--ink) !important;
-    font-size: var(--font-size-xs);
-    border-radius: var(--border-radius-s) !important;
-    border: none;
-    background-color: var(--grey-2) !important;
-    padding: var(--spacing-m);
-    margin: 0;
-    outline: none;
-    font-family: var(--font-sans);
-    border: var(--border-transparent) !important;
-    transition: 0.2s all;
-  }
-  :global(.ag-menu input:focus) {
-    border: var(--border-blue) !important;
-  }
-
-  :global(.ag-picker-field-display) {
-    color: var(--ink) !important;
-    font-size: var(--font-size-xs) !important;
-    border-radius: var(--border-radius-s) !important;
-    background-color: var(--grey-2) !important;
-    font-family: var(--font-sans);
-    border: var(--border-transparent) !important;
-  }
-
-  :global(.ag-picker-field-wrapper) {
-    background: var(--grey-2) !important;
-    border: var(--border-transparent) !important;
-    padding-top: var(--spacing-xs);
-    padding-bottom: var(--spacing-xs);
-  }
-
-  :global(.ag-header) {
-    height: 61px !important;
-    min-height: 61px !important;
-  }
-
-  :global(.ag-header-row) {
-    height: 60px !important;
-  }
 </style>

From ff174a7a3a72eec38bcee70ea56bcb9371d0408b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 9 Apr 2021 13:02:55 +0100
Subject: [PATCH 02/25] Shrink scroll bars slightly

---
 packages/bbui/src/Table/Table.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index 475c1e2a09..c273695865 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -248,8 +248,8 @@
       var(--spectrum-global-color-gray-100);
   }
   .container::-webkit-scrollbar {
-    width: 18px;
-    height: 18px;
+    width: 16px;
+    height: 16px;
   }
   .container::-webkit-scrollbar-track {
     background: var(--spectrum-global-color-gray-100);

From e7dcb311d358e706ef0f003bfd6db9e1df51d930 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 9 Apr 2021 13:07:22 +0100
Subject: [PATCH 03/25] Fix table border styles in default theme

---
 packages/bbui/src/Table/Table.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index c273695865..5928e12ed0 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -289,7 +289,7 @@
     transition: opacity 0.2s ease;
   }
 
-  .spectrum,
+  .container,
   th {
     border-bottom: 1px solid
       var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
@@ -339,7 +339,7 @@
   tr:first-child td {
     border-top: none !important;
   }
-  .spectrum:not(.quiet) td.spectrum-Table-cell--divider {
+  .container:not(.quiet) td.spectrum-Table-cell--divider {
     width: 1px;
     border-right: 1px solid
       var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;

From aa2cd7fbba1d559f20c013ff851a56d1502c2ed3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 9 Apr 2021 13:08:37 +0100
Subject: [PATCH 04/25] Lighten table scrollbar colours

---
 packages/bbui/src/Table/Table.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index 5928e12ed0..548e46b607 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -244,7 +244,7 @@
     border: 1px solid
       var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
     scrollbar-width: thin;
-    scrollbar-color: var(--spectrum-global-color-gray-300)
+    scrollbar-color: var(--spectrum-global-color-gray-400)
       var(--spectrum-global-color-gray-100);
   }
   .container::-webkit-scrollbar {
@@ -255,7 +255,7 @@
     background: var(--spectrum-global-color-gray-100);
   }
   .container::-webkit-scrollbar-thumb {
-    background-color: var(--spectrum-global-color-gray-300);
+    background-color: var(--spectrum-global-color-gray-400);
     border-radius: 20px;
     border: 4px solid var(--spectrum-global-color-gray-100);
   }

From 372a8ac944cb68905d9c5c58360357a6126f6cfd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 9 Apr 2021 13:36:54 +0100
Subject: [PATCH 05/25] Fix error when attachment type doesn't exist

---
 packages/bbui/src/Table/AttachmentRenderer.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bbui/src/Table/AttachmentRenderer.svelte b/packages/bbui/src/Table/AttachmentRenderer.svelte
index 45bd97a849..96e9f7ff99 100644
--- a/packages/bbui/src/Table/AttachmentRenderer.svelte
+++ b/packages/bbui/src/Table/AttachmentRenderer.svelte
@@ -7,7 +7,7 @@
 </script>
 
 {#each attachments as attachment}
-  {#if attachment.type.startsWith('image')}
+  {#if attachment.type?.startsWith('image')}
     <img src={attachment.url} alt={attachment.extension} />
   {:else}
     <div class="file">{attachment.extension}</div>

From d508b905be8c74ebd39ea44419b241ad29c9da3e Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 9 Apr 2021 13:41:39 +0100
Subject: [PATCH 06/25] Making attachments always a relative path on the way
 out.

---
 packages/builder/yarn.lock                    | 890 +-----------------
 .../src/api/controllers/deploy/utils.js       |   2 +-
 packages/server/src/utilities/rowProcessor.js |  25 +-
 3 files changed, 23 insertions(+), 894 deletions(-)

diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 7b0886dc89..228e3cab1f 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -882,76 +882,11 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@budibase/bbui@^1.58.13":
-  version "1.58.13"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.13.tgz#59df9c73def2d81c75dcbd2266c52c19db88dbd7"
-  integrity sha512-Zk6CKXdBfKsTVzA1Xs5++shdSSZLfphVpZuKVbjfzkgtuhyH7ruucexuSHEpFsxjW5rEKgKIBoRFzCK5vPvN0w==
-  dependencies:
-    markdown-it "^12.0.2"
-    quill "^1.3.7"
-    sirv-cli "^0.4.6"
-    svelte-flatpickr "^2.4.0"
-    svelte-portal "^1.0.0"
-    turndown "^7.0.0"
-
-"@budibase/client@^0.8.9":
-  version "0.8.12"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.8.12.tgz#1186d95509e28bb660f0c801b37b3cc52b0f3864"
-  integrity sha512-68eh1QvF443OgMsjpDEgSY9D/MUutnaKFruP98PHJgrRkVhQDY7F2EKn2FWgC5NJuCY3aJ1emRPdXUq4MapWuA==
-  dependencies:
-    "@budibase/string-templates" "^0.8.12"
-    regexparam "^1.3.0"
-    shortid "^2.2.15"
-    svelte-spa-router "^3.0.5"
-
 "@budibase/colorpicker@1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.1.2.tgz#f7436924ee746d7be9b2009c2fa193e710c30f89"
   integrity sha512-2PlZBVkATDqDC4b4Ri8Xi8X3OxhuHOGfmZwtXbZL38lNIeofaQT3Qyc1ECzEY5N+HrdGrWhY9EnliF6QM+LIuA==
 
-"@budibase/handlebars-helpers@^0.11.3":
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/@budibase/handlebars-helpers/-/handlebars-helpers-0.11.3.tgz#b6e5c91b83e8906e7d7ff10ddde277a3d561016e"
-  integrity sha512-MS1ptZEYq8o9J3tNLM7cZ2RGSSJIer4GiMIUHtbBI3sC9UKqZebao1JYNfmZKpNjntuqhZKgjqc5GfnVIEjsYQ==
-  dependencies:
-    arr-flatten "^1.1.0"
-    array-sort "^0.1.4"
-    define-property "^1.0.0"
-    extend-shallow "^3.0.2"
-    "falsey" "^0.3.2"
-    for-in "^1.0.2"
-    for-own "^1.0.0"
-    get-object "^0.2.0"
-    get-value "^2.0.6"
-    handlebars "^4.0.11"
-    handlebars-utils "^1.0.6"
-    has-value "^1.0.0"
-    helper-date "^1.0.1"
-    helper-markdown "^1.0.0"
-    helper-md "^0.2.2"
-    html-tag "^2.0.0"
-    is-even "^1.0.0"
-    is-glob "^4.0.0"
-    is-number "^4.0.0"
-    kind-of "^6.0.0"
-    logging-helpers "^1.0.0"
-    micromatch "^3.1.4"
-    relative "^3.0.2"
-    striptags "^3.1.0"
-    to-gfm-code-block "^0.1.1"
-    year "^0.2.1"
-
-"@budibase/string-templates@^0.8.12", "@budibase/string-templates@^0.8.9":
-  version "0.8.12"
-  resolved "https://registry.yarnpkg.com/@budibase/string-templates/-/string-templates-0.8.12.tgz#bc08d441ac90b2f71c89b4b15c40c7c5e934a6fb"
-  integrity sha512-FkTm3XRBozhrJqJA4YdDxbLbcY3me7sAbJ+dgO7mZkTybRcrdbxRwL1XjYfRw9DL7+8pucN2Y6OW8gOQgyaTtw==
-  dependencies:
-    "@budibase/handlebars-helpers" "^0.11.3"
-    dayjs "^1.10.4"
-    handlebars "^4.7.6"
-    handlebars-utils "^1.0.6"
-    lodash "^4.17.20"
-
 "@budibase/svelte-ag-grid@^1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@budibase/svelte-ag-grid/-/svelte-ag-grid-1.0.4.tgz#41cceec4bde2c4aea8b9da8f610fe36055c7709f"
@@ -1246,11 +1181,6 @@
     "@nodelib/fs.scandir" "2.1.4"
     fastq "^1.6.0"
 
-"@polka/url@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@polka/url/-/url-0.5.0.tgz#b21510597fd601e5d7c95008b76bf0d254ebfd31"
-  integrity sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==
-
 "@rollup/plugin-replace@^2.4.2":
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz#a2d539314fbc77c244858faa523012825068510a"
@@ -1678,135 +1608,11 @@ ajv@^8.0.1:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
-ansi-bgblack@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-bgblack/-/ansi-bgblack-0.1.1.tgz#a68ba5007887701b6aafbe3fa0dadfdfa8ee3ca2"
-  integrity sha1-poulAHiHcBtqr74/oNrf36juPKI=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-bgblue@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-bgblue/-/ansi-bgblue-0.1.1.tgz#67bdc04edc9b9b5278969da196dea3d75c8c3613"
-  integrity sha1-Z73ATtybm1J4lp2hlt6j11yMNhM=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-bgcyan@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-bgcyan/-/ansi-bgcyan-0.1.1.tgz#58489425600bde9f5507068dd969ebfdb50fe768"
-  integrity sha1-WEiUJWAL3p9VBwaN2Wnr/bUP52g=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-bggreen@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-bggreen/-/ansi-bggreen-0.1.1.tgz#4e3191248529943f4321e96bf131d1c13816af49"
-  integrity sha1-TjGRJIUplD9DIelr8THRwTgWr0k=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-bgmagenta@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-bgmagenta/-/ansi-bgmagenta-0.1.1.tgz#9b28432c076eaa999418672a3efbe19391c2c7a1"
-  integrity sha1-myhDLAduqpmUGGcqPvvhk5HCx6E=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-bgred@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-bgred/-/ansi-bgred-0.1.1.tgz#a76f92838382ba43290a6c1778424f984d6f1041"
-  integrity sha1-p2+Sg4OCukMpCmwXeEJPmE1vEEE=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-bgwhite@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-bgwhite/-/ansi-bgwhite-0.1.1.tgz#6504651377a58a6ececd0331994e480258e11ba8"
-  integrity sha1-ZQRlE3elim7OzQMxmU5IAljhG6g=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-bgyellow@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-bgyellow/-/ansi-bgyellow-0.1.1.tgz#c3fe2eb08cd476648029e6874d15a0b38f61d44f"
-  integrity sha1-w/4usIzUdmSAKeaHTRWgs49h1E8=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-black@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-black/-/ansi-black-0.1.1.tgz#f6185e889360b2545a1ec50c0bf063fc43032453"
-  integrity sha1-9hheiJNgslRaHsUMC/Bj/EMDJFM=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-blue@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-blue/-/ansi-blue-0.1.1.tgz#15b804990e92fc9ca8c5476ce8f699777c21edbf"
-  integrity sha1-FbgEmQ6S/JyoxUds6PaZd3wh7b8=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-bold@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-bold/-/ansi-bold-0.1.1.tgz#3e63950af5acc2ae2e670e6f67deb115d1a5f505"
-  integrity sha1-PmOVCvWswq4uZw5vZ96xFdGl9QU=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-colors@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-0.2.0.tgz#72c31de2a0d9a2ccd0cac30cc9823eeb2f6434b5"
-  integrity sha1-csMd4qDZoszQysMMyYI+6y9kNLU=
-  dependencies:
-    ansi-bgblack "^0.1.1"
-    ansi-bgblue "^0.1.1"
-    ansi-bgcyan "^0.1.1"
-    ansi-bggreen "^0.1.1"
-    ansi-bgmagenta "^0.1.1"
-    ansi-bgred "^0.1.1"
-    ansi-bgwhite "^0.1.1"
-    ansi-bgyellow "^0.1.1"
-    ansi-black "^0.1.1"
-    ansi-blue "^0.1.1"
-    ansi-bold "^0.1.1"
-    ansi-cyan "^0.1.1"
-    ansi-dim "^0.1.1"
-    ansi-gray "^0.1.1"
-    ansi-green "^0.1.1"
-    ansi-grey "^0.1.1"
-    ansi-hidden "^0.1.1"
-    ansi-inverse "^0.1.1"
-    ansi-italic "^0.1.1"
-    ansi-magenta "^0.1.1"
-    ansi-red "^0.1.1"
-    ansi-reset "^0.1.1"
-    ansi-strikethrough "^0.1.1"
-    ansi-underline "^0.1.1"
-    ansi-white "^0.1.1"
-    ansi-yellow "^0.1.1"
-    lazy-cache "^2.0.1"
-
 ansi-colors@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
   integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
 
-ansi-cyan@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-cyan/-/ansi-cyan-0.1.1.tgz#538ae528af8982f28ae30d86f2f17456d2609873"
-  integrity sha1-U4rlKK+JgvKK4w2G8vF0VtJgmHM=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-dim@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-dim/-/ansi-dim-0.1.1.tgz#40de4c603aa8086d8e7a86b8ff998d5c36eefd6c"
-  integrity sha1-QN5MYDqoCG2Oeoa4/5mNXDbu/Ww=
-  dependencies:
-    ansi-wrap "0.1.0"
-
 ansi-escapes@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
@@ -1819,62 +1625,6 @@ ansi-escapes@^4.2.1:
   dependencies:
     type-fest "^0.21.3"
 
-ansi-gray@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-gray/-/ansi-gray-0.1.1.tgz#2962cf54ec9792c48510a3deb524436861ef7251"
-  integrity sha1-KWLPVOyXksSFEKPetSRDaGHvclE=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-green@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-green/-/ansi-green-0.1.1.tgz#8a5d9a979e458d57c40e33580b37390b8e10d0f7"
-  integrity sha1-il2al55FjVfEDjNYCzc5C44Q0Pc=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-grey@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-grey/-/ansi-grey-0.1.1.tgz#59d98b6ac2ba19f8a51798e9853fba78339a33c1"
-  integrity sha1-WdmLasK6GfilF5jphT+6eDOaM8E=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-hidden@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-hidden/-/ansi-hidden-0.1.1.tgz#ed6a4c498d2bb7cbb289dbf2a8d1dcc8567fae0f"
-  integrity sha1-7WpMSY0rt8uyidvyqNHcyFZ/rg8=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-inverse@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-inverse/-/ansi-inverse-0.1.1.tgz#b6af45826fe826bfb528a6c79885794355ccd269"
-  integrity sha1-tq9Fgm/oJr+1KKbHmIV5Q1XM0mk=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-italic@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-italic/-/ansi-italic-0.1.1.tgz#104743463f625c142a036739cf85eda688986f23"
-  integrity sha1-EEdDRj9iXBQqA2c5z4XtpoiYbyM=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-magenta@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-magenta/-/ansi-magenta-0.1.1.tgz#063b5ba16fb3f23e1cfda2b07c0a89de11e430ae"
-  integrity sha1-BjtboW+z8j4c/aKwfAqJ3hHkMK4=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-red@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-red/-/ansi-red-0.1.1.tgz#8c638f9d1080800a353c9c28c8a81ca4705d946c"
-  integrity sha1-jGOPnRCAgAo1PJwoyKgcpHBdlGw=
-  dependencies:
-    ansi-wrap "0.1.0"
-
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -1890,20 +1640,6 @@ ansi-regex@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
   integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
 
-ansi-reset@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-reset/-/ansi-reset-0.1.1.tgz#e7e71292c3c7ddcd4d62ef4a6c7c05980911c3b7"
-  integrity sha1-5+cSksPH3c1NYu9KbHwFmAkRw7c=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-strikethrough@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-strikethrough/-/ansi-strikethrough-0.1.1.tgz#d84877140b2cff07d1c93ebce69904f68885e568"
-  integrity sha1-2Eh3FAss/wfRyT685pkE9oiF5Wg=
-  dependencies:
-    ansi-wrap "0.1.0"
-
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -1923,32 +1659,6 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
-ansi-underline@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-underline/-/ansi-underline-0.1.1.tgz#dfc920f4c97b5977ea162df8ffb988308aaa71a4"
-  integrity sha1-38kg9Ml7WXfqFi34/7mIMIqqcaQ=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-white@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-white/-/ansi-white-0.1.1.tgz#9c77b7c193c5ee992e6011d36ec4c921b4578944"
-  integrity sha1-nHe3wZPF7pkuYBHTbsTJIbRXiUQ=
-  dependencies:
-    ansi-wrap "0.1.0"
-
-ansi-wrap@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
-  integrity sha1-qCJQ3bABXponyoLoLqYDu/pF768=
-
-ansi-yellow@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-yellow/-/ansi-yellow-0.1.1.tgz#cb9356f2f46c732f0e3199e6102955a77da83c1d"
-  integrity sha1-y5NW8vRscy8OMZnmEClVp32oPB0=
-  dependencies:
-    ansi-wrap "0.1.0"
-
 any-observable@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.3.0.tgz#af933475e5806a67d0d7df090dd5e8bef65d119b"
@@ -1975,18 +1685,13 @@ arch@^2.1.2:
   resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11"
   integrity sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==
 
-argparse@^1.0.10, argparse@^1.0.7:
+argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
   integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
   dependencies:
     sprintf-js "~1.0.2"
 
-argparse@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
-  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
-
 aria-query@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
@@ -2010,15 +1715,6 @@ arr-union@^3.1.0:
   resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
   integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
 
-array-sort@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/array-sort/-/array-sort-0.1.4.tgz#662855eaeb671b4188df4451b2f24a0753992b23"
-  integrity sha512-BNcM+RXxndPxiZ2rd76k6nyQLRZr2/B/sdi8pQ+Joafr5AH279L40dfokSUTp8O+AaqYjXWhblBWa2st2nc4fQ==
-  dependencies:
-    default-compare "^1.0.0"
-    get-value "^2.0.6"
-    kind-of "^5.0.2"
-
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@@ -2071,13 +1767,6 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-autolinker@~0.28.0:
-  version "0.28.1"
-  resolved "https://registry.yarnpkg.com/autolinker/-/autolinker-0.28.1.tgz#0652b491881879f0775dace0cdca3233942a4e47"
-  integrity sha1-BlK0kYgYefB3XazgzcoyM5QqTkc=
-  dependencies:
-    gulp-header "^1.7.1"
-
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -2313,7 +2002,7 @@ cachedir@^2.3.0:
   resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.3.0.tgz#0c75892a052198f0b21c7c1804d8331edfcae0e8"
   integrity sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==
 
-call-bind@^1.0.0, call-bind@^1.0.2:
+call-bind@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
   integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
@@ -2465,11 +2154,6 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
-clone@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
-  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
-
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -2574,13 +2258,6 @@ concat-stream@^1.6.2:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
-concat-with-sourcemaps@*:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz#d4ea93f05ae25790951b99e7b3b09e3908a4082e"
-  integrity sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==
-  dependencies:
-    source-map "^0.6.1"
-
 configent@^2.1.4:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/configent/-/configent-2.2.0.tgz#2de230fc43f22c47cfd99016aa6962d6f9546994"
@@ -2588,11 +2265,6 @@ configent@^2.1.4:
   dependencies:
     dotenv "^8.2.0"
 
-console-clear@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/console-clear/-/console-clear-1.1.1.tgz#995e20cbfbf14dd792b672cde387bd128d674bf7"
-  integrity sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==
-
 convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
@@ -2758,18 +2430,6 @@ date-fns@^1.27.2:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
 
-date.js@^0.3.1:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/date.js/-/date.js-0.3.3.tgz#ef1e92332f507a638795dbb985e951882e50bbda"
-  integrity sha512-HgigOS3h3k6HnW011nAb43c5xx5rBXk8P2v/WIT9Zv4koIaVXiH2BURguI78VVp+5Qc076T7OR378JViCnZtBw==
-  dependencies:
-    debug "~3.1.0"
-
-dayjs@^1.10.4:
-  version "1.10.4"
-  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
-  integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
-
 debug@4.3.1, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
@@ -2798,13 +2458,6 @@ debug@^4.3.2:
   dependencies:
     ms "2.1.2"
 
-debug@~3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
-  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
-  dependencies:
-    ms "2.0.0"
-
 decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -2820,18 +2473,6 @@ decode-uri-component@^0.2.0:
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
   integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
 
-deep-equal@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
-  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
-  dependencies:
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.1"
-    is-regex "^1.0.4"
-    object-is "^1.0.1"
-    object-keys "^1.1.1"
-    regexp.prototype.flags "^1.2.0"
-
 deep-is@^0.1.3, deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -2842,13 +2483,6 @@ deepmerge@^4.2.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
 
-default-compare@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/default-compare/-/default-compare-1.0.0.tgz#cb61131844ad84d84788fb68fd01681ca7781a2f"
-  integrity sha512-QWfXlM0EkAbqOCbD/6HjdwT19j7WCkMyiRhWilc4H9/5h/RzTF9gv5LYh1+CmDV5d1rki6KAWLtQale0xt20eQ==
-  dependencies:
-    kind-of "^5.0.2"
-
 define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -2919,11 +2553,6 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
-domino@^2.1.6:
-  version "2.1.6"
-  resolved "https://registry.yarnpkg.com/domino/-/domino-2.1.6.tgz#fe4ace4310526e5e7b9d12c7de01b7f485a57ffe"
-  integrity sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ==
-
 dotenv@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
@@ -2981,16 +2610,6 @@ enquirer@^2.3.5:
   dependencies:
     ansi-colors "^4.1.1"
 
-ent@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/ent/-/ent-2.2.0.tgz#e964219325a21d05f44466a2f686ed6ce5f5dd1d"
-  integrity sha1-6WQhkyWiHQX0RGai9obtbOX13R0=
-
-entities@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
-  integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
-
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -2998,11 +2617,6 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-error-symbol@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/error-symbol/-/error-symbol-0.1.0.tgz#0a4dae37d600d15a29ba453d8ef920f1844333f6"
-  integrity sha1-Ck2uN9YA0VopukU9jvkg8YRDM/Y=
-
 esbuild@^0.9.3:
   version "0.9.7"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.9.7.tgz#ea0d639cbe4b88ec25fbed4d6ff00c8d788ef70b"
@@ -3191,11 +2805,6 @@ eventemitter2@^6.4.2:
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.4.tgz#aa96e8275c4dbeb017a5d0e03780c65612a1202b"
   integrity sha512-HLU3NDY6wARrLCEwyGKRBvuWYyvW6mHYv72SJJAH3iJN3a6eVUvkjFkcxah1bcTgGVBBrFdIopBJPhCQFMLyXw==
 
-eventemitter3@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
-  integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=
-
 exec-sh@^0.3.2:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.6.tgz#ff264f9e325519a60cb5e273692943483cca63bc"
@@ -3302,7 +2911,7 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@^3.0.2, extend@~3.0.2:
+extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@@ -3341,23 +2950,11 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
-"falsey@^0.3.2":
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/falsey/-/falsey-0.3.2.tgz#b21c90c5c34660fc192bf909575db95b6880d597"
-  integrity sha512-lxEuefF5MBIVDmE6XeqCdM4BWk1+vYmGZtkbKZ/VFcg6uBBw6fXNEbWmxCjDdQlFc9hy450nkiWwM3VAW6G1qg==
-  dependencies:
-    kind-of "^5.0.2"
-
 fast-deep-equal@^3.1.1:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-diff@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
-  integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==
-
 fast-glob@^3.0.3:
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661"
@@ -3456,11 +3053,6 @@ flat-cache@^3.0.4:
     flatted "^3.1.0"
     rimraf "^3.0.2"
 
-flatpickr@^4.5.2:
-  version "4.6.9"
-  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.9.tgz#9a13383e8a6814bda5d232eae3fcdccb97dc1499"
-  integrity sha512-F0azNNi8foVWKSF+8X+ZJzz8r9sE1G4hl06RyceIaLvyltKvDl6vqk9Lm/6AUUCi5HWaIjiUbk7UpeE/fOXOpw==
-
 flatted@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.1.tgz#c4b489e80096d9df1dfc97c79871aea7c617c469"
@@ -3476,18 +3068,11 @@ follow-redirects@^1.10.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.3.tgz#e5598ad50174c1bc4e872301e82ac2cd97f90267"
   integrity sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==
 
-for-in@^1.0.1, for-in@^1.0.2:
+for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
   integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
 
-for-own@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/for-own/-/for-own-1.0.0.tgz#c63332f415cedc4b04dbfe70cf836494c53cb44b"
-  integrity sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=
-  dependencies:
-    for-in "^1.0.1"
-
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
@@ -3514,11 +3099,6 @@ from@~0:
   resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"
   integrity sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4=
 
-fs-exists-sync@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz#982d6893af918e72d08dec9e8673ff2b5a8d6add"
-  integrity sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=
-
 fs-extra@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
@@ -3577,24 +3157,11 @@ get-intrinsic@^1.0.2:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
-get-object@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/get-object/-/get-object-0.2.0.tgz#d92ff7d5190c64530cda0543dac63a3d47fe8c0c"
-  integrity sha1-2S/31RkMZFMM2gVD2sY6PUf+jAw=
-  dependencies:
-    is-number "^2.0.2"
-    isobject "^0.2.0"
-
 get-package-type@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
   integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
 
-get-port@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
-  integrity sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=
-
 get-stream@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
@@ -3697,35 +3264,6 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
 
-gulp-header@^1.7.1:
-  version "1.8.12"
-  resolved "https://registry.yarnpkg.com/gulp-header/-/gulp-header-1.8.12.tgz#ad306be0066599127281c4f8786660e705080a84"
-  integrity sha512-lh9HLdb53sC7XIZOYzTXM4lFuXElv3EVkSDhsd7DoJBj7hm+Ni7D3qYbb+Rr8DuM8nRanBvkVO9d7askreXGnQ==
-  dependencies:
-    concat-with-sourcemaps "*"
-    lodash.template "^4.4.0"
-    through2 "^2.0.0"
-
-handlebars-utils@^1.0.2, handlebars-utils@^1.0.4, handlebars-utils@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/handlebars-utils/-/handlebars-utils-1.0.6.tgz#cb9db43362479054782d86ffe10f47abc76357f9"
-  integrity sha512-d5mmoQXdeEqSKMtQQZ9WkiUcO1E3tPbWxluCK9hVgIDPzQa9WsKo3Lbe/sGflTe7TomHEeZaOgwIkyIr1kfzkw==
-  dependencies:
-    kind-of "^6.0.0"
-    typeof-article "^0.1.1"
-
-handlebars@^4.0.11, handlebars@^4.7.6:
-  version "4.7.7"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
-  integrity sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==
-  dependencies:
-    minimist "^1.2.5"
-    neo-async "^2.6.0"
-    source-map "^0.6.1"
-    wordwrap "^1.0.0"
-  optionalDependencies:
-    uglify-js "^3.1.4"
-
 har-schema@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
@@ -3809,39 +3347,6 @@ hash-sum@^2.0.0:
   resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
   integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
 
-helper-date@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/helper-date/-/helper-date-1.0.1.tgz#12fedea3ad8e44a7ca4c4efb0ff4104a5120cffb"
-  integrity sha512-wU3VOwwTJvGr/w5rZr3cprPHO+hIhlblTJHD6aFBrKLuNbf4lAmkawd2iK3c6NbJEvY7HAmDpqjOFSI5/+Ey2w==
-  dependencies:
-    date.js "^0.3.1"
-    handlebars-utils "^1.0.4"
-    moment "^2.18.1"
-
-helper-markdown@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/helper-markdown/-/helper-markdown-1.0.0.tgz#ee7e9fc554675007d37eb90f7853b13ce74f3e10"
-  integrity sha512-AnDqMS4ejkQK0MXze7pA9TM3pu01ZY+XXsES6gEE0RmCGk5/NIfvTn0NmItfyDOjRAzyo9z6X7YHbHX4PzIvOA==
-  dependencies:
-    handlebars-utils "^1.0.2"
-    highlight.js "^9.12.0"
-    remarkable "^1.7.1"
-
-helper-md@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/helper-md/-/helper-md-0.2.2.tgz#c1f59d7e55bbae23362fd8a0e971607aec69d41f"
-  integrity sha1-wfWdflW7riM2L9ig6XFgeuxp1B8=
-  dependencies:
-    ent "^2.2.0"
-    extend-shallow "^2.0.1"
-    fs-exists-sync "^0.1.0"
-    remarkable "^1.6.2"
-
-highlight.js@^9.12.0:
-  version "9.18.5"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
-  integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
-
 hosted-git-info@^2.1.4:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
@@ -3859,14 +3364,6 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
-html-tag@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/html-tag/-/html-tag-2.0.0.tgz#36c3bc8d816fd30b570d5764a497a641640c2fed"
-  integrity sha512-XxzooSo6oBoxBEUazgjdXj7VwTn/iSTSZzTYKzYY6I916tkaYzypHxy+pbVU1h+0UQ9JlVf5XkNQyxOAiiQO1g==
-  dependencies:
-    is-self-closing "^1.0.1"
-    kind-of "^6.0.0"
-
 http-signature@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
@@ -3944,11 +3441,6 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-info-symbol@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/info-symbol/-/info-symbol-0.1.0.tgz#27841d72867ddb4242cd612d79c10633881c6a78"
-  integrity sha1-J4QdcoZ920JCzWEtecEGM4gcang=
-
 inherits@2, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
@@ -3973,13 +3465,6 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-arguments@^1.0.4:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.0.tgz#62353031dfbee07ceb34656a6bde59efecae8dd9"
-  integrity sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==
-  dependencies:
-    call-bind "^1.0.0"
-
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -4025,11 +3510,6 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
-  integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
-
 is-descriptor@^0.1.0:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
@@ -4053,13 +3533,6 @@ is-docker@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.1.1.tgz#4125a88e44e450d384e09047ede71adc2d144156"
   integrity sha512-ZOoqiXfEwtGknTiuDEy8pN2CfE3TxMHprvNer1mXiqwkOT77Rw3YVrUQ52EqAOU3QAWDQ+bQdx7HJzrv7LS2Hw==
 
-is-even@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-even/-/is-even-1.0.0.tgz#76b5055fbad8d294a86b6a949015e1c97b717c06"
-  integrity sha1-drUFX7rY0pSoa2qUkBXhyXtxfAY=
-  dependencies:
-    is-odd "^0.1.2"
-
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -4119,13 +3592,6 @@ is-number-object@^1.0.4:
   resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
   integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
 
-is-number@^2.0.2:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
-  integrity sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=
-  dependencies:
-    kind-of "^3.0.2"
-
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -4133,11 +3599,6 @@ is-number@^3.0.0:
   dependencies:
     kind-of "^3.0.2"
 
-is-number@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
-  integrity sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==
-
 is-number@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
@@ -4150,13 +3611,6 @@ is-observable@^1.1.0:
   dependencies:
     symbol-observable "^1.1.0"
 
-is-odd@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/is-odd/-/is-odd-0.1.2.tgz#bc573b5ce371ef2aad6e6f49799b72bef13978a7"
-  integrity sha1-vFc7XONx7yqtbm9JeZtyvvE5eKc=
-  dependencies:
-    is-number "^3.0.0"
-
 is-path-inside@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
@@ -4184,21 +3638,6 @@ is-promise@^2.1.0:
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
   integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
 
-is-regex@^1.0.4:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.2.tgz#81c8ebde4db142f2cf1c53fc86d6a45788266251"
-  integrity sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==
-  dependencies:
-    call-bind "^1.0.2"
-    has-symbols "^1.0.1"
-
-is-self-closing@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-self-closing/-/is-self-closing-1.0.1.tgz#5f406b527c7b12610176320338af0fa3896416e4"
-  integrity sha512-E+60FomW7Blv5GXTlYee2KDrnG6srxF7Xt1SjrhWUGUEsTFIqY/nq2y3DaftCsgUMdh89V07IVfhY9KIJhLezg==
-  dependencies:
-    self-closing-tags "^1.0.1"
-
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -4246,11 +3685,6 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
-isobject@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-0.2.0.tgz#a3432192f39b910b5f02cc989487836ec70aa85e"
-  integrity sha1-o0MhkvObkQtfAsyYlIeDbscKqF4=
-
 isobject@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
@@ -4816,7 +4250,7 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
-kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.1.0, kind-of@^3.2.0:
+kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
   integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
@@ -4830,7 +4264,7 @@ kind-of@^4.0.0:
   dependencies:
     is-buffer "^1.1.5"
 
-kind-of@^5.0.0, kind-of@^5.0.2:
+kind-of@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
   integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
@@ -4840,7 +4274,7 @@ kind-of@^6.0.0, kind-of@^6.0.2:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
-kleur@^3.0.0, kleur@^3.0.3:
+kleur@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
@@ -4850,13 +4284,6 @@ lazy-ass@1.6.0, lazy-ass@^1.6.0:
   resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513"
   integrity sha1-eZllXoZGwX8In90YfRUNMyTVRRM=
 
-lazy-cache@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-2.0.2.tgz#b9190a4f913354694840859f8a8f7084d8822264"
-  integrity sha1-uRkKT5EzVGlIQIWfio9whNiCImQ=
-  dependencies:
-    set-getter "^0.1.0"
-
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -4883,13 +4310,6 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
-linkify-it@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-3.0.2.tgz#f55eeb8bc1d3ae754049e124ab3bb56d97797fb8"
-  integrity sha512-gDBO4aHNZS6coiZCKVhSNh43F9ioIL4JwRjLZPkoLIY4yZFwg264Y5lu2x6rb1Js42Gh6Yqm2f6L2AJcnkzinQ==
-  dependencies:
-    uc.micro "^1.0.1"
-
 listr-silent-renderer@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
@@ -4934,11 +4354,6 @@ listr@^0.14.3:
     p-map "^2.0.0"
     rxjs "^6.3.3"
 
-local-access@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/local-access/-/local-access-1.1.0.tgz#e007c76ba2ca83d5877ba1a125fc8dfe23ba4798"
-  integrity sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw==
-
 locate-path@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
@@ -4951,11 +4366,6 @@ lodash-es@^4.17.11:
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
 
-lodash._reinterpolate@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
-  integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
-
 lodash.clonedeep@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
@@ -4976,21 +4386,6 @@ lodash.once@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
   integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
 
-lodash.template@^4.4.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
-  integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
-  dependencies:
-    lodash._reinterpolate "^3.0.0"
-    lodash.templatesettings "^4.0.0"
-
-lodash.templatesettings@^4.0.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33"
-  integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
-  dependencies:
-    lodash._reinterpolate "^3.0.0"
-
 lodash.truncate@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
@@ -5001,19 +4396,11 @@ lodash@4.17.13:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.13.tgz#0bdc3a6adc873d2f4e0c4bac285df91b64fc7b93"
   integrity sha512-vm3/XWXfWtRua0FkUyEHBZy8kCPjErNBT9fJx8Zvs+U6zjqPbTUOpkaoum3O5uiA8sm+yNMHXfYkTUHFoMxFNA==
 
-lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
+lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-log-ok@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/log-ok/-/log-ok-0.1.1.tgz#bea3dd36acd0b8a7240d78736b5b97c65444a334"
-  integrity sha1-vqPdNqzQuKckDXhza1uXxlREozQ=
-  dependencies:
-    ansi-green "^0.1.1"
-    success-symbol "^0.1.0"
-
 log-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
@@ -5045,27 +4432,6 @@ log-update@^2.3.0:
     cli-cursor "^2.0.0"
     wrap-ansi "^3.0.1"
 
-log-utils@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/log-utils/-/log-utils-0.2.1.tgz#a4c217a0dd9a50515d9b920206091ab3d4e031cf"
-  integrity sha1-pMIXoN2aUFFdm5ICBgkas9TgMc8=
-  dependencies:
-    ansi-colors "^0.2.0"
-    error-symbol "^0.1.0"
-    info-symbol "^0.1.0"
-    log-ok "^0.1.1"
-    success-symbol "^0.1.0"
-    time-stamp "^1.0.1"
-    warning-symbol "^0.1.0"
-
-logging-helpers@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/logging-helpers/-/logging-helpers-1.0.0.tgz#b5a37b32ad53eb0137c58c7898a47b175ddb7c36"
-  integrity sha512-qyIh2goLt1sOgQQrrIWuwkRjUx4NUcEqEGAcYqD8VOnOC6ItwkrVE8/tA4smGpjzyp4Svhc6RodDp9IO5ghpyA==
-  dependencies:
-    isobject "^3.0.0"
-    log-utils "^0.2.1"
-
 lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
@@ -5116,22 +4482,6 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-markdown-it@^12.0.2:
-  version "12.0.4"
-  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.0.4.tgz#eec8247d296327eac3ba9746bdeec9cfcc751e33"
-  integrity sha512-34RwOXZT8kyuOJy25oJNJoulO8L0bTHYWXcdZBYZqFnjIy3NgjeoM3FmPXIOFQ26/lSHYMr8oc62B6adxXcb3Q==
-  dependencies:
-    argparse "^2.0.1"
-    entities "~2.1.0"
-    linkify-it "^3.0.1"
-    mdurl "^1.0.1"
-    uc.micro "^1.0.5"
-
-mdurl@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
-  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
-
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -5186,11 +4536,6 @@ mime-types@^2.1.12, mime-types@~2.1.19:
   dependencies:
     mime-db "1.46.0"
 
-mime@^2.3.1:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
-  integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==
-
 mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
@@ -5233,16 +4578,11 @@ mkdirp@^0.5.4:
   dependencies:
     minimist "^1.2.5"
 
-moment@^2.18.1, moment@^2.27.0:
+moment@^2.27.0:
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
 
-mri@^1.1.0:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6"
-  integrity sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==
-
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -5295,11 +4635,6 @@ ncp@^2.0.0:
   resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
   integrity sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=
 
-neo-async@^2.6.0:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
-  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
-
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -5407,14 +4742,6 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-is@^1.0.1:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
-  integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-
 object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -5538,11 +4865,6 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
-parchment@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/parchment/-/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5"
-  integrity sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==
-
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -5753,27 +5075,6 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
-quill-delta@^3.6.2:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/quill-delta/-/quill-delta-3.6.3.tgz#b19fd2b89412301c60e1ff213d8d860eac0f1032"
-  integrity sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==
-  dependencies:
-    deep-equal "^1.0.1"
-    extend "^3.0.2"
-    fast-diff "1.1.2"
-
-quill@^1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8"
-  integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==
-  dependencies:
-    clone "^2.1.1"
-    deep-equal "^1.0.1"
-    eventemitter3 "^2.0.3"
-    extend "^3.0.2"
-    parchment "^1.1.4"
-    quill-delta "^3.6.2"
-
 ramda@~0.26.1:
   version "0.26.1"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
@@ -5803,7 +5104,7 @@ read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
-readable-stream@^2.2.2, readable-stream@~2.3.6:
+readable-stream@^2.2.2:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -5856,19 +5157,6 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp.prototype.flags@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz#7ef352ae8d159e758c0eadca6f8fcb4eef07be26"
-  integrity sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-
-regexparam@1.3.0, regexparam@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
-  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
-
 regexpp@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
@@ -5898,21 +5186,6 @@ regjsparser@^0.6.4:
   dependencies:
     jsesc "~0.5.0"
 
-relative@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/relative/-/relative-3.0.2.tgz#0dcd8ec54a5d35a3c15e104503d65375b5a5367f"
-  integrity sha1-Dc2OxUpdNaPBXhBFA9ZTdbWlNn8=
-  dependencies:
-    isobject "^2.0.0"
-
-remarkable@^1.6.2, remarkable@^1.7.1:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/remarkable/-/remarkable-1.7.4.tgz#19073cb960398c87a7d6546eaa5e50d2022fcd00"
-  integrity sha512-e6NKUXgX95whv7IgddywbeN/ItCkWbISmc2DiqHJb0wTrqZIexqdco5b8Z3XZoo/48IdNVKM9ZCvTPJ4F5uvhg==
-  dependencies:
-    argparse "^1.0.10"
-    autolinker "~0.28.0"
-
 remixicon@2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/remixicon/-/remixicon-2.5.0.tgz#b5e245894a1550aa23793f95daceadbf96ad1a41"
@@ -6109,13 +5382,6 @@ rxjs@^6.3.3, rxjs@^6.6.3:
   dependencies:
     tslib "^1.9.0"
 
-sade@^1.4.0:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/sade/-/sade-1.7.4.tgz#ea681e0c65d248d2095c90578c03ca0bb1b54691"
-  integrity sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==
-  dependencies:
-    mri "^1.1.0"
-
 safe-buffer@^5.0.1, safe-buffer@^5.1.2:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
@@ -6160,11 +5426,6 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-self-closing-tags@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/self-closing-tags/-/self-closing-tags-1.0.1.tgz#6c5fa497994bb826b484216916371accee490a5d"
-  integrity sha512-7t6hNbYMxM+VHXTgJmxwgZgLGktuXtVVD5AivWzNTdJBM4DBjnDKDzkf2SrNjihaArpeJYNjxkELBu1evI4lQA==
-
 "semver@2 || 3 || 4 || 5", semver@^5.5.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
@@ -6192,13 +5453,6 @@ set-blocking@^2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
 
-set-getter@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/set-getter/-/set-getter-0.1.0.tgz#d769c182c9d5a51f409145f2fba82e5e86e80376"
-  integrity sha1-12nBgsnVpR9AkUXy+6guXoboA3Y=
-  dependencies:
-    to-object-path "^0.3.0"
-
 set-value@^2.0.0, set-value@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
@@ -6245,39 +5499,11 @@ shortid@2.2.15:
   dependencies:
     nanoid "^2.1.0"
 
-shortid@^2.2.15:
-  version "2.2.16"
-  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.16.tgz#b742b8f0cb96406fd391c76bfc18a67a57fe5608"
-  integrity sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==
-  dependencies:
-    nanoid "^2.1.0"
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
 
-sirv-cli@^0.4.6:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/sirv-cli/-/sirv-cli-0.4.6.tgz#c28ab20deb3b34637f5a60863dc350f055abca04"
-  integrity sha512-/Vj85/kBvPL+n9ibgX6FicLE8VjidC1BhlX67PYPBfbBAphzR6i0k0HtU5c2arejfU3uzq8l3SYPCwl1x7z6Ww==
-  dependencies:
-    console-clear "^1.1.0"
-    get-port "^3.2.0"
-    kleur "^3.0.0"
-    local-access "^1.0.1"
-    sade "^1.4.0"
-    sirv "^0.4.6"
-    tinydate "^1.0.0"
-
-sirv@^0.4.6:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/sirv/-/sirv-0.4.6.tgz#185e44eb93d24009dd183b7494285c5180b81f22"
-  integrity sha512-rYpOXlNbpHiY4nVXxuDf4mXPvKz1reZGap/LkWp9TvcZ84qD/nPBjjH/6GZsgIjVMbOslnY8YYULAyP8jMn1GQ==
-  dependencies:
-    "@polka/url" "^0.5.0"
-    mime "^2.3.1"
-
 sisteransi@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
@@ -6573,16 +5799,6 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-striptags@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/striptags/-/striptags-3.1.1.tgz#c8c3e7fdd6fb4bb3a32a3b752e5b5e3e38093ebd"
-  integrity sha1-yMPn/db7S7OjKjt1LltePjgJPr0=
-
-success-symbol@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/success-symbol/-/success-symbol-0.1.0.tgz#24022e486f3bf1cdca094283b769c472d3b72897"
-  integrity sha1-JAIuSG878c3KCUKDt2nEctO3KJc=
-
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -6615,13 +5831,6 @@ svelte-dnd-action@^0.8.9:
   resolved "https://registry.yarnpkg.com/svelte-dnd-action/-/svelte-dnd-action-0.8.9.tgz#90fa211057a5d9e832d5521511f9c1b87242d2ae"
   integrity sha512-4WaLRvERr2JoX6Lh9GnlEZRzFF5eY3h2q0n5+lS4/+nqqQjTIpCwTrncMf9tJNa+M4AGy43I5aq5F+Ohl/nxLg==
 
-svelte-flatpickr@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/svelte-flatpickr/-/svelte-flatpickr-2.4.0.tgz#190871fc3305956c8c8fd3601cd036b8ac71ef49"
-  integrity sha512-UUC5Te+b0qi4POg7VDwfGh0m5W3Hf64OwkfOTj6FEe/dYZN4cBzpQ82EuuQl0CTbbBAsMkcjJcixV1d2V6EHCQ==
-  dependencies:
-    flatpickr "^4.5.2"
-
 svelte-hmr@^0.13.3:
   version "0.13.3"
   resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.13.3.tgz#fba5739b477ea44caf70e542a24a4352bee2b897"
@@ -6644,18 +5853,6 @@ svelte-portal@0.1.0:
   resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-0.1.0.tgz#cc2821cc84b05ed5814e0218dcdfcbebc53c1742"
   integrity sha512-kef+ksXVKun224mRxat+DdO4C+cGHla+fEcZfnBAvoZocwiaceOfhf5azHYOPXSSB1igWVFTEOF3CDENPnuWxg==
 
-svelte-portal@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
-  integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
-
-svelte-spa-router@^3.0.5:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/svelte-spa-router/-/svelte-spa-router-3.1.0.tgz#a929f0def7e12c41f32bc356f91685aeadcd75bf"
-  integrity sha512-jlM/xwjn57mylr+pzHYCOOy+IPQauT46gOucNGTBu6jHcFXu3F+oaojN4PXC1LYizRGxFB6QA0qnYbZnRfX7Sg==
-  dependencies:
-    regexparam "1.3.0"
-
 svelte@^3.36.0:
   version "3.37.0"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.37.0.tgz#dc7cd24bcc275cdb3f8c684ada89e50489144ccd"
@@ -6723,29 +5920,11 @@ throttleit@^1.0.0:
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"
   integrity sha1-nnhYNtr0Z0MUWlmEtiaNgoUorGw=
 
-through2@^2.0.0:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
-  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
-  dependencies:
-    readable-stream "~2.3.6"
-    xtend "~4.0.1"
-
 through@2, through@~2.3, through@~2.3.1:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
 
-time-stamp@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.1.0.tgz#764a5a11af50561921b133f3b44e618687e0f5c3"
-  integrity sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=
-
-tinydate@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/tinydate/-/tinydate-1.3.0.tgz#e6ca8e5a22b51bb4ea1c3a2a4fd1352dbd4c57fb"
-  integrity sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==
-
 tmp@~0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
@@ -6763,11 +5942,6 @@ to-fast-properties@^2.0.0:
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
 
-to-gfm-code-block@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/to-gfm-code-block/-/to-gfm-code-block-0.1.1.tgz#25d045a5fae553189e9637b590900da732d8aa82"
-  integrity sha1-JdBFpfrlUxielje1kJANpzLYqoI=
-
 to-object-path@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
@@ -6841,13 +6015,6 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
-turndown@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/turndown/-/turndown-7.0.0.tgz#19b2a6a2d1d700387a1e07665414e4af4fec5225"
-  integrity sha512-G1FfxfR0mUNMeGjszLYl3kxtopC4O9DRRiMlMDDVHvU1jaBkGFg4qxIyjIk2aiKLHyDyZvZyu4qBO2guuYBy3Q==
-  dependencies:
-    domino "^2.1.6"
-
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
@@ -6904,23 +6071,6 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typeof-article@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/typeof-article/-/typeof-article-0.1.1.tgz#9f07e733c3fbb646ffa9e61c08debacd460e06af"
-  integrity sha1-nwfnM8P7tkb/qeYcCN66zUYOBq8=
-  dependencies:
-    kind-of "^3.1.0"
-
-uc.micro@^1.0.1, uc.micro@^1.0.5:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
-  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
-
-uglify-js@^3.1.4:
-  version "3.13.3"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.13.3.tgz#ce72a1ad154348ea2af61f50933c76cc8802276e"
-  integrity sha512-otIc7O9LyxpUcQoXzj2hL4LPWKklO6LJWoJUzNa8A17Xgi4fOeDC8FBDOLHnC/Slo1CQgsZMcM6as0M76BZaig==
-
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
@@ -7104,11 +6254,6 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
-warning-symbol@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/warning-symbol/-/warning-symbol-0.1.0.tgz#bb31dd11b7a0f9d67ab2ed95f457b65825bbad21"
-  integrity sha1-uzHdEbeg+dZ6su2V9Fe2WCW7rSE=
-
 webidl-conversions@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
@@ -7164,11 +6309,6 @@ word-wrap@^1.2.3, word-wrap@~1.2.3:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
 
-wordwrap@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
-  integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
-
 wrap-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-3.0.1.tgz#288a04d87eda5c286e060dfe8f135ce8d007f8ba"
@@ -7216,11 +6356,6 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
-xtend@~4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
-  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
-
 y18n@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.1.tgz#8db2b83c31c5d75099bb890b23f3094891e247d4"
@@ -7269,11 +6404,6 @@ yauzl@^2.10.0:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
-year@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/year/-/year-0.2.1.tgz#4083ae520a318b23ec86037f3000cb892bdf9bb0"
-  integrity sha1-QIOuUgoxiyPshgN/MADLiSvfm7A=
-
 yup@0.29.2:
   version "0.29.2"
   resolved "https://registry.yarnpkg.com/yup/-/yup-0.29.2.tgz#5302abd9024cca335b987793f8df868e410b7b67"
diff --git a/packages/server/src/api/controllers/deploy/utils.js b/packages/server/src/api/controllers/deploy/utils.js
index de608acfb1..4c46f9c6d4 100644
--- a/packages/server/src/api/controllers/deploy/utils.js
+++ b/packages/server/src/api/controllers/deploy/utils.js
@@ -51,11 +51,11 @@ exports.prepareUpload = async function({ s3Key, bucket, metadata, file }) {
     type: file.type,
   })
 
+  // don't store a URL, work this out on the way out as the URL could change
   return {
     size: file.size,
     name: file.name,
     extension: [...file.name.split(".")].pop(),
-    url: response.Location,
     key: response.Key,
   }
 }
diff --git a/packages/server/src/utilities/rowProcessor.js b/packages/server/src/utilities/rowProcessor.js
index 97e2a2880c..6727a8a323 100644
--- a/packages/server/src/utilities/rowProcessor.js
+++ b/packages/server/src/utilities/rowProcessor.js
@@ -1,8 +1,8 @@
-const env = require("../environment")
-const { OBJ_STORE_DIRECTORY } = require("../constants")
+const { ObjectStoreBuckets } = require("../constants")
 const linkRows = require("../db/linkedRows")
 const { cloneDeep } = require("lodash/fp")
 const { FieldTypes, AutoFieldSubTypes } = require("../constants")
+const { checkSlashesInUrl } = require("./index")
 
 const BASE_AUTO_ID = 1
 
@@ -180,18 +180,17 @@ exports.outputProcessing = async (appId, table, rows) => {
     rows
   )
   // update the attachments URL depending on hosting
-  if (env.isProd() && env.SELF_HOSTED) {
-    for (let [property, column] of Object.entries(table.schema)) {
-      if (column.type === FieldTypes.ATTACHMENT) {
-        for (let row of outputRows) {
-          if (row[property] == null || row[property].length === 0) {
-            continue
-          }
-          row[property].forEach(attachment => {
-            attachment.url = `${OBJ_STORE_DIRECTORY}/${appId}/${attachment.url}`
-            attachment.url = attachment.url.replace("//", "/")
-          })
+  for (let [property, column] of Object.entries(table.schema)) {
+    if (column.type === FieldTypes.ATTACHMENT) {
+      for (let row of outputRows) {
+        if (row[property] == null || row[property].length === 0) {
+          continue
         }
+        row[property].forEach(attachment => {
+          attachment.url = checkSlashesInUrl(
+            `${ObjectStoreBuckets.APPS}/${attachment.key}`
+          )
+        })
       }
     }
   }

From 30a7303762d942dd83eeef27e4b308c808f4bd34 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 9 Apr 2021 13:49:16 +0100
Subject: [PATCH 07/25] Updating to make sure a relative URL is always used for
 attachments.

---
 packages/server/src/api/controllers/deploy/utils.js | 2 ++
 packages/server/src/utilities/index.js              | 8 +++++++-
 packages/server/src/utilities/rowProcessor.js       | 6 ++----
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/server/src/api/controllers/deploy/utils.js b/packages/server/src/api/controllers/deploy/utils.js
index 4c46f9c6d4..c5ac0641aa 100644
--- a/packages/server/src/api/controllers/deploy/utils.js
+++ b/packages/server/src/api/controllers/deploy/utils.js
@@ -5,6 +5,7 @@ const fetch = require("node-fetch")
 const PouchDB = require("../../../db")
 const CouchDB = require("pouchdb")
 const { upload } = require("../../../utilities/fileSystem")
+const { attachmentsRelativeURL } = require("../../../utilities")
 
 // TODO: everything in this file is to be removed
 
@@ -55,6 +56,7 @@ exports.prepareUpload = async function({ s3Key, bucket, metadata, file }) {
   return {
     size: file.size,
     name: file.name,
+    url: attachmentsRelativeURL(response.Key),
     extension: [...file.name.split(".")].pop(),
     key: response.Key,
   }
diff --git a/packages/server/src/utilities/index.js b/packages/server/src/utilities/index.js
index 733afd2870..0c4e60ccc6 100644
--- a/packages/server/src/utilities/index.js
+++ b/packages/server/src/utilities/index.js
@@ -1,7 +1,7 @@
 const env = require("../environment")
 const { DocumentTypes, SEPARATOR } = require("../db/utils")
 const CouchDB = require("../db")
-const { OBJ_STORE_DIRECTORY } = require("../constants")
+const { OBJ_STORE_DIRECTORY, ObjectStoreBuckets } = require("../constants")
 
 const BB_CDN = "https://cdn.app.budi.live/assets"
 const APP_PREFIX = DocumentTypes.APP + SEPARATOR
@@ -157,3 +157,9 @@ exports.clientLibraryPath = appId => {
     return `/api/assets/client`
   }
 }
+
+exports.attachmentsRelativeURL = attachmentKey => {
+  return exports.checkSlashesInUrl(
+    `/${ObjectStoreBuckets.APPS}/${attachmentKey}`
+  )
+}
diff --git a/packages/server/src/utilities/rowProcessor.js b/packages/server/src/utilities/rowProcessor.js
index 6727a8a323..74918d24d1 100644
--- a/packages/server/src/utilities/rowProcessor.js
+++ b/packages/server/src/utilities/rowProcessor.js
@@ -2,7 +2,7 @@ const { ObjectStoreBuckets } = require("../constants")
 const linkRows = require("../db/linkedRows")
 const { cloneDeep } = require("lodash/fp")
 const { FieldTypes, AutoFieldSubTypes } = require("../constants")
-const { checkSlashesInUrl } = require("./index")
+const { attachmentsRelativeURL } = require("./index")
 
 const BASE_AUTO_ID = 1
 
@@ -187,9 +187,7 @@ exports.outputProcessing = async (appId, table, rows) => {
           continue
         }
         row[property].forEach(attachment => {
-          attachment.url = checkSlashesInUrl(
-            `${ObjectStoreBuckets.APPS}/${attachment.key}`
-          )
+          attachment.url = attachmentsRelativeURL(attachment.key)
         })
       }
     }

From b6995739410e16f82b60dbeda54e4074f552a926 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 9 Apr 2021 14:21:27 +0100
Subject: [PATCH 08/25] Add custom renderers to table and improve table sorting

---
 .../bbui/src/Table/AttachmentRenderer.svelte  |   7 +-
 packages/bbui/src/Table/CellRenderer.svelte   |   6 +-
 packages/bbui/src/Table/Table.svelte          |  14 +-
 .../components/backend/DataTable/Table.svelte |  15 +-
 .../DataTable/cells/AttachmentCell.svelte     |  69 ----------
 .../DataTable/cells/RelationshipCell.svelte   |  45 ------
 .../backend/DataTable/cells/RoleCell.svelte   |   6 +-
 .../backend/DataTable/cells/cellRenderers.js  | 128 ------------------
 8 files changed, 39 insertions(+), 251 deletions(-)
 delete mode 100644 packages/builder/src/components/backend/DataTable/cells/AttachmentCell.svelte
 delete mode 100644 packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte
 delete mode 100644 packages/builder/src/components/backend/DataTable/cells/cellRenderers.js

diff --git a/packages/bbui/src/Table/AttachmentRenderer.svelte b/packages/bbui/src/Table/AttachmentRenderer.svelte
index 96e9f7ff99..ab9760a980 100644
--- a/packages/bbui/src/Table/AttachmentRenderer.svelte
+++ b/packages/bbui/src/Table/AttachmentRenderer.svelte
@@ -4,10 +4,15 @@
   const displayLimit = 5
   $: attachments = value?.slice(0, displayLimit) ?? []
   $: leftover = (value?.length ?? 0) - attachments.length
+
+  const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
+  const isImage = extension => {
+    return imageExtensions.includes(extension?.toLowerCase())
+  }
 </script>
 
 {#each attachments as attachment}
-  {#if attachment.type?.startsWith('image')}
+  {#if isImage(attachment.extension)}
     <img src={attachment.url} alt={attachment.extension} />
   {:else}
     <div class="file">{attachment.extension}</div>
diff --git a/packages/bbui/src/Table/CellRenderer.svelte b/packages/bbui/src/Table/CellRenderer.svelte
index 0c14ec2aa5..e45d9696b8 100644
--- a/packages/bbui/src/Table/CellRenderer.svelte
+++ b/packages/bbui/src/Table/CellRenderer.svelte
@@ -7,13 +7,17 @@
 
   export let schema
   export let value
+  export let customRenderers = []
 
   const plainTypes = ["string", "options", "number", "longform"]
   $: type = schema?.type ?? "string"
+  $: customRenderer = customRenderers?.find(x => x.column === schema?.name)
 </script>
 
 {#if value != null && value !== ''}
-  {#if plainTypes.includes(type)}
+  {#if customRenderer}
+    <svelte:component this={customRenderer.component} {value} />
+  {:else if plainTypes.includes(type)}
     <StringRenderer {value} />
   {:else if type === 'boolean'}
     <BooleanRenderer {value} />
diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index 548e46b607..d002b4c939 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -16,6 +16,7 @@
   export let selectedRows = []
   export let customColumnRenderer = SelectEditRenderer
   export let customColumnTitle
+  export let customRenderers = []
 
   const dispatch = createEventDispatcher()
 
@@ -93,7 +94,11 @@
         autoColumns.push(field)
       }
     })
-    return columns.sort().concat(autoColumns)
+    return columns
+      .sort((a, b) => {
+        return a.toLowerCase() < b.toLowerCase() ? a : b
+      })
+      .concat(autoColumns)
   }
 
   const onScroll = event => {
@@ -181,7 +186,7 @@
                       <use xlink:href="#spectrum-css-icon-Arrow100" />
                     </svg>
                   {/if}
-                  {#if allowEditColumns}
+                  {#if allowEditColumns && schema[field]?.editable !== false}
                     <svg
                       class="spectrum-Icon spectrum-Table-editIcon"
                       focusable="false"
@@ -218,7 +223,10 @@
                 {#each fields as field}
                   <td class="spectrum-Table-cell">
                     <div class="spectrum-Table-cell-content">
-                      <CellRenderer schema={schema[field]} value={row[field]} />
+                      <CellRenderer
+                        {customRenderers}
+                        schema={schema[field]}
+                        value={row[field]} />
                     </div>
                   </td>
                 {/each}
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index fa15f3f886..8f99088e4a 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -12,6 +12,7 @@
   import CreateEditColumn from "./modals/CreateEditColumn.svelte"
   import "@budibase/svelte-ag-grid/dist/index.css"
   import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
+  import RoleCell from "./cells/RoleCell.svelte"
 
   export let schema = {}
   export let data = []
@@ -28,12 +29,23 @@
   let editableRow
   let editRowModal
   let editColumnModal
+  let customRenderers = []
 
   $: isUsersTable = tableId === TableNames.USERS
   $: editRowComponent = isUsersTable ? CreateEditUser : CreateEditRow
   $: {
     if (isUsersTable) {
-      console.log(schema)
+      customRenderers = [
+        {
+          column: "roleId",
+          component: RoleCell,
+        },
+      ]
+      UNEDITABLE_USER_FIELDS.forEach(field => {
+        if (schema[field]) {
+          schema[field].editable = false
+        }
+      })
       schema.email.displayName = "Email"
       schema.roleId.displayName = "Role"
       if (schema.status) {
@@ -97,6 +109,7 @@
     {data}
     {schema}
     {loading}
+    {customRenderers}
     customColumnTitle="Edit"
     bind:selectedRows
     showAutoColumns={!hideAutocolumns}
diff --git a/packages/builder/src/components/backend/DataTable/cells/AttachmentCell.svelte b/packages/builder/src/components/backend/DataTable/cells/AttachmentCell.svelte
deleted file mode 100644
index b8169f1398..0000000000
--- a/packages/builder/src/components/backend/DataTable/cells/AttachmentCell.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script>
-  import { FILE_TYPES } from "constants/backend"
-
-  export let files
-  export let height = "70"
-  export let width = "70"
-</script>
-
-<div class="file-list">
-  {#each files as file}
-    <div class="file">
-      {#if FILE_TYPES.IMAGE.includes(file.extension.toLowerCase())}
-        <img {width} {height} src={file.url} />
-      {:else}
-        <span class="extension">.{file.extension}</span>
-        <i class="ri-file-line" />
-        <span>{file.name}</span>
-      {/if}
-    </div>
-  {/each}
-</div>
-
-<style>
-  .file-list {
-    display: grid;
-    grid-auto-flow: column;
-    grid-gap: var(--spacing-m);
-    grid-template-columns: repeat(10, 1fr);
-  }
-
-  img {
-    object-fit: contain;
-  }
-
-  i {
-    font-size: 24px;
-    position: relative;
-    top: 5px;
-  }
-
-  .file {
-    height: 75px;
-    width: 75px;
-    border: 2px dashed var(--grey-7);
-    padding: var(--spacing-m);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-    justify-content: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .extension {
-    position: absolute;
-    top: -5px;
-    font-size: var(--font-size-xs);
-    font-weight: 500;
-  }
-
-  span {
-    font-size: var(--font-size-xs);
-    width: 75px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte b/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte
deleted file mode 100644
index 0aae16f3db..0000000000
--- a/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script>
-  export let columnName
-  export let row
-  export let selectRelationship
-
-  $: items = row?.[columnName] || []
-</script>
-
-<div
-  class="container"
-  class:link={!!items.length}
-  on:click={() => selectRelationship(row, columnName)}>
-  {#each items as item}
-    <div class="item">{item?.primaryDisplay ?? ''}</div>
-  {/each}
-</div>
-
-<style>
-  .container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-xs);
-  }
-
-  .link:hover {
-    color: var(--grey-6);
-    cursor: pointer;
-  }
-  .link:hover .item {
-    color: var(--ink);
-    border-color: var(--ink);
-  }
-
-  .item {
-    font-size: var(--font-size-xs);
-    padding: var(--spacing-xs) var(--spacing-s);
-    border: 1px solid var(--grey-5);
-    color: var(--grey-7);
-    line-height: normal;
-    border-radius: 4px;
-    text-decoration: none;
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte b/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte
index 9a04933a19..4b4ce1622b 100644
--- a/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte
+++ b/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte
@@ -1,10 +1,10 @@
 <script>
   import { roles } from "stores/backend"
 
-  export let roleId
+  export let value
 
-  $: role = $roles.find(role => role._id === roleId)
+  $: role = $roles.find(role => role._id === value)
   $: roleName = role?.name ?? "Unknown role"
 </script>
 
-<div>{roleName}</div>
+{roleName}
diff --git a/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js b/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js
deleted file mode 100644
index 15a7910186..0000000000
--- a/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import AttachmentList from "./AttachmentCell.svelte"
-import EditRow from "../modals/EditRow.svelte"
-import CreateEditUser from "../modals/CreateEditUser.svelte"
-import DeleteRow from "../modals/DeleteRow.svelte"
-import RelationshipDisplay from "./RelationshipCell.svelte"
-import RoleCell from "./RoleCell.svelte"
-
-const renderers = {
-  attachment: attachmentRenderer,
-  link: linkedRowRenderer,
-}
-
-export function getRenderer({ schema, editable, isUsersTable }) {
-  const rendererParams = {
-    options: schema.options,
-    constraints: schema.constraints,
-    editable,
-  }
-  if (renderers[schema.type]) {
-    return renderers[schema.type](rendererParams)
-  } else if (isUsersTable && schema.name === "roleId") {
-    return roleRenderer(rendererParams)
-  } else {
-    return false
-  }
-}
-
-export function deleteRowRenderer(params) {
-  const container = document.createElement("div")
-
-  new DeleteRow({
-    target: container,
-    props: {
-      row: params.data,
-    },
-  })
-
-  return container
-}
-
-export function editRowRenderer(params) {
-  const container = document.createElement("div")
-  container.style.height = "100%"
-  container.style.display = "flex"
-  container.style.alignItems = "center"
-
-  new EditRow({
-    target: container,
-    props: {
-      row: params.data,
-    },
-  })
-
-  return container
-}
-
-export function userRowRenderer(params) {
-  const container = document.createElement("div")
-  container.style.height = "100%"
-  container.style.display = "flex"
-  container.style.alignItems = "center"
-
-  new EditRow({
-    target: container,
-    props: {
-      row: params.data,
-      modalContentComponent: CreateEditUser,
-    },
-  })
-
-  return container
-}
-
-function attachmentRenderer() {
-  return params => {
-    const container = document.createElement("div")
-    container.style.height = "100%"
-    container.style.display = "flex"
-    container.style.alignItems = "center"
-
-    new AttachmentList({
-      target: container,
-      props: {
-        files: params.value || [],
-      },
-    })
-
-    return container
-  }
-}
-
-function linkedRowRenderer() {
-  return params => {
-    let container = document.createElement("div")
-    container.style.display = "grid"
-    container.style.height = "100%"
-    container.style.alignItems = "center"
-
-    new RelationshipDisplay({
-      target: container,
-      props: {
-        row: params.data,
-        columnName: params.column.colId,
-        selectRelationship: params.selectRelationship,
-      },
-    })
-
-    return container
-  }
-}
-
-function roleRenderer() {
-  return params => {
-    let container = document.createElement("div")
-    container.style.display = "grid"
-    container.style.height = "100%"
-    container.style.alignItems = "center"
-
-    new RoleCell({
-      target: container,
-      props: {
-        roleId: params.value,
-      },
-    })
-
-    return container
-  }
-}

From e76f40548b02c6716d3c3b06e1508c71b744e01f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 9 Apr 2021 14:22:11 +0100
Subject: [PATCH 09/25] Disable image processing of attachments

---
 packages/server/src/api/controllers/static/index.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/server/src/api/controllers/static/index.js b/packages/server/src/api/controllers/static/index.js
index cda18fbea5..ee1e5054d7 100644
--- a/packages/server/src/api/controllers/static/index.js
+++ b/packages/server/src/api/controllers/static/index.js
@@ -53,10 +53,11 @@ exports.uploadFile = async function(ctx) {
     const processedFileName = `${uuid.v4()}.${fileExtension}`
 
     // need to handle image processing
-    await fileProcessor.process({
-      ...file,
-      extension: fileExtension,
-    })
+    // TODO either offer this as an option, or don't do it at all
+    // await fileProcessor.process({
+    //   ...file,
+    //   extension: fileExtension,
+    // })
 
     return prepareUpload({
       file,

From b8c9cf0898d115f6589bbc28588dd6629be40534 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 9 Apr 2021 14:48:26 +0100
Subject: [PATCH 10/25] Add table placeholder

---
 packages/bbui/src/Table/Table.svelte | 100 ++++++++++++++++++---------
 1 file changed, 66 insertions(+), 34 deletions(-)

diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index d002b4c939..973756bf4a 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -15,7 +15,7 @@
   export let allowEditColumns = true
   export let selectedRows = []
   export let customColumnRenderer = SelectEditRenderer
-  export let customColumnTitle
+  export let customColumnTitle = null
   export let customRenderers = []
 
   const dispatch = createEventDispatcher()
@@ -87,7 +87,8 @@
   const getFields = (schema, showAutoColumns) => {
     let columns = []
     let autoColumns = []
-    Object.entries(schema).forEach(([field, fieldSchema]) => {
+    Object.entries(schema || {}).forEach(([field, fieldSchema]) => {
+      schema[field].name = field
       if (!fieldSchema?.autocolumn) {
         columns.push(field)
       } else if (showAutoColumns) {
@@ -200,39 +201,51 @@
           </tr>
         </thead>
         <tbody class="spectrum-Table-body">
-          {#each sortedRows as row, idx}
-            <tr
-              on:click={() => toggleSelectRow(row)}
-              class="spectrum-Table-row"
-              class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}>
-              {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
-                {#if customColumnRenderer}
-                  <td class="spectrum-Table-cell spectrum-Table-cell--divider">
-                    <div class="spectrum-Table-cell-content">
-                      <svelte:component
-                        this={customColumnRenderer}
-                        data={row}
-                        selected={selectedRows.includes(row)}
-                        onToggleSelection={() => toggleSelectRow(row)}
-                        onEdit={e => editRow(e, row)}
-                        {allowSelectRows}
-                        {allowEditRows} />
-                    </div>
-                  </td>
+          {#if sortedRows?.length}
+            {#each sortedRows as row, idx}
+              <tr
+                on:click={() => toggleSelectRow(row)}
+                class="spectrum-Table-row"
+                class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}>
+                {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
+                  {#if customColumnRenderer}
+                    <td
+                      class="spectrum-Table-cell spectrum-Table-cell--divider">
+                      <div class="spectrum-Table-cell-content">
+                        <svelte:component
+                          this={customColumnRenderer}
+                          data={row}
+                          selected={selectedRows.includes(row)}
+                          onToggleSelection={() => toggleSelectRow(row)}
+                          onEdit={e => editRow(e, row)}
+                          {allowSelectRows}
+                          {allowEditRows} />
+                      </div>
+                    </td>
+                  {/if}
+                  {#each fields as field}
+                    <td class="spectrum-Table-cell">
+                      <div class="spectrum-Table-cell-content">
+                        <CellRenderer
+                          {customRenderers}
+                          schema={schema[field]}
+                          value={row[field]} />
+                      </div>
+                    </td>
+                  {/each}
                 {/if}
-                {#each fields as field}
-                  <td class="spectrum-Table-cell">
-                    <div class="spectrum-Table-cell-content">
-                      <CellRenderer
-                        {customRenderers}
-                        schema={schema[field]}
-                        value={row[field]} />
-                    </div>
-                  </td>
-                {/each}
-              {/if}
-            </tr>
-          {/each}
+              </tr>
+            {/each}
+          {:else}
+            <div class="placeholder">
+              <svg
+                class="spectrum-Icon spectrum-Icon--sizeXXL"
+                focusable="false">
+                <use xlink:href="#spectrum-icon-18-Table" />
+              </svg>
+              <div>No rows found.</div>
+            </div>
+          {/if}
         </tbody>
       </table>
     </div>
@@ -322,6 +335,25 @@
     text-overflow: ellipsis;
   }
 
+  .placeholder {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: var(
+      --spectrum-table-cell-text-color,
+      var(--spectrum-alias-text-color)
+    );
+  }
+  .placeholder div {
+    margin-top: 10px;
+    font-size: var(
+      --spectrum-table-cell-text-size,
+      var(--spectrum-alias-font-size-default)
+    );
+  }
+
   tbody {
     z-index: 1;
   }

From afca35a22907f6d708bb85200feda15554315762 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Apr 2021 14:45:41 +0100
Subject: [PATCH 11/25] Improve table props and update table to work with views

---
 packages/bbui/src/Table/Table.svelte                | 13 ++++++-------
 .../src/components/backend/DataTable/Table.svelte   | 12 +++++++++---
 .../backend/DataTable/ViewDataTable.svelte          |  1 +
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index 973756bf4a..d4731e84aa 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -14,8 +14,7 @@
   export let allowEditRows = true
   export let allowEditColumns = true
   export let selectedRows = []
-  export let customColumnRenderer = SelectEditRenderer
-  export let customColumnTitle = null
+  export let editColumnTitle = "Edit"
   export let customRenderers = []
 
   const dispatch = createEventDispatcher()
@@ -41,6 +40,7 @@
   $: contentStyle = getContentStyle(visibleRowCount, scroll || !loaded)
   $: sortedRows = sortRows(rows, sortColumn, sortOrder)
   $: fields = getFields(schema, showAutoColumns)
+  $: showEditColumn = allowEditRows || allowSelectRows
 
   // Scrolling state
   let timeout
@@ -155,10 +155,10 @@
       <table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
         <thead class="spectrum-Table-head">
           <tr>
-            {#if customColumnRenderer}
+            {#if showEditColumn}
               <th class="spectrum-Table-headCell">
                 <div class="spectrum-Table-headCell-content">
-                  {customColumnTitle || ''}
+                  {editColumnTitle || ''}
                 </div>
               </th>
             {/if}
@@ -208,12 +208,11 @@
                 class="spectrum-Table-row"
                 class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}>
                 {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
-                  {#if customColumnRenderer}
+                  {#if showEditColumn}
                     <td
                       class="spectrum-Table-cell spectrum-Table-cell--divider">
                       <div class="spectrum-Table-cell-content">
-                        <svelte:component
-                          this={customColumnRenderer}
+                        <SelectEditRenderer
                           data={row}
                           selected={selectedRows.includes(row)}
                           onToggleSelection={() => toggleSelectRow(row)}
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 8f99088e4a..562a2ecdc8 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -23,7 +23,6 @@
   export let theme = "alpine"
   export let hideAutocolumns
 
-  let columnDefs = []
   let selectedRows = []
   let editableColumn
   let editableRow
@@ -32,6 +31,7 @@
   let customRenderers = []
 
   $: isUsersTable = tableId === TableNames.USERS
+  $: data && resetSelectedRows()
   $: editRowComponent = isUsersTable ? CreateEditUser : CreateEditRow
   $: {
     if (isUsersTable) {
@@ -54,7 +54,11 @@
     }
   }
 
-  function selectRelationship(row, fieldName) {
+  const resetSelectedRows = () => {
+    selectedRows = []
+  }
+
+  const selectRelationship = (row, fieldName) => {
     if (!row?.[fieldName]?.length) {
       return
     }
@@ -110,8 +114,10 @@
     {schema}
     {loading}
     {customRenderers}
-    customColumnTitle="Edit"
     bind:selectedRows
+    allowSelectRows={allowEditing}
+    allowEditRows={allowEditing}
+    allowEditColumns={allowEditing}
     showAutoColumns={!hideAutocolumns}
     on:editcolumn={e => editColumn(e.detail)}
     on:editrow={e => editRow(e.detail)} />
diff --git a/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
index 092796b3b5..1001e98ed3 100644
--- a/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
@@ -57,6 +57,7 @@
   tableId={view.tableId}
   {data}
   {loading}
+  allowEditing={!view?.calculation}
   bind:hideAutocolumns>
   <FilterButton {view} />
   <CalculateButton {view} />

From f76fb215622545a74ac4eb41ec428e462c80f844 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Apr 2021 15:12:59 +0100
Subject: [PATCH 12/25] Allow clicking on relationships in spectrum table

---
 packages/bbui/src/Table/CellRenderer.svelte      |  5 +++--
 .../bbui/src/Table/RelationshipRenderer.svelte   | 16 +++++++++++++++-
 packages/bbui/src/Table/Table.svelte             |  4 +++-
 .../components/backend/DataTable/Table.svelte    | 10 ++++------
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/packages/bbui/src/Table/CellRenderer.svelte b/packages/bbui/src/Table/CellRenderer.svelte
index e45d9696b8..49d7264671 100644
--- a/packages/bbui/src/Table/CellRenderer.svelte
+++ b/packages/bbui/src/Table/CellRenderer.svelte
@@ -5,6 +5,7 @@
   import RelationshipRenderer from "./RelationshipRenderer.svelte"
   import AttachmentRenderer from "./AttachmentRenderer.svelte"
 
+  export let row
   export let schema
   export let value
   export let customRenderers = []
@@ -16,7 +17,7 @@
 
 {#if value != null && value !== ''}
   {#if customRenderer}
-    <svelte:component this={customRenderer.component} {value} />
+    <svelte:component this={customRenderer.component} {schema} {value} />
   {:else if plainTypes.includes(type)}
     <StringRenderer {value} />
   {:else if type === 'boolean'}
@@ -24,7 +25,7 @@
   {:else if type === 'datetime'}
     <DateTimeRenderer {value} />
   {:else if type === 'link'}
-    <RelationshipRenderer {value} />
+    <RelationshipRenderer {row} {schema} {value} on:clickrelationship />
   {:else if type === 'attachment'}
     <AttachmentRenderer {value} />
   {/if}
diff --git a/packages/bbui/src/Table/RelationshipRenderer.svelte b/packages/bbui/src/Table/RelationshipRenderer.svelte
index 6c04000fa7..1f467272dd 100644
--- a/packages/bbui/src/Table/RelationshipRenderer.svelte
+++ b/packages/bbui/src/Table/RelationshipRenderer.svelte
@@ -1,16 +1,30 @@
 <script>
   import "@spectrum-css/label/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
 
+  export let row
   export let value
+  export let schema
 
+  const dispatch = createEventDispatcher()
   const displayLimit = 5
+
   $: relationships = value?.slice(0, displayLimit) ?? []
   $: leftover = (value?.length ?? 0) - relationships.length
+
+  const onClick = e => {
+    e.stopPropagation()
+    dispatch("clickrelationship", {
+      tableId: row.tableId,
+      rowId: row._id,
+      fieldName: schema?.name,
+    })
+  }
 </script>
 
 {#each relationships as relationship}
   {#if relationship?.primaryDisplay}
-    <span class="spectrum-Label spectrum-Label--grey">
+    <span class="spectrum-Label spectrum-Label--grey" on:click={onClick}>
       {relationship.primaryDisplay}
     </span>
   {/if}
diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index d4731e84aa..19accc5120 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -227,8 +227,10 @@
                       <div class="spectrum-Table-cell-content">
                         <CellRenderer
                           {customRenderers}
+                          {row}
                           schema={schema[field]}
-                          value={row[field]} />
+                          value={row[field]}
+                          on:clickrelationship />
                       </div>
                     </td>
                   {/each}
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 562a2ecdc8..70ff338a41 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -58,12 +58,9 @@
     selectedRows = []
   }
 
-  const selectRelationship = (row, fieldName) => {
-    if (!row?.[fieldName]?.length) {
-      return
-    }
+  const selectRelationship = ({ tableId, rowId, fieldName }) => {
     $goto(
-      `/${$params.application}/data/table/${row.tableId}/relationship/${row._id}/${fieldName}`
+      `/builder/${$params.application}/data/table/${tableId}/relationship/${rowId}/${fieldName}`
     )
   }
 
@@ -120,7 +117,8 @@
     allowEditColumns={allowEditing}
     showAutoColumns={!hideAutocolumns}
     on:editcolumn={e => editColumn(e.detail)}
-    on:editrow={e => editRow(e.detail)} />
+    on:editrow={e => editRow(e.detail)}
+    on:clickrelationship={e => selectRelationship(e.detail)} />
 {/key}
 
 <Modal bind:this={editRowModal}>

From 9e2803cb8d03c061f73d9e4ac05376331a517e90 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Apr 2021 15:15:35 +0100
Subject: [PATCH 13/25] Don't show header in spectrum table unless rows exist

---
 packages/bbui/src/Table/Table.svelte | 94 ++++++++++++++--------------
 1 file changed, 48 insertions(+), 46 deletions(-)

diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index 19accc5120..b8d65e243f 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -153,53 +153,55 @@
     class="container">
     <div style={contentStyle}>
       <table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
-        <thead class="spectrum-Table-head">
-          <tr>
-            {#if showEditColumn}
-              <th class="spectrum-Table-headCell">
-                <div class="spectrum-Table-headCell-content">
-                  {editColumnTitle || ''}
-                </div>
-              </th>
-            {/if}
-            {#each fields as field}
-              <th
-                class="spectrum-Table-headCell is-sortable"
-                class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
-                class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
-                on:click={() => sortBy(field)}>
-                <div class="spectrum-Table-headCell-content">
-                  <div class="title">
-                    {schema[field]?.displayName || schema[field]?.name}
+        {#if sortedRows?.length}
+          <thead class="spectrum-Table-head">
+            <tr>
+              {#if showEditColumn}
+                <th class="spectrum-Table-headCell">
+                  <div class="spectrum-Table-headCell-content">
+                    {editColumnTitle || ''}
                   </div>
-                  {#if schema[field]?.autocolumn}
-                    <svg
-                      class="spectrum-Icon spectrum-Table-autoIcon"
-                      focusable="false">
-                      <use xlink:href="#spectrum-icon-18-MagicWand" />
-                    </svg>
-                  {/if}
-                  {#if sortColumn === field}
-                    <svg
-                      class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
-                      focusable="false"
-                      aria-hidden="true">
-                      <use xlink:href="#spectrum-css-icon-Arrow100" />
-                    </svg>
-                  {/if}
-                  {#if allowEditColumns && schema[field]?.editable !== false}
-                    <svg
-                      class="spectrum-Icon spectrum-Table-editIcon"
-                      focusable="false"
-                      on:click={e => editColumn(e, field)}>
-                      <use xlink:href="#spectrum-icon-18-Edit" />
-                    </svg>
-                  {/if}
-                </div>
-              </th>
-            {/each}
-          </tr>
-        </thead>
+                </th>
+              {/if}
+              {#each fields as field}
+                <th
+                  class="spectrum-Table-headCell is-sortable"
+                  class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
+                  class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
+                  on:click={() => sortBy(field)}>
+                  <div class="spectrum-Table-headCell-content">
+                    <div class="title">
+                      {schema[field]?.displayName || schema[field]?.name}
+                    </div>
+                    {#if schema[field]?.autocolumn}
+                      <svg
+                        class="spectrum-Icon spectrum-Table-autoIcon"
+                        focusable="false">
+                        <use xlink:href="#spectrum-icon-18-MagicWand" />
+                      </svg>
+                    {/if}
+                    {#if sortColumn === field}
+                      <svg
+                        class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
+                        focusable="false"
+                        aria-hidden="true">
+                        <use xlink:href="#spectrum-css-icon-Arrow100" />
+                      </svg>
+                    {/if}
+                    {#if allowEditColumns && schema[field]?.editable !== false}
+                      <svg
+                        class="spectrum-Icon spectrum-Table-editIcon"
+                        focusable="false"
+                        on:click={e => editColumn(e, field)}>
+                        <use xlink:href="#spectrum-icon-18-Edit" />
+                      </svg>
+                    {/if}
+                  </div>
+                </th>
+              {/each}
+            </tr>
+          </thead>
+        {/if}
         <tbody class="spectrum-Table-body">
           {#if sortedRows?.length}
             {#each sortedRows as row, idx}

From 3b2ef3a5e9c83ee7416a27b499d12a0a92f44fd8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Apr 2021 15:16:49 +0100
Subject: [PATCH 14/25] Add hover cursor to relationship badges in tables

---
 packages/bbui/src/Table/RelationshipRenderer.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/bbui/src/Table/RelationshipRenderer.svelte b/packages/bbui/src/Table/RelationshipRenderer.svelte
index 1f467272dd..4db0c63d95 100644
--- a/packages/bbui/src/Table/RelationshipRenderer.svelte
+++ b/packages/bbui/src/Table/RelationshipRenderer.svelte
@@ -32,3 +32,9 @@
 {#if leftover}
   <div>+{leftover} more</div>
 {/if}
+
+<style>
+  span:hover {
+    cursor: pointer;
+  }
+</style>

From d7cb604151c191a94843330d272bbcb649a0ff2c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Apr 2021 15:24:33 +0100
Subject: [PATCH 15/25] Improve table cell rendering and pass down table slot

---
 packages/bbui/src/Table/CellRenderer.svelte   | 29 ++++++++++---------
 packages/bbui/src/Table/StringRenderer.svelte |  1 +
 packages/bbui/src/Table/Table.svelte          |  4 ++-
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/bbui/src/Table/CellRenderer.svelte b/packages/bbui/src/Table/CellRenderer.svelte
index 49d7264671..89f7e8716d 100644
--- a/packages/bbui/src/Table/CellRenderer.svelte
+++ b/packages/bbui/src/Table/CellRenderer.svelte
@@ -11,22 +11,23 @@
   export let customRenderers = []
 
   const plainTypes = ["string", "options", "number", "longform"]
+  const typeMap = {
+    boolean: BooleanRenderer,
+    datetime: DateTimeRenderer,
+    link: RelationshipRenderer,
+    attachment: AttachmentRenderer,
+    string: StringRenderer,
+    options: StringRenderer,
+    number: StringRenderer,
+    longform: StringRenderer,
+  }
   $: type = schema?.type ?? "string"
   $: customRenderer = customRenderers?.find(x => x.column === schema?.name)
+  $: renderer = customRenderer?.component ?? typeMap[type]
 </script>
 
-{#if value != null && value !== ''}
-  {#if customRenderer}
-    <svelte:component this={customRenderer.component} {schema} {value} />
-  {:else if plainTypes.includes(type)}
-    <StringRenderer {value} />
-  {:else if type === 'boolean'}
-    <BooleanRenderer {value} />
-  {:else if type === 'datetime'}
-    <DateTimeRenderer {value} />
-  {:else if type === 'link'}
-    <RelationshipRenderer {row} {schema} {value} on:clickrelationship />
-  {:else if type === 'attachment'}
-    <AttachmentRenderer {value} />
-  {/if}
+{#if renderer && value != null && value !== ''}
+  <svelte:component this={renderer} {row} {schema} {value} on:clickrelationship>
+    <slot />
+  </svelte:component>
 {/if}
diff --git a/packages/bbui/src/Table/StringRenderer.svelte b/packages/bbui/src/Table/StringRenderer.svelte
index 2756839616..ae95297dfc 100644
--- a/packages/bbui/src/Table/StringRenderer.svelte
+++ b/packages/bbui/src/Table/StringRenderer.svelte
@@ -3,6 +3,7 @@
 </script>
 
 <div>{value}</div>
+<slot />
 
 <style>
   div {
diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index b8d65e243f..77e9eaee03 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -232,7 +232,9 @@
                           {row}
                           schema={schema[field]}
                           value={row[field]}
-                          on:clickrelationship />
+                          on:clickrelationship>
+                          <slot />
+                        </CellRenderer>
                       </div>
                     </td>
                   {/each}

From 41742e7138ead91479f62e9ddabac81bc56e7e98 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Apr 2021 16:14:24 +0100
Subject: [PATCH 16/25] Use BBUI spectrum table in standard components

---
 packages/bbui/src/Table/CellRenderer.svelte   |   2 +-
 packages/bbui/src/Table/StringRenderer.svelte |   1 -
 packages/bbui/src/Table/Table.svelte          |  29 +-
 .../src/table/AttachmentRenderer.svelte       |  39 ---
 .../src/table/BooleanRenderer.svelte          |  38 ---
 .../src/table/CellRenderer.svelte             |  27 --
 .../src/table/DateTimeRenderer.svelte         |  13 -
 .../src/table/RelationshipRenderer.svelte     |  20 --
 .../src/table/SlotRenderer.svelte             |  11 +
 .../src/table/StringRenderer.svelte           |  13 -
 .../src/table/Table.svelte                    | 283 +++---------------
 11 files changed, 76 insertions(+), 400 deletions(-)
 delete mode 100644 packages/standard-components/src/table/AttachmentRenderer.svelte
 delete mode 100644 packages/standard-components/src/table/BooleanRenderer.svelte
 delete mode 100644 packages/standard-components/src/table/CellRenderer.svelte
 delete mode 100644 packages/standard-components/src/table/DateTimeRenderer.svelte
 delete mode 100644 packages/standard-components/src/table/RelationshipRenderer.svelte
 create mode 100644 packages/standard-components/src/table/SlotRenderer.svelte
 delete mode 100644 packages/standard-components/src/table/StringRenderer.svelte

diff --git a/packages/bbui/src/Table/CellRenderer.svelte b/packages/bbui/src/Table/CellRenderer.svelte
index 89f7e8716d..d0323487e1 100644
--- a/packages/bbui/src/Table/CellRenderer.svelte
+++ b/packages/bbui/src/Table/CellRenderer.svelte
@@ -26,7 +26,7 @@
   $: renderer = customRenderer?.component ?? typeMap[type]
 </script>
 
-{#if renderer && value != null && value !== ''}
+{#if renderer && (customRenderer || (value != null && value !== ''))}
   <svelte:component this={renderer} {row} {schema} {value} on:clickrelationship>
     <slot />
   </svelte:component>
diff --git a/packages/bbui/src/Table/StringRenderer.svelte b/packages/bbui/src/Table/StringRenderer.svelte
index ae95297dfc..2756839616 100644
--- a/packages/bbui/src/Table/StringRenderer.svelte
+++ b/packages/bbui/src/Table/StringRenderer.svelte
@@ -3,7 +3,6 @@
 </script>
 
 <div>{value}</div>
-<slot />
 
 <style>
   div {
diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index 77e9eaee03..c0b32e79f7 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -84,22 +84,41 @@
     }
   }
 
+  const getDisplayName = schema => {
+    let name = schema?.displayName
+    if (schema && name === undefined) {
+      name = schema.name
+    }
+    return name || ""
+  }
+
   const getFields = (schema, showAutoColumns) => {
     let columns = []
     let autoColumns = []
     Object.entries(schema || {}).forEach(([field, fieldSchema]) => {
+      if (!field || !fieldSchema) {
+        return
+      }
       schema[field].name = field
       if (!fieldSchema?.autocolumn) {
-        columns.push(field)
+        columns.push(fieldSchema)
       } else if (showAutoColumns) {
-        autoColumns.push(field)
+        autoColumns.push(fieldSchema)
       }
     })
     return columns
       .sort((a, b) => {
-        return a.toLowerCase() < b.toLowerCase() ? a : b
+        const orderA = a.order || Number.MAX_SAFE_INTEGER
+        const orderB = b.order || Number.MAX_SAFE_INTEGER
+        const nameA = getDisplayName(a)
+        const nameB = getDisplayName(b)
+        if (orderA !== orderB) {
+          return orderA < orderB ? orderA : orderB
+        }
+        return nameA < nameB ? a : b
       })
       .concat(autoColumns)
+      .map(column => column.name)
   }
 
   const onScroll = event => {
@@ -170,9 +189,7 @@
                   class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
                   on:click={() => sortBy(field)}>
                   <div class="spectrum-Table-headCell-content">
-                    <div class="title">
-                      {schema[field]?.displayName || schema[field]?.name}
-                    </div>
+                    <div class="title">{getDisplayName(schema[field])}</div>
                     {#if schema[field]?.autocolumn}
                       <svg
                         class="spectrum-Icon spectrum-Table-autoIcon"
diff --git a/packages/standard-components/src/table/AttachmentRenderer.svelte b/packages/standard-components/src/table/AttachmentRenderer.svelte
deleted file mode 100644
index 45bd97a849..0000000000
--- a/packages/standard-components/src/table/AttachmentRenderer.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script>
-  export let value
-
-  const displayLimit = 5
-  $: attachments = value?.slice(0, displayLimit) ?? []
-  $: leftover = (value?.length ?? 0) - attachments.length
-</script>
-
-{#each attachments as attachment}
-  {#if attachment.type.startsWith('image')}
-    <img src={attachment.url} alt={attachment.extension} />
-  {:else}
-    <div class="file">{attachment.extension}</div>
-  {/if}
-{/each}
-{#if leftover}
-  <div>+{leftover} more</div>
-{/if}
-
-<style>
-  img {
-    height: 32px;
-    max-width: 64px;
-  }
-  .file {
-    height: 32px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 0 8px;
-    color: var(--spectrum-global-color-gray-800);
-    border: 1px solid var(--spectrum-global-color-gray-300);
-    border-radius: 2px;
-    text-transform: uppercase;
-    font-weight: 500;
-    font-size: 11px;
-  }
-</style>
diff --git a/packages/standard-components/src/table/BooleanRenderer.svelte b/packages/standard-components/src/table/BooleanRenderer.svelte
deleted file mode 100644
index a71e28cb91..0000000000
--- a/packages/standard-components/src/table/BooleanRenderer.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script>
-  import "@spectrum-css/checkbox/dist/index-vars.css"
-
-  export let value
-</script>
-
-<label
-  class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized">
-  <input
-    type="checkbox"
-    class="spectrum-Checkbox-input"
-    id="checkbox-1"
-    disabled
-    checked={!!value} />
-  <span class="spectrum-Checkbox-box">
-    <svg
-      class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
-      focusable="false"
-      aria-hidden="true">
-      <use xlink:href="#spectrum-css-icon-Checkmark100" />
-    </svg>
-    <svg
-      class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
-      focusable="false"
-      aria-hidden="true">
-      <use xlink:href="#spectrum-css-icon-Dash100" />
-    </svg>
-  </span>
-</label>
-
-<style>
-  .spectrum-Checkbox {
-    min-height: 0;
-  }
-  .spectrum-Checkbox-box {
-    margin: 0;
-  }
-</style>
diff --git a/packages/standard-components/src/table/CellRenderer.svelte b/packages/standard-components/src/table/CellRenderer.svelte
deleted file mode 100644
index 0c14ec2aa5..0000000000
--- a/packages/standard-components/src/table/CellRenderer.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-  import StringRenderer from "./StringRenderer.svelte"
-  import BooleanRenderer from "./BooleanRenderer.svelte"
-  import DateTimeRenderer from "./DateTimeRenderer.svelte"
-  import RelationshipRenderer from "./RelationshipRenderer.svelte"
-  import AttachmentRenderer from "./AttachmentRenderer.svelte"
-
-  export let schema
-  export let value
-
-  const plainTypes = ["string", "options", "number", "longform"]
-  $: type = schema?.type ?? "string"
-</script>
-
-{#if value != null && value !== ''}
-  {#if plainTypes.includes(type)}
-    <StringRenderer {value} />
-  {:else if type === 'boolean'}
-    <BooleanRenderer {value} />
-  {:else if type === 'datetime'}
-    <DateTimeRenderer {value} />
-  {:else if type === 'link'}
-    <RelationshipRenderer {value} />
-  {:else if type === 'attachment'}
-    <AttachmentRenderer {value} />
-  {/if}
-{/if}
diff --git a/packages/standard-components/src/table/DateTimeRenderer.svelte b/packages/standard-components/src/table/DateTimeRenderer.svelte
deleted file mode 100644
index 169adab163..0000000000
--- a/packages/standard-components/src/table/DateTimeRenderer.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-  import dayjs from "dayjs"
-
-  export let value
-</script>
-
-<div>{dayjs(value).format('MMMM D YYYY, HH:mm')}</div>
-
-<style>
-  div {
-    width: 200px;
-  }
-</style>
diff --git a/packages/standard-components/src/table/RelationshipRenderer.svelte b/packages/standard-components/src/table/RelationshipRenderer.svelte
deleted file mode 100644
index 6c04000fa7..0000000000
--- a/packages/standard-components/src/table/RelationshipRenderer.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  import "@spectrum-css/label/dist/index-vars.css"
-
-  export let value
-
-  const displayLimit = 5
-  $: relationships = value?.slice(0, displayLimit) ?? []
-  $: leftover = (value?.length ?? 0) - relationships.length
-</script>
-
-{#each relationships as relationship}
-  {#if relationship?.primaryDisplay}
-    <span class="spectrum-Label spectrum-Label--grey">
-      {relationship.primaryDisplay}
-    </span>
-  {/if}
-{/each}
-{#if leftover}
-  <div>+{leftover} more</div>
-{/if}
diff --git a/packages/standard-components/src/table/SlotRenderer.svelte b/packages/standard-components/src/table/SlotRenderer.svelte
new file mode 100644
index 0000000000..dc24f4249c
--- /dev/null
+++ b/packages/standard-components/src/table/SlotRenderer.svelte
@@ -0,0 +1,11 @@
+<script>
+  import { getContext } from "svelte"
+
+  export let row
+
+  const { Provider } = getContext("sdk")
+</script>
+
+<Provider data={row}>
+  <slot />
+</Provider>
diff --git a/packages/standard-components/src/table/StringRenderer.svelte b/packages/standard-components/src/table/StringRenderer.svelte
deleted file mode 100644
index 2756839616..0000000000
--- a/packages/standard-components/src/table/StringRenderer.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-  export let value
-</script>
-
-<div>{value}</div>
-
-<style>
-  div {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 150px;
-  }
-</style>
diff --git a/packages/standard-components/src/table/Table.svelte b/packages/standard-components/src/table/Table.svelte
index 8065b520e9..b213c3c397 100644
--- a/packages/standard-components/src/table/Table.svelte
+++ b/packages/standard-components/src/table/Table.svelte
@@ -1,8 +1,8 @@
 <script>
-  import { fade } from "svelte/transition"
   import "@spectrum-css/table/dist/index-vars.css"
   import { getContext } from "svelte"
-  import CellRenderer from "./CellRenderer.svelte"
+  import { Table } from "@budibase/bbui"
+  import SlotRenderer from "./SlotRenderer.svelte"
 
   export let theme
   export let size
@@ -14,70 +14,21 @@
 
   const component = getContext("component")
   const { styleable, Provider } = getContext("sdk")
-
-  // Config
-  const rowHeight = 55
-  const headerHeight = 36
-  const rowPreload = 5
-  const maxRows = 100
-
-  // Sorting state
-  let sortColumn
-  let sortOrder
+  const customColumnKey = `custom-${Math.random()}`
+  const customRenderers = [
+    {
+      column: customColumnKey,
+      component: SlotRenderer,
+    },
+  ]
 
   // Table state
-  $: loaded = dataProvider?.loaded ?? false
-  $: rows = dataProvider?.rows ?? []
-  $: visibleRowCount = loaded
-    ? Math.min(rows.length, rowCount || maxRows, maxRows)
-    : Math.min(8, rowCount || maxRows)
-  $: scroll = rows.length > visibleRowCount
-  $: contentStyle = getContentStyle(visibleRowCount, scroll || !loaded)
-  $: sortedRows = sortRows(rows, sortColumn, sortOrder)
-  $: schema = dataProvider?.schema ?? {}
-  $: fields = getFields(schema, columns, showAutoColumns)
-
-  // Scrolling state
-  let timeout
-  let nextScrollTop = 0
-  let scrollTop = 0
-  $: firstVisibleRow = calculateFirstVisibleRow(scrollTop)
-  $: lastVisibleRow = calculateLastVisibleRow(
-    firstVisibleRow,
-    visibleRowCount,
-    rows.length
-  )
-
-  const getContentStyle = (visibleRows, useFixedHeight) => {
-    if (!useFixedHeight) {
-      return ""
-    }
-    return `height: ${headerHeight - 1 + visibleRows * (rowHeight + 1)}px;`
-  }
-
-  const sortRows = (rows, sortColumn, sortOrder) => {
-    if (!sortColumn || !sortOrder) {
-      return rows
-    }
-    return rows.slice().sort((a, b) => {
-      const colA = a[sortColumn]
-      const colB = b[sortColumn]
-      if (sortOrder === "Descending") {
-        return colA > colB ? -1 : 1
-      } else {
-        return colA > colB ? 1 : -1
-      }
-    })
-  }
-
-  const sortBy = field => {
-    if (field === sortColumn) {
-      sortOrder = sortOrder === "Descending" ? "Ascending" : "Descending"
-    } else {
-      sortColumn = field
-      sortOrder = "Descending"
-    }
-  }
+  $: hasChildren = $component.children
+  $: loading = dataProvider?.loading ?? false
+  $: data = dataProvider?.rows || []
+  $: fullSchema = dataProvider?.schema ?? {}
+  $: fields = getFields(fullSchema, columns, showAutoColumns)
+  $: schema = getFilteredSchema(fullSchema, fields, hasChildren)
 
   const getFields = (schema, customColumns, showAutoColumns) => {
     // Check for an invalid column selection
@@ -106,185 +57,33 @@
     return columns.concat(autoColumns)
   }
 
-  const onScroll = event => {
-    nextScrollTop = event.target.scrollTop
-    if (timeout) {
-      return
+  const getFilteredSchema = (schema, fields, hasChildren) => {
+    let newSchema = {}
+    if (hasChildren) {
+      newSchema[customColumnKey] = { displayName: null, order: 0 }
     }
-    timeout = setTimeout(() => {
-      scrollTop = nextScrollTop
-      timeout = null
-    }, 50)
-  }
-
-  const calculateFirstVisibleRow = scrollTop => {
-    return Math.max(Math.floor(scrollTop / (rowHeight + 1)) - rowPreload, 0)
-  }
-
-  const calculateLastVisibleRow = (firstRow, visibleRowCount, allRowCount) => {
-    return Math.min(firstRow + visibleRowCount + 2 * rowPreload, allRowCount)
+    fields.forEach(field => {
+      newSchema[field] = schema[field]
+    })
+    return newSchema
   }
 </script>
 
-{#if !loaded}
-  <div class="content" style={contentStyle} />
-{:else}
-  <div use:styleable={$component.styles}>
-    <div
-      on:scroll={onScroll}
-      lang="en"
-      dir="ltr"
-      class:quiet
-      style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
-      class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
-      <div class="content" style={contentStyle}>
-        <table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
-          <thead class="spectrum-Table-head">
-            <tr>
-              {#if $component.children}
-                <th class="spectrum-Table-headCell">
-                  <div class="spectrum-Table-headCell-content" />
-                </th>
-              {/if}
-              {#each fields as field}
-                <th
-                  class="spectrum-Table-headCell is-sortable"
-                  class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
-                  class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
-                  on:click={() => sortBy(field)}>
-                  <div class="spectrum-Table-headCell-content">
-                    <div class="title">{schema[field]?.name}</div>
-                    <svg
-                      class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
-                      class:visible={sortColumn === field}
-                      focusable="false"
-                      aria-hidden="true">
-                      <use xlink:href="#spectrum-css-icon-Arrow100" />
-                    </svg>
-                  </div>
-                </th>
-              {/each}
-            </tr>
-          </thead>
-          <tbody class="spectrum-Table-body">
-            {#each sortedRows as row, idx}
-              <tr
-                class="spectrum-Table-row"
-                class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}>
-                {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
-                  {#if $component.children}
-                    <td
-                      class="spectrum-Table-cell spectrum-Table-cell--divider">
-                      <div class="spectrum-Table-cell-content">
-                        <Provider data={row}>
-                          <slot />
-                        </Provider>
-                      </div>
-                    </td>
-                  {/if}
-                  {#each fields as field}
-                    <td class="spectrum-Table-cell">
-                      <div class="spectrum-Table-cell-content">
-                        <CellRenderer
-                          schema={schema[field]}
-                          value={row[field]} />
-                      </div>
-                    </td>
-                  {/each}
-                {/if}
-              </tr>
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-{/if}
-
-<style>
-  .spectrum {
-    position: relative;
-    overflow: auto;
-    border: 1px solid
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
-  }
-  .spectrum.quiet {
-    border: none !important;
-  }
-  table {
-    width: 100%;
-  }
-
-  .spectrum-Table-sortedIcon {
-    opacity: 0;
-    display: block !important;
-  }
-  .spectrum-Table-sortedIcon.visible {
-    opacity: 1;
-  }
-  .spectrum,
-  th {
-    border-bottom: 1px solid
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
-  }
-  th {
-    vertical-align: middle;
-    height: var(--header-height);
-    position: sticky;
-    top: 0;
-    background-color: var(--spectrum-global-color-gray-100);
-    z-index: 2;
-  }
-  .spectrum-Table-headCell-content {
-    white-space: nowrap;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    user-select: none;
-  }
-  .spectrum-Table-headCell-content .title {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  tbody {
-    z-index: 1;
-  }
-  tbody tr {
-    height: var(--row-height);
-  }
-  tbody tr.hidden {
-    height: calc(var(--row-height) + 1px);
-  }
-  tbody tr.offset {
-    background-color: red;
-    display: block;
-  }
-  td {
-    padding-top: 0;
-    padding-bottom: 0;
-    border-bottom: none !important;
-    border-left: none !important;
-    border-right: none !important;
-    border-top: 1px solid
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
-  }
-  tr:first-child td {
-    border-top: none !important;
-  }
-  .spectrum:not(.quiet) td.spectrum-Table-cell--divider {
-    width: 1px;
-    border-right: 1px solid
-      var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
-  }
-  .spectrum-Table-cell-content {
-    height: var(--row-height);
-    white-space: nowrap;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 4px;
-  }
-</style>
+<div
+  lang="en"
+  dir="ltr"
+  use:styleable={$component.styles}
+  class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
+  <Table
+    {data}
+    {schema}
+    {loading}
+    {quiet}
+    {customRenderers}
+    allowSelectRows={false}
+    allowEditRows={false}
+    allowEditColumns={false}
+    showAutoColumns={true}>
+    <slot />
+  </Table>
+</div>

From 1ea51cdb7449b3ea964e32be26e907b1962fe8ba Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Apr 2021 14:13:44 +0100
Subject: [PATCH 17/25] Fix client table not passing down rowCount and improve
 styles of wrapper div

---
 packages/standard-components/src/table/Table.svelte | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/standard-components/src/table/Table.svelte b/packages/standard-components/src/table/Table.svelte
index b213c3c397..8da9eef82d 100644
--- a/packages/standard-components/src/table/Table.svelte
+++ b/packages/standard-components/src/table/Table.svelte
@@ -78,6 +78,7 @@
     {data}
     {schema}
     {loading}
+    {rowCount}
     {quiet}
     {customRenderers}
     allowSelectRows={false}
@@ -87,3 +88,9 @@
     <slot />
   </Table>
 </div>
+
+<style>
+  div {
+    display: flex !important;
+  }
+</style>

From e166195a49356c173a04502ee5d10b4eb9a0ade3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Apr 2021 14:14:14 +0100
Subject: [PATCH 18/25] Allow table dynamic resizing and scrolling whenever
 rowCount is not specified

---
 packages/bbui/src/Table/Table.svelte | 51 +++++++++++++++++-----------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index c0b32e79f7..f634f913c9 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -7,7 +7,7 @@
   export let data = []
   export let schema = {}
   export let showAutoColumns = false
-  export let rowCount = 14
+  export let rowCount = 0
   export let quiet = true
   export let loading = false
   export let allowSelectRows = true
@@ -23,21 +23,18 @@
   const rowHeight = 55
   const headerHeight = 36
   const rowPreload = 5
-  const maxRows = 100
 
   // Sorting state
   let sortColumn
   let sortOrder
 
   // Table state
+  let height = 0
   let loaded = false
   $: if (!loading) loaded = true
   $: rows = data ?? []
-  $: visibleRowCount = loaded
-    ? Math.min(rows.length, rowCount || maxRows, maxRows)
-    : rowCount || 8
-  $: scroll = rows.length > visibleRowCount
-  $: contentStyle = getContentStyle(visibleRowCount, scroll || !loaded)
+  $: visibleRowCount = getVisibleRowCount(loaded, height, rows.length, rowCount)
+  $: contentStyle = getContentStyle(visibleRowCount, rowCount)
   $: sortedRows = sortRows(rows, sortColumn, sortOrder)
   $: fields = getFields(schema, showAutoColumns)
   $: showEditColumn = allowEditRows || allowSelectRows
@@ -53,8 +50,18 @@
     rows.length
   )
 
-  const getContentStyle = (visibleRows, useFixedHeight) => {
-    if (!useFixedHeight) {
+  const getVisibleRowCount = (loaded, height, allRows, rowCount) => {
+    if (!loaded) {
+      return rowCount || 0
+    }
+    if (rowCount) {
+      return Math.min(allRows, rowCount)
+    }
+    return Math.min(allRows, Math.ceil(height / rowHeight))
+  }
+
+  const getContentStyle = (visibleRows, rowCount) => {
+    if (!rowCount) {
       return ""
     }
     return `height: ${headerHeight - 1 + visibleRows * (rowHeight + 1)}px;`
@@ -137,6 +144,9 @@
   }
 
   const calculateLastVisibleRow = (firstRow, visibleRowCount, allRowCount) => {
+    if (visibleRowCount === 0) {
+      return firstRow
+    }
     return Math.min(firstRow + visibleRowCount + 2 * rowPreload, allRowCount)
   }
 
@@ -162,14 +172,15 @@
   }
 </script>
 
-{#if !loaded}
-  <div class="loading" style={contentStyle} />
-{:else}
-  <div
-    on:scroll={onScroll}
-    class:quiet
-    style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
-    class="container">
+<div
+  bind:offsetHeight={height}
+  on:scroll={onScroll}
+  class:quiet
+  style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
+  class="container">
+  {#if !loaded}
+    <div class="loading" style={contentStyle} />
+  {:else}
     <div style={contentStyle}>
       <table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
         {#if sortedRows?.length}
@@ -265,14 +276,14 @@
                 focusable="false">
                 <use xlink:href="#spectrum-icon-18-Table" />
               </svg>
-              <div>No rows found.</div>
+              <div>No rows found</div>
             </div>
           {/if}
         </tbody>
       </table>
     </div>
-  </div>
-{/if}
+  {/if}
+</div>
 
 <style>
   .loading,

From 13b7140571a3537628ff4694c5036b5fc94eb275 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Apr 2021 14:44:30 +0100
Subject: [PATCH 19/25] Support non-sortable columns in table and prevent first
 row rendering flashing

---
 packages/bbui/src/Table/Table.svelte | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index f634f913c9..9697ce86f9 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -82,11 +82,14 @@
     })
   }
 
-  const sortBy = field => {
-    if (field === sortColumn) {
+  const sortBy = fieldSchema => {
+    if (fieldSchema.sortable === false) {
+      return
+    }
+    if (fieldSchema.name === sortColumn) {
       sortOrder = sortOrder === "Descending" ? "Ascending" : "Descending"
     } else {
-      sortColumn = field
+      sortColumn = fieldSchema.name
       sortOrder = "Descending"
     }
   }
@@ -145,7 +148,7 @@
 
   const calculateLastVisibleRow = (firstRow, visibleRowCount, allRowCount) => {
     if (visibleRowCount === 0) {
-      return firstRow
+      return -1
     }
     return Math.min(firstRow + visibleRowCount + 2 * rowPreload, allRowCount)
   }
@@ -195,10 +198,11 @@
               {/if}
               {#each fields as field}
                 <th
-                  class="spectrum-Table-headCell is-sortable"
+                  class="spectrum-Table-headCell"
+                  class:is-sortable={field.sortable !== false}
                   class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
                   class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
-                  on:click={() => sortBy(field)}>
+                  on:click={() => sortBy(schema[field])}>
                   <div class="spectrum-Table-headCell-content">
                     <div class="title">{getDisplayName(schema[field])}</div>
                     {#if schema[field]?.autocolumn}

From 9e8b6c9c41540e4fe32a816164a4881396c841a5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Apr 2021 14:44:46 +0100
Subject: [PATCH 20/25] Fix routify empty span tags affecting dom layout

---
 .../src/pages/builder/[application]/data/_layout.svelte      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/[application]/data/_layout.svelte b/packages/builder/src/pages/builder/[application]/data/_layout.svelte
index 895dc1fc34..c8f33b829a 100644
--- a/packages/builder/src/pages/builder/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/_layout.svelte
@@ -72,7 +72,7 @@
 
   .content {
     flex: 1 1 auto;
-    padding: var(--spacing-l) 40px;
+    padding: var(--spacing-l) 40px 40px 40px;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
@@ -81,6 +81,9 @@
     gap: var(--spacing-l);
     background: var(--background);
   }
+  .content :global(> span) {
+    display: contents;
+  }
 
   .nav {
     overflow-y: auto;

From 6ba2d7a0eff40c3f6fc5f134bfd166bc4bf4babc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Apr 2021 14:45:24 +0100
Subject: [PATCH 21/25] Make standard components table custom column
 non-sortable

---
 packages/standard-components/src/table/Table.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/standard-components/src/table/Table.svelte b/packages/standard-components/src/table/Table.svelte
index 8da9eef82d..e7b6ba078e 100644
--- a/packages/standard-components/src/table/Table.svelte
+++ b/packages/standard-components/src/table/Table.svelte
@@ -60,7 +60,11 @@
   const getFilteredSchema = (schema, fields, hasChildren) => {
     let newSchema = {}
     if (hasChildren) {
-      newSchema[customColumnKey] = { displayName: null, order: 0 }
+      newSchema[customColumnKey] = {
+        displayName: null,
+        order: 0,
+        sortable: false,
+      }
     }
     fields.forEach(field => {
       newSchema[field] = schema[field]

From 0f56ed3c95d738d3c1e7e0e8ee23d1a926462a18 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Apr 2021 15:10:27 +0100
Subject: [PATCH 22/25] Fix scroll state not resetting

---
 packages/bbui/src/Table/Table.svelte | 223 ++++++++++++++-------------
 1 file changed, 117 insertions(+), 106 deletions(-)

diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index 9697ce86f9..a9bb50fd9d 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -50,6 +50,15 @@
     rows.length
   )
 
+  // Reset state when data chanegs
+  $: data.length, reset()
+  const reset = () => {
+    nextScrollTop = 0
+    scrollTop = 0
+    clearTimeout(timeout)
+    timeout = null
+  }
+
   const getVisibleRowCount = (loaded, height, allRows, rowCount) => {
     if (!loaded) {
       return rowCount || 0
@@ -175,128 +184,129 @@
   }
 </script>
 
-<div
-  bind:offsetHeight={height}
-  on:scroll={onScroll}
-  class:quiet
-  style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
-  class="container">
+<div class="wrapper" bind:offsetHeight={height}>
   {#if !loaded}
     <div class="loading" style={contentStyle} />
   {:else}
-    <div style={contentStyle}>
-      <table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
-        {#if sortedRows?.length}
-          <thead class="spectrum-Table-head">
-            <tr>
-              {#if showEditColumn}
-                <th class="spectrum-Table-headCell">
-                  <div class="spectrum-Table-headCell-content">
-                    {editColumnTitle || ''}
-                  </div>
-                </th>
-              {/if}
-              {#each fields as field}
-                <th
-                  class="spectrum-Table-headCell"
-                  class:is-sortable={field.sortable !== false}
-                  class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
-                  class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
-                  on:click={() => sortBy(schema[field])}>
-                  <div class="spectrum-Table-headCell-content">
-                    <div class="title">{getDisplayName(schema[field])}</div>
-                    {#if schema[field]?.autocolumn}
-                      <svg
-                        class="spectrum-Icon spectrum-Table-autoIcon"
-                        focusable="false">
-                        <use xlink:href="#spectrum-icon-18-MagicWand" />
-                      </svg>
-                    {/if}
-                    {#if sortColumn === field}
-                      <svg
-                        class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
-                        focusable="false"
-                        aria-hidden="true">
-                        <use xlink:href="#spectrum-css-icon-Arrow100" />
-                      </svg>
-                    {/if}
-                    {#if allowEditColumns && schema[field]?.editable !== false}
-                      <svg
-                        class="spectrum-Icon spectrum-Table-editIcon"
-                        focusable="false"
-                        on:click={e => editColumn(e, field)}>
-                        <use xlink:href="#spectrum-icon-18-Edit" />
-                      </svg>
-                    {/if}
-                  </div>
-                </th>
-              {/each}
-            </tr>
-          </thead>
-        {/if}
-        <tbody class="spectrum-Table-body">
+    <div
+      on:scroll={onScroll}
+      class:quiet
+      style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
+      class="container">
+      <div style={contentStyle}>
+        <table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
           {#if sortedRows?.length}
-            {#each sortedRows as row, idx}
-              <tr
-                on:click={() => toggleSelectRow(row)}
-                class="spectrum-Table-row"
-                class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}>
-                {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
-                  {#if showEditColumn}
-                    <td
-                      class="spectrum-Table-cell spectrum-Table-cell--divider">
-                      <div class="spectrum-Table-cell-content">
-                        <SelectEditRenderer
-                          data={row}
-                          selected={selectedRows.includes(row)}
-                          onToggleSelection={() => toggleSelectRow(row)}
-                          onEdit={e => editRow(e, row)}
-                          {allowSelectRows}
-                          {allowEditRows} />
-                      </div>
-                    </td>
-                  {/if}
-                  {#each fields as field}
-                    <td class="spectrum-Table-cell">
-                      <div class="spectrum-Table-cell-content">
-                        <CellRenderer
-                          {customRenderers}
-                          {row}
-                          schema={schema[field]}
-                          value={row[field]}
-                          on:clickrelationship>
-                          <slot />
-                        </CellRenderer>
-                      </div>
-                    </td>
-                  {/each}
+            <thead class="spectrum-Table-head">
+              <tr>
+                {#if showEditColumn}
+                  <th class="spectrum-Table-headCell">
+                    <div class="spectrum-Table-headCell-content">
+                      {editColumnTitle || ''}
+                    </div>
+                  </th>
                 {/if}
+                {#each fields as field}
+                  <th
+                    class="spectrum-Table-headCell"
+                    class:is-sortable={schema[field].sortable !== false}
+                    class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
+                    class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
+                    on:click={() => sortBy(schema[field])}>
+                    <div class="spectrum-Table-headCell-content">
+                      <div class="title">{getDisplayName(schema[field])}</div>
+                      {#if schema[field]?.autocolumn}
+                        <svg
+                          class="spectrum-Icon spectrum-Table-autoIcon"
+                          focusable="false">
+                          <use xlink:href="#spectrum-icon-18-MagicWand" />
+                        </svg>
+                      {/if}
+                      {#if sortColumn === field}
+                        <svg
+                          class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
+                          focusable="false"
+                          aria-hidden="true">
+                          <use xlink:href="#spectrum-css-icon-Arrow100" />
+                        </svg>
+                      {/if}
+                      {#if allowEditColumns && schema[field]?.editable !== false}
+                        <svg
+                          class="spectrum-Icon spectrum-Table-editIcon"
+                          focusable="false"
+                          on:click={e => editColumn(e, field)}>
+                          <use xlink:href="#spectrum-icon-18-Edit" />
+                        </svg>
+                      {/if}
+                    </div>
+                  </th>
+                {/each}
               </tr>
-            {/each}
-          {:else}
-            <div class="placeholder">
-              <svg
-                class="spectrum-Icon spectrum-Icon--sizeXXL"
-                focusable="false">
-                <use xlink:href="#spectrum-icon-18-Table" />
-              </svg>
-              <div>No rows found</div>
-            </div>
+            </thead>
           {/if}
-        </tbody>
-      </table>
+          <tbody class="spectrum-Table-body">
+            {#if sortedRows?.length}
+              {#each sortedRows as row, idx}
+                <tr
+                  on:click={() => toggleSelectRow(row)}
+                  class="spectrum-Table-row"
+                  class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}>
+                  {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
+                    {#if showEditColumn}
+                      <td
+                        class="spectrum-Table-cell spectrum-Table-cell--divider">
+                        <div class="spectrum-Table-cell-content">
+                          <SelectEditRenderer
+                            data={row}
+                            selected={selectedRows.includes(row)}
+                            onToggleSelection={() => toggleSelectRow(row)}
+                            onEdit={e => editRow(e, row)}
+                            {allowSelectRows}
+                            {allowEditRows} />
+                        </div>
+                      </td>
+                    {/if}
+                    {#each fields as field}
+                      <td class="spectrum-Table-cell">
+                        <div class="spectrum-Table-cell-content">
+                          <CellRenderer
+                            {customRenderers}
+                            {row}
+                            schema={schema[field]}
+                            value={row[field]}
+                            on:clickrelationship>
+                            <slot />
+                          </CellRenderer>
+                        </div>
+                      </td>
+                    {/each}
+                  {/if}
+                </tr>
+              {/each}
+            {:else}
+              <div class="placeholder">
+                <svg
+                  class="spectrum-Icon spectrum-Icon--sizeXXL"
+                  focusable="false">
+                  <use xlink:href="#spectrum-icon-18-Table" />
+                </svg>
+                <div>No rows found</div>
+              </div>
+            {/if}
+          </tbody>
+        </table>
+      </div>
     </div>
   {/if}
 </div>
 
 <style>
-  .loading,
-  .container,
-  th {
+  .wrapper {
     background-color: var(--spectrum-global-color-gray-100);
+    overflow: hidden;
   }
 
   .container {
+    height: 100%;
     position: relative;
     overflow: auto;
     border: 1px solid
@@ -358,6 +368,7 @@
     position: sticky;
     top: 0;
     z-index: 2;
+    background-color: var(--spectrum-global-color-gray-100);
   }
   .spectrum-Table-headCell-content {
     white-space: nowrap;

From b612c32ce539985e3e16186a859969fbceed1e8a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Apr 2021 15:10:49 +0100
Subject: [PATCH 23/25] Fix stale data overwriting new data when requests are
 slow

---
 .../src/components/backend/DataTable/DataTable.svelte | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index 8954b00f81..80b28d470b 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -29,9 +29,18 @@
   $: {
     if ($views.selected?.name?.startsWith("all_")) {
       loading = true
+      const loadingTableId = $tables.selected?._id
       api.fetchDataForView($views.selected).then(rows => {
-        data = rows || []
         loading = false
+
+        // If we started a slow request then quickly change table, sometimes
+        // the old data overwrites the new data.
+        // This check ensures that we don't do that.
+        if (loadingTableId !== $tables.selected?._id) {
+          return
+        }
+
+        data = rows || []
       })
     }
   }

From c602502e46a5ab8cb9f065e0931d458f32b836bc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Apr 2021 15:28:57 +0100
Subject: [PATCH 24/25] Add missing toast dependency

---
 packages/bbui/package.json | 1 +
 packages/bbui/yarn.lock    | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index c818c61f0c..22fa3029e7 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -54,6 +54,7 @@
     "@spectrum-css/modal": "^3.0.1",
     "@spectrum-css/popover": "^3.0.1",
     "@spectrum-css/table": "^3.0.1",
+    "@spectrum-css/toast": "^3.0.1",
     "@spectrum-css/underlay": "^2.0.9",
     "@spectrum-css/vars": "^3.0.1",
     "dayjs": "^1.10.4",
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index 8564ce3921..e7a01ed311 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -465,6 +465,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.1.tgz#753e0e2498082c0c36b9600828516aff3ac338cd"
   integrity sha512-XQ+srMTv9hK1H0nctWUtqyzitmvyb5TNR+7mjAmKRdkBRSTQQSipDhenxZp72ekzMtMoSYZVZ77kgo0Iw3Fpug==
 
+"@spectrum-css/toast@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"
+  integrity sha512-jov++S358BrN2tmMfaoYk1N6u9HojgeuQk61keXrK2m3VE5/n94x7Lg3kIPeSWO0odyDfBlMqT9jacbRey3QTg==
+
 "@spectrum-css/underlay@^2.0.9":
   version "2.0.9"
   resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-2.0.9.tgz#fc10f971d1325cc844b727e6260f7217844060e8"

From 9180312bab8f4c08944056a1354ca44d5a191d89 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 13 Apr 2021 15:31:38 +0100
Subject: [PATCH 25/25] Fix z-index on table header

---
 packages/bbui/src/Table/Table.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index a9bb50fd9d..8bb4451e9d 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -303,6 +303,8 @@
   .wrapper {
     background-color: var(--spectrum-global-color-gray-100);
     overflow: hidden;
+    position: relative;
+    z-index: 1;
   }
 
   .container {