@budibase/frontend-core 2.8.21 → 2.8.22-alpha.1

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.8.21",
+  "version": "2.8.22-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.21",
-    "@budibase/shared-core": "2.8.21",
+    "@budibase/bbui": "2.8.22-alpha.1",
+    "@budibase/shared-core": "2.8.22-alpha.1",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
     "socket.io-client": "^4.6.1",
     "svelte": "^3.46.2"
   },
-  "gitHead": "26c531ec81a0bdfb5805f2c8a85d6bbcc5ac7d81"
+  "gitHead": "efcef8d6f8ce0744d1f80f8161a41f55ef6c8ea4"
 }

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/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
@@ -143,7 +144,7 @@
           <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

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import GridScrollWrapper from "./GridScrollWrapper.svelte"
   import HeaderCell from "../cells/HeaderCell.svelte"
-  import { Icon } from "@budibase/bbui"
+  import { Icon, TempTooltip, TooltipType } from "@budibase/bbui"
 
   const {
     renderedColumns,
@@ -11,10 +11,13 @@
     hiddenColumnsWidth,
     width,
     config,
+    hasNonAutoColumn,
+    tableId,
+    loading,
   } = getContext("grid")
 
   $: columnsWidth = $renderedColumns.reduce(
-    (total, col) => (total += col.width),
+    (total, col) => total + col.width,
     0
   )
   $: end = $hiddenColumnsWidth + columnsWidth - 1 - $scroll.left
@@ -30,13 +33,21 @@
     </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}
+      >
+        <div
+          class="add"
+          style="left:{left}px;"
+          on:click={() => dispatch("add-column")}
+        >
+          <Icon name="Add" />
+        </div>
+      </TempTooltip>
+    {/key}
   {/if}
 </div>
 

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,
@@ -93,7 +92,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>