Merge pull request #302 from code0-tech/feat/fixing-definition-showing

Fixing copy to clipboard and endpoint definition visibility

Author: nicosammito

package-lock.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@apollo/client": "^4.0.9",
     "@code0-tech/pictor": "^0.11.1",
-    "@code0-tech/triangulum": "^0.26.1",
+    "@code0-tech/triangulum": "^0.26.2",
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lint": "^6.9.5",
     "@icons-pack/react-simple-icons": "^13.13.0",

package.json

@@ -68,12 +68,12 @@ export const FlowPanelDefinitionComponent: React.FC = () => {
     )
 
     const module = React.useMemo(
-        () => moduleService.getById(flowType?.runtimeModule?.id, {
+        () => moduleService.getById(flowType?.runtimeFlowType?.runtimeModule?.id, {
             namespaceId: namespaceId,
             projectId: projectId,
             runtimeId: project?.primaryRuntime?.id
         }),
-        [flowType?.runtimeModule?.id, namespaceId, projectId, project?.primaryRuntime?.id, moduleStore]
+        [flowType?.runtimeFlowType?.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}`
@@ -83,6 +83,27 @@ export const FlowPanelDefinitionComponent: React.FC = () => {
         endpoint = endpoint.replace(`\${{${setting?.flowSettingIdentifier}}}`, setting?.value)
     })
 
+    const copyEndpoint = (event: React.MouseEvent<HTMLElement>) => {
+        if (!navigator?.clipboard?.writeText) {
+            // Without a secure context there is no Clipboard API and the hook falls back to a
+            // textarea on document.body, which the modal dialog's focus trap keeps unfocusable,
+            // so Firefox copies nothing. Run the same fallback inside the dialog instead; the
+            // copyToClipboard call below still records the copied state.
+            const dialog = event.currentTarget.closest("[role='dialog']")
+            if (dialog) {
+                const textArea = document.createElement("textarea")
+                textArea.value = endpoint
+                textArea.style.position = "fixed"
+                textArea.style.opacity = "0"
+                dialog.appendChild(textArea)
+                textArea.select()
+                document.execCommand("copy")
+                dialog.removeChild(textArea)
+            }
+        }
+        copyToClipboard(endpoint)
+    }
+
     return module?.definitions?.nodes?.[0] &&
         <Panel position={"bottom-right"} data-qa-selector={"flow-builder-definition-panel"}>
             <ButtonGroup style={{textWrap: "nowrap"}}>
@@ -110,9 +131,8 @@ export const FlowPanelDefinitionComponent: React.FC = () => {
                                           ) : undefined}
                                           right={
                                               <ButtonGroup color={"primary"}>
-                                                  <Button onClick={() => {
-                                                      copyToClipboard(endpoint)
-                                                  }} paddingSize={"xxs"} variant={"none"} color={"secondary"}>
+                                                  <Button onClick={copyEndpoint}
+                                                          paddingSize={"xxs"} variant={"none"} color={"secondary"}>
                                                       {hasCopiedText ? <IconCheck size={13}/> :
                                                           <IconCopy size={13}/>}
                                                   </Button>

src/packages/ce/src/flow/components/panels/FlowPanelDefinitionComponent.tsx

@@ -31,6 +31,14 @@ fragment FlowType on FlowType {
         __typename
         id
     }
+    runtimeFlowType {
+        __typename
+        id
+        runtimeModule {
+            __typename
+            id
+        }
+    }
     signature
     flowTypeSettings (first: $firstFlowTypeSetting, after: $afterFlowTypeSetting) {
         __typename

src/packages/ce/src/flowtype/services/fragments/FlowType.fragment.graphql

@@ -55,11 +55,11 @@ export const ProjectsView: React.FC = () => {
             </div>
             <ButtonGroup>
                 <Link href={`/namespace/${namespaceId}/projects/create`}>
-                    <Button paddingSize={"xxs"} color={"success"}>Create</Button>
+                    <Button color={"success"}>Create</Button>
                 </Link>
                 <Menu>
                     <MenuTrigger asChild>
-                        <Button paddingSize={"xxs"} color={"secondary"} variant={"filled"}>Sort</Button>
+                        <Button color={"secondary"} variant={"filled"}>Sort</Button>
                     </MenuTrigger>
                     <MenuPortal>
                         <MenuContent>