@budibase/frontend-core 2.27.6 → 2.28.1

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.27.6",
+  "version": "2.28.1",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "2.27.6",
-    "@budibase/shared-core": "2.27.6",
-    "@budibase/types": "2.27.6",
+    "@budibase/bbui": "2.28.1",
+    "@budibase/shared-core": "2.28.1",
+    "@budibase/types": "2.28.1",
     "dayjs": "^1.10.8",
     "lodash": "4.17.21",
     "shortid": "2.2.15",
     "socket.io-client": "^4.6.1"
   },
-  "gitHead": "67671b9dfc8698315cb394a427266a4d184b0e26"
+  "gitHead": "bfc37dbd5fd873e1008aee5771997a273a1b2d8d"
 }

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

@@ -33,7 +33,8 @@
     column.schema.autocolumn ||
     column.schema.disabled ||
     column.schema.type === "formula" ||
-    (!$config.canEditRows && !row._isNewRow)
+    (!$config.canEditRows && !row._isNewRow) ||
+    column.schema.readonly
 
   // Register this cell API if the row is focused
   $: {

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

@@ -1,49 +1,98 @@
 <script>
   import { getContext } from "svelte"
-  import { ActionButton, Popover, Icon } from "@budibase/bbui"
+  import { ActionButton, Popover, Icon, notifications } from "@budibase/bbui"
   import { getColumnIcon } from "../lib/utils"
   import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
+  import { helpers } from "@budibase/shared-core"
+
+  export let allowViewReadonlyColumns = false
 
   const { columns, datasource, stickyColumn, dispatch } = getContext("grid")
 
   let open = false
   let anchor
 
-  $: anyHidden = $columns.some(col => !col.visible)
-  $: text = getText($columns)
+  $: allColumns = $stickyColumn ? [$stickyColumn, ...$columns] : $columns
+
+  $: restrictedColumns = allColumns.filter(col => !col.visible || col.readonly)
+  $: anyRestricted = restrictedColumns.length
+  $: text = anyRestricted ? `Columns (${anyRestricted} restricted)` : "Columns"
 
   const toggleColumn = async (column, permission) => {
     const visible = permission !== PERMISSION_OPTIONS.HIDDEN
+    const readonly = permission === PERMISSION_OPTIONS.READONLY
 
-    datasource.actions.addSchemaMutation(column.name, { visible })
-    await datasource.actions.saveSchemaMutations()
+    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()
+    }
     dispatch(visible ? "show-column" : "hide-column")
   }
 
-  const getText = columns => {
-    const hidden = columns.filter(col => !col.visible).length
-    return hidden ? `Columns (${hidden} restricted)` : "Columns"
-  }
-
   const PERMISSION_OPTIONS = {
     WRITABLE: "writable",
+    READONLY: "readonly",
     HIDDEN: "hidden",
   }
 
