feat: showing primary endpoint

nicosammito · nicosammito · commit e76f6766e86c · 2026-06-09T15:41:29.000+02:00
diff --git a/src/packages/ce/src/flow/components/panels/FlowPanelControlComponent.tsx b/src/packages/ce/src/flow/components/panels/FlowPanelControlComponent.tsx
@@ -1,8 +1,17 @@
 import React from "react";
-import {Flow, LiteralValue, NodeFunction, ReferenceValue, SubFlowValue} from "@code0-tech/sagittarius-graphql-types";
+import {
+    Flow,
+    LiteralValue,
+    Namespace,
+    NamespaceProject,
+    NodeFunction,
+    ReferenceValue,
+    SubFlowValue
+} from "@code0-tech/sagittarius-graphql-types";
 import {
     Badge,
     Button,
+    Spacing,
     Text,
     Tooltip,
     TooltipContent,
@@ -15,10 +24,16 @@ import {Panel} from "@xyflow/react";
 import {ButtonGroup} from "@code0-tech/pictor/dist/components/button-group/ButtonGroup";
 import {FlowService} from "@edition/flow/services/Flow.service";
 import {SuggestionDialogComponent} from "@edition/function/components/suggestion/SuggestionDialogComponent";
-import {Suggestion} from "@edition/function/components/suggestion/Suggestion.util";
 import {useHotkeys} from "react-hotkeys-hook";
 import {useSelectedFunctionNode} from "@edition/function/hooks/FunctionNode.selected.hook";
 import {useFunctionSuggestions} from "@edition/function/hooks/Function.suggestion.hook";
+import {useParams} from "next/navigation";
+import {FlowTypeService} from "@edition/flowtype/services/FlowType.service";
+import {ProjectService} from "@edition/project/services/Project.service";
+import {ModuleService} from "@edition/module/services/Module.service";
+import {IconCheck, IconCopy} from "@tabler/icons-react";
+import {InputWrapper} from "@code0-tech/pictor/dist/components/form/InputWrapper";
+import {useCopyToClipboard} from "@uidotdev/usehooks";
 
 export interface FlowPanelControlComponentProps {
     flowId: Flow['id']
@@ -30,17 +45,71 @@ export const FlowPanelControlComponent: React.FC<FlowPanelControlComponentProps>
     const {flowId} = props
 
     //services and stores
+    const params = useParams()
     const flowService = useService(FlowService)
     const flowStore = useStore(FlowService)
+    const flowTypeService = useService(FlowTypeService)
+    const flowTypeStore = useStore(FlowTypeService)
+    const projectService = useService(ProjectService)
+    const projectStore = useStore(ProjectService)
+    const moduleService = useService(ModuleService)
+    const moduleStore = useStore(ModuleService)
+
+    const [copiedText, copyToClipboard] = useCopyToClipboard();
+    const hasCopiedText = Boolean(copiedText);
     const [, startTransition] = React.useTransition()
     const [suggestionDialogOpen, setSuggestionDialogOpen] = React.useState(false)
     const [addNextNodeTooltipOpen, setAddNextNodeTooltipOpen] = React.useState(false)
 
+    const namespaceIndex = params.namespaceId as any as number
+    const projectIndex = params.projectId as any as number
+    const namespaceId: Namespace['id'] = `gid://sagittarius/Namespace/${namespaceIndex}`
+    const projectId: NamespaceProject['id'] = `gid://sagittarius/NamespaceProject/${projectIndex}`
+
     //memoized values
     const selectedNode = useSelectedFunctionNode()
-
     const result = useFunctionSuggestions()
 
+    const flow = React.useMemo(
+        () => flowService.getById(flowId, {
+            namespaceId,
+            projectId
+        }),
+        [flowId, flowStore, namespaceId, projectId]
+    )
+
+    const project = React.useMemo(
+        () => projectService.getById(projectId, {
+            namespaceId
+        }),
+        [projectId, namespaceId, projectStore]
+    )
+
+    const flowType = React.useMemo(
+        () => flowTypeService.getById(flow?.type?.id, {
+            namespaceId,
+            projectId,
+            runtimeId: project?.primaryRuntime?.id
+        }),
+        [flow?.type?.id, namespaceId, projectId, project?.primaryRuntime?.id, flowTypeStore]
+    )
+
+    const module = React.useMemo(
+        () => moduleService.getById(flowType?.runtimeModule?.id, {
+            namespaceId: namespaceId,
+            projectId: projectId,
+            runtimeId: project?.primaryRuntime?.id
+        }),
+        [flowType?.runtimeModule?.id, namespaceId, projectId, project?.primaryRuntime?.id, moduleStore]
+    )
+
+    let endpoint = `http://${module?.definitions?.nodes?.[0]?.host}:${module?.definitions?.nodes?.[0]?.port}${module?.definitions?.nodes?.[0]?.endpoint}`
+        .replace("${{project_slug}}", project?.slug ?? "${{project_slug}}")
+
+    flow?.settings?.nodes?.forEach(setting => {
+        endpoint = endpoint.replace(`\${{${setting?.flowSettingIdentifier}}}`, setting?.value)
+    })
+
     //callbacks
     const deleteActiveNode = React.useCallback(() => {
         if (!selectedNode) return
@@ -83,7 +152,7 @@ export const FlowPanelControlComponent: React.FC<FlowPanelControlComponentProps>
                             disabled={!selectedNode}
                             onClick={deleteActiveNode}
                             paddingSize={"xxs"}
-                            variant={"filled"}
+                            variant={"none"}
                             color={"error"}>
                         <Text>Delete node</Text>
                     </Button>
@@ -99,11 +168,11 @@ export const FlowPanelControlComponent: React.FC<FlowPanelControlComponentProps>
                     <Button data-qa-selector={"flow-builder-control-panel-add"}
                             disabled={!selectedNode || !!selectedNode.data.functionId}
                             paddingSize={"xxs"}
-                            variant={"filled"}
+                            variant={"none"}
                             onClick={() => {
                                 if (selectedNode && !selectedNode.data.functionId) setSuggestionDialogOpen(true)
                             }}
-                            color={"secondary"}>
+                            color={"tertiary"}>
                         <Text display={"flex"} align={"center"} style={{gap: "0.35rem"}}>
                             Add next node
                             <Badge style={{gap: 0}}>Shift + A</Badge>
@@ -116,7 +185,51 @@ export const FlowPanelControlComponent: React.FC<FlowPanelControlComponentProps>
                     </TooltipContent>}
                 </TooltipPortal>
             </Tooltip>
+            {module?.definitions?.nodes?.[0] ? (
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <Button data-qa-selector={"flow-builder-control-panel-execute"}
+                                paddingSize={"xxs"}
+                                variant={"none"}
+                                color={"tertiary"}>
+                            <Text>
+                                Execute flow
+                            </Text>
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipPortal>
+                        <TooltipContent p={0.7} sideOffset={8} color={"secondary"}>
+                            <Text>
+                                Execute the flow to see the results <br/> in the runtime.
+                            </Text>
+                            <Spacing spacing={"xs"}/>
+                            <InputWrapper title={"Endpoint"} right={
+                                <ButtonGroup color={"primary"}>
+                                    <Button onClick={() => {
+                                        copyToClipboard(endpoint)
+                                    }} paddingSize={"xxs"} variant={"none"} color={"secondary"}>
+                                        {hasCopiedText ? <IconCheck size={13}/> : <IconCopy size={13}/>}
+                                    </Button>
+                                </ButtonGroup>
+                            }>
+                                <div style={{
+                                    alignSelf: "center",
+                                    flex: "1 1 auto"
+                                }}>
+                                    <Text>
+                                        {endpoint}
+                                    </Text>
+                                </div>
+
+                            </InputWrapper>
+                        </TooltipContent>
+                    </TooltipPortal>
+                </Tooltip>
+            ) : (null as any)}
+
         </ButtonGroup>
+
+
     </Panel>
 
 }
diff --git a/src/packages/ce/src/function/components/nodes/FunctionNodeTriggerComponent.tsx b/src/packages/ce/src/function/components/nodes/FunctionNodeTriggerComponent.tsx
@@ -1,11 +1,11 @@
 import React, {CSSProperties, memo} from "react";
 import {Handle, Node, NodeProps, Position} from "@xyflow/react";
-import {Badge, Card, Flex, Text, useService, useStore as usePictorStore} from "@code0-tech/pictor";
+import {Badge, Card, Flex, Text, useService, useStore, useStore as usePictorStore} from "@code0-tech/pictor";
 import {FunctionNodeComponentProps} from "@edition/function/components/nodes/FunctionNodeComponent";
 import {FlowTypeService} from "@edition/flowtype/services/FlowType.service";
 import {FlowService} from "@edition/flow/services/Flow.service";
 import {IconVariable} from "@tabler/icons-react";
-import {NodeFunction} from "@code0-tech/sagittarius-graphql-types";
+import {Namespace, NamespaceProject, NodeFunction} from "@code0-tech/sagittarius-graphql-types";
 import {icon, IconString} from "@core/util/icons";
 import {FALLBACK_FLOW_TYPE_DISPLAY_MESSAGE, FALLBACK_FLOW_TYPE_NAME} from "@core/util/fallback-translations";
 import {useFlowValidation} from "@edition/flow/hooks/Flow.validation.hook";
@@ -14,21 +14,73 @@ import {useSelectedFunctionNode} from "@edition/function/hooks/FunctionNode.sele
 import {LiteralBadgeComponent} from "@edition/datatype/components/badges/LiteralBadgeComponent";
 import {ReferenceBadgeComponent} from "@edition/datatype/components/badges/ReferenceBadgeComponent";
 import {NodeBadgeComponent} from "@edition/datatype/components/badges/NodeBadgeComponent";
+import {useParams} from "next/navigation";
+import {ProjectService} from "@edition/project/services/Project.service";
+import {ModuleService} from "@edition/module/services/Module.service";
 
 
 export type FunctionNodeTriggerComponentProps = NodeProps<Node<FunctionNodeComponentProps>>
 
 export const FunctionNodeTriggerComponent: React.FC<FunctionNodeTriggerComponentProps> = memo((props) => {
 
     const {data, id, selected} = props
+
+    const params = useParams()
     const flowTypeService = useService(FlowTypeService)
     const flowTypeStore = usePictorStore(FlowTypeService)
     const flowService = useService(FlowService)
     const flowStore = usePictorStore(FlowService)
+    const projectService = useService(ProjectService)
+    const projectStore = useStore(ProjectService)
+    const moduleService = useService(ModuleService)
+    const moduleStore = useStore(ModuleService)
+
+    const namespaceIndex = params.namespaceId as any as number
+    const projectIndex = params.projectId as any as number
+    const namespaceId: Namespace['id'] = `gid://sagittarius/Namespace/${namespaceIndex}`
+    const projectId: NamespaceProject['id'] = `gid://sagittarius/NamespaceProject/${projectIndex}`
+
+    const flow = React.useMemo(
+        () => flowService.getById(data.flowId, {
+            namespaceId,
+            projectId
+        }),
+        [data.flowId, namespaceId, projectId, flowStore]
+    )
+
+    const project = React.useMemo(
+        () => projectService.getById(projectId, {
+            namespaceId
+        }),
+        [projectId, namespaceId, projectStore]
+    )
+
+    const flowType = React.useMemo(
+        () => flowTypeService.getById(flow?.type?.id, {
+            namespaceId,
+            projectId,
+            runtimeId: project?.primaryRuntime?.id
+        }),
+        [flow?.type?.id, namespaceId, projectId, project?.primaryRuntime?.id, flowTypeStore]
+    )
 
-    const flow = React.useMemo(() => flowService.getById(data.flowId), [flowStore, data])
-    const definition = React.useMemo(() => flow ? flowTypeService.getById(flow.type?.id) : undefined, [flowTypeStore, flow])
-    const DisplayIcon = icon(definition?.displayIcon as IconString)
+    const module = React.useMemo(
+        () => moduleService.getById(flowType?.runtimeModule?.id, {
+            namespaceId: namespaceId,
+            projectId: projectId,
+            runtimeId: project?.primaryRuntime?.id
+        }),
+        [flowType?.runtimeModule?.id, namespaceId, projectId, project?.primaryRuntime?.id, moduleStore]
+    )
+
+    let endpoint = `http://${module?.definitions?.nodes?.[0]?.host}:${module?.definitions?.nodes?.[0]?.port}${module?.definitions?.nodes?.[0]?.endpoint}`
+        .replace("${{project_slug}}", project?.slug ?? "${{project_slug}}")
+
+    flow?.settings?.nodes?.forEach(setting => {
+        endpoint = endpoint.replace(`\${{${setting?.flowSettingIdentifier}}}`, setting?.value)
+    })
+
+    const DisplayIcon = icon(flowType?.displayIcon as IconString)
     const validation = useFlowValidation(data.flowId)
 
     const triggerValidations = React.useMemo(
@@ -55,15 +107,15 @@ export const FunctionNodeTriggerComponent: React.FC<FunctionNodeTriggerComponent
                         .flatMap(p => p.trim() === "," ? [","] : p.trim() ? [p.trim()] : [])
             )
 
-    const displayMessage = React.useMemo(() => splitTemplate(definition?.displayMessages?.[0]?.content ?? FALLBACK_FLOW_TYPE_DISPLAY_MESSAGE).map(item => {
+    const displayMessage = React.useMemo(() => splitTemplate(flowType?.displayMessages?.[0]?.content ?? FALLBACK_FLOW_TYPE_DISPLAY_MESSAGE).map(item => {
 
         const nodeParameter = flow?.settings?.nodes?.find((_, index) => {
-            const parameterDefinition = definition?.flowTypeSettings?.[index]
+            const parameterDefinition = flowType?.flowTypeSettings?.[index]
             return parameterDefinition?.identifier == item
         })
 
-        const parameterDefinition = definition?.flowTypeSettings?.find(pd => pd?.identifier == item)
-        const parameterIndex = parameterDefinition ? definition?.flowTypeSettings?.findIndex(p => p?.id === parameterDefinition.id) : undefined
+        const parameterDefinition = flowType?.flowTypeSettings?.find(pd => pd?.identifier == item)
+        const parameterIndex = parameterDefinition ? flowType?.flowTypeSettings?.findIndex(p => p?.id === parameterDefinition.id) : undefined
         const parameterValidation = validation?.filter(v => v.parameterIndex === parameterIndex && !v.nodeId)
         const decorationStyle: CSSProperties =
             parameterValidation?.length
@@ -94,7 +146,7 @@ export const FunctionNodeTriggerComponent: React.FC<FunctionNodeTriggerComponent
             </div>
         }
         return " " + String(item) + " "
-    }), [flowStore, data, definition, validation])
+    }), [flowStore, data, flowType, validation])
 
     const isReferenced = React.useMemo(() => {
 
@@ -121,17 +173,24 @@ export const FunctionNodeTriggerComponent: React.FC<FunctionNodeTriggerComponent
                  className={`d-flow-node ${selected ? "d-flow-node--active" : undefined}`}
                  style={{...(isReferenced === true ? {boxShadow: `0 0 5rem 0 rgba(112, 255, 178, 0.25)`} : {}),}}>
 
-        <Badge color={"info"}
-               pos={"absolute"}
-               top={"-0.35rem"}
-               left={"50%"}
-               style={{transform: "translate(-50%, -100%)"}}>
-            Starting node
-        </Badge>
+        <Flex pos={"absolute"}
+              top={"-0.35rem"}
+              left={"50%"}
+              align={"center"}
+              style={{transform: "translate(-50%, -100%)", flexDirection: "column", gap: "0.35rem"}}>
+            <Badge color={"info"}>
+                Flow trigger
+            </Badge>
+            {module?.definitions?.nodes?.[0] && (
+                <Badge color={"secondary"}>
+                    <Text size={"xs"}>{endpoint}</Text>
+                </Badge>
+            )}
+        </Flex>
 
         <Flex style={{gap: "0.7rem", ...triggerValidationStyle}} align={"center"}>
             <DisplayIcon color={data.color} size={16}/>
-            <Text size={"md"}>{flow ? displayMessage : definition?.names?.[0].content ?? FALLBACK_FLOW_TYPE_NAME}</Text>
+            <Text size={"md"}>{flow ? displayMessage : flowType?.names?.[0].content ?? FALLBACK_FLOW_TYPE_NAME}</Text>
         </Flex>
 
         {
