CB-5033 remove reshadow from log viewer and other packages (#2561)

* CB-5033 remove reshadow from log viewer and other packages

* CB-5033 remove unused code

* CB-5033 migrate small data viewer components to css modules

* CB-5033 review fixes

---------

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

Author: devnaumov

webapp/packages/core-utils/src/getProgressPercent.test.ts

@@ -0,0 +1,35 @@
+/*
+ * 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 { getProgressPercent } from './getProgressPercent';
+
+describe('getProgressPercent', () => {
+  it('calculates the correct percentage', () => {
+    expect(getProgressPercent(50, 100)).toBe(50);
+    expect(getProgressPercent(25, 100)).toBe(25);
+  });
+
+  it('returns 0% when nothing is done', () => {
+    expect(getProgressPercent(0, 100)).toBe(0);
+  });
+
+  it('returns 100% when done equals total', () => {
+    expect(getProgressPercent(100, 100)).toBe(100);
+  });
+
+  it('does not exceed 100%', () => {
+    expect(getProgressPercent(110, 100)).toBe(100);
+  });
+
+  it('does not drop below 0%', () => {
+    expect(getProgressPercent(-10, 100)).toBe(0);
+  });
+
+  it('handles total as zero without throwing error', () => {
+    expect(getProgressPercent(10, 0)).toBe(100);
+  });
+});

webapp/packages/core-utils/src/toSafeHtmlString.test.tsx renamed to webapp/packages/core-utils/src/toSafeHtmlString.test.ts

@@ -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.
+ */
+
+.tableViewerLoader {
+  padding: 8px;
+  padding-bottom: 0;
+}

webapp/packages/plugin-data-viewer/src/DataViewerPage/DataViewerPanel.m.css

@@ -7,22 +7,15 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useCallback } from 'react';
-import styled, { css } from 'reshadow';
 
 import { Loader, TextPlaceholder } from '@cloudbeaver/core-blocks';
 import type { ObjectPagePanelComponent } from '@cloudbeaver/plugin-object-viewer';
 
 import type { IDataViewerPageState } from '../IDataViewerPageState';
 import { TableViewerLoader } from '../TableViewer/TableViewerLoader';
+import classes from './DataViewerPanel.m.css';
 import { useDataViewerDatabaseDataModel } from './useDataViewerDatabaseDataModel';
 
-const styles = css`
-  TableViewerLoader {
-    padding: 8px;
-    padding-bottom: 0;
-  }
-`;
-
 export const DataViewerPanel: ObjectPagePanelComponent<IDataViewerPageState> = observer(function DataViewerPanel({ tab, page }) {
   const dataViewerDatabaseDataModel = useDataViewerDatabaseDataModel(tab);
   const pageState = page.getState(tab);
@@ -65,10 +58,11 @@ export const DataViewerPanel: ObjectPagePanelComponent<IDataViewerPageState> = o
     return <TextPlaceholder>Table model not loaded</TextPlaceholder>;
   }
 
-  return styled(styles)(
+  return (
     <Loader state={dataViewerDatabaseDataModel}>
       {tab.handlerState.tableId ? (
         <TableViewerLoader
+          className={classes.tableViewerLoader}
           tableId={tab.handlerState.tableId}
           resultIndex={pageState?.resultIndex}
           presentationId={pageState?.presentationId}
@@ -79,6 +73,6 @@ export const DataViewerPanel: ObjectPagePanelComponent<IDataViewerPageState> = o
       ) : (
         <TextPlaceholder>Table model not loaded</TextPlaceholder>
       )}
-    </Loader>,
+    </Loader>
   );
 });

webapp/packages/plugin-data-viewer/src/DataViewerPage/DataViewerPanel.tsx

@@ -5,14 +5,13 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import styled, { css } from 'reshadow';
 