-  const options = [
-    { icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE, tooltip: "Writable" },
-    {
+  $: displayColumns = allColumns.map(c => {
+    const isRequired = helpers.schema.isRequired(c.schema.constraints)
+    const isDisplayColumn = $stickyColumn === c
+
+    const requiredTooltip = isRequired && "Required columns must be writable"
+
+    const editEnabled =
+      !isRequired ||
+      columnToPermissionOptions(c) !== PERMISSION_OPTIONS.WRITABLE
+    const options = [
+      {
+        icon: "Edit",
+        value: PERMISSION_OPTIONS.WRITABLE,
+        tooltip: (!editEnabled && requiredTooltip) || "Writable",
+        disabled: !editEnabled,
+      },
+    ]
+    if ($datasource.type === "viewV2") {
+      options.push({
+        icon: "Visibility",
+        value: PERMISSION_OPTIONS.READONLY,
+        tooltip: allowViewReadonlyColumns
+          ? requiredTooltip || "Read only"
+          : "Read only (premium feature)",
+        disabled: !allowViewReadonlyColumns || isRequired,
+      })
+    }
+
+    options.push({
       icon: "VisibilityOff",
       value: PERMISSION_OPTIONS.HIDDEN,
-      tooltip: "Hidden",
-    },
-  ]
+      disabled: isDisplayColumn || isRequired,
+      tooltip:
+        (isDisplayColumn && "Display column cannot be hidden") ||
+        requiredTooltip ||
+        "Hidden",
+    })
+
+    return { ...c, options }
+  })
 
   function columnToPermissionOptions(column) {
-    if (!column.visible) {
+    if (!column.schema.visible) {
       return PERMISSION_OPTIONS.HIDDEN
     }
 
+    if (column.schema.readonly) {
+      return PERMISSION_OPTIONS.READONLY
+    }
+
     return PERMISSION_OPTIONS.WRITABLE
   }
 </script>
@@ -54,7 +103,7 @@
     quiet
     size="M"
     on:click={() => (open = !open)}
-    selected={open || anyHidden}
+    selected={open || anyRestricted}
     disabled={!$columns.length}
   >
     {text}
@@ -64,19 +113,7 @@
 <Popover bind:open {anchor} align="left">
   <div class="content">
     <div class="columns">
-      {#if $stickyColumn}
-        <div class="column">
-          <Icon size="S" name={getColumnIcon($stickyColumn)} />
-          {$stickyColumn.label}
-        </div>
-
-        <ToggleActionButtonGroup
-          disabled
-          value={PERMISSION_OPTIONS.WRITABLE}
-          {options}
-        />
-      {/if}
-      {#each $columns as column}
+      {#each displayColumns as column}
         <div class="column">
           <Icon size="S" name={getColumnIcon(column)} />
           {column.label}
@@ -84,7 +121,7 @@
         <ToggleActionButtonGroup
           on:click={e => toggleColumn(column, e.detail)}
           value={columnToPermissionOptions(column)}
-          {options}
+          options={column.options}
         />
       {/each}
     </div>

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

@@ -7,7 +7,6 @@
 
   export let value
   export let options
-  export let disabled
 </script>
 
 <div class="permissionPicker">
@@ -15,7 +14,7 @@
     <AbsTooltip text={option.tooltip} type={TooltipType.Info}>
       <ActionButton
         on:click={() => dispatch("click", option.value)}
-        {disabled}
+        disabled={option.disabled}
         size="S"
         icon={option.icon}
         quiet

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

@@ -57,6 +57,7 @@
   export let buttons = null
   export let darkMode
   export let isCloud = null
+  export let allowViewReadonlyColumns = false
 
   // Unique identifier for DOM nodes inside this instance
   const gridID = `grid-${Math.random().toString().slice(2)}`
@@ -153,7 +154,7 @@
       <div class="controls-left">
         <slot name="filter" />
         <SortButton />
-        <ColumnsSettingButton />
+        <ColumnsSettingButton {allowViewReadonlyColumns} />
         <SizeButton />
         <slot name="controls" />
       </div>

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

@@ -146,6 +146,7 @@ export const initialise = context => {
             schema: fieldSchema,
             width: fieldSchema.width || oldColumn?.width || DefaultColumnWidth,
             visible: fieldSchema.visible ?? true,
+            readonly: fieldSchema.readonly,
             order: fieldSchema.order ?? oldColumn?.order,
             primaryDisplay: field === primaryDisplay,
           }

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

@@ -204,6 +204,10 @@ export const createActions = context => {
       ...$definition,
       schema: newSchema,
     })
+    resetSchemaMutations()
+  }
+
+  const resetSchemaMutations = () => {
     schemaMutations.set({})
   }
 
@@ -253,6 +257,7 @@ export const createActions = context => {
         addSchemaMutation,
         addSchemaMutations,
         saveSchemaMutations,
+        resetSchemaMutations,
       },
     },
   }