@budibase/frontend-core 2.8.29-alpha.5 → 2.8.30

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.8.29-alpha.5",
+  "version": "2.8.30",
   "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.29-alpha.5",
-    "@budibase/shared-core": "2.8.29-alpha.5",
+    "@budibase/bbui": "2.8.30",
+    "@budibase/shared-core": "2.8.30",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
     "socket.io-client": "^4.6.1",
     "svelte": "^3.46.2"
   },
-  "gitHead": "51a46a236606dfc158218904951ff776994d9e5b"
+  "gitHead": "0bb17a32b1120c5b2526983870dbec4ee8cd6086"
 }

package/src/api/app.js

@@ -123,15 +123,6 @@ 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,7 +30,6 @@ 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
@@ -278,6 +277,5 @@ export const createAPIClient = config => {
     ...buildEnvironmentVariableEndpoints(API),
     ...buildEventEndpoints(API),
     ...buildAuditLogsEndpoints(API),
-    ...buildLogsEndpoints(API),
   }
 }

package/src/components/UserAvatar.svelte

@@ -1,23 +1,58 @@
 <script>
-  import { Avatar, AbsTooltip, TooltipPosition } from "@budibase/bbui"
+  import { Avatar, Tooltip } from "@budibase/bbui"
   import { helpers } from "@budibase/shared-core"
 
   export let user
-  export let size = "S"
-  export let tooltipPosition = TooltipPosition.Top
+  export let size
+  export let tooltipDirection = "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}
-  <AbsTooltip
-    text={showTooltip ? helpers.getUserLabel(user) : null}
-    position={tooltipPosition}
-    color={helpers.getUserColor(user)}
-  >
+  <div class="user-avatar">
     <Avatar
       {size}
       initials={helpers.getUserInitials(user)}
       color={helpers.getUserColor(user)}
     />
-  </AbsTooltip>
+    {#if showTooltip}
+      <div class="tooltip" style={tooltipStyle}>
+        <Tooltip
+          direction={tooltipDirection}
+          textWrapping
+          text={user.email}
+          size="S"
+        />
+      </div>
+    {/if}
+  </div>
 {/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/grid/cells/RelationshipCell.svelte

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

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

@@ -0,0 +1,16 @@
+<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

@@ -0,0 +1,18 @@
+<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>

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

@@ -71,7 +71,6 @@
     contentLines,
     gridFocused,
     error,
-    canAddRows,
   } = context
 
   // Keep config store up to date with props
@@ -144,7 +143,7 @@
           <HeaderRow />
           <GridBody />
         </div>
-        {#if $canAddRows}
+        {#if allowAddRows}
           <NewRow />
         {/if}
         <div class="overlays">

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

@@ -9,7 +9,7 @@
     renderedRows,
     renderedColumns,
     rowVerticalInversionIndex,
-    canAddRows,
+    config,
     hoveredRowId,
     dispatch,
     isDragging,
@@ -43,7 +43,7 @@
         invertY={idx >= $rowVerticalInversionIndex}
       />
     {/each}
-    {#if $canAddRows}
+    {#if $config.allowAddRows && $renderedColumns.length}
       <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, TempTooltip, TooltipType } from "@budibase/bbui"
+  import { Icon } from "@budibase/bbui"
 
   const {
     renderedColumns,
@@ -11,13 +11,10 @@
     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
@@ -33,21 +30,13 @@
     </div>
   </GridScrollWrapper>
   {#if $config.allowSchemaChanges}
-    {#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}
+    <div
+      class="add"
+      style="left:{left}px"
+      on:click={() => dispatch("add-column")}
+    >
+      <Icon name="Add" />
+    </div>
   {/if}
 </div>
 

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

@@ -1,6 +1,6 @@
 <script>
   import { getContext, onDestroy, onMount, tick } from "svelte"
-  import { Icon, Button, TempTooltip, TooltipType } from "@budibase/bbui"
+  import { Icon, Button } from "@budibase/bbui"
   import GridScrollWrapper from "./GridScrollWrapper.svelte"
   import DataCell from "../cells/DataCell.svelte"
   import { fade } from "svelte/transition"
@@ -27,8 +27,7 @@
     rowVerticalInversionIndex,
     columnHorizontalInversionIndex,
     selectedRows,
-    loading,
-    canAddRows,
+    config,
   } = getContext("grid")
 
   let visible = false
@@ -41,7 +40,6 @@
   $: $tableId, (visible = false)
   $: invertY = shouldInvertY(offset, $rowVerticalInversionIndex, $renderedRows)
   $: selectedRowCount = Object.values($selectedRows).length
-  $: hasNoRows = !$rows.length
 
   const shouldInvertY = (offset, inversionIndex, rows) => {
     if (offset === 0) {
@@ -149,22 +147,16 @@
 </script>
 
 <!-- New row FAB -->
-<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>
+{#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}
 
 <!-- Only show new row functionality if we have any columns -->
 {#if visible}

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

@@ -13,10 +13,11 @@
     rows,
     selectedRows,
     stickyColumn,
+    renderedColumns,
     renderedRows,
     focusedCellId,
     hoveredRowId,
-    canAddRows,
+    config,
     selectedCellMap,
     focusedRow,
     scrollLeft,
@@ -92,7 +93,7 @@
           {/if}
         </div>
       {/each}
-      {#if $canAddRows}
+      {#if $config.allowAddRows && ($renderedColumns.length || $stickyColumn)}
         <div
           class="row new"
           on:mouseenter={$isDragging

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

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

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

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

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

@@ -2,9 +2,16 @@
   import { getContext } from "svelte"
   import { GutterWidth } from "../lib/constants"
 
-  const { resize, renderedColumns, stickyColumn, isReordering, scrollLeft } =
-    getContext("grid")
+  const {
+    columns,
+    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,21 +83,6 @@ 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)
@@ -143,7 +128,6 @@ export const deriveStores = context => {
   }
 
   return {
-    hasNonAutoColumn,
     columns: {
       ...columns,
       actions: {

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

@@ -70,8 +70,6 @@ export const deriveStores = context => {
     rowHeight,
     stickyColumn,
     width,
-    hasNonAutoColumn,
-    config,
   } = context
 
   // Derive the row that contains the selected cell
@@ -114,16 +112,7 @@ 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,9 +30,8 @@ export const deriveStores = context => {
     ([$users, $focusedCellId]) => {
       let map = {}
       $users.forEach(user => {
-        const cellId = user.gridMetadata?.focusedCellId
-        if (cellId && cellId !== $focusedCellId) {
-          map[cellId] = user
+        if (user.focusedCellId && user.focusedCellId !== $focusedCellId) {
+          map[user.focusedCellId] = user
         }
       })
       return map

package/src/components/index.js

@@ -2,5 +2,4 @@ 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,26 +11,3 @@ 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 * from "./download"
+export { downloadText } from "./download"

package/src/api/logs.js

@@ -1,14 +0,0 @@
-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/UserAvatars.svelte

@@ -1,67 +0,0 @@
-<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>