@budibase/frontend-core 2.31.3 → 2.31.8

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.31.3",
+  "version": "2.31.8",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "2.31.3",
-    "@budibase/shared-core": "2.31.3",
-    "@budibase/types": "2.31.3",
+    "@budibase/bbui": "2.31.8",
+    "@budibase/shared-core": "2.31.8",
+    "@budibase/types": "2.31.8",
     "dayjs": "^1.10.8",
     "lodash": "4.17.21",
     "shortid": "2.2.15",
     "socket.io-client": "^4.7.5"
   },
-  "gitHead": "f25fc42a409fd0ddb3492d6b622e63e2e8d25de4"
+  "gitHead": "773a06abcdbf7b7bed843f909afc5ca2b11e7ce2"
 }

package/src/api/user.js

@@ -295,4 +295,10 @@ export const buildUserEndpoints = API => ({
       url: `/api/global/users/${userId}/app/${appId}/builder`,
     })
   },
+
+  getTenantInfo: async ({ tenantId }) => {
+    return await API.get({
+      url: `/api/global/tenant/${tenantId}`,
+    })
+  },
 })

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

@@ -29,6 +29,7 @@
   let searching = false
   let container
   let anchor
+  let relationshipFields
 
   $: fieldValue = parseValue(value)
   $: oneRowOnly = schema?.relationshipType === "one-to-many"
@@ -41,6 +42,26 @@
     }
   }
 
