#2690 highlight edited row

changelog/entries/unreleased/bug/2690_grid_view_highlight_edited_row.json

@@ -0,0 +1,7 @@
+{
+    "type": "bug",
+    "message": "Grid view: highlight edited row",
+    "issue_number": 2690,
+    "bullet_points": [],
+    "created_at": "2024-08-02"
+}

premium/web-frontend/modules/baserow_premium/components/views/BackgroundColorViewDecorator.vue

@@ -1,5 +1,9 @@
 <template functional>
-  <div :class="props.value ? `background-color--${props.value}` : ''">
+  <div
+    :class="
+      props.value ? `${data.class || ''} background-color--${props.value}` : ''
+    "
+  >
     <slot />
   </div>
 </template>

web-frontend/modules/core/assets/scss/components/views/grid.scss

@@ -247,6 +247,16 @@
     border: 2px solid $color-warning-500;
     pointer-events: none;
   }
+
+  &.grid-view__row--selected {
+    background-color: $palette-neutral-25;
+  }
+}
+
+// Exception when the row decorations are enabled, we don't want to have a row selected
+// background color.
+.grid-view__row-background-wrapper .grid-view__row--selected {
+  background-color: inherit;
 }
 
 .grid-view__row-placeholder {

web-frontend/modules/database/components/RecursiveWrapper.js

@@ -10,16 +10,21 @@ export default {
       type: Array,
       required: true,
     },
+    firstComponentClass: { type: String, required: false, default: null },
   },
   render(h, context) {
-    const rec = ([first, ...rest]) => {
+    const rec = ([first, ...rest], firstComponentClass = null) => {
       if (first) {
-        return h(first.component, { props: first.props }, rec(rest))
+        return h(
+          first.component,
+          { props: first.props, class: firstComponentClass },
+          rec(rest)
+        )
       } else {
         return context.slots().default
       }
     }
 
-    return rec(context.props.components)
+    return rec(context.props.components, context.props.firstComponentClass)
   },
 }

web-frontend/modules/database/components/view/grid/GridViewRow.vue

@@ -6,6 +6,7 @@
         props: comp.propsFn(row),
       }))
     "
+    first-component-class="grid-view__row-background-wrapper"
   >
     <div
       class="grid-view__row"