diff --git a/.env.local b/.env.local index dac9ed83..efe07359 100644 --- a/.env.local +++ b/.env.local @@ -8,7 +8,7 @@ PLAYGROUND_MOCK_DIR=#./mock PLAYGROUND_FRAME_ANCESTORS=#"'self'" NEXT_PUBLIC_SCULPTOR_VERSION=0.0.0 -NEXT_PUBLIC_PICTOR_VERSION=0.17.1 +NEXT_PUBLIC_PICTOR_VERSION=0.18.0 NEXT_PUBLIC_ALLOWED_REDIRECT_DOMAINS=*.code0.tech,*.codezero.build NEXT_PUBLIC_SUBSCRIPTION_URL=https://codezero.build/subscription diff --git a/next.config.ts b/next.config.ts index 08caa5af..982ada63 100644 --- a/next.config.ts +++ b/next.config.ts @@ -44,6 +44,17 @@ const nextConfig: NextConfig = { // per-file Babel pass (the compiler is a Babel plugin) which is the // dominant cost of Turbopack dev compile time and memory here. reactCompiler: process.env.NODE_ENV === "production", + // Rewrite barrel imports from the code0 UI packages into direct submodule + // imports. Without this, each of the ~186 files importing from + // "@code0-tech/pictor" pulls the entire dist/index.js barrel (~364 modules) + // into that route's Turbopack compile graph. This is the dominant dev + // compile cost. date-fns/lodash/@radix-ui are already optimized by default. + experimental: { + optimizePackageImports: [ + "@code0-tech/pictor", + "@code0-tech/triangulum", + ], + }, turbopack: { resolveAlias: { "@edition": path.resolve(__dirname, `src/packages/${EDITION}/src`), diff --git a/package-lock.json b/package-lock.json index 535132e9..ef46e500 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.0", "dependencies": { "@apollo/client": "^4.0.9", - "@code0-tech/pictor": "^0.17.1", + "@code0-tech/pictor": "^0.18.0", "@code0-tech/triangulum": "^0.33.0", "@code0-tech/tucana": "^0.0.82", "@codemirror/lang-javascript": "^6.2.5", @@ -1902,9 +1902,9 @@ } }, "node_modules/@code0-tech/pictor": { - "version": "0.17.1", - "resolved": "https://registry.npmjs.org/@code0-tech/pictor/-/pictor-0.17.1.tgz", - "integrity": "sha512-3T/M7N4XL39Mn6F58aZt1GAYwmVnHmDQybjIQ2QaUH11bC/Xj7+qEg8vvEXf9385y4ePaFLWfpHCKoEMZ/xatA==", + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/@code0-tech/pictor/-/pictor-0.18.0.tgz", + "integrity": "sha512-+MEB0XCi7n8zTH3IRCChx088h8Bf12hhy7rcbKmO9iHRucfpenmm/9szLr+mT1PzOoARKwjVPT2TTZbNdJ7+FA==", "peerDependencies": { "@ark-ui/react": "^5.36.2", "@codemirror/autocomplete": "^6.20.0", diff --git a/package.json b/package.json index 74272aff..9e4ceec9 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ }, "dependencies": { "@apollo/client": "^4.0.9", - "@code0-tech/pictor": "^0.17.1", + "@code0-tech/pictor": "^0.18.0", "@code0-tech/triangulum": "^0.33.0", "@code0-tech/tucana": "^0.0.82", "@codemirror/lang-javascript": "^6.2.5", diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx index a43016ae..47dbbdbd 100644 --- a/src/app/(dashboard)/layout.tsx +++ b/src/app/(dashboard)/layout.tsx @@ -2,7 +2,7 @@ import React from "react"; import {useApolloClient} from "@apollo/client/react"; -import {ContextStoreProvider} from "@code0-tech/pictor"; +import {AuroraBackground, ContextStoreProvider} from "@code0-tech/pictor"; import {UserService} from "@edition/user/services/User.service"; import {GraphqlClient} from "@core/util/graphql-client"; import {useParams, usePathname} from "next/navigation"; @@ -20,12 +20,14 @@ import {RoleView} from "@edition/role/services/Role.view"; import {Layout} from "@code0-tech/pictor/dist/components/layout/Layout"; import { DataType, - Flow, FlowType, + Flow, + FlowType, FunctionDefinition, Namespace, NamespaceMember, NamespaceProject, - Runtime, RuntimeModule, + Runtime, + RuntimeModule, User } from "@code0-tech/sagittarius-graphql-types"; import {ApplicationMiddlewareComponent} from "@edition/application/components/ApplicationMiddlewareComponent"; @@ -93,20 +95,56 @@ const ApplicationLayout: React.FC = ({children, sidebar, services={[application, user, organization, member, namespace, runtime, project, role, flow, functions, datatype, flowtype, module, ai]}> - - }> - +
+
+ + +
+ +
{sidebar}
}> - <> - {children} - {modal} - + opacity: "0.25", + filter: "blur(5rem)", + }}> + + +
+ }> + {sidebar}}> + <> + {children} + {modal} + + - - + diff --git a/src/app/(dashboard)/namespace/[namespaceId]/project/[projectId]/module/page.tsx b/src/app/(dashboard)/namespace/[namespaceId]/project/[projectId]/module/page.tsx index 9da7a156..8996d04b 100644 --- a/src/app/(dashboard)/namespace/[namespaceId]/project/[projectId]/module/page.tsx +++ b/src/app/(dashboard)/namespace/[namespaceId]/project/[projectId]/module/page.tsx @@ -1,3 +1,3 @@ -import {ModulesPage} from "@ce-internal/module/pages/ModulesPage"; +import {ModuleOverviewPage} from "@edition/module/pages/ModuleOverviewPage"; -export default ModulesPage \ No newline at end of file +export default ModuleOverviewPage \ No newline at end of file diff --git a/src/app/global.scss b/src/app/global.scss index 542f4d65..39a14063 100644 --- a/src/app/global.scss +++ b/src/app/global.scss @@ -21,7 +21,6 @@ a { } .scroll-area__viewport > div { - display: block !important; height: 100%; } diff --git a/src/packages/ce/src/ai/components/AIChatComponent.tsx b/src/packages/ce/src/ai/components/AIChatComponent.tsx index ed995452..3df291dc 100644 --- a/src/packages/ce/src/ai/components/AIChatComponent.tsx +++ b/src/packages/ce/src/ai/components/AIChatComponent.tsx @@ -7,7 +7,7 @@ import { EditorInputValue, EditorTokenRule, Flex, getSize, - Progress, + ProgressLinear, SelectContent, SelectItem, SelectItemText, @@ -309,7 +309,7 @@ export const AIChatComponent: React.FC = (props) => { Upgrade your license to increase your AI usage limit - ) : ( diff --git a/src/packages/ce/src/application/components/ApplicationAttentionFlowsComponent.tsx b/src/packages/ce/src/application/components/ApplicationAttentionFlowsComponent.tsx index de0c1e6e..ade9887a 100644 --- a/src/packages/ce/src/application/components/ApplicationAttentionFlowsComponent.tsx +++ b/src/packages/ce/src/application/components/ApplicationAttentionFlowsComponent.tsx @@ -100,7 +100,7 @@ export const ApplicationAttentionFlowsComponent: React.FC setOpen(previous => !previous)}> + return setOpen(previous => !previous)}> diff --git a/src/packages/ce/src/application/pages/ApplicationPage.tsx b/src/packages/ce/src/application/pages/ApplicationPage.tsx index 22727696..243b511f 100644 --- a/src/packages/ce/src/application/pages/ApplicationPage.tsx +++ b/src/packages/ce/src/application/pages/ApplicationPage.tsx @@ -13,15 +13,13 @@ import {ApplicationAttentionFlowsComponent} from "@edition/application/component export const ApplicationPage = () => { return
-
+
diff --git a/src/packages/ce/src/application/views/ApplicationNavigationView.tsx b/src/packages/ce/src/application/views/ApplicationNavigationView.tsx index d1efdc3b..30673636 100644 --- a/src/packages/ce/src/application/views/ApplicationNavigationView.tsx +++ b/src/packages/ce/src/application/views/ApplicationNavigationView.tsx @@ -4,7 +4,7 @@ import React, {startTransition} from "react"; import { Avatar, Button, - Flex, + Flex, getSize, Icon, Menu, MenuContent, @@ -70,7 +70,7 @@ export const ApplicationNavigationView: React.FC = () => { - @@ -87,7 +87,7 @@ export const ApplicationNavigationView: React.FC = () => { - @@ -105,7 +105,7 @@ export const ApplicationNavigationView: React.FC = () => { - @@ -120,7 +120,7 @@ export const ApplicationNavigationView: React.FC = () => { - @@ -134,7 +134,7 @@ export const ApplicationNavigationView: React.FC = () => { - diff --git a/src/packages/ce/src/flow/components/folder/FlowFolderComponent.style.scss b/src/packages/ce/src/flow/components/folder/FlowFolderComponent.style.scss index 2544d69b..f88d71ff 100644 --- a/src/packages/ce/src/flow/components/folder/FlowFolderComponent.style.scss +++ b/src/packages/ce/src/flow/components/folder/FlowFolderComponent.style.scss @@ -54,7 +54,7 @@ &:before { height: 100%; - width: 2px; + width: 1px; background: helpers.backgroundColor(variables.$tertiary); position: absolute; content: ""; diff --git a/src/packages/ce/src/flow/views/FlowExecutionResultView.tsx b/src/packages/ce/src/flow/views/FlowExecutionResultView.tsx index d374cb32..ff5274c7 100644 --- a/src/packages/ce/src/flow/views/FlowExecutionResultView.tsx +++ b/src/packages/ce/src/flow/views/FlowExecutionResultView.tsx @@ -115,7 +115,9 @@ export const FlowExecutionResultView: React.FC = () => { const flowTypeStore = useStore(FlowTypeService) const projectService = useService(ProjectService) const projectStore = useStore(ProjectService) + const [activeTab, setActiveTab] = React.useState() + const previousPendingRef = React.useRef([]) const namespaceIndex = params.namespaceId as any as number const projectIndex = params.projectId as any as number @@ -161,14 +163,12 @@ export const FlowExecutionResultView: React.FC = () => { ) const executions = useFlowExecutionStore(s => s.executions) + const pendingExecutions = React.useMemo( () => executions.filter(execution => execution.flowId === flowId), [executions, flowId] ) - // When a manual execution is triggered elsewhere (the definition panel) its pending - // entry appears here; focus its loading tab so the user sees the spinner immediately. - const previousPendingRef = React.useRef([]) React.useEffect(() => { const currentIds = pendingExecutions.map(execution => execution.executionIdentifier) const newlyAdded = currentIds.find(id => !previousPendingRef.current.includes(id)) @@ -176,8 +176,6 @@ export const FlowExecutionResultView: React.FC = () => { previousPendingRef.current = currentIds }, [pendingExecutions]) - // Once the pending execution resolves its loading tab disappears; fall back to the - // newest result so the freshly arrived execution result becomes visible. React.useEffect(() => { if (!activeTab) return const stillPending = pendingExecutions.some(execution => execution.executionIdentifier === activeTab) @@ -312,7 +310,7 @@ export const FlowExecutionResultView: React.FC = () => { - #{id?.match(/ExecutionResult\/(\d+)$/)?.[1]} + #{id?.match(/\/ExecutionResult\/(\d+)(?:\/|$)/)?.[1]} {formatDistanceToNow(execution?.createdAt ?? "")} diff --git a/src/packages/ce/src/flow/views/FlowFolderView.tsx b/src/packages/ce/src/flow/views/FlowFolderView.tsx index 92521b7c..303c17de 100644 --- a/src/packages/ce/src/flow/views/FlowFolderView.tsx +++ b/src/packages/ce/src/flow/views/FlowFolderView.tsx @@ -76,7 +76,7 @@ export const FlowFolderView: React.FC = () => { Explorer - + -
diff --git a/src/packages/ce/src/module/pages/ModulesPage.tsx b/src/packages/ce/src/module/pages/ModuleOverviewPage.tsx similarity index 89% rename from src/packages/ce/src/module/pages/ModulesPage.tsx rename to src/packages/ce/src/module/pages/ModuleOverviewPage.tsx index 0961d3cc..845d5d09 100644 --- a/src/packages/ce/src/module/pages/ModulesPage.tsx +++ b/src/packages/ce/src/module/pages/ModuleOverviewPage.tsx @@ -57,7 +57,7 @@ const sortLabels = { functions: "Functions", } as const -export const ModulesPage: React.FC = () => { +export const ModuleOverviewPage: React.FC = () => { const router = useRouter() const params = useParams() @@ -104,18 +104,12 @@ export const ModulesPage: React.FC = () => { }) }, [modules, filter, sort]) - // Every runtime module (across all runtimes) so we can inspect an integration's - // required configuration definitions on each runtime, not just the primary one. + const allModules = React.useMemo( () => moduleService.values(), [moduleStore] ) - // For each integration, the runtimes it isn't fully configured on. A required - // (non-optional) configuration with an unset value (null/undefined) counts as - // unconfigured. Configurations are linked to a runtime, so we check every runtime - // assignment of this project. Severity is "error" when the primary runtime is - // affected, otherwise "warning" when only secondary runtimes are. const integrationSetupStatus = React.useMemo(() => { const result = new Map() const assignments = project?.runtimeAssignments?.nodes ?? [] @@ -157,31 +151,17 @@ export const ModulesPage: React.FC = () => { }, [modules, allModules, project, runtimeStore]) return
-
- - {/* ── page header ── */} - - - Integrations - - - Connect {project?.name ?? "your project"} to the tools your workflows depend on. - - - - +
{/* ── section header: count + filter / sort / request ── */} - Installed + Installed integrations {visibleModules.length} @@ -235,7 +215,11 @@ export const ModulesPage: React.FC = () => { - + + + Manage the integrations installed in this project. You can configure existing ones or request new ones. + + {/* ── the grid of installed integrations ── */} @@ -250,7 +234,7 @@ export const ModulesPage: React.FC = () => { const moduleNumber = module?.id?.match(/RuntimeModule\/(\d+)$/)?.[1] return - router.push(`/namespace/${namespaceIndex}/project/${projectIndex}/module/${moduleNumber}`) : undefined}> @@ -311,12 +295,11 @@ export const ModulesPage: React.FC = () => { })} {/* request-integration affordance, matching card footprint */} - + - )} - {isSelf && ( + {isSelf && providers.length > 0 && ( -
-
- - or continue with - -
-
- + { + providers.length > 0 ? ( + <> +
+
+ + or continue with + +
+
+ + + ) : null + } diff --git a/src/packages/cloud/src/namespace/components/NamespaceLicensesDataTableRowComponent.tsx b/src/packages/cloud/src/namespace/components/NamespaceLicensesDataTableRowComponent.tsx index 81439fe0..f270c0c5 100644 --- a/src/packages/cloud/src/namespace/components/NamespaceLicensesDataTableRowComponent.tsx +++ b/src/packages/cloud/src/namespace/components/NamespaceLicensesDataTableRowComponent.tsx @@ -1,6 +1,16 @@ import React from "react"; import {License, Namespace} from "@code0-tech/sagittarius-graphql-types"; -import {Badge, Button, DataTableColumn, Flex, Progress, Spacing, Text, useService, useStore} from "@code0-tech/pictor"; +import { + Badge, + Button, + DataTableColumn, + Flex, + ProgressLinear, + Spacing, + Text, + useService, + useStore +} from "@code0-tech/pictor"; import {formatDistanceToNow, isFuture, isPast} from "date-fns"; import {IconX} from "@tabler/icons-react"; import {NamespaceService} from "@cloud-internal/namespace/services/Namespace.service"; @@ -79,7 +89,7 @@ export const NamespaceLicensesDataTableRowComponent: React.FC - @@ -91,7 +101,7 @@ export const NamespaceLicensesDataTableRowComponent: React.FC - + You used 50% of your available workflow executions and will used 89% until its reseted. diff --git a/src/packages/cloud/src/namespace/views/NamespaceLicensesView.tsx b/src/packages/cloud/src/namespace/views/NamespaceLicensesView.tsx index 2c439209..c2549e0e 100644 --- a/src/packages/cloud/src/namespace/views/NamespaceLicensesView.tsx +++ b/src/packages/cloud/src/namespace/views/NamespaceLicensesView.tsx @@ -7,7 +7,7 @@ import { Card, Col, Flex, - Progress, + ProgressLinear, Row, Spacing, Text @@ -83,7 +83,7 @@ export const NamespaceLicensesView: React.FC = () => { - @@ -99,7 +99,7 @@ export const NamespaceLicensesView: React.FC = () => { - + You used 50% of your available workflow executions and will used 89% until its reseted. diff --git a/src/packages/ee/src/application/components/ApplicationLicensesDataTableRowComponent.tsx b/src/packages/ee/src/application/components/ApplicationLicensesDataTableRowComponent.tsx index 52061578..ae621f33 100644 --- a/src/packages/ee/src/application/components/ApplicationLicensesDataTableRowComponent.tsx +++ b/src/packages/ee/src/application/components/ApplicationLicensesDataTableRowComponent.tsx @@ -1,6 +1,16 @@ import React from "react"; import {License} from "@code0-tech/sagittarius-graphql-types"; -import {Badge, Button, DataTableColumn, Flex, Progress, Spacing, Text, useService, useStore} from "@code0-tech/pictor"; +import { + Badge, + Button, + DataTableColumn, + Flex, + ProgressLinear, + Spacing, + Text, + useService, + useStore +} from "@code0-tech/pictor"; import {ApplicationService} from "@ee-internal/application/services/Application.service"; import {formatDistanceToNow, isFuture, isPast} from "date-fns"; import {IconX} from "@tabler/icons-react"; @@ -78,7 +88,7 @@ export const ApplicationLicensesDataTableRowComponent: React.FC - @@ -90,7 +100,7 @@ export const ApplicationLicensesDataTableRowComponent: React.FC - + You used 50% of your available workflow executions and will used 89% until its reseted. diff --git a/src/packages/ee/src/application/views/ApplicationLicensesView.tsx b/src/packages/ee/src/application/views/ApplicationLicensesView.tsx index 1b2bb948..bb135a97 100644 --- a/src/packages/ee/src/application/views/ApplicationLicensesView.tsx +++ b/src/packages/ee/src/application/views/ApplicationLicensesView.tsx @@ -7,7 +7,7 @@ import { Card, Col, Flex, - Progress, + ProgressLinear, Row, Spacing, Text @@ -73,7 +73,7 @@ export const ApplicationLicensesView: React.FC = () => { - @@ -89,7 +89,7 @@ export const ApplicationLicensesView: React.FC = () => { - + You used 50% of your available workflow executions and will used 89% until its reseted.