refactor(dashboard): call taskDef details on selected

Thanks for the suggestion @mijailr that was good one.
littlehorse-enterprises · Aug 6, 2024 · 3701c42 · 3701c42
1 parent 2c8863d
commit 3701c42
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 15 deletions.
diff --git a/dashboard/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/Task.tsx b/dashboard/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/Task.tsx
@@ -13,7 +13,7 @@ const Node: FC<NodeProps> = ({ selected, data }) => {
 
   return (
     <>
-      <TaskDetails taskNode={task} nodeRun={data.nodeRun} />
+      <TaskDetails taskNode={task} nodeRun={data.nodeRun} selected={selected} />
       <Fade fade={fade} status={data.nodeRun?.status}>
         <div
           className={

diff --git a/dashboard/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/TaskDetails.tsx b/dashboard/src/app/(authenticated)/(diagram)/components/NodeTypes/Task/TaskDetails.tsx
@@ -1,16 +1,20 @@
-import { getTaskDef } from '@/app/(authenticated)/taskDef/[name]/getTaskDef';
-import { getVariable, getVariableValue } from '@/app/utils';
-import { useWhoAmI } from '@/contexts/WhoAmIContext';
-import { useQuery } from '@tanstack/react-query';
-import { NodeRun, TaskNode } from 'littlehorse-client/proto';
-import { ExternalLinkIcon, EyeIcon } from 'lucide-react';
-import Link from 'next/link';
-import { FC, useCallback } from 'react';
-import { useModal } from '../../../hooks/useModal';
-import { NodeDetails } from '../NodeDetails';
-import { getTaskRun } from './getTaskRun';
+import { getTaskDef } from '@/app/(authenticated)/taskDef/[name]/getTaskDef'
+import { getVariable, getVariableValue } from '@/app/utils'
+import { useWhoAmI } from '@/contexts/WhoAmIContext'
+import { useQuery } from '@tanstack/react-query'
+import { NodeRun, TaskNode } from 'littlehorse-client/proto'
+import { ExternalLinkIcon, EyeIcon } from 'lucide-react'
+import Link from 'next/link'
+import { FC, useCallback } from 'react'
+import { useModal } from '../../../hooks/useModal'
+import { NodeDetails } from '../NodeDetails'
+import { getTaskRun } from './getTaskRun'
 
-export const TaskDetails: FC<{ taskNode?: TaskNode; nodeRun?: NodeRun }> = ({ taskNode, nodeRun }) => {
+export const TaskDetails: FC<{ taskNode?: TaskNode; nodeRun?: NodeRun; selected: boolean }> = ({
+  taskNode,
+  nodeRun,
+  selected,
+}) => {
   const { tenantId } = useWhoAmI()
   const { data } = useQuery({
     queryKey: ['taskRun', nodeRun, tenantId],
@@ -21,14 +25,17 @@ export const TaskDetails: FC<{ taskNode?: TaskNode; nodeRun?: NodeRun }> = ({ ta
   })
 
   const { data: taskDef } = useQuery({
-    queryKey: ['taskDef', taskNode, tenantId, nodeRun],
+    queryKey: ['taskDef', taskNode, tenantId, nodeRun, selected],
     queryFn: async () => {
       if (!taskNode?.taskDefId?.name) return null
       if (nodeRun?.task?.taskRunId) return null
+      if (!selected) return null
       const taskDef = await getTaskDef({
         name: taskNode?.taskDefId?.name,
       })
 
+      console.log('taskDef', taskDef)
+
       return taskDef
     },
   })
@@ -42,7 +49,7 @@ export const TaskDetails: FC<{ taskNode?: TaskNode; nodeRun?: NodeRun }> = ({ ta
     setShowModal(true)
   }, [data, setModal, setShowModal])
 
-  if (!taskNode) return null
+  if (!taskNode || (!taskDef && !nodeRun?.task?.taskRunId)) return null
 
   return (
     <NodeDetails>