Skip to content

Commit 01ea479

Browse files
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]>
1 parent 7aaee50 commit 01ea479

File tree

29 files changed

+306
-371
lines changed

29 files changed

+306
-371
lines changed
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/*
2+
* CloudBeaver - Cloud Database Manager
3+
* Copyright (C) 2020-2024 DBeaver Corp and others
4+
*
5+
* Licensed under the Apache License, Version 2.0.
6+
* you may not use this file except in compliance with the License.
7+
*/
8+
import { getProgressPercent } from './getProgressPercent';
9+
10+
describe('getProgressPercent', () => {
11+
it('calculates the correct percentage', () => {
12+
expect(getProgressPercent(50, 100)).toBe(50);
13+
expect(getProgressPercent(25, 100)).toBe(25);
14+
});
15+
16+
it('returns 0% when nothing is done', () => {
17+
expect(getProgressPercent(0, 100)).toBe(0);
18+
});
19+
20+
it('returns 100% when done equals total', () => {
21+
expect(getProgressPercent(100, 100)).toBe(100);
22+
});
23+
24+
it('does not exceed 100%', () => {
25+
expect(getProgressPercent(110, 100)).toBe(100);
26+
});
27+
28+
it('does not drop below 0%', () => {
29+
expect(getProgressPercent(-10, 100)).toBe(0);
30+
});
31+
32+
it('handles total as zero without throwing error', () => {
33+
expect(getProgressPercent(10, 0)).toBe(100);
34+
});
35+
});
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/*
2+
* CloudBeaver - Cloud Database Manager
3+
* Copyright (C) 2020-2024 DBeaver Corp and others
4+
*
5+
* Licensed under the Apache License, Version 2.0.
6+
* you may not use this file except in compliance with the License.
7+
*/
8+
9+
.tableViewerLoader {
10+
padding: 8px;
11+
padding-bottom: 0;
12+
}

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

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,15 @@
77
*/
88
import { observer } from 'mobx-react-lite';
99
import { useCallback } from 'react';
10-
import styled, { css } from 'reshadow';
1110

1211
import { Loader, TextPlaceholder } from '@cloudbeaver/core-blocks';
1312
import type { ObjectPagePanelComponent } from '@cloudbeaver/plugin-object-viewer';
1413

1514
import type { IDataViewerPageState } from '../IDataViewerPageState';
1615
import { TableViewerLoader } from '../TableViewer/TableViewerLoader';
16+
import classes from './DataViewerPanel.m.css';
1717
import { useDataViewerDatabaseDataModel } from './useDataViewerDatabaseDataModel';
1818

19-
const styles = css`
20-
TableViewerLoader {
21-
padding: 8px;
22-
padding-bottom: 0;
23-
}
24-
`;
25-
2619
export const DataViewerPanel: ObjectPagePanelComponent<IDataViewerPageState> = observer(function DataViewerPanel({ tab, page }) {
2720
const dataViewerDatabaseDataModel = useDataViewerDatabaseDataModel(tab);
2821
const pageState = page.getState(tab);
@@ -65,10 +58,11 @@ export const DataViewerPanel: ObjectPagePanelComponent<IDataViewerPageState> = o
6558
return <TextPlaceholder>Table model not loaded</TextPlaceholder>;
6659
}
6760

68-
return styled(styles)(
61+
return (
6962
<Loader state={dataViewerDatabaseDataModel}>
7063
{tab.handlerState.tableId ? (
7164
<TableViewerLoader
65+
className={classes.tableViewerLoader}
7266
tableId={tab.handlerState.tableId}
7367
resultIndex={pageState?.resultIndex}
7468
presentationId={pageState?.presentationId}
@@ -79,6 +73,6 @@ export const DataViewerPanel: ObjectPagePanelComponent<IDataViewerPageState> = o
7973
) : (
8074
<TextPlaceholder>Table model not loaded</TextPlaceholder>
8175
)}
82-
</Loader>,
76+
</Loader>
8377
);
8478
});

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,13 @@
55
* Licensed under the Apache License, Version 2.0.
66
* you may not use this file except in compliance with the License.
77
*/
8-
import styled, { css } from 'reshadow';
98

