Skip to content

Commit de42ec0

Browse files
Pavel910Pavel910
authored
fix(app-admin): add a floating panel utility (#4564)
1 parent 2d86af1 commit de42ec0

File tree

11 files changed

+215
-16
lines changed

11 files changed

+215
-16
lines changed

‎.github/workflows/pullRequests.yml

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -242,9 +242,6 @@ jobs:
242242
- name: Install dependencies
243243
run: yarn --immutable
244244
working-directory: ${{ github.base_ref }}
245-
- name: Build packages (full)
246-
run: yarn build
247-
working-directory: ${{ github.base_ref }}
248245
- name: Check types for Cypress tests
249246
run: yarn cy:ts
250247
working-directory: ${{ github.base_ref }}

‎.github/workflows/pushDev.yml

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -153,9 +153,6 @@ jobs:
153153
- name: Install dependencies
154154
run: yarn --immutable
155155
working-directory: dev
156-
- name: Build packages (full)
157-
run: yarn build
158-
working-directory: dev
159156
- name: Check types for Cypress tests
160157
run: yarn cy:ts
161158
working-directory: dev

‎.github/workflows/pushNext.yml

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -153,9 +153,6 @@ jobs:
153153
- name: Install dependencies
154154
run: yarn --immutable
155155
working-directory: next
156-
- name: Build packages (full)
157-
run: yarn build
158-
working-directory: next
159156
- name: Check types for Cypress tests
160157
run: yarn cy:ts
161158
working-directory: next

‎.github/workflows/wac/pullRequests.wac.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -313,7 +313,6 @@ export const pullRequests = createWorkflow({
313313
...withCommonParams(
314314
[
315315
{ name: "Install dependencies", run: "yarn --immutable" },
316-
{ name: "Build packages (full)", run: "yarn build" },
317316
{ name: "Check types for Cypress tests", run: "yarn cy:ts" }
318317
],
319318
{ "working-directory": DIR_WEBINY_JS }

‎.github/workflows/wac/push.wac.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -357,7 +357,6 @@ const createPushWorkflow = (branchName: string) => {
357357
...withCommonParams(
358358
[
359359
{ name: "Install dependencies", run: "yarn --immutable" },
360-
{ name: "Build packages (full)", run: "yarn build" },
361360
{ name: "Check types for Cypress tests", run: "yarn cy:ts" }
362361
],
363362
{ "working-directory": DIR_WEBINY_JS }

‎packages/app-admin/package.json

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"@emotion/styled": "11.10.6",
1818
"@iconify/json": "^2.2.142",
1919
"@material-design-icons/svg": "^0.14.3",
20+
"@monaco-editor/react": "^4.7.0",
2021
"@svgr/webpack": "^6.1.1",
2122
"@types/mime": "^2.0.3",
2223
"@types/react": "18.2.79",
@@ -54,7 +55,9 @@
5455
"prop-types": "^15.8.1",
5556
"react": "18.2.0",
5657
"react-dom": "18.2.0",
58+
"react-draggable": "^4.4.6",
5759
"react-hotkeyz": "^1.0.4",
60+
"react-resizable": "^3.0.5",
5861
"react-resizable-panels": "^2.0.19",
5962
"react-transition-group": "^4.4.5",
6063
"react-virtualized": "^9.22.5",
@@ -67,9 +70,11 @@
6770
"@types/bytes": "^3.1.4",
6871
"@types/graphlib": "^2.1.12",
6972
"@types/is-hotkey": "^0.1.10",
73+
"@types/react-resizable": "^3.0.8",
7074
"@types/store": "^2.0.2",
7175
"@webiny/cli": "0.0.0",
7276
"@webiny/project-utils": "0.0.0",
77+
"monaco-editor": "^0.52.2",
7378
"rimraf": "^6.0.1",
7479
"ttypescript": "^1.5.15",
7580
"typescript": "4.9.5"
@@ -87,10 +92,13 @@
8792
"dependencies": [
8893
"@svgr/webpack",
8994
"@iconify/json",
90-
"unicode-emoji-json",
9195
"@emotion/react",
9296
"@types/mime",
93-
"reset-css"
97+
"reset-css",
98+
"unicode-emoji-json"
99+
],
100+
"devDependencies": [
101+
"monaco-editor"
94102
],
95103
"peerDependencies": [
96104
"react-dom"

‎packages/app-admin/src/components/FloatingPanel.tsx

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React, { useEffect, useState } from "react";
2+
import { createPortal } from "react-dom";
3+
import Draggable, { type DraggableEventHandler } from "react-draggable";
4+
import { Resizable, ResizableProps } from "react-resizable";
5+
import styled from "@emotion/styled";
6+
import { Elevation } from "@webiny/ui/Elevation";
7+
import { useKeyHandler } from "~/hooks";
8+
9+
const PanelRoot = styled.div`
10+
position: fixed;
11+
top: 0;
12+
left: 0;
13+
z-index: 100000;
14+
width: 0;
15+
height: 0;
16+
`;
17+
18+
const ResizeHandle = styled.div`
19+
position: absolute;
20+
width: 20px;
21+
height: 20px;
22+
bottom: 0;
23+
right: 0;
24+
padding: 0 3px 3px 0;
25+
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=")
26+
no-repeat bottom right;
27+
background-origin: content-box;
28+
box-sizing: border-box;
29+
cursor: se-resize;
30+
`;
31+
32+
export interface FloatingPanelRenderProp {
33+
(params: { height: number; width: number }): React.ReactNode;
34+
}
35+
36+
export interface FloatingPanelProps {
37+
shortcut: string;
38+
dragHandle: string;
39+
children: FloatingPanelRenderProp;
40+
}
41+
42+
export const FloatingPanel = ({ dragHandle, shortcut, children }: FloatingPanelProps) => {
43+
const [isVisible, setIsVisible] = useState(false);
44+
const [size, setSize] = useState({ width: 700, height: 600 });
45+
const [position, setPosition] = useState({ x: 100, y: 100 });
46+
const { addKeyHandler, removeKeyHandler } = useKeyHandler();
47+
48+
useEffect(() => {
49+
addKeyHandler(shortcut, e => {
50+
e.preventDefault();
51+
setIsVisible(isVisible => !isVisible);
52+
});
53+
54+
return () => removeKeyHandler(shortcut);
55+
}, [setIsVisible]);
56+
57+
const onDragStop: DraggableEventHandler = (_, data) => {
58+
setPosition({ x: data.x, y: data.y });
59+
};
60+
61+
const onResize: ResizableProps["onResize"] = (_, { size }) => {
62+
setSize({ width: size.width, height: size.height });
63+
};
64+
65+
return createPortal(
66+
<PanelRoot>
67+
<Draggable handle={dragHandle} onStop={onDragStop} position={position}>
68+
<Resizable
69+
width={size.width}
70+
height={size.height}
71+
onResize={onResize}
72+
handle={<ResizeHandle />}
73+
>
74+
<div
75+
style={{
76+
border: "2px solid var(--mdc-theme-primary)",
77+
display: isVisible ? "block" : "none",
78+
position: "relative",
79+
width: size.width + "px",
80+
height: size.height + "px"
81+
}}
82+
>
83+
<Elevation z={5} style={{ height: "inherit" }}>
84+
{children(size)}
85+
</Elevation>
86+
</div>
87+
</Resizable>
88+
</Draggable>
89+
</PanelRoot>,
90+
document.body
91+
);
92+
};

‎packages/app-admin/src/components/StateInspector.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from "react";
2+
import Editor from "@monaco-editor/react";
3+
import { Tab, Tabs } from "@webiny/ui/Tabs";
4+
import { FloatingPanel } from "~/components";
5+
6+
const monacoTheme = "vs-light";
7+
const monacoOptions = { minimap: { enabled: false } };
8+
9+
interface StateInspectorProps {
10+
title: string;
11+
shortcut: string;
12+
state: Record<string, any>;
13+
}
14+
15+
export const StateInspector = (props: StateInspectorProps) => {
16+
return (
17+
<FloatingPanel shortcut={props.shortcut} dragHandle={".mdc-tab-scroller"}>
18+
{({ height }) => (
19+
<Tabs>
20+
<Tab label={props.title}>
21+
<Editor
22+
theme={monacoTheme}
23+
height={height - 48}
24+
defaultLanguage={"json"}
25+
value={JSON.stringify(props.state, null, 2)}
26+
options={monacoOptions}
27+
/>
28+
</Tab>
29+
</Tabs>
30+
)}
31+
</FloatingPanel>
32+
);
33+
};

‎packages/app-admin/src/components/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
export { FileManager } from "~/base/ui/FileManager";
2+
export { FloatingPanel } from "~/components/FloatingPanel";
3+
export { StateInspector } from "~/components/StateInspector";

‎packages/cli/files/references.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎yarn.lock

Lines changed: 77 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7226,6 +7226,28 @@ __metadata:
72267226
languageName: node
72277227
linkType: hard
72287228

7229+
"@monaco-editor/loader@npm:^1.5.0":
7230+
version: 1.5.0
7231+
resolution: "@monaco-editor/loader@npm:1.5.0"
7232+
dependencies:
7233+
state-local: "npm:^1.0.6"
7234+
checksum: 10/97d79916afa856809de4eaafaee1b1c6dc9443c0fdde81a7562f4ffa0c252496e97c4becf4c1f00c4119878c76d73390ce416a64305e59865a5830bded5afe55
7235+
languageName: node
7236+
linkType: hard
7237+
7238+
"@monaco-editor/react@npm:^4.7.0":
7239+
version: 4.7.0
7240+
resolution: "@monaco-editor/react@npm:4.7.0"
7241+
dependencies:
7242+
"@monaco-editor/loader": "npm:^1.5.0"
7243+
peerDependencies:
7244+
monaco-editor: ">= 0.25.0 < 1"
7245+
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
7246+
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
7247+
checksum: 10/d72392c4ed6faf8d830ba43421461e1b767b5978edba0739457d7781aa9533c66982be7f59bb156a77a2b578eddfb4711f50e0d84f0f0d25d28b5ab11140f5cc
7248+
languageName: node
7249+
linkType: hard
7250+
72297251
"@nicolo-ribaudo/chokidar-2@npm:2.1.8-no-fsevents.3":
72307252
version: 2.1.8-no-fsevents.3
72317253
resolution: "@nicolo-ribaudo/chokidar-2@npm:2.1.8-no-fsevents.3"
@@ -11183,6 +11205,15 @@ __metadata:
1118311205
languageName: node
1118411206
linkType: hard
1118511207

11208+
"@types/react-resizable@npm:^3.0.8":
11209+
version: 3.0.8
11210+
resolution: "@types/react-resizable@npm:3.0.8"
11211+
dependencies:
11212+
"@types/react": "npm:*"
11213+
checksum: 10/aabdef8056bbab3065559bce7ce93232e645fb4f915fd55f0903a2f4df5d2395762dfd75bb0242d5a73d39461e8c062d81eaab87b91213dddfd973ff908f79e4
11214+
languageName: node
11215+
linkType: hard
11216+
1118611217
"@types/react-transition-group@npm:^4.4.4":
1118711218
version: 4.4.5
1118811219
resolution: "@types/react-transition-group@npm:4.4.5"
@@ -13943,12 +13974,14 @@ __metadata:
1394313974
"@emotion/styled": "npm:11.10.6"
1394413975
"@iconify/json": "npm:^2.2.142"
1394513976
"@material-design-icons/svg": "npm:^0.14.3"
13977+
"@monaco-editor/react": "npm:^4.7.0"
1394613978
"@svgr/webpack": "npm:^6.1.1"
1394713979
"@types/bytes": "npm:^3.1.4"
1394813980
"@types/graphlib": "npm:^2.1.12"
1394913981
"@types/is-hotkey": "npm:^0.1.10"
1395013982
"@types/mime": "npm:^2.0.3"
1395113983
"@types/react": "npm:18.2.79"
13984+
"@types/react-resizable": "npm:^3.0.8"
1395213985
"@types/store": "npm:^2.0.2"
1395313986
"@webiny/app": "npm:0.0.0"
1395413987
"@webiny/app-security": "npm:0.0.0"
@@ -13983,10 +14016,13 @@ __metadata:
1398314016
lodash: "npm:^4.17.21"
1398414017
mobx: "npm:^6.9.0"
1398514018
mobx-react-lite: "npm:^3.4.3"
14019+
monaco-editor: "npm:^0.52.2"
1398614020
prop-types: "npm:^15.8.1"
1398714021
react: "npm:18.2.0"
1398814022
react-dom: "npm:18.2.0"
14023+
react-draggable: "npm:^4.4.6"
1398914024
react-hotkeyz: "npm:^1.0.4"
14025+
react-resizable: "npm:^3.0.5"
1399014026
react-resizable-panels: "npm:^2.0.19"
1399114027
react-transition-group: "npm:^4.4.5"
1399214028
react-virtualized: "npm:^9.22.5"
@@ -19785,7 +19821,7 @@ __metadata:
1978519821
languageName: node
1978619822
linkType: hard
1978719823

19788-
"clsx@npm:^1.0.4, clsx@npm:^1.2.1":
19824+
"clsx@npm:^1.0.4, clsx@npm:^1.1.1, clsx@npm:^1.2.1":
1978919825
version: 1.2.1
1979019826
resolution: "clsx@npm:1.2.1"
1979119827
checksum: 10/5ded6f61f15f1fa0350e691ccec43a28b12fb8e64c8e94715f2a937bc3722d4c3ed41d6e945c971fc4dcc2a7213a43323beaf2e1c28654af63ba70c9968a8643
@@ -30374,6 +30410,13 @@ __metadata:
3037430410
languageName: node
3037530411
linkType: hard
3037630412

30413+
"monaco-editor@npm:^0.52.2":
30414+
version: 0.52.2
30415+
resolution: "monaco-editor@npm:0.52.2"
30416+
checksum: 10/0d4962d69ffa0a8df040faa9c582cef1893fa3fb617feca8f1425c5e670e74c2856104b9a2b01cbda0103a5e5f92f58843206bc9a0e070471c0c1270d7f52a96
30417+
languageName: node
30418+
linkType: hard
30419+
3037730420
"mqtt-packet@npm:^9.0.1":
3037830421
version: 9.0.1
3037930422
resolution: "mqtt-packet@npm:9.0.1"
@@ -33874,7 +33917,7 @@ __metadata:
3387433917
languageName: node
3387533918
linkType: hard
3387633919

33877-
"prop-types@npm:^15.5.0, prop-types@npm:^15.5.10, prop-types@npm:^15.5.8, prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
33920+
"prop-types@npm:15.x, prop-types@npm:^15.5.0, prop-types@npm:^15.5.10, prop-types@npm:^15.5.8, prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
3387833921
version: 15.8.1
3387933922
resolution: "prop-types@npm:15.8.1"
3388033923
dependencies:
@@ -34518,6 +34561,19 @@ __metadata:
3451834561
languageName: node
3451934562
linkType: hard
3452034563

34564+
"react-draggable@npm:^4.0.3, react-draggable@npm:^4.4.6":
34565+
version: 4.4.6
34566+
resolution: "react-draggable@npm:4.4.6"
34567+
dependencies:
34568+
clsx: "npm:^1.1.1"
34569+
prop-types: "npm:^15.8.1"
34570+
peerDependencies:
34571+
react: ">= 16.3.0"
34572+
react-dom: ">= 16.3.0"
34573+
checksum: 10/51b9ac7f913797fc1cebc30ae383f346883033c45eb91e9b0b92e9ebd224bb1545b4ae2391825b649b798cc711a38351a5f41be24d949c64c6703ebc24eba661
34574+
languageName: node
34575+
linkType: hard
34576+
3452134577
"react-error-boundary@npm:^3.1.4":
3452234578
version: 3.1.4
3452334579
resolution: "react-error-boundary@npm:3.1.4"
@@ -34735,6 +34791,18 @@ __metadata:
3473534791
languageName: node
3473634792
linkType: hard
3473734793

34794+
"react-resizable@npm:^3.0.5":
34795+
version: 3.0.5
34796+
resolution: "react-resizable@npm:3.0.5"
34797+
dependencies:
34798+
prop-types: "npm:15.x"
34799+
react-draggable: "npm:^4.0.3"
34800+
peerDependencies:
34801+
react: ">= 16.3"
34802+
checksum: 10/745fad6ac827857b3a80d1d648b8d6723aa72fc17d5410a01707073f3d37b4adf6e0354dfe3cc33dee34d6e546a3fbd5603ef73e385dfc5218a425a39bf96275
34803+
languageName: node
34804+
linkType: hard
34805+
3473834806
"react-router-dom@npm:6.3.0":
3473934807
version: 6.3.0
3474034808
resolution: "react-router-dom@npm:6.3.0"
@@ -37169,6 +37237,13 @@ __metadata:
3716937237
languageName: node
3717037238
linkType: hard
3717137239

37240+
"state-local@npm:^1.0.6":
37241+
version: 1.0.7
37242+
resolution: "state-local@npm:1.0.7"
37243+
checksum: 10/1d956043e270861d40a639ff3457938cf61dbc7e25209d21b55060d8dfaf74742b8a1e525ed6fcb0c2d89b7d3e305bb8589bf27392012889456b3ad82a4b7d0a
37244+
languageName: node
37245+
linkType: hard
37246+
3717237247
"statuses@npm:2.0.1":
3717337248
version: 2.0.1
3717437249
resolution: "statuses@npm:2.0.1"

0 commit comments

Comments
 (0)