Add ToggleActionButtonGroup

packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte

@@ -2,6 +2,7 @@
   import { getContext } from "svelte"
   import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui"
   import { getColumnIcon } from "../lib/utils"
+  import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
 
   const { columns, datasource, stickyColumn, dispatch } = getContext("grid")
 
@@ -11,8 +12,11 @@
   $: anyHidden = $columns.some(col => !col.visible)
   $: text = getText($columns)
 
-  const toggleColumn = async (column, visible) => {
-    datasource.actions.addSchemaMutation(column.name, { visible })
+  const toggleColumn = async (column, permission) => {
+    const visible = permission !== PERMISSION_OPTIONS.HIDDEN
+    const readonly = permission === PERMISSION_OPTIONS.READONLY
+
+    datasource.actions.addSchemaMutation(column.name, { visible, readonly })
     await datasource.actions.saveSchemaMutations()
     dispatch(visible ? "show-column" : "hide-column")
   }
@@ -21,6 +25,24 @@
     const hidden = columns.filter(col => !col.visible).length
     return hidden ? `Columns (${hidden})` : "Columns"
   }
+
+  const PERMISSION_OPTIONS = {
+    WRITABLE: "writable",
+    READONLY: "readonly",
+    HIDDEN: "hidden",
+  }
+
+  function columnToPermissionOptions(column) {
+    if (!column.visible) {
+      return PERMISSION_OPTIONS.HIDDEN
+    }
+
+    if (column.readonly) {
+      return PERMISSION_OPTIONS.READONLY
+    }
+
+    return PERMISSION_OPTIONS.WRITABLE
+  }
 </script>
 
 <div bind:this={anchor}>
@@ -51,11 +73,14 @@
           <Icon size="S" name={getColumnIcon(column)} />
           {column.label}
         </div>
-        <Toggle
-          size="S"
-          value={column.visible}
+        <ToggleActionButtonGroup
           on:change={e => toggleColumn(column, e.detail)}
-          disabled={column.primaryDisplay}
+          value={columnToPermissionOptions(column)}
+          options={[
+            { icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE },
+            { icon: "Visibility", value: PERMISSION_OPTIONS.READONLY },
+            { icon: "VisibilityOff", value: PERMISSION_OPTIONS.HIDDEN },
+          ]}
         />
       {/each}
     </div>

packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte

@@ -0,0 +1,25 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+
+  import { ActionButton } from "@budibase/bbui"
+
+  export let value
+  export let options
+
+  let dispatch = createEventDispatcher()
+  const onClick = value => {
+    dispatch("change", value)
+  }
+</script>
+
+<div>
+  {#each options as option}
+    <ActionButton
+      on:click={() => onClick(option.value)}
+      size="S"
+      icon={option.icon}
+      quiet
+      selected={option.value === value}
+    />
+  {/each}
+</div>