+  $: relationFields = fieldValue?.reduce((acc, f) => {
+    const fields = {}
+    for (const [column] of Object.entries(schema?.columns || {}).filter(
+      ([key, column]) =>
+        column.visible !== false && f[key] !== null && f[key] !== undefined
+    )) {
+      fields[column] = f[column]
+    }
+    if (Object.keys(fields).length) {
+      acc[f._id] = fields
+    }
+    return acc
+  }, {})
+
+  $: showRelationshipFields =
+    relationshipFields &&
+    Object.keys(relationshipFields).length &&
+    focused &&
+    !isOpen
+
   const parseValue = value => {
     if (Array.isArray(value) && value.every(x => x?._id)) {
       return value
@@ -221,6 +242,14 @@
     return value
   }
 
+  const displayRelationshipFields = relationship => {
+    relationshipFields = relationFields[relationship._id]
+  }
+
+  const hideRelationshipFields = () => {
+    relationshipFields = undefined
+  }
+
   onMount(() => {
     api = {
       focus: open,
@@ -244,11 +273,18 @@
     <div
       class="values"
       class:wrap={editable || contentLines > 1}
+      class:disabled={!focused}
       on:wheel={e => (focused ? e.stopPropagation() : null)}
     >
       {#each fieldValue || [] as relationship}
         {#if relationship[primaryDisplay] || relationship.primaryDisplay}
-          <div class="badge">
+          <div
+            class="badge"
+            class:extra-info={!!relationFields[relationship._id]}
+            on:mouseover={() => displayRelationshipFields(relationship)}
+            on:focus={() => {}}
+            on:mouseleave={() => hideRelationshipFields()}
+          >
             <span>
               {readable(
                 relationship[primaryDisplay] || relationship.primaryDisplay
@@ -322,6 +358,21 @@
   </GridPopover>
 {/if}
 
+{#if showRelationshipFields}
+  <GridPopover {anchor} minWidth={300} maxWidth={400}>
+    <div class="relationship-fields">
+      {#each Object.entries(relationshipFields) as [fieldName, fieldValue]}
+        <div class="relationship-field-name">
+          {fieldName}
+        </div>
+        <div class="relationship-field-value">
+          {fieldValue}
+        </div>
+      {/each}
+    </div>
+  </GridPopover>
+{/if}
+
 <style>
   .wrapper {
     flex: 1 1 auto;
@@ -376,6 +427,9 @@
     padding: var(--cell-padding);
     flex-wrap: nowrap;
   }
+  .values.disabled {
+    pointer-events: none;
+  }
   .values.wrap {
     flex-wrap: wrap;
   }
@@ -407,6 +461,13 @@
     height: 20px;
     max-width: 100%;
   }
+  .values.wrap .badge:hover {
+    filter: brightness(1.25);
+  }
+  .values.wrap .badge.extra-info {
+    cursor: pointer;
+  }
+
   .badge span {
     overflow: hidden;
     white-space: nowrap;
@@ -478,4 +539,25 @@
   .search :global(.spectrum-Form-item) {
     flex: 1 1 auto;
   }
+
+  .relationship-fields {
+    margin: var(--spacing-m) var(--spacing-l);
+    display: grid;
+    grid-template-columns: minmax(auto, 50%) auto;
+    grid-row-gap: var(--spacing-m);
+    grid-column-gap: var(--spacing-m);
+  }
+
+  .relationship-field-name {
+    text-transform: uppercase;
+    color: var(--spectrum-global-color-gray-600);
+    font-size: var(--font-size-xs);
+  }
+  .relationship-field-value {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+  }
 </style>

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

@@ -2,16 +2,29 @@
   import { getContext } from "svelte"
   import { ActionButton, Popover } from "@budibase/bbui"
   import ColumnsSettingContent from "./ColumnsSettingContent.svelte"
+  import { FieldPermissions } from "../../../constants"
 
   export let allowViewReadonlyColumns = false
 
-  const { columns } = getContext("grid")
+  const { columns, datasource } = getContext("grid")
 
   let open = false
   let anchor
 
   $: anyRestricted = $columns.filter(col => !col.visible || col.readonly).length
   $: text = anyRestricted ? `Columns (${anyRestricted} restricted)` : "Columns"
+
+  $: permissions =
+    $datasource.type === "viewV2"
+      ? [
+          FieldPermissions.WRITABLE,
+          FieldPermissions.READONLY,
+          FieldPermissions.HIDDEN,
+        ]
+      : [FieldPermissions.WRITABLE, FieldPermissions.HIDDEN]
+  $: disabledPermissions = allowViewReadonlyColumns
+    ? []
+    : [FieldPermissions.READONLY]
 </script>
 
 <div bind:this={anchor}>
@@ -28,5 +41,9 @@
 </div>
 
 <Popover bind:open {anchor} align="left">
-  <ColumnsSettingContent columns={$columns} {allowViewReadonlyColumns} />
+  <ColumnsSettingContent
+    columns={$columns}
+    {permissions}
+    {disabledPermissions}
+  />
 </Popover>

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

@@ -1,87 +1,183 @@
 <script>
   import { getContext } from "svelte"
-  import { Icon, notifications } from "@budibase/bbui"
+  import { Icon, notifications, ActionButton, Popover } from "@budibase/bbui"
   import { getColumnIcon } from "../lib/utils"
   import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
   import { helpers } from "@budibase/shared-core"
+  import { FieldType } from "@budibase/types"
+  import { FieldPermissions } from "../../../constants"
 
-  export let allowViewReadonlyColumns = false
+  export let permissions = [FieldPermissions.WRITABLE, FieldPermissions.HIDDEN]
+  export let disabledPermissions = []
+  export let columns
+  export let fromRelationshipField
 
-  const { columns, datasource, dispatch } = getContext("grid")
+  const { datasource, dispatch, cache, config } = getContext("grid")
 
-  const toggleColumn = async (column, permission) => {
-    const visible = permission !== PERMISSION_OPTIONS.HIDDEN
-    const readonly = permission === PERMISSION_OPTIONS.READONLY
+  $: canSetRelationshipSchemas = $config.canSetRelationshipSchemas
 
-    await datasource.actions.addSchemaMutation(column.name, {
-      visible,
-      readonly,
-    })
-    try {
-      await datasource.actions.saveSchemaMutations()
-    } catch (e) {
-      notifications.error(e.message)
-    } finally {
-      await datasource.actions.resetSchemaMutations()
-      await datasource.actions.refreshDefinition()
+  let relationshipPanelAnchor
+  let relationshipFieldName
+
+  $: relationshipField = columns.find(
+    c => c.name === relationshipFieldName
+  )?.schema
+  $: permissionsObj = permissions.reduce(
+    (acc, c) => ({
+      ...acc,
+      [c]: {
+        disabled: disabledPermissions.includes(c),
+      },
+    }),
+    {}
+  )
+
+  $: displayColumns = columns.map(c => {
+    const isRequired =
+      c.primaryDisplay || helpers.schema.isRequired(c.schema.constraints)
+
+    const defaultPermission = permissions[0]
+    const requiredTooltips = {
+      [FieldPermissions.WRITABLE]: (() => {
+        if (defaultPermission === FieldPermissions.WRITABLE) {
+          if (c.primaryDisplay) {
+            return "Display column must be writable"
+          }
+          if (isRequired) {
+            return "Required columns must be writable"
+          }
+        }
+      })(),
+      [FieldPermissions.READONLY]: (() => {
+        if (defaultPermission === FieldPermissions.WRITABLE) {
+          if (c.primaryDisplay) {
+            return "Display column cannot be read-only"
+          }
+          if (isRequired) {
+            return "Required columns cannot be read-only"
+          }
+        }
+        if (defaultPermission === FieldPermissions.READONLY) {
+          if (c.primaryDisplay) {
+            return "Display column must be read-only"
+          }
+          if (isRequired) {
+            return "Required columns must be read-only"
+          }
+        }
+      })(),
+      [FieldPermissions.HIDDEN]: (() => {
+        if (c.primaryDisplay) {
+          return "Display column cannot be hidden"
+        }
+        if (isRequired) {
+          return "Required columns cannot be hidden"
+        }
+      })(),
     }
-    dispatch(visible ? "show-column" : "hide-column")
-  }
 
-  const PERMISSION_OPTIONS = {
-    WRITABLE: "writable",
-    READONLY: "readonly",
-    HIDDEN: "hidden",
-  }
+    const options = []
 
-  $: displayColumns = $columns.map(c => {
-    const isRequired = helpers.schema.isRequired(c.schema.constraints)
-    const requiredTooltip = isRequired && "Required columns must be writable"
-    const editEnabled =
-      !isRequired ||
-      columnToPermissionOptions(c) !== PERMISSION_OPTIONS.WRITABLE
-    const options = [
-      {
+    let permission
+    if ((permission = permissionsObj[FieldPermissions.WRITABLE])) {
+      const tooltip = requiredTooltips[FieldPermissions.WRITABLE] || "Writable"
+      options.push({
         icon: "Edit",
-        value: PERMISSION_OPTIONS.WRITABLE,
-        tooltip: (!editEnabled && requiredTooltip) || "Writable",
-        disabled: !editEnabled,
-      },
-    ]
-    if ($datasource.type === "viewV2") {
+        value: FieldPermissions.WRITABLE,
+        tooltip,
+        disabled: isRequired || permission.disabled,
+      })
+    }
+
+    if ((permission = permissionsObj[FieldPermissions.READONLY])) {
+      const tooltip =
+        (requiredTooltips[FieldPermissions.READONLY] || "Read-only") +
+        (permission.disabled ? " (premium feature)" : "")
       options.push({
         icon: "Visibility",
-        value: PERMISSION_OPTIONS.READONLY,
-        tooltip: allowViewReadonlyColumns
-          ? requiredTooltip || "Read only"
-          : "Read only (premium feature)",
-        disabled: !allowViewReadonlyColumns || isRequired,
+        value: FieldPermissions.READONLY,
+        tooltip,
+        disabled: permission.disabled || isRequired,
       })
     }
 
-    options.push({
-      icon: "VisibilityOff",
-      value: PERMISSION_OPTIONS.HIDDEN,
-      disabled: c.primaryDisplay || isRequired,
-      tooltip:
-        (c.primaryDisplay && "Display column cannot be hidden") ||
-        requiredTooltip ||
-        "Hidden",
-    })
+    if ((permission = permissionsObj[FieldPermissions.HIDDEN])) {
+      const tooltip = requiredTooltips[FieldPermissions.HIDDEN] || "Hidden"
+      options.push({
+        icon: "VisibilityOff",
+        value: FieldPermissions.HIDDEN,
+        disabled: permission.disabled || isRequired,
+        tooltip,
+      })
+    }
 
     return { ...c, options }
   })
 
+  let relationshipPanelColumns = []
+  async function fetchRelationshipPanelColumns(relationshipField) {
+    relationshipPanelColumns = []
+    if (!relationshipField) {
+      return
+    }
+
+    const table = await cache.actions.getTable(relationshipField.tableId)
+    relationshipPanelColumns = Object.entries(
+      relationshipField?.columns || {}
+    ).map(([name, column]) => {
+      return {
+        name: name,
+        label: name,
+        schema: {
+          type: table.schema[name].type,
+          visible: column.visible,
+          readonly: column.readonly,
+        },
+      }
+    })
+  }
+  $: fetchRelationshipPanelColumns(relationshipField)
+
+  async function toggleColumn(column, permission) {
+    const visible = permission !== FieldPermissions.HIDDEN
+    const readonly = permission === FieldPermissions.READONLY
+
+    if (!fromRelationshipField) {
+      await datasource.actions.addSchemaMutation(column.name, {
+        visible,
+        readonly,
+      })
+    } else {
+      await datasource.actions.addSubSchemaMutation(
+        column.name,
+        fromRelationshipField.name,
+        {
+          visible,
+          readonly,
+        }
+      )
+    }
+    try {
+      await datasource.actions.saveSchemaMutations()
+    } catch (e) {
+      notifications.error(e.message)
+    } finally {
+      await datasource.actions.resetSchemaMutations()
+      await datasource.actions.refreshDefinition()
+    }
+    dispatch(visible ? "show-column" : "hide-column")
+  }
+
   function columnToPermissionOptions(column) {
     if (column.schema.visible === false) {
-      return PERMISSION_OPTIONS.HIDDEN
+      return FieldPermissions.HIDDEN
     }
 
     if (column.schema.readonly) {
-      return PERMISSION_OPTIONS.READONLY
+      return FieldPermissions.READONLY
     }
 
-    return PERMISSION_OPTIONS.WRITABLE
+    return FieldPermissions.WRITABLE
   }
 </script>
 
@@ -94,16 +190,56 @@
           {column.label}
         </div>
       </div>
-      <ToggleActionButtonGroup
-        on:click={e => toggleColumn(column, e.detail)}
-        value={columnToPermissionOptions(column)}
-        options={column.options}
-      />
+      <div class="column-options">
+        <ToggleActionButtonGroup
+          on:click={e => toggleColumn(column, e.detail)}
+          value={columnToPermissionOptions(column)}
+          options={column.options}
+        />
+        {#if canSetRelationshipSchemas && column.schema.type === FieldType.LINK && columnToPermissionOptions(column) !== FieldPermissions.HIDDEN}
+          <div class="relationship-columns">
+            <ActionButton
+              on:click={e => {
+                relationshipFieldName = column.name
+                relationshipPanelAnchor = e.currentTarget
+              }}
+              size="S"
+              icon="ChevronRight"
+              quiet
+            />
+          </div>
+        {/if}
+      </div>
     {/each}
   </div>
 </div>
 
+{#if canSetRelationshipSchemas}
+  <Popover
+    on:close={() => (relationshipFieldName = null)}
+    open={relationshipFieldName}
+    anchor={relationshipPanelAnchor}
+    align="right-outside"
+  >
+    {#if relationshipPanelColumns.length}
+      <div class="relationship-header">
+        {relationshipFieldName} columns
+      </div>
+    {/if}
+    <svelte:self
+      columns={relationshipPanelColumns}
+      permissions={[FieldPermissions.READONLY, FieldPermissions.HIDDEN]}
+      fromRelationshipField={relationshipField}
+    />
+  </Popover>
+{/if}
+
 <style>
+  .relationship-columns :global(.spectrum-ActionButton) {
+    width: 28px;
+    height: 28px;
+  }
+
   .content {
     padding: 12px 12px;
     display: flex;
@@ -131,4 +267,12 @@
     white-space: nowrap;
     overflow: hidden;
   }
+  .column-options {
+    display: flex;
+    gap: var(--spacing-xs);
+  }
+  .relationship-header {
+    color: var(--spectrum-global-color-gray-600);
+    padding: 12px 12px 0 12px;
+  }
 </style>

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

@@ -43,6 +43,7 @@
   export let canDeleteRows = true
   export let canEditColumns = true
   export let canSaveSchema = true
+  export let canSetRelationshipSchemas = false
   export let stripeRows = false
   export let quiet = false
   export let collaboration = true
@@ -99,6 +100,7 @@
     canDeleteRows,
     canEditColumns,
     canSaveSchema,
+    canSetRelationshipSchemas,
     stripeRows,
     quiet,
     collaboration,

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

@@ -4,35 +4,40 @@ export const createActions = context => {
   // Cache for the primary display columns of different tables.
   // If we ever need to cache table definitions for other purposes then we can
   // expand this to be a more generic cache.
-  let primaryDisplayCache = {}
+  let tableCache = {}
 
-  const resetPrimaryDisplayCache = () => {
-    primaryDisplayCache = {}
+  const resetCache = () => {
+    tableCache = {}
   }
 
-  const getPrimaryDisplayForTableId = async tableId => {
+  const fetchTable = async tableId => {
     // If we've never encountered this tableId before then store a promise that
     // resolves to the primary display so that subsequent invocations before the
     // promise completes can reuse this promise
-    if (!primaryDisplayCache[tableId]) {
-      primaryDisplayCache[tableId] = new Promise(resolve => {
-        API.fetchTableDefinition(tableId).then(def => {
-          const display = def?.primaryDisplay || def?.schema?.[0]?.name
-          primaryDisplayCache[tableId] = display
-          resolve(display)
-        })
-      })
+    if (!tableCache[tableId]) {
+      tableCache[tableId] = API.fetchTableDefinition(tableId)
     }
-
     // We await the result so that we account for both promises and primitives
-    return await primaryDisplayCache[tableId]
+    return await tableCache[tableId]
+  }
+
+  const getPrimaryDisplayForTableId = async tableId => {
+    const table = await fetchTable(tableId)
+    const display = table?.primaryDisplay || table?.schema?.[0]?.name
+    return display
+  }
+
+  const getTable = async tableId => {
+    const table = await fetchTable(tableId)
+    return table
   }
 
   return {
     cache: {
       actions: {
         getPrimaryDisplayForTableId,
-        resetPrimaryDisplayCache,
+        getTable,
+        resetCache,
       },
     },
   }
@@ -43,5 +48,5 @@ export const initialise = context => {
 
   // Wipe the caches whenever the datasource changes to ensure we aren't
   // storing any stale information
-  datasource.subscribe(cache.actions.resetPrimaryDisplayCache)
+  datasource.subscribe(cache.actions.resetCache)
 }

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

@@ -5,16 +5,24 @@ import { memo } from "../../../utils"
 export const createStores = () => {
   const definition = memo(null)
   const schemaMutations = memo({})
+  const subSchemaMutations = memo({})
 
   return {
     definition,
     schemaMutations,
+    subSchemaMutations,
   }
 }
 
 export const deriveStores = context => {
-  const { API, definition, schemaOverrides, datasource, schemaMutations } =
-    context
+  const {
+    API,
+    definition,
+    schemaOverrides,
+    datasource,
+    schemaMutations,
+    subSchemaMutations,
+  } = context
 
   const schema = derived(definition, $definition => {
     let schema = getDatasourceSchema({
@@ -40,8 +48,8 @@ export const deriveStores = context => {
   // Derives the total enriched schema, made up of the saved schema and any
   // prop and user overrides
   const enrichedSchema = derived(
-    [schema, schemaOverrides, schemaMutations],
-    ([$schema, $schemaOverrides, $schemaMutations]) => {
+    [schema, schemaOverrides, schemaMutations, subSchemaMutations],
+    ([$schema, $schemaOverrides, $schemaMutations, $subSchemaMutations]) => {
       if (!$schema) {
         return null
       }
@@ -52,6 +60,18 @@ export const deriveStores = context => {
           ...$schemaOverrides?.[field],
           ...$schemaMutations[field],
         }
+
+        if ($subSchemaMutations[field]) {
+          enrichedSchema[field].columns ??= {}
+          for (const [fieldName, mutation] of Object.entries(
+            $subSchemaMutations[field]
+          )) {
+            enrichedSchema[field].columns[fieldName] = {
+              ...enrichedSchema[field].columns[fieldName],
+              ...mutation,
+            }
+          }
+        }
       })
       return enrichedSchema
     }
@@ -83,6 +103,7 @@ export const createActions = context => {
     viewV2,
     nonPlus,
     schemaMutations,
+    subSchemaMutations,
     schema,
     notifications,
   } = context
@@ -162,6 +183,25 @@ export const createActions = context => {
     })
   }
 
+  // Adds a nested schema mutation for a single field
+  const addSubSchemaMutation = (field, fromField, mutation) => {
+    if (!field || !fromField || !mutation) {
+      return
+    }
+    subSchemaMutations.update($subSchemaMutations => {
+      return {
+        ...$subSchemaMutations,
+        [fromField]: {
+          ...$subSchemaMutations[fromField],
+          [field]: {
+            ...($subSchemaMutations[fromField] || {})[field],
+            ...mutation,
+          },
+        },
+      }
+    })
+  }
+
   // Adds schema mutations for multiple fields at once
   const addSchemaMutations = mutations => {
     const fields = Object.keys(mutations || {})
@@ -188,6 +228,7 @@ export const createActions = context => {
     }
     const $definition = get(definition)
     const $schemaMutations = get(schemaMutations)
+    const $subSchemaMutations = get(subSchemaMutations)
     const $schema = get(schema)
     let newSchema = {}
 
@@ -197,6 +238,17 @@ export const createActions = context => {
         ...$schema[column],
         ...$schemaMutations[column],
       }
+      if ($subSchemaMutations[column]) {
+        newSchema[column].columns ??= {}
+        for (const [fieldName, mutation] of Object.entries(
+          $subSchemaMutations[column]
+        )) {
+          newSchema[column].columns[fieldName] = {
+            ...newSchema[column].columns[fieldName],
+            ...mutation,
+          }
+        }
+      }
     })
 
     // Save the changes, then reset our local mutations
@@ -209,6 +261,7 @@ export const createActions = context => {
 
   const resetSchemaMutations = () => {
     schemaMutations.set({})
+    subSchemaMutations.set({})
   }
 
   // Adds a row to the datasource
@@ -255,6 +308,7 @@ export const createActions = context => {
         canUseColumn,
         changePrimaryDisplay,
         addSchemaMutation,
+        addSubSchemaMutation,
         addSchemaMutations,
         saveSchemaMutations,
         resetSchemaMutations,

package/src/constants.js

@@ -41,6 +41,7 @@ export const BudibaseRoles = {
   Developer: "developer",
   Creator: "creator",
   Admin: "admin",
+  Owner: "owner",
 }
 
 export const BudibaseRoleOptionsOld = [
@@ -54,18 +55,30 @@ export const BudibaseRoleOptions = [
     label: "Account admin",
     value: BudibaseRoles.Admin,
     subtitle: "Has full access to all apps and settings in your account",
+    sortOrder: 1,
   },
   {
     label: "Creator",
     value: BudibaseRoles.Creator,
     subtitle: "Can create and edit apps they have access to",
+    sortOrder: 2,
   },
   {
     label: "App user",
     value: BudibaseRoles.AppUser,
     subtitle: "Can only use published apps they have access to",
+    sortOrder: 3,
   },
 ]
+export const ExtendedBudibaseRoleOptions = [
+  {
+    label: "Account holder",
+    value: BudibaseRoles.Owner,
+    sortOrder: 0,
+  },
+]
+  .concat(BudibaseRoleOptions)
+  .concat(BudibaseRoleOptionsOld)
 
 export const PlanType = {
   FREE: "free",
@@ -161,3 +174,9 @@ export const TypeIconMap = {
 export const OptionColours = [...new Array(12).keys()].map(idx => {
   return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, 0.3)`
 })
+
+export const FieldPermissions = {
+  WRITABLE: "writable",
+  READONLY: "readonly",
+  HIDDEN: "hidden",
+}