fix(plugin-data-spreadsheet-new): CB-743 don't copy null values to clipboard

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

@@ -30,7 +30,13 @@ export const CellRenderer: React.FC<CellRendererProps<any>> = observer(function
   const { rowIdx, column } = props;
 
   if (selectionContext?.isSelected(rowIdx, column.idx)) {
-    classes.push('rdg-cell-custom-selected');
+    const columnIndex = tableDataContext?.getDataColumnIndexFromKey(column.key) ?? null;
+
+    if (columnIndex !== null && editor?.getCell(rowIdx, columnIndex) === null) {
+      classes.push('rdg-cell-custom-null-selected');
+    } else {
+      classes.push('rdg-cell-custom-selected');
+    }
   }
 
   if (editingContext?.isEditing({ idx: column.idx, rowIdx })) {

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

@@ -51,7 +51,6 @@ export const DataGridTable: React.FC<Props> = observer(function DataGridTable({
   const [columnResize] = useState(() => new Executor<IColumnResizeInfo>());
 
   const selectionAction = model.source.getAction(resultIndex, ResultSetSelectAction);
-  const modelResultData = model.getResult(resultIndex);
 
   const tableData = useTableData(model, resultIndex);
 
@@ -78,7 +77,7 @@ export const DataGridTable: React.FC<Props> = observer(function DataGridTable({
     },
   });
 
-  const { onKeydownHandler } = useGridSelectedCellsCopy(modelResultData, gridSelectionContext);
+  const { onKeydownHandler } = useGridSelectedCellsCopy(model, resultIndex, gridSelectionContext);
   const { onMouseDownHandler, onMouseMoveHandler } = useGridDragging({
     onDragStart: startPosition => {
       dataGridRef.current?.selectCell({ idx: startPosition.colIdx, rowIdx: startPosition.rowIdx });

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useGridSelectedCellsCopy.ts

@@ -9,9 +9,8 @@
 import { useCallback } from 'react';
 
 import { useObjectRef } from '@cloudbeaver/core-blocks';
-import type { SqlResultSet } from '@cloudbeaver/core-sdk';
 import { copyToClipboard } from '@cloudbeaver/core-utils';
-import type { IDatabaseDataResult } from '@cloudbeaver/plugin-data-viewer';
+import { IDatabaseDataModel, IDatabaseResultSet, ResultSetFormatAction } from '@cloudbeaver/plugin-data-viewer';
 
 import type { IDataGridSelectionContext } from './DataGridSelection/DataGridSelectionContext';
 
@@ -19,11 +18,12 @@ const EVENT_KEY_CODE = {
   C: 'KeyC',
 };
 
-function copyGridSelectedDataToClipboard(modelData: SqlResultSet, selectedCells: Map<number, number[]>) {
-  if (!modelData.rows) {
-    return;
-  }
-
+function copyGridSelectedDataToClipboard(
+  model: IDatabaseDataModel<any, IDatabaseResultSet>,
+  resultIndex: number,
+  selectedCells: Map<number, number[]>
+) {
+  const format = model.source.getAction(resultIndex, ResultSetFormatAction);
   const orderedSelectedCells: Map<number, number[]> = new Map([...selectedCells].sort((a, b) => a[0] - b[0]));
 
   const selectedColumns: Set<number> = new Set();
@@ -34,7 +34,7 @@ function copyGridSelectedDataToClipboard(modelData: SqlResultSet, selectedCells:
     }
   }
 
-  const columns = [...selectedColumns].sort();
+  const columns = [...selectedColumns].sort((a, b) => a - b);
 
   let data = '';
   for (const [rowIdx, colIndexes] of orderedSelectedCells) {
@@ -44,8 +44,12 @@ function copyGridSelectedDataToClipboard(modelData: SqlResultSet, selectedCells:
       }
 
       if (colIndexes.includes(column)) {
-        const value = modelData.rows?.[rowIdx][column];
-        data += value;
+        const cell = model.source.getEditor(resultIndex).getCell(rowIdx, column);
+        const cellValue = format.get(cell);
+        if (cellValue === null) {
+          continue;
+        }
+        data += cellValue;
       }
     }
     data += '\r\n';
@@ -58,17 +62,19 @@ function copyGridSelectedDataToClipboard(modelData: SqlResultSet, selectedCells:
 type IKeyboardEvent = React.KeyboardEvent<HTMLDivElement> & KeyboardEvent;
 
 export function useGridSelectedCellsCopy(
-  modelResultData: IDatabaseDataResult | null,
+  model: IDatabaseDataModel<any, IDatabaseResultSet>,
+  resultIndex: number,
   selectionContext: IDataGridSelectionContext
 ) {
-  const props = useObjectRef({ modelResultData, selectionContext });
-  const onKeydownHandler = useCallback((event: IKeyboardEvent) => {
-    if (!props.modelResultData) {
-      return;
-    }
+  const props = useObjectRef({ model, resultIndex, selectionContext });
 
+  const onKeydownHandler = useCallback((event: IKeyboardEvent) => {
     if ((event.ctrlKey || event.metaKey) && event.code === EVENT_KEY_CODE.C) {
-      copyGridSelectedDataToClipboard(props.modelResultData.data, props.selectionContext.selectedCells);
+      copyGridSelectedDataToClipboard(
+        props.model,
+        props.resultIndex,
+        props.selectionContext.selectedCells
+      );
     }
   }, []);
 

webapp/packages/plugin-data-spreadsheet-new/src/styles/themes/_base-react-grid.scss

@@ -16,9 +16,14 @@ $edited-color: #ff99006b;
       .rdg-cell-custom-selected:not(.rdg-cell-custom-editing) {
         background-color: rgba(0, 145, 234, 0.3);
       }
+      .rdg-cell-custom-null-selected:not(.rdg-cell-custom-editing) {
+        background-color: rgba(0, 145, 234, 0.1);
+      }
+
       .rdg-cell-selected {
         box-shadow: inset 0 0 0 1px #0091ea;
       }
+
       .rdg-cell-custom-editing {
         box-shadow: none;
       }
@@ -56,7 +61,8 @@ $edited-color: #ff99006b;
         @include mdc-theme-prop(background-color, surface, false);
       }
 
-      .rdg-cell-custom-selected {
+      .rdg-cell-custom-selected,
+      .rdg-cell-custom-null-selected {
         background-color: rgba(150, 150, 150, 0.3);
         box-shadow: none;
       }