CB-5052 [2562 FR] Highlight the row where any field is currently selected

webapp/packages/plugin-data-spreadsheet-new/package.json

@@ -29,6 +29,7 @@
     "@cloudbeaver/core-localization": "^0",
     "@cloudbeaver/core-sdk": "^0",
     "@cloudbeaver/core-settings": "^0",
+    "@cloudbeaver/core-theming": "^0",
     "@cloudbeaver/core-ui": "^0",
     "@cloudbeaver/core-utils": "^0",
     "@cloudbeaver/core-view": "^0",
@@ -59,6 +60,7 @@
     "@cloudbeaver/core-sdk": "^0",
     "@cloudbeaver/core-settings": "^0",
     "@cloudbeaver/core-storage": "^0",
+    "@cloudbeaver/core-theming": "^0",
     "@cloudbeaver/core-ui": "^0",
     "@cloudbeaver/core-view": "^0",
     "@cloudbeaver/plugin-data-viewer": "^0",

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/CellRenderer/CellRenderer.tsx

@@ -87,9 +87,13 @@ export const CellRenderer = observer<CellRendererProps<IResultSetRowKey, unknown
     { row, column, rowIdx, isCellSelected },
   );
 
+  const isDatabaseActionApplied = getComputed(() =>
+    [DatabaseEditChangeType.add, DatabaseEditChangeType.delete, DatabaseEditChangeType.update].includes(cellContext.editionState!),
+  );
+
   const classes = getComputed(() =>
     clsx({
-      'rdg-cell-custom-highlighted-row': cellContext.hasFocusedElementInRow,
+      'rdg-cell-custom-highlighted-row': cellContext.hasFocusedElementInRow && !isDatabaseActionApplied,
       'rdg-cell-custom-selected': cellContext.isSelected,
       'rdg-cell-custom-editing': cellContext.isEditing,
       'rdg-cell-custom-added': cellContext.editionState === DatabaseEditChangeType.add,

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.module.css

@@ -13,7 +13,7 @@
   --data-grid-readonly-status-color: #e28835;
   --data-grid-cell-selection-background-color: rgba(150, 150, 150, 0.2);
   --data-grid-cell-selection-background-color-focus: rgba(0, 145, 234, 0.2);
-  --data-grid-cell-row-index-color: rgb(111, 165, 198);
+  --data-grid-cell-row-index-color: var(--data-grid-index-color);
   --rdg-selected-row-color: var(--theme-secondary) !important;
 
   composes: theme-typography--caption from global;

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx

@@ -35,6 +35,7 @@ import {
 
 import { type CellPosition, EditingContext } from '../Editing/EditingContext.js';
 import { useEditing } from '../Editing/useEditing.js';
+import { DATA_GRID_BASE_STYLES } from '../theme/styles.js';
 import { CellRenderer } from './CellRenderer/CellRenderer.js';
 import { DataGridContext, type IColumnResizeInfo, type IDataGridContext } from './DataGridContext.js';
 import { DataGridSelectionContext } from './DataGridSelection/DataGridSelectionContext.js';
@@ -62,7 +63,7 @@ const MAX_CELL_TEXT_SIZE = 100 * 1024;
 
 export const DataGridTable = observer<IDataPresentationProps>(function DataGridTable({ model, actions, resultIndex, simple, className, ...rest }) {
   const translate = useTranslate();
-  const styles = useS(classes);
+  const styles = useS(classes, DATA_GRID_BASE_STYLES);
 
   const clipboardService = useService(ClipboardService);
   const gridContainerRef = useRef<HTMLDivElement | null>(null);

webapp/packages/plugin-data-spreadsheet-new/src/theme/dark.module.scss

@@ -0,0 +1,13 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+@import '@cloudbeaver/core-theming/src/styles/theme-dark';
+
+:global .#{$theme-class} {
+  --data-grid-index-color: #32475e;
+}

webapp/packages/plugin-data-spreadsheet-new/src/theme/light.module.scss

@@ -0,0 +1,12 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+@import '@cloudbeaver/core-theming/src/styles/theme-light';
+
+:global .#{$theme-class} {
+  --data-grid-index-color: #c2d8ee;
+}

webapp/packages/plugin-data-spreadsheet-new/src/theme/styles.ts

@@ -0,0 +1,28 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import type { ThemeSelector } from '@cloudbeaver/core-theming';
+
+import type Dark from './dark.module.scss';
+import type Light from './light.module.scss';
+
+export const DATA_GRID_BASE_STYLES: ThemeSelector = async theme => {
+  let styles: typeof Light & typeof Dark;
+  const dark = (await import('./dark.module.scss')).default;
+  const light = (await import('./light.module.scss')).default;
+
+  switch (theme) {
+    case 'dark':
+      styles = dark;
+      break;
+    default:
+      styles = light;
+      break;
+  }
+
+  return styles;
+};