@budibase/frontend-core 2.8.31 → 2.8.32-alpha.1

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.8.31",
+  "version": "2.8.32-alpha.1",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "2.8.31",
-    "@budibase/shared-core": "2.8.31",
+    "@budibase/bbui": "2.8.32-alpha.1",
+    "@budibase/shared-core": "2.8.32-alpha.1",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
     "socket.io-client": "^4.6.1",
     "svelte": "^3.46.2"
   },
-  "gitHead": "4613b17c1e76328bf279998c821a17195fbaab37"
+  "gitHead": "4c316b05e31e14d417e69fbd143978e45eeba972"
 }

package/src/api/app.js

@@ -123,6 +123,15 @@ export const buildAppEndpoints = API => ({
     })
   },
 
+  /**
+   * Gets budibase platform debug information.
+   */
+  fetchSystemDebugInfo: async () => {
+    return await API.get({
+      url: `/api/debug/diagnostics`,
+    })
+  },
+
   /**
    * Syncs an app with the production database.
    * @param appId the ID of the app to sync

package/src/api/index.js

@@ -30,6 +30,7 @@ import { buildBackupsEndpoints } from "./backups"
 import { buildEnvironmentVariableEndpoints } from "./environmentVariables"
 import { buildEventEndpoints } from "./events"
 import { buildAuditLogsEndpoints } from "./auditLogs"
+import { buildLogsEndpoints } from "./logs"
 
 /**
  * Random identifier to uniquely identify a session in a tab. This is
@@ -277,5 +278,6 @@ export const createAPIClient = config => {
     ...buildEnvironmentVariableEndpoints(API),
     ...buildEventEndpoints(API),
     ...buildAuditLogsEndpoints(API),
+    ...buildLogsEndpoints(API),
   }
 }

package/src/api/logs.js

@@ -0,0 +1,14 @@
+export const buildLogsEndpoints = API => ({
+  /**
+   * Gets a stream for the system logs.
+   */
+  getSystemLogs: async () => {
+    return await API.get({
+      url: "/api/system/logs",
+      json: false,
+      parseResponse: async response => {
+        return response
+      },
+    })
+  },
+})

package/src/components/UserAvatar.svelte

@@ -1,58 +1,23 @@
 <script>
-  import { Avatar, Tooltip } from "@budibase/bbui"
+  import { Avatar, AbsTooltip, TooltipPosition } from "@budibase/bbui"
   import { helpers } from "@budibase/shared-core"
 
   export let user
-  export let size
-  export let tooltipDirection = "top"
+  export let size = "S"
+  export let tooltipPosition = TooltipPosition.Top
   export let showTooltip = true
