Skip to content

Commit 1508e3c

Browse files
nicosammitonicosammito
authored
Merge pull request #234 from code0-tech/feat/#193
Execution result/s views
2 parents 8652630 + f6cf8c5 commit 1508e3c

53 files changed

Lines changed: 1875 additions & 1390 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.env.local‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ NEXT_PUBLIC_EDITION=ce
44
SAGITTARIUS_GRAPHQL_URL=http://localhost:80/graphql
55

66
NEXT_PUBLIC_SCULPTOR_VERSION=0.0.0
7-
NEXT_PUBLIC_PICTOR_VERSION=0.9.1
7+
NEXT_PUBLIC_PICTOR_VERSION=0.10.3
88
NEXT_PUBLIC_ALLOWED_REDIRECT_DOMAINS=*.code0.tech,*.codezero.build
99

1010
NEXT_PUBLIC_OTEL_SERVICE_NAME=#"sculptor-client"

‎package-lock.json‎

Lines changed: 789 additions & 694 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
},
1616
"dependencies": {
1717
"@apollo/client": "^4.0.9",
18-
"@code0-tech/pictor": "^0.9.1",
19-
"@code0-tech/triangulum": "^0.19.1",
18+
"@code0-tech/pictor": "^0.10.3",
19+
"@code0-tech/triangulum": "^0.22.0",
2020
"@codemirror/lang-javascript": "^6.2.5",
2121
"@codemirror/lint": "^6.9.5",
2222
"@opentelemetry/api": "^1.9.1",
@@ -27,7 +27,9 @@
2727
"@opentelemetry/instrumentation-fetch": "^0.218.0",
2828
"@opentelemetry/instrumentation-xml-http-request": "^0.218.0",
2929
"@opentelemetry/sdk-trace-web": "^2.6.1",
30+
"@uidotdev/usehooks": "^2.4.1",
3031
"@vercel/otel": "^2.1.1",
32+
"@xyflow/react": "^12.11.0",
3133
"date-fns": "^4.1.0",
3234
"graphql": "^16.12.0",
3335
"graphql-tag": "^2.12.6",

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

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
"use client"
22

3-
import {
4-
Button,
5-
Flex,
6-
} from "@code0-tech/pictor";
3+
import {Button, Flex,} from "@code0-tech/pictor";
74
import React from "react";
8-
import {IconDatabase, IconFile, IconMessageChatbot} from "@tabler/icons-react";
5+
import {IconFile, IconPlayerPlay} from "@tabler/icons-react";
96
import {useParams} from "next/navigation";
107
import {Flow} from "@code0-tech/sagittarius-graphql-types";
118
import {FlowBuilderComponent} from "@edition/flow/components/builder/FlowBuilderComponent";
@@ -16,6 +13,7 @@ import {
1613
ResizablePanelGroup
1714
} from "@code0-tech/pictor/dist/components/resizable/Resizable";
1815
import {Layout} from "@code0-tech/pictor/dist/components/layout/Layout";
16+
import {FlowExecutionResultView} from "@edition/flow/views/FlowExecutionResultView";
1917

2018
export default function Page() {
2119

@@ -24,31 +22,49 @@ export default function Page() {
2422
const flowIndex = params.flowId as any as number
2523
const flowId: Flow['id'] = `gid://sagittarius/Flow/${flowIndex}`
2624

27-
const [show, setShow] = React.useState(false);
25+
const [tab, setTab] = React.useState<string | undefined>(undefined);
2826

2927
return <ResizablePanel id={"2"}>
3028
<Layout layoutGap={0} showLayoutSplitter={false} rightContent={
3129
<Flex pl={0.7} style={{flexDirection: "column", gap: "0.7rem"}}>
32-
<Button aria-selected={show} onClick={() => setShow(prevState => !prevState)} variant={"none"}
30+
<Button aria-selected={tab === "file"}
31+
onClick={() => setTab(prevState => prevState === "file" ? undefined : "file")} variant={"none"}
3332
paddingSize={"xs"}>
3433
<IconFile size={16}/>
3534
</Button>
36-
<Button variant={"none"} paddingSize={"xs"}>
37-
<IconDatabase size={16}/>
38-
</Button>
39-
<Button variant={"none"} paddingSize={"xs"}>
40-
<IconMessageChatbot size={16}/>
35+
<Button aria-selected={tab === "execution"}
36+
onClick={() => setTab(prevState => prevState === "execution" ? undefined : "execution")}
37+
variant={"none"}
38+
paddingSize={"xs"}>
39+
<IconPlayerPlay size={16}/>
4140
</Button>
4241
</Flex>
4342
}>
4443
<ResizablePanelGroup orientation={"horizontal"} key={flowIndex}>
45-
<ResizablePanel id={"2"} color={"primary"} style={{borderTopLeftRadius: "1rem", borderTopRightRadius: "1rem"}}>
46-
<FlowBuilderComponent flowId={flowId} namespaceId={undefined} projectId={undefined}/>
44+
<ResizablePanel id={"2"}>
45+
<ResizablePanelGroup orientation={"vertical"}>
46+
<ResizablePanel id={"1"} color={"primary"}
47+
style={{borderRadius: "1rem"}}>
48+
<FlowBuilderComponent flowId={flowId} namespaceId={undefined} projectId={undefined}/>
49+
</ResizablePanel>
50+
{
51+
tab === "execution" && (
52+
<>
53+
<ResizableHandle/>
54+
<ResizablePanel id={"2"} color={"primary"}
55+
style={{borderTopLeftRadius: "1rem", borderTopRightRadius: "1rem"}}>
56+
<FlowExecutionResultView/>
57+
</ResizablePanel>
58+
</>
59+
)
60+
}
61+
</ResizablePanelGroup>
4762
</ResizablePanel>
48-
{show && (
63+
{tab === "file" && (
4964
<>
5065
<ResizableHandle/>
51-
<ResizablePanel id={"3"} defaultSize={"25%"} color={"primary"} style={{borderTopLeftRadius: "1rem", borderTopRightRadius: "1rem"}}>
66+
<ResizablePanel id={"3"} defaultSize={"25%"} color={"primary"}
67+
style={{borderTopLeftRadius: "1rem", borderTopRightRadius: "1rem"}}>
5268
<FunctionFilesComponent flowId={flowId} namespaceId={undefined}
5369
projectId={undefined}/>
5470
</ResizablePanel>

‎src/app/layout.tsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ import {ErrorLink} from "@apollo/client/link/error";
1717
import {useRouter} from "next/navigation";
1818
import {Toaster} from "sonner";
1919
import {Error} from "@code0-tech/sagittarius-graphql-types";
20-
import {toast} from "@code0-tech/pictor";
2120
import {Inter} from 'next/font/google'
2221
import {GraphQLFormattedError} from "graphql/error";
22+
import {addIslandErrorNotification} from "@code0-tech/pictor/dist/components/island/Island.hook";
2323

2424
/**
2525
* Load the Inter font with Latin subset and swap display strategy
@@ -70,16 +70,12 @@ const ErrorCodeDescription: Record<string, string> = {
7070
const toastHandler = (error: Error | GraphQLFormattedError) => {
7171
console.error("[ERROR]", error)
7272
if (error && "errorCode" in error) {
73-
toast({
74-
title: ErrorCodeDescription[(error.errorCode as string)],
75-
color: "error",
76-
dismissible: true,
73+
addIslandErrorNotification({
74+
message: ErrorCodeDescription[(error.errorCode as string)]
7775
})
7876
} else {
79-
toast({
80-
title: "An internal error occurred",
81-
color: "error",
82-
dismissible: true,
77+
addIslandErrorNotification({
78+
message: "Internal error"
8379
})
8480
}
8581
}

‎src/packages/ce/src/application/views/ApplicationBarView.tsx‎

Lines changed: 38 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
"use client"
22

3-
import {Button, Flex, MenuItem, MenuSeparator, useService, useStore} from "@code0-tech/pictor";
3+
import {Button, Flex, MenuItem, MenuSeparator, Text, useService, useStore} from "@code0-tech/pictor";
44
import {UserService} from "@edition/user/services/User.service";
5-
import {useRouter} from "next/navigation";
5+
import {useParams, useRouter} from "next/navigation";
66
import React from "react";
77
import Link from "next/link";
88
import {IconBuilding, IconFolders, IconInbox, IconLogout, IconSearch, IconUser} from "@tabler/icons-react";
99
import {ApplicationBreadcrumbView} from "@edition/application/views/ApplicationBreadcrumbView";
1010
import UserMenuComponent from "@edition/user/components/UserMenuComponent";
1111
import {useUserSession} from "@edition/user/hooks/User.session.hook";
12+
import {Island} from "@code0-tech/pictor/dist/components/island/Island";
13+
import {ButtonGroup} from "@code0-tech/pictor/dist/components/button-group/ButtonGroup";
1214

1315
export const ApplicationBarView: React.FC = () => {
1416

@@ -17,10 +19,14 @@ export const ApplicationBarView: React.FC = () => {
1719
const userStore = useStore(UserService)
1820
const router = useRouter()
1921
const [loading, startTransition] = React.useTransition()
22+
const params = useParams()
2023

24+
const namespaceIndex = params.namespaceId as string | undefined
25+
const projectIndex = params.projectId as string | undefined
2126
const currentUser = React.useMemo(() => userService.getById(currentSession?.user?.id), [userStore, currentSession])
22-
const namespaceIndex = React.useMemo(() => currentUser?.namespace?.id?.match(/Namespace\/(\d+)$/)?.[1], [currentUser])
27+
const userNamespaceIndex = React.useMemo(() => currentUser?.namespace?.id?.match(/Namespace\/(\d+)$/)?.[1], [currentUser])
2328
const userIndex = currentUser?.id?.match(/User\/(\d+)$/)?.[1]
29+
const currentStep = projectIndex ? "project" : namespaceIndex ? "namespace" : "home";
2430

2531
const userMenu = React.useMemo(() => {
2632

@@ -51,7 +57,7 @@ export const ApplicationBarView: React.FC = () => {
5157
<IconBuilding size={16}/>Organizations
5258
</MenuItem>
5359
</Link>
54-
<Link href={`/namespace/${namespaceIndex}`}>
60+
<Link href={`/namespace/${userNamespaceIndex}`}>
5561
<MenuItem>
5662
<IconFolders size={16}/>Personal Workspace
5763
</MenuItem>
@@ -61,10 +67,36 @@ export const ApplicationBarView: React.FC = () => {
6167
<IconLogout size={16}/>Logout
6268
</MenuItem>
6369
</UserMenuComponent>
64-
}, [currentUser, currentSession, namespaceIndex])
70+
}, [currentUser, currentSession, userNamespaceIndex])
6571

66-
return <Flex py={0.7} align={"center"} justify={"space-between"}>
72+
return <Flex py={0.7} key={`island-${currentStep}`} align={"center"} justify={"space-between"}>
6773
<ApplicationBreadcrumbView/>
74+
<Flex pos={"fixed"} top={"1rem"} left={"50%"} justify={"center"}
75+
style={{zIndex: 9999, transform: "translateX(-50%)"}}>
76+
<Island>
77+
<ButtonGroup color={"primary"} bg={"transparent"} style={{boxShadow: "none"}}>
78+
<Button paddingSize={"xxs"} key={"home-button"} variant={"none"}
79+
aria-selected={!namespaceIndex && !projectIndex} onClick={() => router.push(`/`)}>
80+
<Text>Home</Text>
81+
</Button>
82+
{namespaceIndex ? (
83+
<Button paddingSize={"xxs"} key={"orga-button"} variant={"none"}
84+
onClick={() => router.push(`/namespace/${namespaceIndex}`)}
85+
aria-selected={!!namespaceIndex && !projectIndex}>
86+
<Text>Organization</Text>
87+
</Button>
88+
) : (null as any)}
89+
{namespaceIndex && projectIndex ? (
90+
<Button paddingSize={"xxs"} key={"home-button"} variant={"none"}
91+
onClick={() => router.push(`/namespace/${namespaceIndex}/project/${projectIndex}/flow`)}
92+
aria-selected={!!namespaceIndex && !!projectIndex}>
93+
<Text>Project</Text>
94+
</Button>
95+
) : (null as any)}
96+
</ButtonGroup>
97+
98+
</Island>
99+
</Flex>
68100
<Flex align={"center"} style={{gap: ".7rem"}}>
69101
<Button disabled variant={"none"} paddingSize={"xs"}>
70102
<IconSearch size={16}/>

0 commit comments

Comments
 (0)