CB-4706 remove duplicated styles (#2689)

* CB-4705 remove duplicated styles

* CB-4706 pass ref

* CB-4706 review fixes

---------

Co-authored-by: mr-anton-t <[email protected]>

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

@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+.container {
+  outline: 0;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: auto;
+  user-select: none;
+  -webkit-user-select: none;
+}

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

@@ -30,12 +30,12 @@ import '@cloudbeaver/plugin-react-data-grid/react-data-grid-dist/lib/styles.css'
 
 import { CellPosition, EditingContext } from '../Editing/EditingContext';
 import { useEditing } from '../Editing/useEditing';
-import '../styles/base.scss';
 import { reactGridStyles } from '../styles/styles';
 import { CellRenderer } from './CellRenderer/CellRenderer';
 import { DataGridContext, IColumnResizeInfo, IDataGridContext } from './DataGridContext';
 import { DataGridSelectionContext } from './DataGridSelection/DataGridSelectionContext';
 import { useGridSelectionContext } from './DataGridSelection/useGridSelectionContext';
+import classes from './DataGridTable.module.css';
 import { CellFormatter } from './Formatters/CellFormatter';
 import { TableDataContext } from './TableDataContext';
 import { useGridDragging } from './useGridDragging';
@@ -435,7 +435,7 @@ export const DataGridTable = observer<IDataPresentationProps<any, IDatabaseResul
           <TableDataContext.Provider value={tableData}>
             <div
               ref={setContainersRef}
-              className="cb-react-grid-container"
+              className={`cb-react-grid-container ${classes.container}`}
               tabIndex={-1}
               onKeyDown={handleKeyDown}
               onMouseDown={onMouseDownHandler}

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

@@ -132,12 +132,6 @@ $deleted-color: rgba(255, 51, 0, 0.3);
       .rdg-cell-custom-deleted {
         background-color: $deleted-color !important;
       }
-
-      .cell-formatter {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
     }
   }
 }

webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/CellFormatter.module.css

@@ -24,7 +24,19 @@
   }
 }
 
+.cell {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
 .value {
   flex-grow: 1;
   flex-shrink: 1;
 }
+
+.cellValue {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/CellFormatter.tsx

@@ -61,7 +61,7 @@ export const Menu = observer<Props>(function Menu({ value, node }) {
   return (
     <div ref={mouse.reference} className={s(styles, { container: true, empty: menuEmpty })} onDoubleClick={openNode}>
       <div className={classes.box}>
-        <div className={s(styles, { value: true }, 'cell-formatter__value')} title={value}>
+        <div className={s(styles, { value: true, cellValue: true })} title={value}>
           {value}
         </div>
         {!menuEmpty && (
@@ -90,8 +90,8 @@ export const CellFormatter = observer<RenderCellProps<DBObject>>(function CellFo
   const value = property ? getValue(property.value) : '';
 
   return (
-    <div className="cell-formatter" title={value}>
-      {columnIdx === 0 && !!node ? <Menu node={node} value={value} /> : <span className="cell-formatter__value">{value}</span>}
+    <div className={classes.cell} title={value}>
+      {columnIdx === 0 && !!node ? <Menu node={node} value={value} /> : <span className={classes.cellValue}>{value}</span>}
     </div>
   );
 });

webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Columns/ColumnIcon/IconFormatter.module.css

@@ -8,6 +8,7 @@
 
 .icon {
   width: 100%;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;

webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Columns/ColumnSelect/SelectorFormatter.module.css

@@ -9,9 +9,11 @@
 .container {
   display: flex;
   width: 100%;
+  height: 100%;
   align-items: center;
   justify-content: center;
 }
+
 .checkbox {
   margin-left: -10px;
   margin-right: -10px;

webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/HeaderRenderer.module.css

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+.header {
+  text-transform: uppercase;
+}

webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/HeaderRenderer.tsx

@@ -11,11 +11,16 @@ import { useContext } from 'react';
 import type { DBObject } from '@cloudbeaver/core-navigation-tree';
 import type { RenderHeaderCellProps } from '@cloudbeaver/plugin-react-data-grid';
 
+import classes from './HeaderRenderer.module.css';
 import { TableContext } from './TableContext';
 
 export const HeaderRenderer = observer<RenderHeaderCellProps<DBObject>>(function HeaderRenderer(props) {
   const tableContext = useContext(TableContext);
   const dataColumn = tableContext.tableData?.columns.find(column => column.key === props.column.key);
 
-  return <div title={dataColumn?.description}>{props.column.name}</div>;
+  return (
+    <div className={classes.header} title={dataColumn?.description}>
+      {props.column.name}
+    </div>
+  );
 });

webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Table.tsx

@@ -24,7 +24,6 @@ import type { IDataColumn } from './Column';
 import { ColumnIcon } from './Columns/ColumnIcon/ColumnIcon';
 import { ColumnSelect } from './Columns/ColumnSelect/ColumnSelect';
 import { HeaderRenderer } from './HeaderRenderer';
-import './styles/base.scss';
 import { tableStyles } from './styles/styles';
 import classes from './Table.module.css';
 import { TableContext } from './TableContext';

webapp/packages/plugin-react-data-grid/src/DataGrid.tsx

@@ -0,0 +1,15 @@
+/*
+ * 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 { forwardRef } from 'react';
+import ReactDataGrid from 'react-data-grid';
+
+import './reset.css';
+
+export const DataGrid = forwardRef(function DataGrid(props, ref) {
+  return <ReactDataGrid {...props} ref={ref} className={['react-data-grid-container', props.className].join(' ')} />;
+}) as typeof ReactDataGrid;

webapp/packages/plugin-react-data-grid/src/DataGridLazy.ts

@@ -0,0 +1,10 @@
+/*
+ * 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 { importLazyComponent } from '@cloudbeaver/core-blocks';
+
+export const DataGrid = importLazyComponent(() => import('./DataGrid').then(m => m.DataGrid));

webapp/packages/plugin-react-data-grid/src/index.ts

@@ -5,7 +5,7 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import DataGrid from 'react-data-grid';
+import { DataGrid } from './DataGridLazy';
 
 export * from 'react-data-grid';
 export default DataGrid;

webapp/packages/plugin-react-data-grid/src/reset.css

@@ -0,0 +1,43 @@
+/*
+ * 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.
+ */
+
+.react-data-grid-container {
+  outline: 0 !important;
+  height: 100% !important;
+  background-color: inherit !important;
+  border: none !important;
+  font-family: inherit !important;
+  font-size: inherit !important;
+
+  * {
+    font-size: inherit !important;
+    font-family: inherit !important;
+  }
+
+  .rdg-header-row,
+  .rdg-row {
+    background-color: transparent !important;
+  }
+
+  .rdg-cell.rdg-cell-frozen {
+    box-shadow: none !important;
+  }
+
+  .rdg-cell-editing {
+    overflow: visible;
+    height: 24px;
+    box-shadow: none !important;
+  }
+
+  .rdg-editor-container {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+}