-
-  $: tooltipStyle = getTooltipStyle(tooltipDirection)
-
-  const getTooltipStyle = direction => {
-    if (!direction) {
-      return ""
-    }
-    if (direction === "top") {
-      return "transform: translateX(-50%) translateY(-100%);"
-    } else if (direction === "bottom") {
-      return "transform: translateX(-50%) translateY(100%);"
-    }
-  }
 </script>
 
 {#if user}
-  <div class="user-avatar">
+  <AbsTooltip
+    text={showTooltip ? helpers.getUserLabel(user) : null}
+    position={tooltipPosition}
+    color={helpers.getUserColor(user)}
+  >
     <Avatar
       {size}
       initials={helpers.getUserInitials(user)}
       color={helpers.getUserColor(user)}
     />
-    {#if showTooltip}
-      <div class="tooltip" style={tooltipStyle}>
-        <Tooltip
-          direction={tooltipDirection}
-          textWrapping
-          text={user.email}
-          size="S"
-        />
-      </div>
-    {/if}
-  </div>
+  </AbsTooltip>
 {/if}
-
-<style>
-  .user-avatar {
-    position: relative;
-  }
-  .tooltip {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 50%;
-    white-space: nowrap;
-  }
-  .user-avatar:hover .tooltip {
-    display: block;
-  }
-</style>

package/src/components/UserAvatars.svelte

@@ -0,0 +1,67 @@
+<script>
+  import { UserAvatar } from "@budibase/frontend-core"
+  import { TooltipPosition, Avatar } from "@budibase/bbui"
+
+  export let users = []
+  export let order = "ltr"
+  export let size = "S"
+  export let tooltipPosition = TooltipPosition.Top
+
+  $: uniqueUsers = unique(users, order)
+  $: avatars = getAvatars(uniqueUsers, order)
+
+  const unique = users => {
+    let uniqueUsers = {}
+    users?.forEach(user => {
+      uniqueUsers[user.email] = user
+    })
+    return Object.values(uniqueUsers)
+  }
+
+  const getAvatars = (users, order) => {
+    const avatars = users.slice(0, 3)
+    if (users.length > 3) {
+      const overflow = {
+        _id: "overflow",
+        label: `+${users.length - 3}`,
+      }
+      if (order === "ltr") {
+        avatars.push(overflow)
+      } else {
+        avatars.unshift(overflow)
+      }
+    }
+    return avatars.map((user, idx) => ({
+      ...user,
+      zIndex: order === "ltr" ? idx : uniqueUsers.length - idx,
+    }))
+  }
+</script>
+
+<div class="avatars">
+  {#each avatars as user}
+    <span style="z-index:{user.zIndex};">
+      {#if user._id === "overflow"}
+        <Avatar
+          {size}
+          initials={user.label}
+          color="var(--spectrum-global-color-gray-500)"
+        />
+      {:else}
+        <UserAvatar {size} {user} {tooltipPosition} />
+      {/if}
+    </span>
+  {/each}
+</div>
+
+<style>
+  .avatars {
+    display: flex;
+  }
+  span:not(:first-of-type) {
+    margin-left: -6px;
+  }
+  .avatars :global(.spectrum-Avatar) {
+    border: 2px solid var(--avatars-background, var(--background));
+  }
+</style>

package/src/components/grid/cells/HeaderCell.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { getContext } from "svelte"
+  import { getContext, onMount, tick } from "svelte"
   import GridCell from "./GridCell.svelte"
-  import { Icon, Popover, Menu, MenuItem } from "@budibase/bbui"
+  import { Icon, Popover, Menu, MenuItem, clickOutside } from "@budibase/bbui"
   import { getColumnIcon } from "../lib/utils"
 
   export let column
@@ -16,6 +16,7 @@
     sort,
     renderedColumns,
     dispatch,
+    subscribe,
     config,
     ui,
     columns,
@@ -26,13 +27,14 @@
     "array",
     "attachment",
     "boolean",
-    "formula",
     "json",
   ]
 
   let anchor
   let open = false
+  let editIsOpen = false
   let timeout
+  let popover
 
   $: sortedBy = column.name === $sort.column
   $: canMoveLeft = orderable && idx > 0
@@ -44,11 +46,16 @@
     ? "high-low"
     : "Z-A"
 
-  const editColumn = () => {
+  const editColumn = async () => {
+    editIsOpen = true
+    await tick()
     dispatch("edit-column", column.schema)
-    open = false
   }
 
+  const cancelEdit = () => {
+    popover.hide()
+    editIsOpen = false
+  }
   const onMouseDown = e => {
     if (e.button === 0 && orderable) {
       timeout = setTimeout(() => {
@@ -109,6 +116,7 @@
     columns.actions.saveChanges()
     open = false
   }
+  onMount(() => subscribe("close-edit-column", cancelEdit))
 </script>
 
 <div
@@ -157,57 +165,74 @@
 
 <Popover
   bind:open
+  bind:this={popover}
   {anchor}
   align="right"
   offset={0}
   popoverTarget={document.getElementById(`grid-${rand}`)}
   animate={false}
+  customZindex={100}
 >
-  <Menu>
-    <MenuItem
-      icon="Edit"
-      on:click={editColumn}
-      disabled={!$config.allowSchemaChanges || column.schema.disabled}
-    >
-      Edit column
-    </MenuItem>
-    <MenuItem
-      icon="Label"
-      on:click={makeDisplayColumn}
-      disabled={idx === "sticky" ||
-        !$config.allowSchemaChanges ||
-        bannedDisplayColumnTypes.includes(column.schema.type)}
-    >
-      Use as display column
-    </MenuItem>
-    <MenuItem
-      icon="SortOrderUp"
-      on:click={sortAscending}
-      disabled={column.name === $sort.column && $sort.order === "ascending"}
-    >
-      Sort {ascendingLabel}
-    </MenuItem>
-    <MenuItem
-      icon="SortOrderDown"
-      on:click={sortDescending}
-      disabled={column.name === $sort.column && $sort.order === "descending"}
+  {#if editIsOpen}
+    <div
+      use:clickOutside={() => {
+        editIsOpen = false
+      }}
+      class="content"
     >
-      Sort {descendingLabel}
-    </MenuItem>
-    <MenuItem disabled={!canMoveLeft} icon="ChevronLeft" on:click={moveLeft}>
-      Move left
-    </MenuItem>
-    <MenuItem disabled={!canMoveRight} icon="ChevronRight" on:click={moveRight}>
-      Move right
-    </MenuItem>
-    <MenuItem
-      disabled={idx === "sticky" || !$config.showControls}
-      icon="VisibilityOff"
-      on:click={hideColumn}
-    >
-      Hide column
-    </MenuItem>
-  </Menu>
+      <slot />
+    </div>
+  {:else}
+    <Menu>
+      <MenuItem
+        icon="Edit"
+        on:click={editColumn}
+        disabled={!$config.allowSchemaChanges || column.schema.disabled}
+      >
+        Edit column
+      </MenuItem>
+      <MenuItem
+        icon="Label"
+        on:click={makeDisplayColumn}
+        disabled={idx === "sticky" ||
+          !$config.allowSchemaChanges ||
+          bannedDisplayColumnTypes.includes(column.schema.type)}
+      >
+        Use as display column
+      </MenuItem>
+      <MenuItem
+        icon="SortOrderUp"
+        on:click={sortAscending}
+        disabled={column.name === $sort.column && $sort.order === "ascending"}
+      >
+        Sort {ascendingLabel}
+      </MenuItem>
+      <MenuItem
+        icon="SortOrderDown"
+        on:click={sortDescending}
+        disabled={column.name === $sort.column && $sort.order === "descending"}
+      >
+        Sort {descendingLabel}
+      </MenuItem>
+      <MenuItem disabled={!canMoveLeft} icon="ChevronLeft" on:click={moveLeft}>
+        Move left
+      </MenuItem>
+      <MenuItem
+        disabled={!canMoveRight}
+        icon="ChevronRight"
+        on:click={moveRight}
+      >
+        Move right
+      </MenuItem>
+      <MenuItem
+        disabled={idx === "sticky" || !$config.showControls}
+        icon="VisibilityOff"
+        on:click={hideColumn}
+      >
+        Hide column
+      </MenuItem>
+    </Menu>
+  {/if}
 </Popover>
 
 <style>
@@ -255,4 +280,13 @@
   .header-cell:hover .sort-indicator {
     display: none;
   }
+
+  .content {
+    width: 300px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    background: var(--spectrum-alias-background-color-secondary);
+  }
 </style>

package/src/components/grid/cells/OptionsCell.svelte

@@ -18,6 +18,7 @@
   let focusedOptionIdx = null
 
   $: options = schema?.constraints?.inclusion || []
+  $: optionColors = schema?.optionColors || {}
   $: editable = focused && !readonly
   $: values = Array.isArray(value) ? value : [value].filter(x => x != null)
   $: {
@@ -93,7 +94,7 @@
     on:click={editable ? open : null}
   >
     {#each values as val}
-      {@const color = getOptionColor(val)}
+      {@const color = optionColors[val] || getOptionColor(val)}
       {#if color}
         <div class="badge text" style="--color: {color}">
           <span>
@@ -121,7 +122,7 @@
       use:clickOutside={close}
     >
       {#each options as option, idx}
-        {@const color = getOptionColor(option)}
+        {@const color = optionColors[option] || getOptionColor(option)}
         <div
           class="option"
           on:click={() => toggleOption(option)}

package/src/components/grid/cells/RelationshipCell.svelte

@@ -258,7 +258,7 @@
       class:wrap={editable || contentLines > 1}
       on:wheel={e => (focused ? e.stopPropagation() : null)}
     >
-      {#each value || [] as relationship, idx}
+      {#each value || [] as relationship}
         {#if relationship.primaryDisplay}
           <div class="badge">
             <span

package/src/components/grid/layout/Grid.svelte

@@ -71,6 +71,7 @@
     contentLines,
     gridFocused,
     error,
+    canAddRows,
   } = context
 
   // Keep config store up to date with props
@@ -138,12 +139,23 @@
   {#if $loaded}
     <div class="grid-data-outer" use:clickOutside={ui.actions.blur}>
       <div class="grid-data-inner">
-        <StickyColumn />
+        <StickyColumn>
+          <svelte:fragment slot="edit-column">
+            <slot name="edit-column" />
+          </svelte:fragment>
+        </StickyColumn>
         <div class="grid-data-content">
-          <HeaderRow />
+          <HeaderRow>
+            <svelte:fragment slot="add-column">
+              <slot name="add-column" />
+            </svelte:fragment>
+            <svelte:fragment slot="edit-column">
+              <slot name="edit-column" />
+            </svelte:fragment>
+          </HeaderRow>
           <GridBody />
         </div>
-        {#if allowAddRows}
+        {#if $canAddRows}
           <NewRow />
         {/if}
         <div class="overlays">

package/src/components/grid/layout/GridBody.svelte

@@ -9,7 +9,7 @@
     renderedRows,
     renderedColumns,
     rowVerticalInversionIndex,
-    config,
+    canAddRows,
     hoveredRowId,
     dispatch,
     isDragging,
@@ -43,7 +43,7 @@
         invertY={idx >= $rowVerticalInversionIndex}
       />
     {/each}
-    {#if $config.allowAddRows && $renderedColumns.length}
+    {#if $canAddRows}
       <div
         class="blank"
         class:highlighted={$hoveredRowId === BlankRowID}

package/src/components/grid/layout/HeaderRow.svelte

@@ -1,42 +1,37 @@
 <script>
+  import NewColumnButton from "./NewColumnButton.svelte"
+
   import { getContext } from "svelte"
   import GridScrollWrapper from "./GridScrollWrapper.svelte"
   import HeaderCell from "../cells/HeaderCell.svelte"
-  import { Icon } from "@budibase/bbui"
-
-  const {
-    renderedColumns,
-    dispatch,
-    scroll,
-    hiddenColumnsWidth,
-    width,
-    config,
-  } = getContext("grid")
+  import { TempTooltip, TooltipType } from "@budibase/bbui"
 
-  $: columnsWidth = $renderedColumns.reduce(
-    (total, col) => (total += col.width),
-    0
-  )
-  $: end = $hiddenColumnsWidth + columnsWidth - 1 - $scroll.left
-  $: left = Math.min($width - 40, end)
+  const { renderedColumns, config, hasNonAutoColumn, tableId, loading } =
+    getContext("grid")
 </script>
 
 <div class="header">
   <GridScrollWrapper scrollHorizontally>
     <div class="row">
       {#each $renderedColumns as column, idx}
-        <HeaderCell {column} {idx} />
+        <HeaderCell {column} {idx}>
+          <slot name="edit-column" />
+        </HeaderCell>
       {/each}
     </div>
   </GridScrollWrapper>
   {#if $config.allowSchemaChanges}
-    <div
-      class="add"
-      style="left:{left}px"
-      on:click={() => dispatch("add-column")}
-    >
-      <Icon name="Add" />
-    </div>
+    {#key $tableId}
+      <TempTooltip
+        text="Click here to create your first column"
+        type={TooltipType.Info}
+        condition={!$hasNonAutoColumn && !$loading}
+      >
+        <NewColumnButton>
+          <slot name="add-column" />
+        </NewColumnButton>
+      </TempTooltip>
+    {/key}
   {/if}
 </div>
 
@@ -50,21 +45,4 @@
   .row {
     display: flex;
   }
-  .add {
-    height: var(--default-row-height);
-    display: grid;
-    place-items: center;
-    width: 40px;
-    position: absolute;
-    top: 0;
-    border-left: var(--cell-border);
-    border-right: var(--cell-border);
-    border-bottom: var(--cell-border);
-    background: var(--grid-background-alt);
-    z-index: 1;
-  }
-  .add:hover {
-    background: var(--spectrum-global-color-gray-200);
-    cursor: pointer;
-  }
 </style>

package/src/components/grid/layout/NewColumnButton.svelte

@@ -0,0 +1,79 @@
+<script>
+  import { getContext, onMount } from "svelte"
+  import { Icon, Popover, clickOutside } from "@budibase/bbui"
+
+  const { renderedColumns, scroll, hiddenColumnsWidth, width, subscribe } =
+    getContext("grid")
+
+  let anchor
+  let open = false
+  $: columnsWidth = $renderedColumns.reduce(
+    (total, col) => (total += col.width),
+    0
+  )
+  $: end = $hiddenColumnsWidth + columnsWidth - 1 - $scroll.left
+  $: left = Math.min($width - 40, end)
+
+  const close = () => {
+    open = false
+  }
+  onMount(() => subscribe("close-edit-column", close))
+</script>
+
+<div
+  id="add-column-button"
+  bind:this={anchor}
+  class="add"
+  style="left:{left}px"
+  on:click={() => (open = true)}
+>
+  <Icon name="Add" />
+</div>
+<Popover
+  bind:open
+  {anchor}
+  align="right"
+  offset={0}
+  popoverTarget={document.getElementById(`add-column-button`)}
+  animate={false}
+  customZindex={100}
+>
+  <div
+    use:clickOutside={() => {
+      open = false
+    }}
+    class="content"
+  >
+    <slot />
+  </div>
+</Popover>
+
+<style>
+  .add {
+    height: var(--default-row-height);
+    display: grid;
+    place-items: center;
+    width: 40px;
+    position: absolute;
+    top: 0;
+    border-left: var(--cell-border);
+    border-right: var(--cell-border);
+    border-bottom: var(--cell-border);
+    background: var(--grid-background-alt);
+    z-index: 1;
+  }
+  .add:hover {
+    background: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+
+  .content {
+    width: 300px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    z-index: 2;
+    background: var(--spectrum-alias-background-color-secondary);
+  }
+</style>

package/src/components/grid/layout/NewRow.svelte

@@ -1,6 +1,6 @@
 <script>
   import { getContext, onDestroy, onMount, tick } from "svelte"
-  import { Icon, Button } from "@budibase/bbui"
+  import { Icon, Button, TempTooltip, TooltipType } from "@budibase/bbui"
   import GridScrollWrapper from "./GridScrollWrapper.svelte"
   import DataCell from "../cells/DataCell.svelte"
   import { fade } from "svelte/transition"
@@ -27,7 +27,8 @@
     rowVerticalInversionIndex,
     columnHorizontalInversionIndex,
     selectedRows,
-    config,
+    loading,
+    canAddRows,
   } = getContext("grid")
 
   let visible = false
@@ -40,6 +41,7 @@
   $: $tableId, (visible = false)
   $: invertY = shouldInvertY(offset, $rowVerticalInversionIndex, $renderedRows)
   $: selectedRowCount = Object.values($selectedRows).length
+  $: hasNoRows = !$rows.length
 
   const shouldInvertY = (offset, inversionIndex, rows) => {
     if (offset === 0) {
@@ -147,16 +149,22 @@
 </script>
 
 <!-- New row FAB -->
-{#if !visible && !selectedRowCount && $config.allowAddRows && firstColumn}
-  <div
-    class="new-row-fab"
-    on:click={() => dispatch("add-row-inline")}
-    transition:fade|local={{ duration: 130 }}
-    class:offset={!$stickyColumn}
-  >
-    <Icon name="Add" size="S" />
-  </div>
-{/if}
+<TempTooltip
+  text="Click here to create your first row"
+  condition={hasNoRows && !$loading}
+  type={TooltipType.Info}
+>
+  {#if !visible && !selectedRowCount && $canAddRows}
+    <div
+      class="new-row-fab"
+      on:click={() => dispatch("add-row-inline")}
+      transition:fade|local={{ duration: 130 }}
+      class:offset={!$stickyColumn}
+    >
+      <Icon name="Add" size="S" />
+    </div>
+  {/if}
+</TempTooltip>
 
 <!-- Only show new row functionality if we have any columns -->
 {#if visible}

package/src/components/grid/layout/StickyColumn.svelte

@@ -13,11 +13,10 @@
     rows,
     selectedRows,
     stickyColumn,
-    renderedColumns,
     renderedRows,
     focusedCellId,
     hoveredRowId,
-    config,
+    canAddRows,
     selectedCellMap,
     focusedRow,
     scrollLeft,
@@ -58,7 +57,9 @@
       disabled={!$renderedRows.length}
     />
     {#if $stickyColumn}
-      <HeaderCell column={$stickyColumn} orderable={false} idx="sticky" />
+      <HeaderCell column={$stickyColumn} orderable={false} idx="sticky">
+        <slot name="edit-column" />
+      </HeaderCell>
     {/if}
   </div>
 
@@ -93,7 +94,7 @@
           {/if}
         </div>
       {/each}
-      {#if $config.allowAddRows && ($renderedColumns.length || $stickyColumn)}
+      {#if $canAddRows}
         <div
           class="row new"
           on:mouseenter={$isDragging

package/src/components/grid/overlays/KeyboardManager.svelte

@@ -16,6 +16,7 @@
     config,
     menu,
     gridFocused,
+    canAddRows,
   } = getContext("grid")
 
   const ignoredOriginSelectors = [
@@ -45,7 +46,7 @@
         e.preventDefault()
         focusFirstCell()
       } else if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
-        if ($config.allowAddRows) {
+        if ($canAddRows) {
           e.preventDefault()
           dispatch("add-row-inline")
         }
@@ -99,7 +100,7 @@
           }
           break
         case "Enter":
-          if ($config.allowAddRows) {
+          if ($canAddRows) {
             dispatch("add-row-inline")
           }
       }

package/src/components/grid/overlays/MenuOverlay.svelte

@@ -17,6 +17,7 @@
     focusedCellAPI,
     focusedRowId,
     notifications,
+    canAddRows,
   } = getContext("grid")
 
   $: style = makeStyle($menu)
@@ -93,7 +94,7 @@
       </MenuItem>
       <MenuItem
         icon="Duplicate"
-        disabled={isNewRow || !$config.allowAddRows}
+        disabled={isNewRow || !$canAddRows}
         on:click={duplicate}
       >
         Duplicate row

package/src/components/grid/overlays/ResizeOverlay.svelte

@@ -2,16 +2,9 @@
   import { getContext } from "svelte"
   import { GutterWidth } from "../lib/constants"
 
-  const {
-    columns,
-    resize,
-    renderedColumns,
-    stickyColumn,
-    isReordering,
-    scrollLeft,
-  } = getContext("grid")
+  const { resize, renderedColumns, stickyColumn, isReordering, scrollLeft } =
+    getContext("grid")
 
-  $: cutoff = $scrollLeft + GutterWidth + ($columns[0]?.width || 0)
   $: offset = GutterWidth + ($stickyColumn?.width || 0)
   $: activeColumn = $resize.column
 

package/src/components/grid/stores/columns.js

@@ -83,6 +83,21 @@ export const deriveStores = context => {
     await saveChanges()
   }
 
+  // Derive if we have any normal columns
+  const hasNonAutoColumn = derived(
+    [columns, stickyColumn],
+    ([$columns, $stickyColumn]) => {
+      let allCols = $columns || []
+      if ($stickyColumn) {
+        allCols = [...allCols, $stickyColumn]
+      }
+      const normalCols = allCols.filter(column => {
+        return !column.schema?.autocolumn
+      })
+      return normalCols.length > 0
+    }
+  )
+
   // Persists column changes by saving metadata against table schema
   const saveChanges = async () => {
     const $columns = get(columns)
@@ -128,6 +143,7 @@ export const deriveStores = context => {
   }
 
   return {
+    hasNonAutoColumn,
     columns: {
       ...columns,
       actions: {

package/src/components/grid/stores/ui.js

@@ -70,6 +70,8 @@ export const deriveStores = context => {
     rowHeight,
     stickyColumn,
     width,
+    hasNonAutoColumn,
+    config,
   } = context
 
   // Derive the row that contains the selected cell
@@ -112,7 +114,16 @@ export const deriveStores = context => {
     return ($stickyColumn?.width || 0) + $width + GutterWidth < 1100
   })
 
+  // Derive if we're able to add rows
+  const canAddRows = derived(
+    [config, hasNonAutoColumn],
+    ([$config, $hasNonAutoColumn]) => {
+      return $config.allowAddRows && $hasNonAutoColumn
+    }
+  )
+
   return {
+    canAddRows,
     focusedRow,
     contentLines,
     compact,

package/src/components/grid/stores/users.js

@@ -30,8 +30,9 @@ export const deriveStores = context => {
     ([$users, $focusedCellId]) => {
       let map = {}
       $users.forEach(user => {
-        if (user.focusedCellId && user.focusedCellId !== $focusedCellId) {
-          map[user.focusedCellId] = user
+        const cellId = user.gridMetadata?.focusedCellId
+        if (cellId && cellId !== $focusedCellId) {
+          map[cellId] = user
         }
       })
       return map

package/src/components/index.js

@@ -2,4 +2,5 @@ export { default as SplitPage } from "./SplitPage.svelte"
 export { default as TestimonialPage } from "./TestimonialPage.svelte"
 export { default as Testimonial } from "./Testimonial.svelte"
 export { default as UserAvatar } from "./UserAvatar.svelte"
+export { default as UserAvatars } from "./UserAvatars.svelte"
 export { Grid } from "./grid"

package/src/utils/download.js

@@ -11,3 +11,26 @@ export function downloadText(filename, text) {
 
   URL.revokeObjectURL(url)
 }
+
+export async function downloadStream(streamResponse) {
+  const blob = await streamResponse.blob()
+
+  const contentDisposition = streamResponse.headers.get("Content-Disposition")
+
+  const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(
+    contentDisposition
+  )
+
+  const filename = matches[1].replace(/['"]/g, "")
+
+  const resBlob = new Blob([blob])
+
+  const blobUrl = URL.createObjectURL(resBlob)
+
+  const link = document.createElement("a")
+  link.href = blobUrl
+  link.download = filename
+  link.click()
+
+  URL.revokeObjectURL(blobUrl)
+}

package/src/utils/index.js

@@ -5,4 +5,4 @@ export * as RoleUtils from "./roles"
 export * as Utils from "./utils"
 export { memo, derivedMemo } from "./memo"
 export { createWebsocket } from "./websocket"
-export { downloadText } from "./download"
+export * from "./download"

package/src/components/grid/controls/AddColumnButton.svelte

@@ -1,16 +0,0 @@
-<script>
-  import { ActionButton } from "@budibase/bbui"
-  import { getContext } from "svelte"
-
-  const { config, dispatch } = getContext("grid")
-</script>
-
-<ActionButton
-  icon="TableColumnAddRight"
-  quiet
-  size="M"
-  on:click={() => dispatch("add-column")}
-  disabled={!$config.allowSchemaChanges}
->
-  Add column
-</ActionButton>

package/src/components/grid/controls/AddRowButton.svelte

@@ -1,18 +0,0 @@
-<script>
-  import { ActionButton } from "@budibase/bbui"
-  import { getContext } from "svelte"
-
-  const { dispatch, columns, stickyColumn, config, loaded } = getContext("grid")
-</script>
-
-<ActionButton
-  icon="TableRowAddBottom"
-  quiet
-  size="M"
-  on:click={() => dispatch("add-row-inline")}
-  disabled={!loaded ||
-    !$config.allowAddRows ||
-    (!$columns.length && !$stickyColumn)}
->
-  Add row
-</ActionButton>