@budibase/frontend-core 2.7.34-alpha.9 → 2.7.35

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.7.34-alpha.9",
+  "version": "2.7.35",
   "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.34-alpha.9",
-    "@budibase/shared-core": "2.7.34-alpha.9",
+    "@budibase/bbui": "2.7.35",
+    "@budibase/shared-core": "2.7.35",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
     "socket.io-client": "^4.6.1",
     "svelte": "^3.46.2"
   },
-  "gitHead": "7433b26989c853dd8b36a91723662713da6b8b50"
+  "gitHead": "6db1d089ee2d2df8caf513cf2cb4b22f167b91f1"
 }

package/src/api/analytics.js

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

package/src/api/datasources.js

@@ -26,16 +26,13 @@ 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, tablesFilter }) => {
+  createDatasource: async ({ datasource, fetchSchema }) => {
     return await API.post({
       url: "/api/datasources",
       body: {
         datasource,
         fetchSchema,
-        tablesFilter,
       },
     })
   },
@@ -72,15 +69,4 @@ 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,11 +75,7 @@ export const createAPIClient = config => {
   let cache = {}
 
   // Generates an error object from an API response
-  const makeErrorFromResponse = async (
-    response,
-    method,
-    suppressErrors = false
-  ) => {
+  const makeErrorFromResponse = async (response, method) => {
     // Try to read a message from the error
     let message = response.statusText
     let json = null
@@ -100,7 +96,6 @@ export const createAPIClient = config => {
       url: response.url,
       method,
       handled: true,
-      suppressErrors,
     }
   }
 
@@ -124,7 +119,6 @@ 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"
@@ -180,7 +174,7 @@ export const createAPIClient = config => {
       }
     } else {
       delete cache[url]
-      throw await makeErrorFromResponse(response, method, suppressErrors)
+      throw await makeErrorFromResponse(response, method)
     }
   }
 
@@ -234,14 +228,6 @@ 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,16 +16,14 @@ 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, suppressErrors = false) => {
+  saveRow: async row => {
     if (!row?.tableId) {
       return
     }
     return await API.post({
       url: `/api/${row.tableId}/rows`,
       body: row,
-      suppressErrors,
     })
   },
 

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

@@ -138,12 +138,10 @@
     top: 100%;
     left: 0;
     width: 320px;
-    background: var(--grid-background-alt);
+    background: var(--background);
     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(--accent-color);
+    --cell-color: var(--spectrum-global-color-blue-400);
   }
   .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 expandable = false
+  export let disableExpand = false
   export let disableNumber = false
   export let defaultHeight = false
   export let disabled = false
@@ -24,6 +24,13 @@
       selectedRows.actions.toggleRow(id)
     }
   }
+
+  const expand = () => {
+    svelteDispatch("expand")
+    if (row) {
+      dispatch("edit-row", row)
+    }
+  }
 </script>
 
 <GridCell
@@ -63,14 +70,12 @@
           color="var(--spectrum-global-color-red-400)"
         />
       </div>
-    {:else}
-      <div class="expand" class:visible={$config.allowExpandRows && expandable}>
-        <Icon
-          size="S"
-          name="Maximize"
-          hoverable
-          on:click={() => svelteDispatch("expand")}
-        />
+    {:else if $config.allowExpandRows}
+      <div
+        class="expand"
+        class:visible={!disableExpand && (rowFocused || rowHovered)}
+      >
+        <Icon name="Maximize" hoverable size="S" on:click={expand} />
       </div>
     {/if}
   </div>

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

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

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

