Skip to content

Commit 0cb5281

Browse files
jahvonjahvon
committed
reorganize components
1 parent f05bb1b commit 0cb5281

36 files changed

+256
-184
lines changed

‎desktop/src/App.tsx‎

Lines changed: 35 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,13 @@
1-
import {
2-
ActionIcon,
3-
AppShell,
4-
Loader,
5-
Notification as MantineNotification,
6-
Text,
7-
} from "@mantine/core";
81
import "@mantine/core/styles.css";
9-
import { IconRefresh } from "@tabler/icons-react";
102
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
113
import { useEffect, useState } from "react";
124
import "./App.css";
13-
import styles from "./components/AppShell.module.css";
14-
import { Header } from "./components/Header/Header";
15-
import { Sidebar } from "./components/Sidebar/Sidebar";
16-
import { View, Viewer } from "./components/Viewer/Viewer";
175
import { useBackendData, useExecutable } from "./hooks/useBackendData";
186
import { NotifierProvider, useNotifier } from "./hooks/useNotifier";
197
import { SettingsProvider } from "./hooks/useSettings";
8+
import { AppShell, View, Viewer } from "./layout";
209
import { ThemeProvider } from "./theme/ThemeProvider";
21-
import { colorFromType, NotificationType } from "./types/notification";
10+
import { NotificationType } from "./types/notification";
2211

