feat(plugin-data-spreadsheet-new): CB-1047 naming

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

@@ -21,15 +21,16 @@ import { TableDataContext } from '../TableDataContext';
 import { CellContext, ICellContext } from './CellContext';
 
 export const CellRenderer: React.FC<CellRendererProps<any>> = observer(function CellRenderer(props) {
+  const { rowIdx, column } = props;
   const dataGridContext = useContext(DataGridContext);
   const tableDataContext = useContext(TableDataContext);
   const selectionContext = useContext(DataGridSelectionContext);
   const editingContext = useContext(EditingContext);
+  const resultColumn = tableDataContext?.getColumnInfo(column.key);
   const editor = dataGridContext?.model.source.getEditor(dataGridContext.resultIndex);
   const mouse = useMouse<HTMLDivElement>({});
 
   const classes: string[] = [];
-  const { rowIdx, column } = props;
 
   if (selectionContext?.isSelected(rowIdx, column.idx)) {
     classes.push('rdg-cell-custom-selected');
@@ -78,7 +79,7 @@ export const CellRenderer: React.FC<CellRendererProps<any>> = observer(function
   }, [column, rowIdx, selectionContext, dataGridContext]);
 
   const handleDoubleClick = useCallback(() => {
-    if (!column.editable) {
+    if (!column.editable || resultColumn?.dataKind?.toLowerCase() === 'boolean') {
       return;
     }
     const format = dataGridContext?.model.source.getAction(dataGridContext.resultIndex, ResultSetFormatAction);

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

@@ -23,7 +23,7 @@ import { reactGridStyles } from '../styles/styles';
 import { DataGridContext, IColumnResizeInfo, IDataGridContext } from './DataGridContext';
 import { DataGridSelectionContext } from './DataGridSelection/DataGridSelectionContext';
 import { useGridSelectionContext } from './DataGridSelection/useGridSelectionContext';
-import { CellFormatterWrapper } from './Formatters/CellFormatterWrapper';
+import { CellFormatter } from './Formatters/CellFormatter';
 import { RowRenderer } from './RowRenderer/RowRenderer';
 import { TableDataContext } from './TableDataContext';
 import { useGridDragging } from './useGridDragging';
@@ -165,7 +165,7 @@ export const DataGridTable: React.FC<IDataPresentationProps<any, IDatabaseResult
                 defaultColumnOptions={{
                   minWidth: 50,
                   resizable: true,
-                  formatter: CellFormatterWrapper,
+                  formatter: CellFormatter,
                 }}
                 rows={tableData.rows}
                 headerRowHeight={28}

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

@@ -35,15 +35,14 @@ const styles = css`
   }
 `;
 
-export const CellFormatterWrapper: React.FC<Props> = observer(function CellFormatterWrapper({ className, ...rest }) {
-  const { column, rowIdx, isCellSelected } = rest;
+export const CellFormatter: React.FC<Props> = observer(function CellFormatter({ className, ...rest }) {
   const context = useContext(DataGridContext);
   const tableDataContext = useContext(TableDataContext);
   const cellContext = useContext(CellContext);
   const editingContext = useContext(EditingContext);
   const [menuVisible, setMenuVisible] = useState(false);
-  const showCellMenu = !editingContext?.isEditing({ idx: column.idx, rowIdx })
-    && (isCellSelected || cellContext?.mouse.state.mouseEnter || menuVisible);
+  const showCellMenu = !editingContext?.isEditing({ idx: rest.column.idx, rowIdx: rest.rowIdx })
+    && (rest.isCellSelected || cellContext?.mouse.state.mouseEnter || menuVisible);
 
   const spreadsheetActions = useObjectRef<IDataPresentationActions<IResultSetElementKey>>({
     edit(position) {
@@ -71,8 +70,8 @@ export const CellFormatterWrapper: React.FC<Props> = observer(function CellForma
             actions={context.actions}
             spreadsheetActions={spreadsheetActions}
             resultIndex={context.resultIndex}
-            row={rowIdx}
-            column={Number(column.key)}
+            row={rest.rowIdx}
+            column={Number(rest.column.key)}
             onStateSwitch={setMenuVisible}
           />
         </menu-container>

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/BooleanFormatter.tsx

@@ -17,10 +17,10 @@ import { DataGridContext } from '../../DataGridContext';
 import { TableDataContext } from '../../TableDataContext';
 
 const styles = css`
-  value {
+  boolean-formatter {
     cursor: pointer;
   }
-  value[|boolean] {
+  boolean-formatter[|boolean] {
     font-family: monospace;
     white-space: pre;
     line-height: 1;
@@ -55,16 +55,15 @@ export const BooleanFormatter: React.FC<FormatterProps> = observer(function Bool
   }, [resultColumn]);
 
   return styled(styles)(
-    <boolean-formatter as='div' className={`boolean-formatter ${classes}`} onDoubleClick={e => e.stopPropagation()}>
-      <value
-        as='span'
-        title={stringifiedValue}
-        onClick={() => context?.model.source.getEditor(context.resultIndex)
-          .setCell(rowIdx, Number(column.key), getNextValue(rawValue))}
-        {...use({ boolean: rawValue !== null })}
-      >
-        {value}
-      </value>
+    <boolean-formatter
+      className={classes}
+      as='span'
+      title={stringifiedValue}
+      onClick={() => context?.model.source.getEditor(context.resultIndex)
+        .setCell(rowIdx, Number(column.key), getNextValue(rawValue))}
+      {...use({ boolean: rawValue !== null })}
+    >
+      {value}
     </boolean-formatter>
   );
 });

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/TextFormatter.tsx

@@ -48,7 +48,7 @@ export const TextFormatter: React.FC<FormatterProps> = observer(function TextFor
 
   if (editingContext?.isEditing({ idx: column.idx, rowIdx })) {
     return (
-      <div className={`text-formatter ${classes}`}>
+      <div className={classes}>
         <CellEditor
           ref={editorRef}
           rowIdx={rowIdx}
@@ -61,7 +61,7 @@ export const TextFormatter: React.FC<FormatterProps> = observer(function TextFor
   }
 
   return styled()(
-    <text-formatter title={value} className={`text-formatter ${classes}`}>
+    <text-formatter title={value} className={classes}>
       {value}
     </text-formatter>
   );

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

@@ -88,6 +88,10 @@ export function useTableData(model: IDatabaseDataModel<any, IDatabaseResultSet>,
       return this.rows[rowIndex][key as number];
     },
     getColumnInfo(key: string | number): SqlResultColumn | undefined {
+      if (this.isIndexColumn(key)) {
+        return;
+      }
+
       return this.dataColumns[Number(key)];
     },
     getDataColumnIndexFromKey(key: string | number) {