Skip to content

Commit bada362

Browse files
author
Nico Sammito
authored
Merge pull request #97 from code0-tech/feat/#96
Introduce sidebar component with collapsable functionality
2 parents fe43ad1 + ec6f69b commit bada362

8 files changed

Lines changed: 167 additions & 204 deletions

File tree

‎src/app/(flow)/namespace/[namespaceId]/project/[projectId]/flow/layout.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
ResizablePanel,
88
ResizablePanelGroup
99
} from "@code0-tech/pictor/dist/components/resizable/Resizable";
10+
import {SidebarComponent} from "@core/components/SidebarComponent";
1011

1112
interface ApplicationLayoutProps {
1213
children: React.ReactNode
@@ -15,9 +16,9 @@ interface ApplicationLayoutProps {
1516
const ApplicationLayout: React.FC<ApplicationLayoutProps> = ({children}) => {
1617

1718
return <ResizablePanelGroup orientation={"horizontal"}>
18-
<ResizablePanel id={"1"} defaultSize={"25%"}>
19+
<SidebarComponent title={"Explorer"} id={"1"}>
1920
<FlowFolderView/>
20-
</ResizablePanel>
21+
</SidebarComponent>
2122
<ResizableHandle/>
2223
{children}
2324
</ResizablePanelGroup>

‎src/packages/ce/src/application/pages/ApplicationSettingsPage.tsx‎

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import {
88
Flex,
99
Spacing,
1010
SwitchInput,
11-
Text, TextInput,
11+
Text,
12+
TextInput,
1213
toast,
1314
useForm,
1415
useService,
@@ -26,6 +27,7 @@ import {
2627
ResizablePanel,
2728
ResizablePanelGroup
2829
} from "@code0-tech/pictor/dist/components/resizable/Resizable";
30+
import {SidebarComponent} from "@core/components/SidebarComponent";
2931

3032
export const ApplicationSettingsPage: React.FC = () => {
3133

@@ -89,34 +91,22 @@ export const ApplicationSettingsPage: React.FC = () => {
8991

9092
return <Tab orientation={"vertical"} defaultValue={"general"} h={"100%"}>
9193
<ResizablePanelGroup>
92-
<ResizablePanel id={"1"} defaultSize={"20%"} collapsedSize={"0%"}
93-
collapsible minSize={"10%"} style={{textWrap: "nowrap"}}>
94-
<Flex style={{flexDirection: "column", gap: "0.7rem"}}>
95-
<Flex style={{gap: "0.7rem"}} align={"center"} justify={"space-between"}>
96-
<Text size={"md"} hierarchy={"secondary"}>Application settings</Text>
97-
98-
<Button variant={"none"} paddingSize={"xxs"}>
99-
<IconLayoutSidebar size={16}/>
94+
<SidebarComponent id={"1"}
95+
title={"Application settings"}
96+
description={"General settings and restrictions for your Sculptor application. These settings affect all users and organizations within the application."}>
97+
<TabList>
98+
<TabTrigger value={"general"} w={"100%"} asChild>
99+
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
100+
<Text size={"md"}>General</Text>
100101
</Button>
101-
</Flex>
102-
<Text size={"sm"} hierarchy={"tertiary"} style={{textWrap: "wrap"}}>
103-
General settings and restrictions for your Sculptor application. These settings affect all users
104-
and organizations within the application.
105-
</Text>
106-
<TabList>
107-
<TabTrigger value={"general"} w={"100%"} asChild>
108-
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
109-
<Text size={"md"}>General</Text>
110-
</Button>
111-
</TabTrigger>
112-
<TabTrigger value={"restrictions"} w={"100%"} asChild>
113-
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
114-
<Text size={"md"}>Restrictions</Text>
115-
</Button>
116-
</TabTrigger>
117-
</TabList>
118-
</Flex>
119-
</ResizablePanel>
102+
</TabTrigger>
103+
<TabTrigger value={"restrictions"} w={"100%"} asChild>
104+
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
105+
<Text size={"md"}>Restrictions</Text>
106+
</Button>
107+
</TabTrigger>
108+
</TabList>
109+
</SidebarComponent>
120110
<ResizableHandle/>
121111
<ResizablePanel id={"2"} color={"primary"} p={1} style={{borderTopLeftRadius: "1rem"}}>
122112
<>

‎src/packages/ce/src/flow/views/FlowFolderView.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -82,12 +82,6 @@ export const FlowFolderView: React.FC = () => {
8282

8383
<Layout layoutGap={"0.7rem"} showLayoutSplitter={false} topContent={
8484
<Flex style={{flexDirection: "column", gap: "0.7rem"}}>
85-
<Flex style={{gap: "0.7rem"}} align={"center"} justify={"space-between"}>
86-
<Text size={"md"} hierarchy={"secondary"}>Explorer</Text>
87-
<Button variant={"none"} paddingSize={"xxs"}>
88-
<IconLayoutSidebar size={16}/>
89-
</Button>
90-
</Flex>
9185
<Flex style={{gap: "0.35rem"}} align={"center"} justify={"space-between"}>
9286
<Button color={"tertiary"} paddingSize={"xxs"} style={{textWrap: "nowrap"}} onClick={() => {
9387
setCreateDialogOpen(true)

‎src/packages/ce/src/organization/pages/OrganizationSettingsPage.tsx‎

Lines changed: 30 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -13,55 +13,44 @@ import {
1313
ResizablePanel,
1414
ResizablePanelGroup
1515
} from "@code0-tech/pictor/dist/components/resizable/Resizable";
16+
import {SidebarComponent} from "@core/components/SidebarComponent";
1617

1718
export const OrganizationSettingsPage: React.FC = () => {
1819

1920
//TODO: add ability check for organization settings access for every settings tab
2021

2122
return <Tab orientation={"vertical"} defaultValue={"general"} h={"100%"}>
2223
<ResizablePanelGroup>
23-
<ResizablePanel id={"1"} defaultSize={"20%"} collapsedSize={"0%"}
24-
collapsible minSize={"10%"} style={{textWrap: "nowrap"}}>
25-
<Flex style={{flexDirection: "column", gap: "0.7rem"}}>
26-
<Flex style={{gap: "0.7rem"}} align={"center"} justify={"space-between"}>
27-
<Text size={"md"} hierarchy={"secondary"}>Organization settings</Text>
28-
29-
<Button variant={"none"} paddingSize={"xxs"}>
30-
<IconLayoutSidebar size={16}/>
24+
<SidebarComponent id={"1"}
25+
title={"Organization settings"}
26+
description={"General settings and restrictions for your Sculptor application. These settings affect all users and organizations within the application."}>
27+
<TabList>
28+
<TabTrigger value={"general"} w={"100%"} asChild>
29+
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
30+
<Text size={"md"} hierarchy={"primary"}>General</Text>
3131
</Button>
32-
</Flex>
33-
<Text size={"sm"} hierarchy={"tertiary"} style={{textWrap: "wrap"}}>
34-
General settings and restrictions for your Sculptor application. These settings affect all users
35-
and organizations within the application.
36-
</Text>
37-
<TabList>
38-
<TabTrigger value={"general"} w={"100%"} asChild>
39-
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
40-
<Text size={"md"} hierarchy={"primary"}>General</Text>
41-
</Button>
42-
</TabTrigger>
43-
<TabTrigger value={"upgrade"} w={"100%"} asChild>
44-
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
45-
<Text size={"md"} hierarchy={"primary"} display={"flex"} align={"center"}
46-
style={{gap: "0.35rem"}}>
47-
Upgrade to Team
48-
</Text>
49-
<AuroraBackground/>
50-
</Button>
51-
</TabTrigger>
52-
<TabTrigger disabled value={"usage"} w={"100%"} asChild>
53-
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
54-
<Text size={"md"} hierarchy={"primary"}>Runtime usage</Text>
55-
</Button>
56-
</TabTrigger>
57-
<TabTrigger value={"delete"} w={"100%"} asChild>
58-
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
59-
<Text size={"md"} hierarchy={"primary"}>Delete organization</Text>
60-
</Button>
61-
</TabTrigger>
62-
</TabList>
63-
</Flex>
64-
</ResizablePanel>
32+
</TabTrigger>
33+
<TabTrigger value={"upgrade"} w={"100%"} asChild>
34+
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
35+
<Text size={"md"} hierarchy={"primary"} display={"flex"} align={"center"}
36+
style={{gap: "0.35rem"}}>
37+
Upgrade to Team
38+
</Text>
39+
<AuroraBackground/>
40+
</Button>
41+
</TabTrigger>
42+
<TabTrigger disabled value={"usage"} w={"100%"} asChild>
43+
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
44+
<Text size={"md"} hierarchy={"primary"}>Runtime usage</Text>
45+
</Button>
46+
</TabTrigger>
47+
<TabTrigger value={"delete"} w={"100%"} asChild>
48+
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
49+
<Text size={"md"} hierarchy={"primary"}>Delete organization</Text>
50+
</Button>
51+
</TabTrigger>
52+
</TabList>
53+
</SidebarComponent>
6554
<ResizableHandle/>
6655
<ResizablePanel id={"2"} color={"primary"} p={1}
6756
style={{borderTopLeftRadius: "1rem", borderTopRightRadius: "1rem"}}>

‎src/packages/ce/src/project/pages/ProjectSettingsPage.tsx‎

Lines changed: 22 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -12,46 +12,35 @@ import {
1212
ResizablePanel,
1313
ResizablePanelGroup
1414
} from "@code0-tech/pictor/dist/components/resizable/Resizable";
15+
import {SidebarComponent} from "@core/components/SidebarComponent";
1516

1617
export const ProjectSettingsPage: React.FC = () => {
1718
return <Tab orientation={"vertical"} defaultValue={"general"} h={"100%"}>
1819
<ResizablePanelGroup>
19-
<ResizablePanel id={"1"} defaultSize={"20%"} collapsedSize={"0%"}
20-
collapsible minSize={"10%"} style={{textWrap: "nowrap"}}>
21-
<Flex style={{flexDirection: "column", gap: "0.7rem"}}>
22-
<Flex style={{gap: "0.7rem"}} align={"center"} justify={"space-between"}>
23-
<Text size={"md"} hierarchy={"secondary"}>Project settings</Text>
24-
25-
<Button variant={"none"} paddingSize={"xxs"}>
26-
<IconLayoutSidebar size={16}/>
20+
<SidebarComponent id={"1"}
21+
title={"Project settings"}
22+
description={"General settings and restrictions for your Sculptor application. These settings affect all users and organizations within the application."}>
23+
<TabList>
24+
<TabTrigger value={"general"} w={"100%"} asChild>
25+
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
26+
<Text size={"md"}>General</Text>
2727
</Button>
28-
</Flex>
29-
<Text size={"sm"} hierarchy={"tertiary"} style={{textWrap: "wrap"}}>
30-
General settings and restrictions for your Sculptor application. These settings affect all users
31-
and organizations within the application.
32-
</Text>
33-
<TabList>
34-
<TabTrigger value={"general"} w={"100%"} asChild>
35-
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
36-
<Text size={"md"}>General</Text>
37-
</Button>
38-
</TabTrigger>
39-
<TabTrigger value={"access"} w={"100%"} asChild>
40-
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
41-
<Text size={"md"}>Runtimes</Text>
42-
</Button>
43-
</TabTrigger>
44-
<TabTrigger value={"delete"} w={"100%"} asChild>
45-
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
46-
<Text size={"md"}>Delete</Text>
47-
</Button>
48-
</TabTrigger>
49-
</TabList>
50-
</Flex>
51-
</ResizablePanel>
28+
</TabTrigger>
29+
<TabTrigger value={"access"} w={"100%"} asChild>
30+
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
31+
<Text size={"md"}>Runtimes</Text>
32+
</Button>
33+
</TabTrigger>
34+
<TabTrigger value={"delete"} w={"100%"} asChild>
35+
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
36+
<Text size={"md"}>Delete</Text>
37+
</Button>
38+
</TabTrigger>
39+
</TabList>
40+
</SidebarComponent>
5241
<ResizableHandle/>
5342
<ResizablePanel id={"2"} color={"primary"} p={1}
54-
style={{borderTopLeftRadius: "1rem", borderTopRightRadius: "1rem"}}>
43+
style={{borderTopLeftRadius: "1rem", borderTopRightRadius: "1rem"}}>
5544
<>
5645
<ProjectSettingsGeneralView/>
5746
<ProjectSettingsRuntimesView/>

‎src/packages/ce/src/role/pages/RoleSettingsPage.tsx‎

Lines changed: 28 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,18 @@
11
"use client"
22

33
import React from "react";
4-
import {
5-
Button,
6-
Flex,
7-
ScrollArea,
8-
ScrollAreaScrollbar,
9-
ScrollAreaThumb,
10-
ScrollAreaViewport,
11-
Text
12-
} from "@code0-tech/pictor";
4+
import {Button, ScrollArea, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, Text} from "@code0-tech/pictor";
135
import {Tab, TabList, TabTrigger} from "@code0-tech/pictor/dist/components/tab/Tab";
146
import {RoleProjectView} from "@edition/role/views/RoleProjectView";
157
import {RolePermissionView} from "@edition/role/views/RolePermissionView";
168
import {RoleGeneralAdjustmentView} from "@edition/role/views/RoleGeneralAdjustmentView";
179
import {RoleDeleteView} from "@edition/role/views/RoleDeleteView";
18-
import {IconLayoutSidebar} from "@tabler/icons-react";
1910
import {
2011
ResizableHandle,
2112
ResizablePanel,
2213
ResizablePanelGroup
2314
} from "@code0-tech/pictor/dist/components/resizable/Resizable";
15+
import {SidebarComponent} from "@core/components/SidebarComponent";
2416

2517
export const RoleSettingsPage: React.FC = () => {
2618

@@ -29,48 +21,35 @@ export const RoleSettingsPage: React.FC = () => {
2921
return <>
3022
<Tab orientation={"vertical"} defaultValue={"general"} h={"100%"}>
3123
<ResizablePanelGroup>
32-
<ResizablePanel id={"1"} defaultSize={"20%"} collapsedSize={"0%"}
33-
collapsible minSize={"10%"} style={{textWrap: "nowrap"}}>
34-
<Flex style={{flexDirection: "column", gap: "0.7rem"}}>
35-
<Flex style={{gap: "0.7rem"}} align={"center"} justify={"space-between"}>
36-
<Text size={"md"} hierarchy={"secondary"}>Role settings</Text>
37-
38-
<Button variant={"none"} paddingSize={"xxs"}>
39-
<IconLayoutSidebar size={16}/>
24+
<SidebarComponent id={"1"}
25+
title={"Role settings"}
26+
description={"General settings and restrictions for your Sculptor application. These settings affect all users and organizations within the application."}>
27+
<TabList>
28+
<TabTrigger value={"general"} w={"100%"} asChild>
29+
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
30+
<Text size={"md"}>General</Text>
4031
</Button>
41-
</Flex>
42-
<Text size={"sm"} hierarchy={"tertiary"} style={{textWrap: "wrap"}}>
43-
General settings and restrictions for your Sculptor application. These settings affect all
44-
users
45-
and organizations within the application.
46-
</Text>
47-
<TabList pr={"0.7"}>
48-
<TabTrigger value={"general"} w={"100%"} asChild>
49-
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
50-
<Text size={"md"}>General</Text>
51-
</Button>
52-
</TabTrigger>
53-
<TabTrigger value={"permission"} w={"100%"} asChild>
54-
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
55-
<Text size={"md"}>Permissions</Text>
56-
</Button>
57-
</TabTrigger>
58-
<TabTrigger value={"project"} w={"100%"} asChild>
59-
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
60-
<Text size={"md"}>Limit to projects</Text>
61-
</Button>
62-
</TabTrigger>
63-
<TabTrigger value={"delete"} w={"100%"} asChild>
64-
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
65-
<Text size={"md"}>Delete role</Text>
66-
</Button>
67-
</TabTrigger>
68-
</TabList>
69-
</Flex>
70-
</ResizablePanel>
32+
</TabTrigger>
33+
<TabTrigger value={"permission"} w={"100%"} asChild>
34+
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
35+
<Text size={"md"}>Permissions</Text>
36+
</Button>
37+
</TabTrigger>
38+
<TabTrigger value={"project"} w={"100%"} asChild>
39+
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
40+
<Text size={"md"}>Limit to projects</Text>
41+
</Button>
42+
</TabTrigger>
43+
<TabTrigger value={"delete"} w={"100%"} asChild>
44+
<Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
45+
<Text size={"md"}>Delete role</Text>
46+
</Button>
47+
</TabTrigger>
48+
</TabList>
49+
</SidebarComponent>
7150
<ResizableHandle/>
7251
<ResizablePanel id={"2"} color={"primary"} p={1}
73-
style={{borderTopLeftRadius: "1rem", borderTopRightRadius: "1rem"}}>
52+
style={{borderTopLeftRadius: "1rem", borderTopRightRadius: "1rem"}}>
7453
<ScrollArea h={"100%"} w={"100%"} type={"scroll"}>
7554
<ScrollAreaViewport>
7655
<RoleGeneralAdjustmentView/>

0 commit comments

Comments
 (0)