@budibase/frontend-core 2.6.19-alpha.26 → 2.6.19-alpha.28

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.6.19-alpha.26",
+  "version": "2.6.19-alpha.28",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "2.6.19-alpha.26",
-    "@budibase/shared-core": "2.6.19-alpha.26",
+    "@budibase/bbui": "2.6.19-alpha.28",
+    "@budibase/shared-core": "2.6.19-alpha.28",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
     "socket.io-client": "^4.6.1",
     "svelte": "^3.46.2"
   },
-  "gitHead": "dbeebc571d598a9a6696dbc15e9b1e38e66a80a3"
+  "gitHead": "11c9bcc5f5b0a6c900474ab3f90371767132bd35"
 }

package/src/components/UserAvatar.svelte

@@ -0,0 +1,58 @@
+<script>
+  import { Avatar, Tooltip } from "@budibase/bbui"
+  import { helpers } from "@budibase/shared-core"
+
+  export let user
+  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}
+  <div class="user-avatar">
+    <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>
+{/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/GridCell.svelte

@@ -16,7 +16,7 @@
   const getStyle = (width, selectedUser) => {
     let style = `flex: 0 0 ${width}px;`
     if (selectedUser) {
-      style += `--cell-color:${selectedUser.color};`
+      style += `--user-color:${selectedUser.color};`
     }
     return style
   }
@@ -99,14 +99,15 @@
   }
 
   /* Cell border for cells with labels */