@@ -132,7 +132,10 @@
             {option}
           </div>
           {#if values.includes(option)}
-            <Icon name="Checkmark" color="var(--accent-color)" />
+            <Icon
+              name="Checkmark"
+              color="var(--spectrum-global-color-blue-400)"
+            />
           {/if}
         </div>
       {/each}
@@ -220,8 +223,6 @@
     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;
@@ -239,7 +240,7 @@
     justify-content: space-between;
     align-items: center;
     gap: var(--cell-spacing);
-    background-color: var(--grid-background-alt);
+    background-color: var(--background);
   }
   .option:hover,
   .option.focused {

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

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

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

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

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

@@ -0,0 +1,92 @@
+<script>
+  import { getContext } from "svelte"
+  import { ActionButton, Popover } from "@budibase/bbui"
+  import { DefaultColumnWidth } from "../lib/constants"
+
+  const { stickyColumn, columns, compact } = getContext("grid")
+  const smallSize = 120
+  const mediumSize = DefaultColumnWidth
+  const largeSize = DefaultColumnWidth * 1.5
+
+  let open = false
+  let anchor
+
+  $: allCols = $columns.concat($stickyColumn ? [$stickyColumn] : [])
+  $: allSmall = allCols.every(col => col.width === smallSize)
+  $: allMedium = allCols.every(col => col.width === mediumSize)
+  $: allLarge = allCols.every(col => col.width === largeSize)
+  $: custom = !allSmall && !allMedium && !allLarge
+  $: sizeOptions = [
+    {
+      label: "Small",
+      size: smallSize,
+      selected: allSmall,
+    },
+    {
+      label: "Medium",
+      size: mediumSize,
+      selected: allMedium,
+    },
+    {
+      label: "Large",
+      size: largeSize,
+      selected: allLarge,
+    },
+  ]
+
+  const changeColumnWidth = async width => {
+    columns.update(state => {
+      state.forEach(column => {
+        column.width = width
+      })
+      return state
+    })
+    if ($stickyColumn) {
+      stickyColumn.update(state => ({
+        ...state,
+        width,
+      }))
+    }
+    await columns.actions.saveChanges()
+  }
+</script>
+
+<div bind:this={anchor}>
+  <ActionButton
+    icon="MoveLeftRight"
+    quiet
+    size="M"
+    on:click={() => (open = !open)}
+    selected={open}
+    disabled={!allCols.length}
+    tooltip={$compact ? "Width" : null}
+  >
+    {$compact ? "" : "Width"}
+  </ActionButton>
+</div>
+
+<Popover bind:open {anchor} align={$compact ? "right" : "left"}>
+  <div class="content">
+    {#each sizeOptions as option}
+      <ActionButton
+        quiet
+        on:click={() => changeColumnWidth(option.size)}
+        selected={option.selected}
+      >
+        {option.label}
+      </ActionButton>
+    {/each}
+    {#if custom}
+      <ActionButton selected={custom} quiet>Custom</ActionButton>
+    {/if}
+  </div>
+</Popover>
+
+<style>
+  .content {
+    padding: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+</style>

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

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

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

@@ -0,0 +1,71 @@
+<script>
+  import { getContext } from "svelte"
+  import { ActionButton, Popover } from "@budibase/bbui"
+  import {
+    LargeRowHeight,
+    MediumRowHeight,
+    SmallRowHeight,
+  } from "../lib/constants"
+
+  const { rowHeight, columns, table, compact } = getContext("grid")
+  const sizeOptions = [
+    {
+      label: "Small",
+      size: SmallRowHeight,
+    },
+    {
+      label: "Medium",
+      size: MediumRowHeight,
+    },
+    {
+      label: "Large",
+      size: LargeRowHeight,
+    },
+  ]
+
+  let open = false
+  let anchor
+
+  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}
+    tooltip={$compact ? "Height" : null}
+  >
+    {$compact ? "" : "Height"}
+  </ActionButton>
+</div>
+
+<Popover bind:open {anchor} align={$compact ? "right" : "left"}>
+  <div class="content">
+    {#each sizeOptions as option}
+      <ActionButton
+        quiet
+        selected={$rowHeight === option.size}
+        on:click={() => changeRowHeight(option.size)}
+      >
+        {option.label}
+      </ActionButton>
+    {/each}
+  </div>
+</Popover>
+
+<style>
+  .content {
+    padding: 12px;
+    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 } = getContext("grid")
+  const { sort, columns, stickyColumn, compact } = getContext("grid")
 
   let open = false
   let anchor
@@ -90,12 +90,13 @@
     on:click={() => (open = !open)}
     selected={open}
     disabled={!columnOptions.length}
+    tooltip={$compact ? "Sort" : ""}
   >
-    Sort
+    {$compact ? "" : "Sort"}
   </ActionButton>
 </div>
 
-<Popover bind:open {anchor} align="left">
+<Popover bind:open {anchor} align={$compact ? "right" : "left"}>
   <div class="content">
     <Select
       placeholder={null}