Ensure all sheet feature flags work as expected and fix multi row deletion

packages/bbui/src/Actions/click_outside.js

@@ -6,6 +6,9 @@ let clickHandlers = []
  */
 const handleClick = event => {
   // Ignore click if this is an ignored class
+  if (event.target.closest('[data-ignore-click-outside="true"]')) {
+    return
+  }
   for (let className of ignoredClasses) {
     if (event.target.closest(className)) {
       return
@@ -29,7 +32,7 @@ const handleClick = event => {
   })
 }
 document.documentElement.addEventListener("click", handleClick, true)
-document.documentElement.addEventListener("contextmenu", handleClick, true)
+// document.documentElement.addEventListener("contextmenu", handleClick, true)
 
 /**
  * Adds or updates a click handler

packages/frontend-core/src/components/sheet/cells/DataCell.svelte

@@ -3,7 +3,8 @@
   import SheetCell from "./SheetCell.svelte"
   import { getCellRenderer } from "../lib/renderers"
 
-  const { rows, selectedCellId, menu, selectedCellAPI } = getContext("sheet")
+  const { rows, selectedCellId, menu, selectedCellAPI, config } =
+    getContext("sheet")
 
   export let rowSelected
   export let rowHovered
@@ -22,10 +23,13 @@
   let api
   let error
 
+  // Determine if the cell is editable
+  $: readonly = column.schema.autocolumn || (!$config.allowEditRows && row._id)
+
   // Build cell API
   $: cellAPI = {
     ...api,
-    isReadonly: () => !!column.schema.autocolumn,
+    isReadonly: () => readonly,
     isRequired: () => !!column.schema.constraints?.presence,
     updateValue: value => {
       error = null
@@ -80,7 +84,7 @@
       schema={column.schema}
       {selected}
       onChange={cellAPI.updateValue}
-      readonly={column.schema.autocolumn}
+      {readonly}
       {invert}
     />
   {/if}

packages/frontend-core/src/components/sheet/cells/LongFormCell.svelte

@@ -98,6 +98,7 @@
   }
   textarea.invert {
     transform: translateY(-100%);
+    top: calc(100% + 1px);
   }
   textarea:focus {
     outline: none;

packages/frontend-core/src/components/sheet/controls/DeleteButton.svelte

@@ -7,7 +7,7 @@
   } from "@budibase/bbui"
   import { getContext } from "svelte"
 
-  const { selectedRows, rows } = getContext("sheet")
+  const { selectedRows, rows, config } = getContext("sheet")
 
   let modal
 
@@ -31,12 +31,13 @@
 </script>
 
 {#if selectedRowCount}
-  <div
-    class="delete-button"
-    on:click|stopPropagation
-    on:mousedown|stopPropagation={modal.show}
+  <div class="delete-button" data-ignore-click-outside="true">
+    <ActionButton
+      icon="Delete"
+      size="S"
+      on:click={modal.show}
+      disabled={!$config.allowEditRows}
     >
-    <ActionButton icon="Delete" size="S">
       Delete {selectedRowCount} row{selectedRowCount === 1 ? "" : "s"}
     </ActionButton>
   </div>
@@ -56,12 +57,16 @@
 </Modal>
 
 <style>
-  .delete-button {
-  }
-  .delete-button :global(.spectrum-ActionButton *) {
+  .delete-button :global(.spectrum-ActionButton:not(:disabled) *) {
     color: var(--spectrum-global-color-red-400);
   }
-  .delete-button :global(.spectrum-ActionButton) {
+  .delete-button :global(.spectrum-ActionButton:not(:disabled)) {
     border-color: var(--spectrum-global-color-red-400);
   }
+  /*.delete-button.disabled :global(.spectrum-ActionButton *) {*/
+  /*  color: var(--spectrum-global-color-gray-600);*/
+  /*}*/
+  /*.delete-button.disabled :global(.spectrum-ActionButton) {*/
+  /*  border-color: var(--spectrum-global-color-gray-400);*/
+  /*}*/
 </style>

packages/frontend-core/src/components/sheet/layout/Sheet.svelte

@@ -36,6 +36,7 @@
   export let allowAddColumns = true
   export let allowEditColumns = true
   export let allowExpandRows = true
+  export let allowEditRows = true
 
   // Sheet constants
   const cellHeight = 36
@@ -50,6 +51,7 @@
     allowAddColumns,
     allowEditColumns,
     allowExpandRows,
+    allowEditRows,
   })
 
   // Build up spreadsheet context
@@ -88,6 +90,7 @@
     allowAddColumns,
     allowEditColumns,
     allowExpandRows,
+    allowEditRows,
   })
 
   // Set context for children to consume

packages/frontend-core/src/components/sheet/overlays/MenuOverlay.svelte

@@ -1,14 +1,16 @@
 <script>
-  import {
-    clickOutside,
-    Menu,
-    MenuItem,
-    notifications,
-  } from "@budibase/bbui"
+  import { clickOutside, Menu, MenuItem, notifications } from "@budibase/bbui"
   import { getContext } from "svelte"
 
-  const { selectedCellRow, menu, rows, columns, selectedCellId, stickyColumn } =
-    getContext("sheet")
+  const {
+    selectedCellRow,
+    menu,
+    rows,
+    columns,
+    selectedCellId,
+    stickyColumn,
+    config,
+  } = getContext("sheet")
 
   $: style = makeStyle($menu)
 
@@ -39,8 +41,16 @@
 {#if $menu.visible}
   <div class="menu" {style} use:clickOutside={() => menu.actions.close()}>
     <Menu>
-      <MenuItem icon="Delete" on:click={deleteRow}>Delete row</MenuItem>
-      <MenuItem icon="Duplicate" on:click={duplicate}>Duplicate row</MenuItem>
+      <MenuItem
+        icon="Delete"
+        disabled={!$config.allowEditRows}
+        on:click={deleteRow}>Delete row</MenuItem
+      >
+      <MenuItem
+        icon="Duplicate"
+        disabled={!$config.allowAddRows}
+        on:click={duplicate}>Duplicate row</MenuItem
+      >
     </Menu>
   </div>
 {/if}