From 896c262c943ae0874fba548f398ffe6aa930f47b Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 30 May 2024 10:52:17 +0200
Subject: [PATCH] Add readonly option in view columns

---
 .../backend/DataTable/ViewV2DataTable.svelte  |  1 +
 .../grid/controls/ColumnsSettingButton.svelte | 41 ++++++++++++++-----
 .../src/components/grid/layout/Grid.svelte    |  3 +-
 3 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte b/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte
index 3b628c7b53..9b0e45a1b2 100644
--- a/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte
@@ -28,6 +28,7 @@
     showAvatars={false}
     on:updatedatasource={handleGridViewUpdate}
     isCloud={$admin.cloud}
+    allowReadonlyColumns
   >
     <svelte:fragment slot="filter">
       <GridFilterButton />
diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
index 0a85e41966..70655bd5a3 100644
--- a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
@@ -1,9 +1,11 @@
 <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"
 
+  export let allowReadonlyColumns = false
+
   const { columns, datasource, stickyColumn, dispatch } = getContext("grid")
 
   let open = false
@@ -14,9 +16,14 @@
 
   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()
+    datasource.actions.addSchemaMutation(column.name, { visible, readonly })
+    try {
+      await datasource.actions.saveSchemaMutations()
+    } catch (e) {
+      notifications.error(e.message)
+    }
     dispatch(visible ? "show-column" : "hide-column")
   }
 
@@ -27,17 +34,29 @@
 
   const PERMISSION_OPTIONS = {
     WRITABLE: "writable",
+    READONLY: "readonly",
     HIDDEN: "hidden",
   }
 
-  const options = [
-    { icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE, tooltip: "Writable" },
-    {
-      icon: "VisibilityOff",
-      value: PERMISSION_OPTIONS.HIDDEN,
-      tooltip: "Hidden",
-    },
-  ]
+  const EDIT_OPTION = {
+    icon: "Edit",
+    value: PERMISSION_OPTIONS.WRITABLE,
+    tooltip: "Writable",
+  }
+  const READONLY_OPTION = {
+    icon: "Visibility",
+    value: PERMISSION_OPTIONS.READONLY,
+    tooltip: "Read only",
+  }
+  const HIDDEN_OPTION = {
+    icon: "VisibilityOff",
+    value: PERMISSION_OPTIONS.HIDDEN,
+    tooltip: "Hidden",
+  }
+
+  $: options = allowReadonlyColumns
+    ? [EDIT_OPTION, READONLY_OPTION, HIDDEN_OPTION]
+    : [EDIT_OPTION, HIDDEN_OPTION]
 
   function columnToPermissionOptions(column) {
     if (!column.visible) {
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 0a3075a61f..97ccc60f8c 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -57,6 +57,7 @@
   export let buttons = null
   export let darkMode
   export let isCloud = null
+  export let allowReadonlyColumns = 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 {allowReadonlyColumns} />
         <SizeButton />
         <slot name="controls" />
       </div>