@budibase/frontend-core 2.7.35 → 2.7.36-alpha.2

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.7.35",
+  "version": "2.7.36-alpha.2",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "2.7.35",
-    "@budibase/shared-core": "2.7.35",
+    "@budibase/bbui": "2.7.36-alpha.2",
+    "@budibase/shared-core": "2.7.36-alpha.2",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
     "socket.io-client": "^4.6.1",
     "svelte": "^3.46.2"
   },
-  "gitHead": "6db1d089ee2d2df8caf513cf2cb4b22f167b91f1"
+  "gitHead": "9e73358c0b5d945e052a08f6a9277a4d263eec01"
 }

package/src/api/analytics.js

@@ -7,11 +7,11 @@ export const buildAnalyticsEndpoints = API => ({
       url: "/api/bbtel",
     })
   },
-  analyticsPing: async ({ source }) => {
+  analyticsPing: async ({ source, embedded }) => {
     const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
     return await API.post({
       url: "/api/bbtel/ping",
-      body: { source, timezone },
+      body: { source, timezone, embedded },
     })
   },
 })

package/src/api/datasources.js

@@ -26,13 +26,16 @@ export const buildDatasourceEndpoints = API => ({
    * Creates a datasource
    * @param datasource the datasource to create
    * @param fetchSchema whether to fetch the schema or not
+   * @param tablesFilter a list of tables to actually fetch rather than simply
+   * all that are accessible.
    */
-  createDatasource: async ({ datasource, fetchSchema }) => {
+  createDatasource: async ({ datasource, fetchSchema, tablesFilter }) => {
     return await API.post({
       url: "/api/datasources",
       body: {
         datasource,
         fetchSchema,
+        tablesFilter,
       },
     })
   },
@@ -69,4 +72,15 @@ export const buildDatasourceEndpoints = API => ({
       body: { datasource },
     })
   },
+
+  /**
+   * Fetch table names available within the datasource, for filtering out undesired tables
+   * @param datasource the datasource configuration to use for fetching tables
+   */
+  fetchInfoForDatasource: async datasource => {
+    return await API.post({
+      url: `/api/datasources/info`,
+      body: { datasource },
+    })
+  },
 })

package/src/api/index.js

@@ -75,7 +75,11 @@ export const createAPIClient = config => {
   let cache = {}
 
   // Generates an error object from an API response
-  const makeErrorFromResponse = async (response, method) => {
+  const makeErrorFromResponse = async (
+    response,
+    method,
+    suppressErrors = false
+  ) => {
     // Try to read a message from the error
     let message = response.statusText
     let json = null
@@ -96,6 +100,7 @@ export const createAPIClient = config => {
       url: response.url,
       method,
       handled: true,
+      suppressErrors,
     }
   }
 
@@ -119,6 +124,7 @@ export const createAPIClient = config => {
     json = true,
     external = false,
     parseResponse,
+    suppressErrors = false,
   }) => {
     // Ensure we don't do JSON processing if sending a GET request
     json = json && method !== "GET"
@@ -174,7 +180,7 @@ export const createAPIClient = config => {
       }
     } else {
       delete cache[url]
-      throw await makeErrorFromResponse(response, method)
+      throw await makeErrorFromResponse(response, method, suppressErrors)
     }
   }
 
@@ -228,6 +234,14 @@ export const createAPIClient = config => {
     invalidateCache: () => {
       cache = {}
     },
+
+    // Generic utility to extract the current app ID. Assumes that any client
+    // that exists in an app context will be attaching our app ID header.
+    getAppID: () => {
+      let headers = {}
+      config?.attachHeaders(headers)
+      return headers?.["x-budibase-app-id"]
+    },
   }
 
   // Attach all endpoints

package/src/api/rows.js