2312
const queryClient = new QueryClient({
2413
defaultOptions: {
@@ -81,121 +70,41 @@ function AppContent() {
8170

8271
return (
8372
<AppShell
84-
header={{ height: "var(--app-header-height)" }}
85-
navbar={{ width: "var(--app-navbar-width)", breakpoint: "sm" }}
86-
padding="md"
87-
classNames={{
88-
root: styles.appShell,
89-
main: styles.main,
90-
header: styles.header,
91-
navbar: styles.navbar,
73+
currentView={currentView}
74+
setCurrentView={(view: string) => setCurrentView(view as View)}
75+
workspaces={workspaces || []}
76+
selectedWorkspace={selectedWorkspace}
77+
onSelectWorkspace={(workspaceName) => {
78+
setSelectedWorkspace(workspaceName);
79+
setCurrentView(View.Workspace);
9280
}}
81+
visibleExecutables={executables || []}
82+
onSelectExecutable={(executable) => {
83+
if (executable === selectedExecutable) {
84+
return;
85+
}
86+
setSelectedExecutable(executable);
87+
if (currentView !== View.Executable) {
88+
setCurrentView(View.Executable);
89+
}
90+
}}
91+
onLogoClick={handleLogoClick}
92+
hasError={hasError}
93+
isLoading={isLoading}
94+
refreshAll={refreshAll}
95+
notification={notification}
96+
setNotification={setNotification}
9397
>
94-
<AppShell.Header>
95-
<Header
96-
onCreateWorkspace={() => {}}
97-
onRefreshWorkspaces={() => {
98-
refreshAll();
99-
setNotification({
100-
title: "Refresh completed",
101-
message: "flow data has synced and refreshed successfully",
102-
type: NotificationType.Success,
103-
autoClose: true,
104-
autoCloseDelay: 3000,
105-
});
106-
}}
107-
/>
108-
</AppShell.Header>
109-
110-
<AppShell.Navbar>
111-
<Sidebar
112-
currentView={currentView}
113-
setCurrentView={setCurrentView}
114-
workspaces={workspaces || []}
115-
selectedWorkspace={selectedWorkspace}
116-
onSelectWorkspace={(workspaceName) => {
117-
setSelectedWorkspace(workspaceName);
118-
setCurrentView(View.Workspace);
119-
}}
120-
visibleExecutables={executables}
121-
onSelectExecutable={(executable) => {
122-
if (executable === selectedExecutable) {
123-
return;
124-
}
125-
setSelectedExecutable(executable);
126-
if (currentView !== View.Executable) {
127-
setCurrentView(View.Executable);
128-
}
129-
}}
130-
onLogoClick={handleLogoClick}
131-
/>
132-
</AppShell.Navbar>
133-
134-
<AppShell.Main>
135-
{hasError ? (
136-
<div
137-
style={{
138-
display: "flex",
139-
alignItems: "center",
140-
justifyContent: "center",
141-
height: "100%",
142-
flexDirection: "column",
143-
gap: "1rem",
144-
}}
145-
>
146-
<Text c="red">Error loading data</Text>
147-
<ActionIcon
148-
color="red"
149-
onClick={refreshAll}
150-
title="Try again"
151-
variant="light"
152-
>
153-
<IconRefresh size={16} />
154-
</ActionIcon>
155-
</div>
156-
) : (
157-
<div style={{ position: "relative", height: "100%" }}>
158-
<Viewer
159-
currentView={currentView}
160-
selectedExecutable={executable}
161-
isExecutableLoading={isExecutableLoading}
162-
executableError={executableError}
163-
welcomeMessage={welcomeMessage}
164-
workspace={
165-
workspaces?.find((w) => w.name === selectedWorkspace) || null
166-
}
167-
/>
168-
{isLoading && (
169-
<div
170-
style={{
171-
position: "absolute",
172-
top: 16,
173-
right: 16,
174-
zIndex: 1000,
175-
}}
176-
>
177-
<Loader size="sm" />
178-
</div>
179-
)}
180-
</div>
181-
)}
182-
</AppShell.Main>
183-
184-
{notification && (
185-
<MantineNotification
186-
title={notification.title}
187-
onClose={() => setNotification(null)}
188-
color={colorFromType(notification.type)}
189-
style={{
190-
position: "fixed",
191-
bottom: 20,
192-
right: 20,
193-
zIndex: 1000,
194-
}}
195-
>
196-
{notification.message}
197-
</MantineNotification>
198-
)}
98+
<Viewer
99+
currentView={currentView}
100+
selectedExecutable={executable}
101+
isExecutableLoading={isExecutableLoading}
102+
executableError={executableError}
103+
welcomeMessage={welcomeMessage}
104+
workspace={
105+
workspaces?.find((w) => w.name === selectedWorkspace) || null
106+
}
107+
/>
199108
</AppShell>
200109
);
201110
}

‎desktop/src/components/Theme.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
Title,
1111
} from "@mantine/core";
1212
import type { Meta, StoryObj } from "@storybook/react";
13-
import { theme } from "../theme";
13+
import { mantineTheme as theme } from "../theme/mantineTheme";
1414

1515
const meta = {
1616
title: "Design System/Theme",

desktop/src/components/AppShell.module.css renamed to desktop/src/layout/AppShell/AppShell.module.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* Layout dimensions as CSS custom properties */
21
:root {
32
--app-header-height: 48px;
43
--app-navbar-width: 300px;

‎desktop/src/layout/AppShell/AppShell.tsx‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
import {
2+
ActionIcon,
3+
Loader,
4+
AppShell as MantineAppShell,
5+
Notification as MantineNotification,
6+
Text,
7+
} from "@mantine/core";
8+
import { IconRefresh } from "@tabler/icons-react";
9+
import { ReactNode } from "react";
10+
import { EnrichedExecutable } from "../../types/executable";
11+
import {
12+
colorFromType,
13+
Notification,
14+
NotificationType,
15+
} from "../../types/notification";
16+
import { EnrichedWorkspace } from "../../types/workspace";
17+
import { Header } from "../Header/Header";
18+
import { Sidebar } from "../Sidebar/Sidebar";
19+
import { View } from "../Viewer/Viewer";
20+
import styles from "./AppShell.module.css";
21+
22+
interface AppShellProps {
23+
children: ReactNode;
24+
currentView: View;
25+
setCurrentView: (view: View) => void;
26+
workspaces: EnrichedWorkspace[];
27+
selectedWorkspace: string | null;
28+
onSelectWorkspace: (workspaceName: string) => void;
29+
visibleExecutables: EnrichedExecutable[];
30+
onSelectExecutable: (executable: string) => void;
31+
onLogoClick: () => void;
32+
hasError: Error | null;
33+
isLoading: boolean;
34+
refreshAll: () => void;
35+
notification: Notification | null;
36+
setNotification: (notification: Notification | null) => void;
37+
}
38+
39+
export function AppShell({
40+
children,
41+
currentView,
42+
setCurrentView,
43+
workspaces,
44+
selectedWorkspace,
45+
onSelectWorkspace,
46+
visibleExecutables,
47+
onSelectExecutable,
48+
onLogoClick,
49+
hasError,
50+
isLoading,
51+
refreshAll,
52+
notification,
53+
setNotification,
54+
}: AppShellProps) {
55+
return (
56+
<MantineAppShell
57+
header={{ height: "var(--app-header-height)" }}
58+
navbar={{ width: "var(--app-navbar-width)", breakpoint: "sm" }}
59+
padding="md"
60+
classNames={{
61+
root: styles.appShell,
62+
main: styles.main,
63+
header: styles.header,
64+
navbar: styles.navbar,
65+
}}
66+
>
67+
<MantineAppShell.Header>
68+
<Header
69+
onCreateWorkspace={() => {}}
70+
onRefreshWorkspaces={() => {
71+
refreshAll();
72+
setNotification({
73+
title: "Refresh completed",
74+
message: "flow data has synced and refreshed successfully",
75+
type: NotificationType.Success,
76+
autoClose: true,
77+
autoCloseDelay: 3000,
78+
});
79+
}}
80+
/>
81+
</MantineAppShell.Header>
82+
83+
<MantineAppShell.Navbar>
84+
<Sidebar
85+
currentView={currentView}
86+
setCurrentView={setCurrentView}
87+
workspaces={workspaces}
88+
selectedWorkspace={selectedWorkspace}
89+
onSelectWorkspace={onSelectWorkspace}
90+
visibleExecutables={visibleExecutables}
91+
onSelectExecutable={onSelectExecutable}
92+
onLogoClick={onLogoClick}
93+
/>
94+
</MantineAppShell.Navbar>
95+
96+
<MantineAppShell.Main>
97+
{hasError ? (
98+
<div
99+
style={{
100+
display: "flex",
101+
alignItems: "center",
102+
justifyContent: "center",
103+
height: "100%",
104+
flexDirection: "column",
105+
gap: "1rem",
106+
}}
107+
>
108+
<Text c="red">Error loading data</Text>
109+
<ActionIcon
110+
color="red"
111+
onClick={refreshAll}
112+
title="Try again"
113+
variant="light"
114+
>
115+
<IconRefresh size={16} />
116+
</ActionIcon>
117+
</div>
118+
) : (
119+
<div style={{ position: "relative", height: "100%" }}>
120+
{children}
121+
{isLoading && (
122+
<div
123+
style={{
124+
position: "absolute",
125+
top: 16,
126+
right: 16,
127+
zIndex: 1000,
128+
}}
129+
>
130+
<Loader size="sm" />
131+
</div>
132+
)}
133+
</div>
134+
)}
135+
</MantineAppShell.Main>
136+
137+
{notification && (
138+
<MantineNotification
139+
title={notification.title}
140+
onClose={() => setNotification(null)}
141+
color={colorFromType(notification.type)}
142+
style={{
143+
position: "fixed",
144+
bottom: 20,
145+
right: 20,
146+
zIndex: 1000,
147+
}}
148+
>
149+
{notification.message}
150+
</MantineNotification>
151+
)}
152+
</MantineAppShell>
153+
);
154+
}

desktop/src/components/Header/ActionButtons/ActionButtons.stories.tsx renamed to desktop/src/layout/Header/ActionButtons/ActionButtons.stories.tsx

File renamed without changes.

desktop/src/components/Header/ActionButtons/ActionButtons.tsx renamed to desktop/src/layout/Header/ActionButtons/ActionButtons.tsx

File renamed without changes.

desktop/src/components/Header/Header.module.css renamed to desktop/src/layout/Header/Header.module.css

File renamed without changes.

desktop/src/components/Header/Header.stories.tsx renamed to desktop/src/layout/Header/Header.stories.tsx

File renamed without changes.

desktop/src/components/Header/Header.tsx renamed to desktop/src/layout/Header/Header.tsx

File renamed without changes.

desktop/src/components/Sidebar/ExecutableTree/ExecutableTree.stories.tsx renamed to desktop/src/layout/Sidebar/ExecutableTree/ExecutableTree.stories.tsx

File renamed without changes.

0 commit comments

Comments
 (0)