-const styles = css`
-  fill {
-    flex: 1;
-  }
-`;
+.tableHeader {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
 
-export function Fill() {
-  return styled(styles)(<fill />);
+  &:empty {
+    display: none;
+  }
 }

webapp/packages/plugin-top-app-bar/src/TopNavBar/Fill.tsx renamed to webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeader.m.css

@@ -6,26 +6,14 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
-import { Placeholder } from '@cloudbeaver/core-blocks';
+import { Placeholder, s, useS } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 
 import type { IDatabaseDataModel } from '../../DatabaseDataModel/IDatabaseDataModel';
+import classes from './TableHeader.m.css';
 import { TableHeaderService } from './TableHeaderService';
 
-const styles = css`
-  table-header {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-
-    &:empty {
-      display: none;
-    }
-  }
-`;
-
 interface Props {
   model: IDatabaseDataModel<any, any>;
   resultIndex: number;
@@ -34,11 +22,12 @@ interface Props {
 }
 
 export const TableHeader = observer<Props>(function TableHeader({ model, resultIndex, simple, className }) {
+  const styles = useS(classes);
   const service = useService(TableHeaderService);
 
-  return styled(styles)(
-    <table-header className={className}>
+  return (
+    <div className={s(styles, { tableHeader: true }, className)}>
       <Placeholder container={service.tableHeaderPlaceholder} model={model} resultIndex={resultIndex} simple={simple} />
-    </table-header>,
+    </div>
   );
 });

webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableHeader.tsx

@@ -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.
+ */
+
+.statistics {
+  composes: theme-typography--caption from global;
+  flex: 1;
+  overflow: auto;
+  box-sizing: border-box;
+  white-space: pre-wrap;
+  padding: 16px;
+}

webapp/packages/plugin-data-viewer/src/TableViewer/TableStatistics.m.css

@@ -6,35 +6,25 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
-import { useTranslate } from '@cloudbeaver/core-blocks';
+import { s, useS, useTranslate } from '@cloudbeaver/core-blocks';
 
 import type { IDatabaseDataModel } from '../DatabaseDataModel/IDatabaseDataModel';
+import classes from './TableStatistics.m.css';
 
 interface Props {
   model: IDatabaseDataModel;
   resultIndex: number;
 }
 
-const styles = css`
-  statistics {
-    composes: theme-typography--caption from global;
-    flex: 1;
-    overflow: auto;
-    box-sizing: border-box;
-    white-space: pre-wrap;
-    padding: 16px;
-  }
-`;
-
 export const TableStatistics = observer<Props>(function TableStatistics({ model, resultIndex }) {
+  const styles = useS(classes);
   const translate = useTranslate();
   const source = model.source;
   const result = model.getResult(resultIndex);
 
-  return styled(styles)(
-    <statistics>
+  return (
+    <div className={s(styles, { statistics: true })}>
       {translate('data_viewer_statistics_status')} {source.requestInfo.requestMessage}
       <br />
       {translate('data_viewer_statistics_duration')} {source.requestInfo.requestDuration} ms
@@ -43,6 +33,6 @@ export const TableStatistics = observer<Props>(function TableStatistics({ model,
       <br />
       <br />
       <pre>{source.requestInfo.source}</pre>
-    </statistics>,
+    </div>
   );
 });

webapp/packages/plugin-data-viewer/src/TableViewer/TableStatistics.tsx

@@ -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 {
+  display: flex;
+  flex-direction: column;
+}
+
+.radio {
+  padding: 0;
+}

webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/BooleanValuePresentation.m.css

@@ -6,7 +6,6 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
 import { Radio, TextPlaceholder, useTranslate } from '@cloudbeaver/core-blocks';
 import type { TabContainerPanelComponent } from '@cloudbeaver/core-ui';
@@ -17,18 +16,9 @@ import { ResultSetSelectAction } from '../../DatabaseDataModel/Actions/ResultSet
 import { ResultSetViewAction } from '../../DatabaseDataModel/Actions/ResultSet/ResultSetViewAction';
 import type { IDatabaseResultSet } from '../../DatabaseDataModel/IDatabaseResultSet';
 import type { IDataValuePanelProps } from '../../TableViewer/ValuePanel/DataValuePanelService';
+import classes from './BooleanValuePresentation.m.css';
 import { isStringifiedBoolean } from './isBooleanValuePresentationAvailable';
 
-const styles = css`
-  container {
-    display: flex;
-    flex-direction: column;
-  }
-  Radio {
-    padding: 0;
-  }
-`;
-
 export const BooleanValuePresentation: TabContainerPanelComponent<IDataValuePanelProps<any, IDatabaseResultSet>> = observer(
   function BooleanValuePresentation({ model, resultIndex }) {
     const translate = useTranslate();
@@ -63,20 +53,41 @@ export const BooleanValuePresentation: TabContainerPanelComponent<IDataValuePane
     const nullable = column?.required === false;
     const readonly = model.isReadonly(resultIndex) || model.isDisabled(resultIndex) || format.isReadOnly(firstSelectedCell);
 
-    return styled(styles)(
-      <container>
-        <Radio id="true_value" mod={['primary']} checked={value === true} disabled={readonly} onClick={() => editor.set(firstSelectedCell, true)}>
+    return (
+      <div className={classes.container}>
+        <Radio
+          className={classes.radio}
+          id="true_value"
+          mod={['primary']}
+          checked={value === true}
+          disabled={readonly}
+          onClick={() => editor.set(firstSelectedCell, true)}
+        >
           TRUE
         </Radio>
-        <Radio id="false_value" mod={['primary']} checked={value === false} disabled={readonly} onClick={() => editor.set(firstSelectedCell, false)}>
+        <Radio
+          className={classes.radio}
+          id="false_value"
+          mod={['primary']}
+          checked={value === false}
+          disabled={readonly}
+          onClick={() => editor.set(firstSelectedCell, false)}
+        >
           FALSE
         </Radio>
         {nullable && (
-          <Radio id="null_value" mod={['primary']} checked={value === null} disabled={readonly} onClick={() => editor.set(firstSelectedCell, null)}>
+          <Radio
+            className={classes.radio}
+            id="null_value"
+            mod={['primary']}
+            checked={value === null}
+            disabled={readonly}
+            onClick={() => editor.set(firstSelectedCell, null)}
+          >
             NULL
           </Radio>
         )}
-      </container>,
+      </div>
     );
   },
 );

webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/BooleanValue/BooleanValuePresentation.tsx

@@ -31,8 +31,7 @@
     "@cloudbeaver/plugin-tools-panel": "~0.1.0",
     "mobx": "^6.12.0",
     "mobx-react-lite": "^4.0.5",
-    "react": "^18.2.0",
-    "reshadow": "^0.0.1"
+    "react": "^18.2.0"
   },
   "peerDependencies": {},
   "devDependencies": {

webapp/packages/plugin-log-viewer/package.json

@@ -0,0 +1,42 @@
+/*
+ * 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.
+ */
+
+.message {
+  word-break: break-word;
+  white-space: nowrap;
+  overflow: hidden;
+  padding-right: 16px;
+  text-overflow: ellipsis;
+}
+
+.messageCell {
+  display: flex;
+  align-items: center;
+}
+
+.link {
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.icon {
+  padding: 0;
+}
+
+.selected {
+  font-weight: 500;
+}
+
+.iconOrImage {
+  width: 24px;
+  height: 24px;
+}