@@ -16,14 +16,16 @@ export const buildRowEndpoints = API => ({
   /**
    * Creates or updates a row in a table.
    * @param row the row to save
+   * @param suppressErrors whether or not to suppress error notifications
    */
-  saveRow: async row => {
+  saveRow: async (row, suppressErrors = false) => {
     if (!row?.tableId) {
       return
     }
     return await API.post({
       url: `/api/${row.tableId}/rows`,
       body: row,
+      suppressErrors,
     })
   },
 

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

@@ -138,10 +138,12 @@
     top: 100%;
     left: 0;
     width: 320px;
-    background: var(--background);
+    background: var(--grid-background-alt);
     border: var(--cell-border);
     padding: var(--cell-padding);
     box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
   }
   .dropzone.invertX {
     left: auto;

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

@@ -132,7 +132,7 @@
     --cell-color: var(--user-color);
   }
   .cell.focused {
-    --cell-color: var(--spectrum-global-color-blue-400);
+    --cell-color: var(--accent-color);
   }
   .cell.error {
     --cell-color: var(--spectrum-global-color-red-500);

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

@@ -9,7 +9,7 @@
   export let rowFocused = false
   export let rowHovered = false
   export let rowSelected = false
-  export let disableExpand = false
+  export let expandable = false
   export let disableNumber = false
   export let defaultHeight = false
   export let disabled = false
@@ -24,13 +24,6 @@
       selectedRows.actions.toggleRow(id)
     }
   }
-
-  const expand = () => {
-    svelteDispatch("expand")
-    if (row) {
-      dispatch("edit-row", row)
-    }
-  }
 </script>
 
 <GridCell
@@ -70,12 +63,14 @@
           color="var(--spectrum-global-color-red-400)"
         />
       </div>
-    {:else if $config.allowExpandRows}
-      <div
-        class="expand"
-        class:visible={!disableExpand && (rowFocused || rowHovered)}
-      >
-        <Icon name="Maximize" hoverable size="S" on:click={expand} />
+    {:else}
+      <div class="expand" class:visible={$config.allowExpandRows && expandable}>
+        <Icon
+          size="S"
+          name="Maximize"
+          hoverable
+          on:click={() => svelteDispatch("expand")}
+        />
       </div>
     {/if}
   </div>

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

@@ -163,7 +163,7 @@
     <MenuItem
       icon="Edit"
       on:click={editColumn}
-      disabled={!$config.allowEditColumns || column.schema.disabled}
+      disabled={!$config.allowSchemaChanges || column.schema.disabled}
     >
       Edit column
     </MenuItem>
@@ -171,7 +171,7 @@
       icon="Label"
       on:click={makeDisplayColumn}
       disabled={idx === "sticky" ||
-        !$config.allowEditColumns ||
+        !$config.allowSchemaChanges ||
         bannedDisplayColumnTypes.includes(column.schema.type)}
     >
       Use as display column
@@ -197,10 +197,12 @@
       Move right
     </MenuItem>
     <MenuItem
-      disabled={idx === "sticky"}
+      disabled={idx === "sticky" || !$config.showControls}
       icon="VisibilityOff"
-      on:click={hideColumn}>Hide column</MenuItem
+      on:click={hideColumn}
     >
+      Hide column
+    </MenuItem>
   </Menu>
 </Popover>
 
@@ -218,7 +220,7 @@
   .header-cell :global(.cell) {
     padding: 0 var(--cell-padding);
     gap: calc(2 * var(--cell-spacing));
-    background: var(--spectrum-global-color-gray-100);
+    background: var(--grid-background-alt);
   }
 
   .name {

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

@@ -102,7 +102,7 @@
     top: 0;
     left: 0;
     width: calc(100% + var(--max-cell-render-width-overflow));
-    height: var(--max-cell-render-height);
+    height: calc(var(--row-height) + var(--max-cell-render-height));
     z-index: 1;
     border-radius: 2px;
     resize: none;

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

@@ -132,10 +132,7 @@
             {option}
           </div>
           {#if values.includes(option)}
-            <Icon
-              name="Checkmark"
-              color="var(--spectrum-global-color-blue-400)"
-            />
+            <Icon name="Checkmark" color="var(--accent-color)" />
           {/if}
         </div>
       {/each}
@@ -223,6 +220,8 @@
     overflow-y: auto;
     border: var(--cell-border);
     box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
   }
   .options.invertX {
     left: auto;
@@ -240,7 +239,7 @@
     justify-content: space-between;
     align-items: center;
     gap: var(--cell-spacing);
-    background-color: var(--background);
+    background-color: var(--grid-background-alt);
   }
   .option:hover,
   .option.focused {

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

@@ -42,6 +42,8 @@
   let candidateIndex
   let lastSearchId
   let searching = false
+  let valuesHeight = 0
+  let container
 
   $: oneRowOnly = schema?.relationshipType === "one-to-many"
   $: editable = focused && !readonly
@@ -138,6 +140,7 @@
 
   const open = async () => {
     isOpen = true
+    valuesHeight = container.getBoundingClientRect().height
 
     // Find the primary display for the related table
     if (!primaryDisplay) {
@@ -242,8 +245,14 @@
   })
 </script>
 
-<div class="wrapper" class:editable class:focused style="--color:{color};">
-  <div class="container">
+<div
+  class="wrapper"
+  class:editable
+  class:focused
+  class:invertY
+  style="--color:{color};"
+>
+  <div class="container" bind:this={container}>
     <div
       class="values"
       class:wrap={editable || contentLines > 1}
@@ -290,6 +299,7 @@
       class:invertY
       on:wheel|stopPropagation
       use:clickOutside={close}
+      style="--values-height:{valuesHeight}px;"
     >
       <div class="search">
         <Input
@@ -319,11 +329,7 @@
                 </span>
               </div>
               {#if isRowSelected(row)}
-                <Icon
-                  size="S"
-                  name="Checkmark"
-                  color="var(--spectrum-global-color-blue-400)"
-                />
+                <Icon size="S" name="Checkmark" color="var(--accent-color)" />
               {/if}
             </div>
           {/each}
@@ -340,7 +346,7 @@
     min-height: var(--row-height);
     max-height: var(--row-height);
     overflow: hidden;
-    --max-relationship-height: 120px;
+    --max-relationship-height: 96px;
   }
   .wrapper.focused {
     position: absolute;
@@ -352,6 +358,10 @@
     max-height: none;
     overflow: visible;
   }
+  .wrapper.invertY {
+    top: auto;
+    bottom: 0;
+  }
 
   .container {
     min-height: var(--row-height);
@@ -450,16 +460,17 @@
     left: 0;
     width: 100%;
     max-height: calc(
-      var(--max-cell-render-height) + var(--row-height) -
-        var(--max-relationship-height)
+      var(--max-cell-render-height) + var(--row-height) - var(--values-height)
     );
-    background: var(--background);
+    background: var(--grid-background-alt);
     border: var(--cell-border);
     box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
     display: flex;
     flex-direction: column;
     align-items: stretch;
     padding: 0 0 8px 0;
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
   }
   .dropdown.invertY {
     transform: translateY(-100%);

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

@@ -10,7 +10,7 @@
   quiet
   size="M"
   on:click={() => dispatch("add-column")}
-  disabled={!$config.allowAddColumns}
+  disabled={!$config.allowSchemaChanges}
 >
   Add column
 </ActionButton>

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

@@ -6,15 +6,9 @@
 
   let modal
 
-  $: selectedRowCount = Object.values($selectedRows).filter(x => !!x).length
+  $: selectedRowCount = Object.values($selectedRows).length
   $: rowsToDelete = Object.entries($selectedRows)
-    .map(entry => {
-      if (entry[1] === true) {
-        return $rows.find(x => x._id === entry[0])
-      } else {
-        return null
-      }
-    })
+    .map(entry => $rows.find(x => x._id === entry[0]))
     .filter(x => x != null)
 
   // Deletion callback when confirmed

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

@@ -3,12 +3,13 @@
   import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui"
   import { getColumnIcon } from "../lib/utils"
 
-  const { columns, stickyColumn, compact } = getContext("grid")
+  const { columns, stickyColumn } = getContext("grid")
 
   let open = false
   let anchor
 
   $: anyHidden = $columns.some(col => !col.visible)
+  $: text = getText($columns)
 
   const toggleVisibility = (column, visible) => {
     columns.update(state => {
@@ -38,6 +39,11 @@
     })
     columns.actions.saveChanges()
   }
+
+  const getText = columns => {
+    const hidden = columns.filter(col => !col.visible).length
+    return hidden ? `Hide columns (${hidden})` : "Hide columns"
+  }
 </script>
 
 <div bind:this={anchor}>
@@ -48,13 +54,12 @@
     on:click={() => (open = !open)}
     selected={open || anyHidden}
     disabled={!$columns.length}
-    tooltip={$compact ? "Columns" : ""}
   >
-    {$compact ? "" : "Columns"}
+    {text}
   </ActionButton>
 </div>
 
-<Popover bind:open {anchor} align={$compact ? "right" : "left"}>
+<Popover bind:open {anchor} align="left">
   <div class="content">
     <div class="columns">
       {#if $stickyColumn}

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

@@ -0,0 +1,135 @@
+<script>
+  import { getContext } from "svelte"
+  import { ActionButton, Popover, Label } from "@budibase/bbui"
+  import {
+    DefaultColumnWidth,
+    LargeRowHeight,
+    MediumRowHeight,
+    SmallRowHeight,
+  } from "../lib/constants"
+
+  const { stickyColumn, columns, rowHeight, table } = getContext("grid")
+
+  // Some constants for column width options
+  const smallColSize = 120
+  const mediumColSize = DefaultColumnWidth
+  const largeColSize = DefaultColumnWidth * 1.5
+
+  // Row height sizes
+  const rowSizeOptions = [
+    {
+      label: "Small",
+      size: SmallRowHeight,
+    },
+    {
+      label: "Medium",
+      size: MediumRowHeight,
+    },
+    {
+      label: "Large",
+      size: LargeRowHeight,
+    },
+  ]
+
+  let open = false
+  let anchor
+
+  // Column width sizes
+  $: allCols = $columns.concat($stickyColumn ? [$stickyColumn] : [])
+  $: allSmall = allCols.every(col => col.width === smallColSize)
+  $: allMedium = allCols.every(col => col.width === mediumColSize)
+  $: allLarge = allCols.every(col => col.width === largeColSize)
+  $: custom = !allSmall && !allMedium && !allLarge
+  $: columnSizeOptions = [
+    {
+      label: "Small",
+      size: smallColSize,
+      selected: allSmall,
+    },
+    {
+      label: "Medium",
+      size: mediumColSize,
+      selected: allMedium,
+    },
+    {
+      label: "Large",
+      size: largeColSize,
+      selected: allLarge,
+    },
+  ]
+
+  const changeRowHeight = height => {
+    columns.actions.saveTable({
+      ...$table,
+      rowHeight: height,
+    })
+  }
+</script>
+
+<div bind:this={anchor}>
+  <ActionButton
+    icon="MoveUpDown"
+    quiet
+    size="M"
+    on:click={() => (open = !open)}
+    selected={open}
+    disabled={!allCols.length}
+  >
+    Size
+  </ActionButton>
+</div>
+
+<Popover bind:open {anchor} align="left">
+  <div class="content">
+    <div class="size">
+      <Label>Row height</Label>
+      <div class="options">
+        {#each rowSizeOptions as option}
+          <ActionButton
+            quiet
+            selected={$rowHeight === option.size}
+            on:click={() => changeRowHeight(option.size)}
+          >
+            {option.label}
+          </ActionButton>
+        {/each}
+      </div>
+    </div>
+    <div class="size">
+      <Label>Column width</Label>
+      <div class="options">
+        {#each columnSizeOptions as option}
+          <ActionButton
+            quiet
+            on:click={() => columns.actions.changeAllColumnWidths(option.size)}
+            selected={option.selected}
+          >
+            {option.label}
+          </ActionButton>
+        {/each}
+        {#if custom}
+          <ActionButton selected={custom} quiet>Custom</ActionButton>
+        {/if}
+      </div>
+    </div>
+  </div>
+</Popover>
+
+<style>
+  .content {
+    padding: 12px;
+  }
+  .size {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .size:first-child {
+    margin-bottom: 16px;
+  }
+  .options {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+</style>

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

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import { ActionButton, Popover, Select } from "@budibase/bbui"
 
-  const { sort, columns, stickyColumn, compact } = getContext("grid")
+  const { sort, columns, stickyColumn } = getContext("grid")
 
   let open = false
   let anchor
@@ -90,13 +90,12 @@
     on:click={() => (open = !open)}
     selected={open}
     disabled={!columnOptions.length}
-    tooltip={$compact ? "Sort" : ""}
   >
-    {$compact ? "" : "Sort"}
+    Sort
   </ActionButton>
 </div>
 
-<Popover bind:open {anchor} align={$compact ? "right" : "left"}>
+<Popover bind:open {anchor} align="left">
   <div class="content">
     <Select
       placeholder={null}