Skip to content

Commit 4b7902e

Browse files
vogievetskyvogievetsky
authored
Web console: Improve workbench view with resizable side panels (#17387)
1 parent d5bb7de commit 4b7902e

29 files changed

+1158
-629
lines changed

‎licenses.yaml

-10
Original file line numberDiff line numberDiff line change
@@ -6329,16 +6329,6 @@ license_file_path: licenses/bin/react-router.MIT
63296329

63306330
---
63316331

6332-
name: "react-splitter-layout"
6333-
license_category: binary
6334-
module: web-console
6335-
license_name: MIT License
6336-
copyright: Yang Liu
6337-
version: 4.0.0
6338-
license_file_path: licenses/bin/react-splitter-layout.MIT
6339-
6340-
---
6341-
63426332
name: "react-table"
63436333
license_category: binary
63446334
module: web-console

‎web-console/package-lock.json

-34
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web-console/package.json

-2
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,6 @@
8383
"react-dom": "^18.3.1",
8484
"react-router": "^5.3.4",
8585
"react-router-dom": "^5.3.4",
86-
"react-splitter-layout": "^4.0.0",
8786
"react-table": "~6.11.5",
8887
"regenerator-runtime": "^0.13.7",
8988
"tslib": "^2.8.0",
@@ -116,7 +115,6 @@
116115
"@types/react": "^18.3.11",
117116
"@types/react-dom": "^18.3.1",
118117
"@types/react-router-dom": "^5.3.3",
119-
"@types/react-splitter-layout": "^3.0.5",
120118
"@types/react-table": "6.8.5",
121119
"@types/uuid": "^7.0.2",
122120
"autoprefixer": "^10.4.20",

‎web-console/src/components/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ export * from './segment-timeline/segment-timeline';
5151
export * from './show-json/show-json';
5252
export * from './show-log/show-log';
5353
export * from './show-value/show-value';
54+
export * from './splitter-layout/splitter-layout';
5455
export * from './suggestion-menu/suggestion-menu';
5556
export * from './supervisor-history-panel/supervisor-history-panel';
5657
export * from './table-cell/table-cell';

‎web-console/src/components/splitter-layout/__snapshots__/splitter-layout.spec.tsx.snap

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`SplitterLayout matches snapshot one child 1`] = `
4+
<div
5+
class="splitter-layout splitter-layout-horizontal"
6+
>
7+
<div
8+
class="layout-pane layout-pane-primary"
9+
>
10+
<div
11+
class="child1"
12+
/>
13+
</div>
14+
</div>
15+
`;
16+
17+
exports[`SplitterLayout matches snapshot two children 1`] = `
18+
<div
19+
class="splitter-layout splitter-layout-vertical"
20+
>
21+
<div
22+
class="layout-pane layout-pane-primary"
23+
>
24+
<div
25+
class="child1"
26+
/>
27+
</div>
28+
<div
29+
class="layout-splitter"
30+
role="separator"
31+
/>
32+
<div
33+
class="layout-pane"
34+
style="height: 50%;"
35+
>
36+
<div
37+
class="child2"
38+
/>
39+
</div>
40+
</div>
41+
`;

‎web-console/src/components/splitter-layout/layout-pane.tsx

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/*
2+
* Licensed to the Apache Software Foundation (ASF) under one
3+
* or more contributor license agreements. See the NOTICE file
4+
* distributed with this work for additional information
5+
* regarding copyright ownership. The ASF licenses this file
6+
* to you under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance
8+
* with the License. You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing, software
13+
* distributed under the License is distributed on an "AS IS" BASIS,
14+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
* See the License for the specific language governing permissions and
16+
* limitations under the License.
17+
*/
18+
19+
import classNames from 'classnames';
20+
import type { ReactNode } from 'react';
21+
22+
export interface LayoutPaneProps {
23+
vertical?: boolean;
24+
size: number | undefined;
25+
percentage?: boolean;
26+
children: ReactNode;
27+
}
28+
29+
export function LayoutPane(props: LayoutPaneProps) {
30+
return (
31+
<div
32+
className={classNames('layout-pane', {
33+
'layout-pane-primary': typeof props.size === 'undefined',
34+
})}
35+
style={
36+
typeof props.size === 'number'
37+
? {
38+
[props.vertical ? 'height' : 'width']: `${props.size}${
39+
props.percentage ? '%' : 'px'
40+
}`,
41+
}
42+
: undefined
43+
}
44+
>
45+
{props.children}
46+
</div>
47+
);
48+
}

