Allow edition display

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

@@ -11,7 +11,9 @@
   let open = false
   let anchor
 
-  $: restrictedColumns = $columns.filter(col => !col.visible || col.readonly)
+  $: allColumns = $stickyColumn ? [$stickyColumn, ...$columns] : $columns
+
+  $: restrictedColumns = allColumns.filter(col => !col.visible || col.readonly)
   $: anyRestricted = restrictedColumns.length
   $: text = anyRestricted ? `Columns (${anyRestricted} restricted)` : "Columns"
 
@@ -34,36 +36,44 @@
     HIDDEN: "hidden",
   }
 
-  const EDIT_OPTION = {
-    icon: "Edit",
-    value: PERMISSION_OPTIONS.WRITABLE,
-    tooltip: "Writable",
-  }
-  $: READONLY_OPTION = {
-    icon: "Visibility",
-    value: PERMISSION_OPTIONS.READONLY,
-    tooltip: allowViewReadonlyColumns
-      ? "Read only"
-      : "Read only (premium feature)",
-    disabled: !allowViewReadonlyColumns,
-  }
-  const HIDDEN_OPTION = {
-    icon: "VisibilityOff",
-    value: PERMISSION_OPTIONS.HIDDEN,
-    tooltip: "Hidden",
-  }
+  $: displayColumns = allColumns.map(c => {
+    const isDisplayColumn = $stickyColumn === c
 
-  $: options =
-    $datasource.type === "viewV2"
-      ? [EDIT_OPTION, READONLY_OPTION, HIDDEN_OPTION]
-      : [EDIT_OPTION, HIDDEN_OPTION]
+    const options = [
+      {
+        icon: "Edit",
+        value: PERMISSION_OPTIONS.WRITABLE,
+        tooltip: "Writable",
+      },
+    ]
+    if ($datasource.type === "viewV2") {
+      options.push({
+        icon: "Visibility",
+        value: PERMISSION_OPTIONS.READONLY,
+        tooltip: allowViewReadonlyColumns
+          ? "Read only"
+          : "Read only (premium feature)",
+        disabled: !allowViewReadonlyColumns,
+      })
+    }
+
+    options.push({
+      icon: "VisibilityOff",
+      value: PERMISSION_OPTIONS.HIDDEN,
+      tooltip: "Hidden",
+      disabled: isDisplayColumn,
+      tooltip: isDisplayColumn && "Display column cannot be hidden",
+    })
+
+    return { ...c, options }
+  })
 
   function columnToPermissionOptions(column) {
-    if (!column.visible) {
+    if (!column.schema.visible) {
       return PERMISSION_OPTIONS.HIDDEN
     }
 
-    if (column.readonly) {
+    if (column.schema.readonly) {
       return PERMISSION_OPTIONS.READONLY
     }
 
@@ -87,19 +97,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={options.map(o => ({ ...o, disabled: true }))}
-        />
-      {/if}
-      {#each $columns as column}
+      {#each displayColumns as column}
         <div class="column">
           <Icon size="S" name={getColumnIcon(column)} />
           {column.label}
@@ -107,7 +105,7 @@
         <ToggleActionButtonGroup
           on:click={e => toggleColumn(column, e.detail)}
           value={columnToPermissionOptions(column)}
-          {options}
+          options={column.options}
         />
       {/each}
     </div>