feat: extend flow hooks and components to support namespace and project IDs

nicosammito · nicosammito · commit 6bdc7e136dea · 2025-12-17T23:47:38.000+01:00
diff --git a/src/components/d-flow-file/DFlowTabs.tsx b/src/components/d-flow-file/DFlowTabs.tsx
@@ -8,7 +8,7 @@ import {IconArrowDown, IconArrowUp, IconCornerDownLeft, IconDotsVertical, IconPl
 import {FileTabsView} from "../file-tabs/FileTabs.view";
 import {DLayout} from "../d-layout/DLayout";
 import {ButtonGroup} from "../button-group/ButtonGroup";
-import {Flow} from "@code0-tech/sagittarius-graphql-types";
+import {Flow, type Namespace, type NamespaceProject} from "@code0-tech/sagittarius-graphql-types";
 import {DFlowReactiveService} from "../d-flow";
 import {DFlowTypeReactiveService} from "../d-flow-type";
 import {Card} from "../card/Card";
@@ -18,11 +18,13 @@ import {Spacing} from "../spacing/Spacing";
 
 export interface DFlowTabsProps {
     flowId: Flow['id']
+    namespaceId: Namespace['id']
+    projectId: NamespaceProject['id']
 }
 
 export const DFlowTabs: React.FC<DFlowTabsProps> = (props) => {
 
-    const {flowId} = props
+    const {flowId, namespaceId, projectId} = props
 
     const fileTabsService = useService(FileTabsService)
     const fileTabsStore = useStore(FileTabsService)
@@ -32,7 +34,7 @@ export const DFlowTabs: React.FC<DFlowTabsProps> = (props) => {
     const flowTypeStore = useStore(DFlowTypeReactiveService)
     const id = React.useId()
 
-    const flow = React.useMemo(() => flowService.getById(flowId), [flowStore])
+    const flow = React.useMemo(() => flowService.getById(flowId, {namespaceId, projectId}), [flowStore])
     const flowType = React.useMemo(() => flowTypeService.getById(flow?.type?.id!!), [flowTypeStore, flow])
     const activeTabId = React.useMemo(() => {
         return fileTabsStore.find((t: any) => (t as any).active)?.id ?? fileTabsService.getActiveTab()?.id;
diff --git a/src/components/d-flow-folder/DFlowFolder.tsx b/src/components/d-flow-folder/DFlowFolder.tsx
@@ -8,11 +8,10 @@ import {
     IconChevronRight,
     IconDots,
     IconFile,
-    IconFolder,
     IconFolderFilled,
     IconFolderOpen
 } from "@tabler/icons-react"
-import type {Flow, FlowType, Scalars} from "@code0-tech/sagittarius-graphql-types"
+import type {Flow, FlowType, Namespace, NamespaceProject, Scalars} from "@code0-tech/sagittarius-graphql-types"
 import {DFlowReactiveService} from "../d-flow"
 import {ScrollArea, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport} from "../scroll-area/ScrollArea"
 import {Flex} from "../flex/Flex"
@@ -28,6 +27,8 @@ import {md5} from "js-md5";
 
 export interface DFlowFolderProps {
     activeFlowId: Scalars["FlowID"]["output"]
+    namespaceId: Namespace['id']
+    projectId: NamespaceProject['id']
     onRename?: (contextData: DFlowFolderContextMenuGroupData | DFlowFolderContextMenuItemData) => void
     onDelete?: (contextData: DFlowFolderContextMenuGroupData | DFlowFolderContextMenuItemData) => void
     onCreate?: (type: FlowType['id']) => void
@@ -58,7 +59,7 @@ export interface DFlowFolderItemProps extends DFlowFolderProps, Omit<Code0Compon
 
 export const DFlowFolder = React.forwardRef<DFlowFolderHandle, DFlowFolderProps>((props, ref) => {
 
-    const {activeFlowId} = props
+    const {activeFlowId, namespaceId, projectId} = props
 
     const flowService = useService(DFlowReactiveService)
     const flowStore = useStore(DFlowReactiveService)
@@ -74,7 +75,7 @@ export const DFlowFolder = React.forwardRef<DFlowFolderHandle, DFlowFolderProps>
         p.replace(/^\/+|\/+$/g, "").split("/").filter(Boolean)
 
     const flows = React.useMemo<Flow[]>(() => {
-        const raw = (flowService.values?.() ?? []) as Flow[]
+        const raw = (flowService.values?.({namespaceId, projectId}) ?? []) as Flow[]
         return raw.filter(f => !!f?.name)
     }, [flowStore])
 
@@ -261,7 +262,8 @@ export const DFlowFolderItem: React.FC<DFlowFolderItemProps> = (props) => {
         flow: flow,
         type: "item"
     }} {...rest}>
-        <div {...mergeCode0Props(`d-folder__item ${active ? "d-folder__item--active" : ""}`, rest)} onClick={() => onSelect?.(flow)}>
+        <div {...mergeCode0Props(`d-folder__item ${active ? "d-folder__item--active" : ""}`, rest)}
+             onClick={() => onSelect?.(flow)}>
             <IconFile color={`hsl(${hashToHue(colorHash)}, 100%, 72%)`} size={12}/>
             <Text>{name}</Text>
         </div>
diff --git a/src/components/d-flow/DFlow.edges.hook.ts b/src/components/d-flow/DFlow.edges.hook.ts
@@ -4,36 +4,41 @@ import {Edge} from "@xyflow/react";
 import {DFlowFunctionReactiveService} from "../d-flow-function";
 import {DFlowDataTypeReactiveService} from "../d-flow-data-type";
 import React from "react";
-import type {DataTypeIdentifier, Flow, NodeFunction, Scalars} from "@code0-tech/sagittarius-graphql-types";
+import type {
+    DataTypeIdentifier,
+    Flow,
+    Namespace,
+    NamespaceProject,
+    NodeFunction,
+    Scalars
+} from "@code0-tech/sagittarius-graphql-types";
 import {md5} from "js-md5";
 import {DFlowEdgeDataProps} from "./DFlowEdge";
 
 export const FLOW_EDGE_RAINBOW: string[] = [
-    'rgba(255, 255, 255, 0.25)',    // rot
+    'rgba(255, 255, 255, 0.25)',
 ];
 
 // @ts-ignore
-export const useFlowEdges = (flowId: Flow['id']): Edge<DFlowEdgeDataProps>[] => {
+export const useFlowEdges = (flowId: Flow['id'], namespaceId?: Namespace['id'], projectId?: NamespaceProject['id']): Edge<DFlowEdgeDataProps>[] => {
     const flowService = useService(DFlowReactiveService);
     const flowStore = useStore(DFlowReactiveService)
     const functionService = useService(DFlowFunctionReactiveService);
     const functionStore = useStore(DFlowFunctionReactiveService)
     const dataTypeService = useService(DFlowDataTypeReactiveService);
     const dataTypeStore = useStore(DFlowDataTypeReactiveService)
 
-    const flow = React.useMemo(() => flowService.getById(flowId), [flowId, flowStore])
+    const flow = React.useMemo(() => flowService.getById(flowId, {namespaceId, projectId}), [flowId, flowStore])
 
     return React.useMemo(() => {
         if (!flow) return [];
 
         // @ts-ignore
         const edges: Edge<DFlowEdgeDataProps>[] = [];
 
-        /** merkt sich für jede Function-Card die Gruppen-IDs,
-         *  **für die wirklich ein Funktions-Wert existiert**      */
         const groupsWithValue = new Map<string, string[]>();
 
-        let idCounter = 0;              // globale, fortlaufende Id-Vergabe
+        let idCounter = 0;
 
         const functionCache = new Map<string, ReturnType<typeof functionService.getById>>();
         const dataTypeCache = new Map<DataTypeIdentifier, ReturnType<typeof dataTypeService.getDataType>>();
diff --git a/src/components/d-flow/DFlow.nodes.hook.ts b/src/components/d-flow/DFlow.nodes.hook.ts
@@ -3,7 +3,14 @@ import {DFlowReactiveService} from "./DFlow.service";
 import {Node} from "@xyflow/react";
 import {DFlowFunctionReactiveService} from "../d-flow-function";
 import {DFlowDataTypeReactiveService} from "../d-flow-data-type";
-import type {DataTypeIdentifier, Flow, NodeFunction, Scalars} from "@code0-tech/sagittarius-graphql-types";
+import type {
+    DataTypeIdentifier,
+    Flow,
+    Namespace,
+    NamespaceProject,
+    NodeFunction,
+    Scalars
+} from "@code0-tech/sagittarius-graphql-types";
 import React from "react";
 import {DFlowFunctionDefaultCardDataProps} from "../d-flow-function/DFlowFunctionDefaultCard";
 import {DFlowFunctionSuggestionCardDataProps} from "../d-flow-function/DFlowFunctionSuggestionCard";
@@ -96,15 +103,15 @@ const bestMatchValue = (map: Map<string, string>, input: string): string => {
 };
 
 // @ts-ignore
-export const useFlowNodes = (flowId: Flow['id']): Node<DFlowFunctionDefaultCardDataProps | DFlowFunctionSuggestionCardDataProps | DFlowFunctionTriggerCardDataProps | DFlowFunctionGroupCardDataProps>[] => {
+export const useFlowNodes = (flowId: Flow['id'], namespaceId?: Namespace['id'], projectId?: NamespaceProject['id']): Node<DFlowFunctionDefaultCardDataProps | DFlowFunctionSuggestionCardDataProps | DFlowFunctionTriggerCardDataProps | DFlowFunctionGroupCardDataProps>[] => {
     const flowService = useService(DFlowReactiveService);
     const flowStore = useStore(DFlowReactiveService);
     const functionService = useService(DFlowFunctionReactiveService);
     const functionStore = useStore(DFlowFunctionReactiveService);
     const dataTypeService = useService(DFlowDataTypeReactiveService);
     const dataTypeStore = useStore(DFlowDataTypeReactiveService);
 
-    const flow = React.useMemo(() => flowService.getById(flowId), [flowId, flowStore])
+    const flow = React.useMemo(() => flowService.getById(flowId, {namespaceId, projectId}), [flowId, flowStore])
 
     return React.useMemo(() => {
         if (!flow) return [];
diff --git a/src/components/d-flow/DFlow.service.ts b/src/components/d-flow/DFlow.service.ts
@@ -6,6 +6,8 @@ import {
     FlowInput,
     FlowSetting,
     LiteralValue,
+    Namespace,
+    NamespaceProject,
     NamespacesProjectsFlowsCreateInput,
     NamespacesProjectsFlowsCreatePayload,
     NamespacesProjectsFlowsDeleteInput,
@@ -18,11 +20,15 @@ import {
     ReferenceValue
 } from "@code0-tech/sagittarius-graphql-types";
 
+export type DFlowDependencies = {
+    namespaceId: Namespace['id']
+    projectId: NamespaceProject['id']
+}
 
-export abstract class DFlowReactiveService extends ReactiveArrayService<Flow> {
+export abstract class DFlowReactiveService extends ReactiveArrayService<Flow, DFlowDependencies> {
 
-    getById(id: Flow['id']): Flow | undefined {
-        return this.values().find(value => value.id === id);
+    getById(id: Flow['id'], dependencies?: DFlowDependencies): Flow | undefined {
+        return this.values(dependencies).find(value => value.id === id);
     }
 
     protected removeParameterNode(flow: Flow, parameter: NodeParameter): void {
diff --git a/src/components/d-flow/DFlow.tsx b/src/components/d-flow/DFlow.tsx
@@ -20,7 +20,7 @@ import {DFlowFunctionTriggerCard} from "../d-flow-function/DFlowFunctionTriggerC
 import {DFlowEdge} from "./DFlowEdge";
 import {DFlowPanelSize} from "../d-flow-panel";
 import {DFlowValidation} from "../d-flow-validation";
-import {Flow} from "@code0-tech/sagittarius-graphql-types";
+import {Flow, type Namespace, type NamespaceProject} from "@code0-tech/sagittarius-graphql-types";
 import {useFlowNodes} from "./DFlow.nodes.hook";
 import {useFlowEdges} from "./DFlow.edges.hook";
 import {DFlowPanelControl} from "../d-flow-panel";
@@ -515,6 +515,8 @@ const getCachedLayoutElements = React.cache(getLayoutElements)
 
 export interface DFlowProps extends Code0ComponentProps {
     flowId: Flow['id']
+    namespaceId: Namespace['id']
+    projectId: NamespaceProject['id']
 }
 
 export const DFlow: React.FC<DFlowProps> = (props) => {
@@ -525,7 +527,7 @@ export const DFlow: React.FC<DFlowProps> = (props) => {
 
 const InternalDFlow: React.FC<DFlowProps> = (props) => {
 
-    const {flowId} = props
+    const {flowId, namespaceId, projectId} = props
     const nodeTypes = {
         default: DFlowFunctionDefaultCard,
         group: DFlowFunctionGroupCard,
@@ -537,8 +539,8 @@ const InternalDFlow: React.FC<DFlowProps> = (props) => {
         default: DFlowEdge,
     }
 
-    const initialNodes = useFlowNodes(flowId)
-    const initialEdges = useFlowEdges(flowId)
+    const initialNodes = useFlowNodes(flowId, namespaceId, projectId)
+    const initialEdges = useFlowEdges(flowId, namespaceId, projectId)
     const [nodes, setNodes] = useNodesState<Node>([])
     const [edges, setEdges, edgeChangeEvent] = useEdgesState<Edge>([])
     const updateNodeInternals = useUpdateNodeInternals()