-  .cell.error:after,
-  .cell.selected-other:not(.focused):after {
+  .cell.error:after {
     border-radius: 0 2px 2px 2px;
   }
-  .cell.top.error:after,
-  .cell.top.selected-other:not(.focused):after {
+  .cell.top.error:after {
     border-radius: 2px 2px 2px 0;
   }
+  .cell.selected-other:not(.focused):after {
+    border-radius: 2px;
+  }
 
   /* Cell z-index */
   .cell.error,
@@ -116,21 +117,30 @@
   .cell.focused {
     z-index: 2;
   }
+  .cell.selected-other:hover {
+    z-index: 2;
+  }
+  .cell:not(.focused) {
+    user-select: none;
+  }
+  .cell:hover {
+    cursor: default;
+  }
+
+  /* Cell color overrides */
+  .cell.selected-other {
+    --cell-color: var(--user-color);
+  }
   .cell.focused {
     --cell-color: var(--spectrum-global-color-blue-400);
   }
   .cell.error {
     --cell-color: var(--spectrum-global-color-red-500);
   }
-  .cell.readonly {
+  .cell.focused.readonly {
     --cell-color: var(--spectrum-global-color-gray-600);
   }
-  .cell:not(.focused) {
-    user-select: none;
-  }
-  .cell:hover {
-    cursor: default;
-  }
+
   .cell.highlighted:not(.focused),
   .cell.focused.readonly {
     --cell-background: var(--cell-background-hover);
@@ -146,7 +156,7 @@
     left: 0;
     padding: 1px 4px 3px 4px;
     margin: 0 0 -2px 0;
-    background: var(--user-color);
+    background: var(--cell-color);
     border-radius: 2px;
     display: block;
     color: white;
@@ -160,11 +170,16 @@
   .cell.top .label {
     bottom: auto;
     top: 100%;
-    border-radius: 0 2px 2px 2px;
     padding: 2px 4px 2px 4px;
     margin: -2px 0 0 0;
   }
   .error .label {
     background: var(--spectrum-global-color-red-500);
   }
+  .selected-other:not(.error) .label {
+    display: none;
+  }
+  .selected-other:not(.error):hover .label {
+    display: block;
+  }
 </style>

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

@@ -52,7 +52,7 @@
 {:else}
   <div class="text-cell" class:number={type === "number"}>
     <div class="value">
-      {value || ""}
+      {value ?? ""}
     </div>
   </div>
 {/if}

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

@@ -1,5 +1,5 @@
 <script>
-  import { setContext } from "svelte"
+  import { setContext, onMount } from "svelte"
   import { writable } from "svelte/store"
   import { fade } from "svelte/transition"
   import { clickOutside, ProgressCircle } from "@budibase/bbui"
@@ -24,6 +24,7 @@
   import RowHeightButton from "../controls/RowHeightButton.svelte"
   import ColumnWidthButton from "../controls/ColumnWidthButton.svelte"
   import NewRow from "./NewRow.svelte"
+  import { createGridWebsocket } from "../lib/websocket"
   import {
     MaxCellRenderHeight,
     MaxCellRenderWidthOverflow,
@@ -42,6 +43,8 @@
   export let allowEditRows = true
   export let allowDeleteRows = true
   export let stripeRows = false
+  export let collaboration = true
+  export let showAvatars = true
 
   // Unique identifier for DOM nodes inside this instance
   const rand = Math.random()
@@ -102,7 +105,11 @@
   export const getContext = () => context
 
   // Initialise websocket for multi-user
-  // onMount(() => createWebsocket(context))
+  onMount(() => {
+    if (collaboration) {
+      return createGridWebsocket(context)
+    }
+  })
 </script>
 
 <div
@@ -124,7 +131,9 @@
       <RowHeightButton />
     </div>
     <div class="controls-right">
-      <UserAvatars />
+      {#if showAvatars}
+        <UserAvatars />
+      {/if}
     </div>
   </div>
   {#if $loaded}

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

@@ -1,13 +1,23 @@
 <script>
   import { getContext } from "svelte"
-  import Avatar from "./Avatar.svelte"
+  import UserAvatar from "../../UserAvatar.svelte"
 
   const { users } = getContext("grid")
+
+  $: uniqueUsers = unique($users)
+
+  const unique = users => {
+    let uniqueUsers = {}
+    users?.forEach(user => {
+      uniqueUsers[user.email] = user
+    })
+    return Object.values(uniqueUsers)
+  }
 </script>
 
 <div class="users">
-  {#each $users as user}
-    <Avatar {user} />
+  {#each uniqueUsers as user}
+    <UserAvatar {user} />
   {/each}
 </div>
 
@@ -15,6 +25,6 @@
   .users {
     display: flex;
     flex-direction: row;
-    gap: 8px;
+    gap: 4px;
   }
 </style>

package/src/components/grid/lib/websocket.js

@@ -1,24 +1,9 @@
 import { get } from "svelte/store"
-import { io } from "socket.io-client"
-
-export const createWebsocket = context => {
-  const { rows, tableId, users, userId, focusedCellId } = context
-
-  // Determine connection info
-  const tls = location.protocol === "https:"
-  const proto = tls ? "wss:" : "ws:"
-  const host = location.hostname
-  const port = location.port || (tls ? 443 : 80)
-  const socket = io(`${proto}//${host}:${port}`, {
-    path: "/socket/grid",
-    // Cap reconnection attempts to 3 (total of 15 seconds before giving up)
-    reconnectionAttempts: 3,
-    // Delay reconnection attempt by 5 seconds
-    reconnectionDelay: 5000,
-    reconnectionDelayMax: 5000,
-    // Timeout after 4 seconds so we never stack requests
-    timeout: 4000,
-  })
+import { createWebsocket } from "../../../utils"
+
+export const createGridWebsocket = context => {
+  const { rows, tableId, users, focusedCellId, table } = context
+  const socket = createWebsocket("/socket/grid")
 
   const connectToTable = tableId => {
     if (!socket.connected) {
@@ -28,27 +13,42 @@ export const createWebsocket = context => {
     socket.emit("select-table", tableId, response => {
       // handle initial connection info
       users.set(response.users)
-      userId.set(response.id)
     })
   }
 
-  // Event handlers
+  // Connection events
   socket.on("connect", () => {
     connectToTable(get(tableId))
   })
-  socket.on("row-update", data => {
-    if (data.id) {
-      rows.actions.refreshRow(data.id)
-    }
+  socket.on("connect_error", err => {
+    console.log("Failed to connect to grid websocket:", err.message)
   })
+
+  // User events
   socket.on("user-update", user => {
     users.actions.updateUser(user)
   })
   socket.on("user-disconnect", user => {
     users.actions.removeUser(user)
   })
-  socket.on("connect_error", err => {
-    console.log("Failed to connect to grid websocket:", err.message)
+
+  // Row events
+  socket.on("row-change", async data => {
+    if (data.id) {
+      rows.actions.replaceRow(data.id, data.row)
+    } else if (data.row.id) {
+      // Handle users table edge case
+      await rows.actions.refreshRow(data.row.id)
+    }
+  })
+
+  // Table events
+  socket.on("table-change", data => {
+    // Only update table if one exists. If the table was deleted then we don't
+    // want to know - let the builder navigate away
+    if (data.table) {
+      table.set(data.table)
+    }
   })
 
   // Change websocket connection when table changes

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

@@ -14,6 +14,7 @@
     dispatch,
     selectedRows,
     config,
+    menu,
   } = getContext("grid")
 
   const ignoredOriginSelectors = [
@@ -61,6 +62,7 @@
       } else {
         $focusedCellId = null
       }
+      menu.actions.close()
       return
     } else if (e.key === "Tab") {
       e.preventDefault()

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

@@ -46,7 +46,7 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const { table, columns, stickyColumn, API, dispatch } = context
+  const { table, columns, stickyColumn, API } = context
 
   // Updates the tables primary display column
   const changePrimaryDisplay = async column => {
@@ -90,10 +90,6 @@ export const deriveStores = context => {
     // Update local state
     table.set(newTable)
 
-    // Broadcast event so that we can keep sync with external state
-    // (e.g. data section which maintains a list of table definitions)
-    dispatch("updatetable", newTable)
-
     // Update server
     await API.saveTable(newTable)
   }
@@ -116,10 +112,24 @@ export const initialise = context => {
   const schema = derived(
     [table, schemaOverrides],
     ([$table, $schemaOverrides]) => {
-      let newSchema = $table?.schema
-      if (!newSchema) {
+      if (!$table?.schema) {
         return null
       }
+      let newSchema = { ...$table?.schema }
+
+      // Edge case to temporarily allow deletion of duplicated user
+      // fields that were saved with the "disabled" flag set.
+      // By overriding the saved schema we ensure only overrides can
+      // set the disabled flag.
+      // TODO: remove in future
+      Object.keys(newSchema).forEach(field => {
+        newSchema[field] = {
+          ...newSchema[field],
+          disabled: false,
+        }
+      })
+
+      // Apply schema overrides
       Object.keys($schemaOverrides || {}).forEach(field => {
         if (newSchema[field]) {
           newSchema[field] = {
@@ -160,7 +170,7 @@ export const initialise = context => {
       fields
         .map(field => ({
           name: field,
-          label: $schema[field].name || field,
+          label: $schema[field].displayName || field,
           schema: $schema[field],
           width: $schema[field].width || DefaultColumnWidth,
           visible: $schema[field].visible ?? true,

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

@@ -268,27 +268,25 @@ export const deriveStores = context => {
     return res?.rows?.[0]
   }
 
-  // Refreshes a specific row, handling updates, addition or deletion
-  const refreshRow = async id => {
-    // Fetch row from the server again
-    const newRow = await fetchRow(id)
-
+  // Replaces a row in state with the newly defined row, handling updates,
+  // addition and deletion
+  const replaceRow = (id, row) => {
     // Get index of row to check if it exists
     const $rows = get(rows)
     const $rowLookupMap = get(rowLookupMap)
     const index = $rowLookupMap[id]
 
     // Process as either an update, addition or deletion
-    if (newRow) {
+    if (row) {
       if (index != null) {
         // An existing row was updated
         rows.update(state => {
-          state[index] = { ...newRow }
+          state[index] = { ...row }
           return state
         })
       } else {
         // A new row was created
-        handleNewRows([newRow])
+        handleNewRows([row])
       }
     } else if (index != null) {
       // A row was removed
@@ -296,6 +294,12 @@ export const deriveStores = context => {
     }
   }
 
+  // Refreshes a specific row
+  const refreshRow = async id => {
+    const row = await fetchRow(id)
+    replaceRow(id, row)
+  }
+
   // Refreshes all data
   const refreshData = () => {
     get(fetch)?.getInitialData()
@@ -341,10 +345,15 @@ export const deriveStores = context => {
       const saved = await API.saveRow({ ...row, ...get(rowChangeCache)[rowId] })
 
       // Update state after a successful change
-      rows.update(state => {
-        state[index] = saved
-        return state.slice()
-      })
+      if (saved?._id) {
+        rows.update(state => {
+          state[index] = saved
+          return state.slice()
+        })
+      } else if (saved?.id) {
+        // Handle users table edge case
+        await refreshRow(saved.id)
+      }
       rowChangeCache.update(state => {
         delete state[rowId]
         return state
@@ -455,6 +464,7 @@ export const deriveStores = context => {
         hasRow,
         loadNextPage,
         refreshRow,
+        replaceRow,
         refreshData,
         refreshTableDefinition,
       },

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

@@ -1,95 +1,50 @@
 import { writable, get, derived } from "svelte/store"
+import { helpers } from "@budibase/shared-core"
 
 export const createStores = () => {
   const users = writable([])
-  const userId = writable(null)
 
-  // Enrich users with unique colours
-  const enrichedUsers = derived(
-    [users, userId],
-    ([$users, $userId]) => {
-      return (
-        $users
-          .slice()
-          // Place current user first
-          .sort((a, b) => {
-            if (a.id === $userId) {
-              return -1
-            } else if (b.id === $userId) {
-              return 1
-            } else {
-              return 0
-            }
-          })
-          // Enrich users with colors
-          .map((user, idx) => {
-            // Generate random colour hue
-            let hue = 1
-            for (let i = 0; i < user.email.length && i < 5; i++) {
-              hue *= user.email.charCodeAt(i + 1)
-              hue /= 17
-            }
-            hue = hue % 360
-            const color =
-              idx === 0
-                ? "var(--spectrum-global-color-blue-400)"
-                : `hsl(${hue}, 50%, 40%)`
-
-            // Generate friendly label
-            let label = user.email
-            if (user.firstName) {
-              label = user.firstName
-              if (user.lastName) {
-                label += ` ${user.lastName}`
-              }
-            }
-
-            return {
-              ...user,
-              color,
-              label,
-            }
-          })
-      )
-    },
-    []
-  )
+  const enrichedUsers = derived(users, $users => {
+    return $users.map(user => ({
+      ...user,
+      color: helpers.getUserColor(user),
+      label: helpers.getUserLabel(user),
+    }))
+  })
 
   return {
     users: {
       ...users,
       subscribe: enrichedUsers.subscribe,
     },
-    userId,
   }
 }
 
 export const deriveStores = context => {
-  const { users, userId } = context
+  const { users, focusedCellId } = context
 
   // Generate a lookup map of cell ID to the user that has it selected, to make
   // lookups inside cells extremely fast
   const selectedCellMap = derived(
-    [users, userId],
-    ([$enrichedUsers, $userId]) => {
+    [users, focusedCellId],
+    ([$users, $focusedCellId]) => {
       let map = {}
-      $enrichedUsers.forEach(user => {
-        if (user.focusedCellId && user.id !== $userId) {
+      $users.forEach(user => {
+        if (user.focusedCellId && user.focusedCellId !== $focusedCellId) {
           map[user.focusedCellId] = user
         }
       })
       return map
-    },
-    {}
+    }
   )
 
   const updateUser = user => {
     const $users = get(users)
-    const index = $users.findIndex(x => x.id === user.id)
-    if (index === -1) {
+    if (!$users.some(x => x.sessionId === user.sessionId)) {
       users.set([...$users, user])
     } else {
       users.update(state => {
+        const index = state.findIndex(x => x.sessionId === user.sessionId)
         state[index] = user
         return state.slice()
       })
@@ -98,7 +53,7 @@ export const deriveStores = context => {
 
   const removeUser = user => {
     users.update(state => {
-      return state.filter(x => x.id !== user.id)
+      return state.filter(x => x.sessionId !== user.sessionId)
     })
   }
 

package/src/components/index.js

@@ -1,4 +1,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 { Grid } from "./grid"

package/src/utils/index.js

@@ -3,3 +3,4 @@ export * as JSONUtils from "./json"
 export * as CookieUtils from "./cookies"
 export * as RoleUtils from "./roles"
 export * as Utils from "./utils"
+export { createWebsocket } from "./websocket"

package/src/utils/websocket.js

@@ -0,0 +1,26 @@
+import { io } from "socket.io-client"
+
+export const createWebsocket = path => {
+  if (!path) {
+    throw "A websocket path must be provided"
+  }
+
+  // Determine connection info
+  const tls = location.protocol === "https:"
+  const proto = tls ? "wss:" : "ws:"
+  const host = location.hostname
+  const port = location.port || (tls ? 443 : 80)
+  return io(`${proto}//${host}:${port}`, {
+    path,
+    // Cap reconnection attempts to 3 (total of 15 seconds before giving up)
+    reconnectionAttempts: 3,
+    // Delay reconnection attempt by 5 seconds
+    reconnectionDelay: 5000,
+    reconnectionDelayMax: 5000,
+    // Timeout after 4 seconds so we never stack requests
+    timeout: 4000,
+    // Disable polling and rely on websocket only, as HTTP transport
+    // will only work with sticky sessions which we don't have
+    transports: ["websocket"]
+  })
+}

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

@@ -1,24 +0,0 @@
-<script>
-  export let user
-</script>
-
-<div class="user" style="background:{user.color};" title={user.email}>
-  {user.email[0]}
-</div>
-
-<style>
-  div {
-    width: 24px;
-    height: 24px;
-    display: grid;
-    place-items: center;
-    color: white;
-    border-radius: 50%;
-    font-size: 12px;
-    font-weight: 700;
-    text-transform: uppercase;
-  }
-  div:hover {
-    cursor: pointer;
-  }
-</style>