‎web-console/src/components/splitter-layout/splitter-layout.scss

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/*
2+
* Licensed to the Apache Software Foundation (ASF) under one
3+
* or more contributor license agreements. See the NOTICE file
4+
* distributed with this work for additional information
5+
* regarding copyright ownership. The ASF licenses this file
6+
* to you under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance
8+
* with the License. You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing, software
13+
* distributed under the License is distributed on an "AS IS" BASIS,
14+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
* See the License for the specific language governing permissions and
16+
* limitations under the License.
17+
*/
18+
19+
// Originally copied from https://github.com/zesik/react-splitter-layout/blob/master/src/stylesheets/index.css and heavily refactored
20+
21+
$default-splitter-size: 8px;
22+
23+
.splitter-layout {
24+
display: flex;
25+
overflow: hidden;
26+
27+
&.splitter-layout-horizontal {
28+
flex-direction: row;
29+
30+
&.layout-changing {
31+
cursor: col-resize;
32+
}
33+
34+
& > .layout-splitter {
35+
width: $default-splitter-size;
36+
height: 100%;
37+
cursor: col-resize;
38+
}
39+
}
40+
41+
&.splitter-layout-vertical {
42+
flex-direction: column;
43+
44+
&.layout-changing {
45+
cursor: row-resize;
46+
}
47+
48+
& > .layout-splitter {
49+
width: 100%;
50+
height: $default-splitter-size;
51+
cursor: row-resize;
52+
}
53+
}
54+
55+
& > .layout-pane {
56+
position: relative;
57+
flex: 0 0 auto;
58+
overflow: auto;
59+
60+
&.layout-pane-primary {
61+
flex: 1 1 auto;
62+
}
63+
}
64+
65+
& > .layout-splitter {
66+
flex: 0 0 auto;
67+
}
68+
}

‎web-console/src/components/splitter-layout/splitter-layout.spec.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/*
2+
* Licensed to the Apache Software Foundation (ASF) under one
3+
* or more contributor license agreements. See the NOTICE file
4+
* distributed with this work for additional information
5+
* regarding copyright ownership. The ASF licenses this file
6+
* to you under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance
8+
* with the License. You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing, software
13+
* distributed under the License is distributed on an "AS IS" BASIS,
14+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
* See the License for the specific language governing permissions and
16+
* limitations under the License.
17+
*/
18+
19+
import { render } from '@testing-library/react';
20+
21+
import { SplitterLayout } from './splitter-layout';
22+
23+
describe('SplitterLayout', () => {
24+
it('matches snapshot one child', () => {
25+
const splitterLayout = (
26+
<SplitterLayout primaryMinSize={100} secondaryInitialSize={50} secondaryMinSize={10}>
27+
<div className="child1" />
28+
</SplitterLayout>
29+
);
30+
31+
const { container } = render(splitterLayout);
32+
expect(container.firstChild).toMatchSnapshot();
33+
});
34+
35+
it('matches snapshot two children', () => {
36+
const splitterLayout = (
37+
<SplitterLayout
38+
vertical
39+
percentage
40+
primaryMinSize={100}
41+
secondaryInitialSize={50}
42+
secondaryMinSize={10}
43+
>
44+
<div className="child1" />
45+
<div className="child2" />
46+
</SplitterLayout>
47+
);
48+
49+
const { container } = render(splitterLayout);
50+
expect(container.firstChild).toMatchSnapshot();
51+
});
52+
});

0 commit comments

Comments
 (0)