From 2029d6ae59a83fa44106c08ad8bbb1ab2d6e6996 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 6 Mar 2025 16:43:30 +0000
Subject: [PATCH] Remove grid checkboxes if not relevant, improve quiet styles,
 fix issue with default conditions

---
 .../src/components/grid/cells/GutterCell.svelte  | 16 ++++++++++------
 .../src/components/grid/layout/Grid.svelte       |  9 +++++++--
 .../src/components/grid/stores/config.ts         | 11 +++++++++--
 packages/server/src/constants/screens.ts         |  1 +
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
index 349fea332c..f67aa99764 100644
--- a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
@@ -56,7 +56,7 @@
   rowIdx={row?.__idx}
   metadata={row?.__metadata?.row}
 >
-  <div class="gutter">
+  <div class="gutter" class:selectable={$config.canSelectRows}>
     {#if $$slots.default}
       <slot />
     {:else}
@@ -116,12 +116,9 @@
     margin: 3px 0 0 0;
   }
   .number {
-    color: val(--cell-font-color, var(--spectrum-global-color-gray-500));
-  }
-  .checkbox.visible,
-  .number.visible {
-    display: flex;
+    color: var(--spectrum-global-color-gray-500);
   }
+
   .delete,
   .expand {
     margin-right: 4px;
@@ -137,4 +134,11 @@
   .delete:hover :global(.spectrum-Icon) {
     color: var(--spectrum-global-color-red-600) !important;
   }
+
+  /* Visibility of checkbox and number */
+  .gutter.selectable .checkbox.visible,
+  .number.visible,
+  .gutter:not(.selectable) .number {
+    display: flex;
+  }
 </style>
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 1a0488d9a4..1a7cb64534 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -354,11 +354,16 @@
 
   /* Overrides for quiet */
   .grid.quiet :global(.grid-data-content .row > .cell:not(:last-child)),
-  .grid.quiet :global(.sticky-column .row > .cell),
-  .grid.quiet :global(.new-row .row > .cell:not(:last-child)) {
+  .grid.quiet :global(.sticky-column .row .cell),
+  .grid.quiet :global(.new-row .row > .cell:not(:last-child)),
+  .grid.quiet :global(.header-cell:not(:last-child) .cell) {
     border-right: none;
   }
   .grid.quiet :global(.sticky-column:before) {
     display: none;
   }
+  .grid.quiet :global(.header),
+  .grid.quiet :global(.header .cell) {
+    background: var(--grid-background);
+  }
 </style>
diff --git a/packages/frontend-core/src/components/grid/stores/config.ts b/packages/frontend-core/src/components/grid/stores/config.ts
index 2ddaf1b65c..9245289565 100644
--- a/packages/frontend-core/src/components/grid/stores/config.ts
+++ b/packages/frontend-core/src/components/grid/stores/config.ts
@@ -7,8 +7,12 @@ type ConfigStore = {
   [key in keyof BaseStoreProps]: Readable<BaseStoreProps[key]>
 }
 
+interface ConfigState extends BaseStoreProps {
+  canSelectRows: boolean
+}
+
 interface ConfigDerivedStore {
-  config: Readable<BaseStoreProps>
+  config: Readable<ConfigState>
 }
 
 export type Store = ConfigStore & ConfigDerivedStore
@@ -47,7 +51,7 @@ export const deriveStores = (context: StoreContext): ConfigDerivedStore => {
   const config = derived(
     [props, definition, hasNonAutoColumn],
     ([$props, $definition, $hasNonAutoColumn]) => {
-      let config = { ...$props }
+      let config: ConfigState = { ...$props, canSelectRows: false }
       const type = $props.datasource?.type
 
       // Disable some features if we're editing a view
@@ -78,6 +82,9 @@ export const deriveStores = (context: StoreContext): ConfigDerivedStore => {
         config.canEditColumns = false
       }
 
+      // Determine if we can select rows
+      config.canSelectRows = false //!!config.canDeleteRows || !!config.canAddRows
+
       return config
     }
   )
diff --git a/packages/server/src/constants/screens.ts b/packages/server/src/constants/screens.ts
index 764250bd03..51d7049746 100644
--- a/packages/server/src/constants/screens.ts
+++ b/packages/server/src/constants/screens.ts
@@ -296,6 +296,7 @@ export function createSampleDataTableScreen(): Screen {
               active: true,
               conditions: [
                 {
+                  id: Math.random(),
                   target: "row",
                   metadataKey: "backgroundColor",
                   operator: "contains",