10-
const styles = css`
11-
fill {
12-
flex: 1;
13-
}
14-
`;
9+
.tableHeader {
10+
flex: 0 0 auto;
11+
display: flex;
12+
align-items: center;
1513

16-
export function Fill() {
17-
return styled(styles)(<fill />);
14+
&:empty {
15+
display: none;
16+
}
1817
}

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

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,14 @@
66
* you may not use this file except in compliance with the License.
77
*/
88
import { observer } from 'mobx-react-lite';
9-
import styled, { css } from 'reshadow';
109

11-
import { Placeholder } from '@cloudbeaver/core-blocks';
10+
import { Placeholder, s, useS } from '@cloudbeaver/core-blocks';
1211
import { useService } from '@cloudbeaver/core-di';
1312

1413
import type { IDatabaseDataModel } from '../../DatabaseDataModel/IDatabaseDataModel';
14+
import classes from './TableHeader.m.css';
1515
import { TableHeaderService } from './TableHeaderService';
1616

17-
const styles = css`
18-
table-header {
19-
flex: 0 0 auto;
20-
display: flex;
21-
align-items: center;
22-
23-
&:empty {
24-
display: none;
25-
}
26-
}
27-
`;
28-
2917
interface Props {
3018
model: IDatabaseDataModel<any, any>;
3119
resultIndex: number;
@@ -34,11 +22,12 @@ interface Props {
3422
}
3523

3624
export const TableHeader = observer<Props>(function TableHeader({ model, resultIndex, simple, className }) {
25+
const styles = useS(classes);
3726
const service = useService(TableHeaderService);
3827

39-
return styled(styles)(
40-
<table-header className={className}>
28+
return (
29+
<div className={s(styles, { tableHeader: true }, className)}>
4130
<Placeholder container={service.tableHeaderPlaceholder} model={model} resultIndex={resultIndex} simple={simple} />
42-
</table-header>,
31+
</div>
4332
);
4433
});
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/*
2+
* CloudBeaver - Cloud Database Manager
3+
* Copyright (C) 2020-2024 DBeaver Corp and others
4+
*
5+
* Licensed under the Apache License, Version 2.0.
6+
* you may not use this file except in compliance with the License.
7+
*/
8+
9+
.statistics {
10+
composes: theme-typography--caption from global;
11+
flex: 1;
12+
overflow: auto;
13+
box-sizing: border-box;
14+
white-space: pre-wrap;
15+
padding: 16px;
16+
}

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

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,25 @@
66
* you may not use this file except in compliance with the License.
77
*/
88
import { observer } from 'mobx-react-lite';
9-
import styled, { css } from 'reshadow';
109

11-
import { useTranslate } from '@cloudbeaver/core-blocks';
10+
import { s, useS, useTranslate } from '@cloudbeaver/core-blocks';
1211

1312
import type { IDatabaseDataModel } from '../DatabaseDataModel/IDatabaseDataModel';
13+
import classes from './TableStatistics.m.css';
1414

1515
interface Props {
1616
model: IDatabaseDataModel;
1717
resultIndex: number;
1818
}
1919

20-
const styles = css`
21-
statistics {
22-
composes: theme-typography--caption from global;
23-
flex: 1;
24-
overflow: auto;
25-
box-sizing: border-box;
26-
white-space: pre-wrap;
27-
padding: 16px;
28-
}
29-
`;
30-
3120
export const TableStatistics = observer<Props>(function TableStatistics({ model, resultIndex }) {
21+
const styles = useS(classes);
3222
const translate = useTranslate();
3323
const source = model.source;
3424
const result = model.getResult(resultIndex);
3525

36-
return styled(styles)(
37-
<statistics>
26+
return (
27+
<div className={s(styles, { statistics: true })}>
3828
{translate('data_viewer_statistics_status')} {source.requestInfo.requestMessage}
3929
<br />
4030
{translate('data_viewer_statistics_duration')} {source.requestInfo.requestDuration} ms
@@ -43,6 +33,6 @@ export const TableStatistics = observer<Props>(function TableStatistics({ model,
4333
<br />
4434
<br />
4535
<pre>{source.requestInfo.source}</pre>
46-
</statistics>,
36+
</div>
4737
);
4838
});
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/*
2+
* CloudBeaver - Cloud Database Manager
3+
* Copyright (C) 2020-2024 DBeaver Corp and others
4+
*
5+
* Licensed under the Apache License, Version 2.0.
6+
* you may not use this file except in compliance with the License.
7+
*/
8+
9+
.container {
10+
display: flex;
11+
flex-direction: column;
12+
}
13+
14+
.radio {
15+
padding: 0;
16+
}

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

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
* you may not use this file except in compliance with the License.
77
*/
88
import { observer } from 'mobx-react-lite';
9-
import styled, { css } from 'reshadow';
109

1110
import { Radio, TextPlaceholder, useTranslate } from '@cloudbeaver/core-blocks';
1211
import type { TabContainerPanelComponent } from '@cloudbeaver/core-ui';
@@ -17,18 +16,9 @@ import { ResultSetSelectAction } from '../../DatabaseDataModel/Actions/ResultSet
1716
import { ResultSetViewAction } from '../../DatabaseDataModel/Actions/ResultSet/ResultSetViewAction';
1817
import type { IDatabaseResultSet } from '../../DatabaseDataModel/IDatabaseResultSet';
1918
import type { IDataValuePanelProps } from '../../TableViewer/ValuePanel/DataValuePanelService';
19+
import classes from './BooleanValuePresentation.m.css';
2020
import { isStringifiedBoolean } from './isBooleanValuePresentationAvailable';
2121

22-
const styles = css`
23-
container {
24-
display: flex;
25-
flex-direction: column;
26-
}
27-
Radio {
28-
padding: 0;
29-
}
30-
`;
31-
3222
export const BooleanValuePresentation: TabContainerPanelComponent<IDataValuePanelProps<any, IDatabaseResultSet>> = observer(
3323
function BooleanValuePresentation({ model, resultIndex }) {
3424
const translate = useTranslate();
@@ -63,20 +53,41 @@ export const BooleanValuePresentation: TabContainerPanelComponent<IDataValuePane
6353
const nullable = column?.required === false;
6454
const readonly = model.isReadonly(resultIndex) || model.isDisabled(resultIndex) || format.isReadOnly(firstSelectedCell);
6555

66-
return styled(styles)(
67-
<container>
68-
<Radio id="true_value" mod={['primary']} checked={value === true} disabled={readonly} onClick={() => editor.set(firstSelectedCell, true)}>
56+
return (
57+
<div className={classes.container}>
58+
<Radio
59+
className={classes.radio}
60+
id="true_value"
61+
mod={['primary']}
62+
checked={value === true}
63+
disabled={readonly}
64+
onClick={() => editor.set(firstSelectedCell, true)}
65+
>
6966
TRUE
7067
</Radio>
71-
<Radio id="false_value" mod={['primary']} checked={value === false} disabled={readonly} onClick={() => editor.set(firstSelectedCell, false)}>
68+
<Radio
69+
className={classes.radio}
70+
id="false_value"
71+
mod={['primary']}
72+
checked={value === false}
73+
disabled={readonly}
74+
onClick={() => editor.set(firstSelectedCell, false)}
75+
>
7276
FALSE
7377
</Radio>
7478
{nullable && (
75-
<Radio id="null_value" mod={['primary']} checked={value === null} disabled={readonly} onClick={() => editor.set(firstSelectedCell, null)}>
79+
<Radio
80+
className={classes.radio}
81+
id="null_value"
82+
mod={['primary']}
83+
checked={value === null}
84+
disabled={readonly}
85+
onClick={() => editor.set(firstSelectedCell, null)}
86+
>
7687
NULL
7788
</Radio>
7889
)}
79-
</container>,
90+
</div>
8091
);
8192
},
8293
);

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,7 @@
3131
"@cloudbeaver/plugin-tools-panel": "~0.1.0",
3232
"mobx": "^6.12.0",
3333
"mobx-react-lite": "^4.0.5",
34-
"react": "^18.2.0",
35-
"reshadow": "^0.0.1"
34+
"react": "^18.2.0"
3635
},
3736
"peerDependencies": {},
3837
"devDependencies": {
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/*
2+
* CloudBeaver - Cloud Database Manager
3+
* Copyright (C) 2020-2024 DBeaver Corp and others
4+
*
5+
* Licensed under the Apache License, Version 2.0.
6+
* you may not use this file except in compliance with the License.
7+
*/
8+
9+
.message {
10+
word-break: break-word;
11+
white-space: nowrap;
12+
overflow: hidden;
13+
padding-right: 16px;
14+
text-overflow: ellipsis;
15+
}
16+
17+
.messageCell {
18+
display: flex;
19+
align-items: center;
20+
}
21+
22+
.link {
23+
overflow: hidden;
24+
text-overflow: ellipsis;
25+
26+
&:hover {
27+
cursor: pointer;
28+
}
29+
}
30+
31+
.icon {
32+
padding: 0;
33+
}
34+
35+
.selected {
36+
font-weight: 500;
37+
}
38+
39+
.iconOrImage {
40+
width: 24px;
41+
height: 24px;
42+
}

0 commit comments

Comments
 (0)