fix(ui): Enforce truthy workflow metadata in form

TracecatHQ · Mar 4, 2024 · 982281a · 982281a
1 parent 7129bf1
commit 982281a
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 29 deletions.
diff --git a/frontend/src/components/forms/workflow.tsx b/frontend/src/components/forms/workflow.tsx
@@ -29,18 +29,23 @@ const workflowFormSchema = z.object({
   description: z.string()
 })
 
+interface WorkflowFormProps {
+  workflowId: string;
+  workflowTitle: string;
+  workflowDescription: string;
+  workflowStatus: string;
+}
+
 
-export function WorkflowForm(): React.JSX.Element {
+export function WorkflowForm({ workflowId, workflowTitle, workflowDescription, workflowStatus }: WorkflowFormProps): React.JSX.Element {
 
-  const { selectedWorkflowMetadata, setSelectedWorkflowMetadata } = useSelectedWorkflowMetadata()
-  const status = selectedWorkflowMetadata.status || "offline"
-  const statusCapitalized = status[0].toUpperCase() + status.slice(1);
+  const statusCapitalized = workflowStatus[0].toUpperCase() + workflowStatus.slice(1);
 
   const form = useForm<z.infer<typeof workflowFormSchema>>({
     resolver: zodResolver(workflowFormSchema),
     defaultValues: {
-      title: selectedWorkflowMetadata.title || "",
-      description: selectedWorkflowMetadata.description || "",
+      title: workflowTitle || "",
+      description: workflowDescription || "",
     },
   })
 
@@ -66,7 +71,7 @@ export function WorkflowForm(): React.JSX.Element {
   }
 
   // TODO: Move get workflow ID logic into panel to ensure order of hooks called
-  const { mutate } = useUpdateWorkflow(selectedWorkflowMetadata.id);
+  const { mutate } = useUpdateWorkflow(workflowId);
   function onSubmit(values: z.infer<typeof workflowFormSchema>) {
     mutate(values);
   }
@@ -78,9 +83,9 @@ export function WorkflowForm(): React.JSX.Element {
           <div className="space-y-3">
             <h4 className="text-sm font-medium">Workflow Status</h4>
             <div className="flex justify-between">
-              <Badge variant="outline" className={`py-1 px-4 ${status === "online" ? 'bg-green-100' : 'bg-gray-100'}`}>
-                <CircleIcon className={`mr-2 h-3 w-3 ${status === "online" ? 'fill-green-600 text-green-600' : 'fill-gray-400 text-gray-400'}`} />
-                <span className={`text-muted-foreground ${status === "online" ? 'text-green-600' : 'text-gray-600'}`}>{statusCapitalized}</span>
+              <Badge variant="outline" className={`py-1 px-4 ${workflowStatus === "online" ? 'bg-green-100' : 'bg-gray-100'}`}>
+                <CircleIcon className={`mr-2 h-3 w-3 ${workflowStatus === "online" ? 'fill-green-600 text-green-600' : 'fill-gray-400 text-gray-400'}`} />
+                <span className={`text-muted-foreground ${workflowStatus === "online" ? 'text-green-600' : 'text-gray-600'}`}>{statusCapitalized}</span>
               </Badge>
               <Tooltip>
                 <TooltipTrigger asChild>

diff --git a/frontend/src/components/panel.tsx b/frontend/src/components/panel.tsx
@@ -4,12 +4,19 @@ import { Skeleton } from "@/components/ui/skeleton"
 
 import { WorkflowForm } from "@/components/forms/workflow"
 import { ActionForm } from "@/components/forms/action"
+import { useSelectedWorkflowMetadata } from "@/providers/selected-workflow"
 
 export function WorkflowPanel() {
 
   const [isActionNodeSelected, setIsActionNodeSelected] = useState(false);
   const [selectedActionNodeId, setSelectedActionNodeId] = useState<string | null>(null)
+  const { selectedWorkflowMetadata, setSelectedWorkflowMetadata } = useSelectedWorkflowMetadata()
 
+  // Workflow metadata
+  const workflowId = selectedWorkflowMetadata.id
+  const workflowTitle = selectedWorkflowMetadata.title
+  const workflowDescription = selectedWorkflowMetadata.description
+  const workflowStatus = selectedWorkflowMetadata.status
 
   useOnSelectionChange({
     onChange: ({ nodes }: { nodes: Node[] }) => {
@@ -24,32 +31,32 @@ export function WorkflowPanel() {
     }
   });
 
-  if (isActionNodeSelected && !selectedActionNodeId) {
-    return (
-      <div className="flex flex-col h-full">
-        <div className="flex-1 flex">
-          <div className="flex-1">
-            <div className="flex items-center space-x-2 p-4">
-              <div className="space-y-2">
-                <Skeleton className="h-4 w-[250px]" />
-                <Skeleton className="h-4 w-[200px]" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
   return (
     <div className="flex flex-col h-full">
       <div className="flex-1 flex">
         <div className="flex-1">
           {isActionNodeSelected && selectedActionNodeId ? (
-            // Make sure selectedActionNodeId is a string when passed as a prop
             <ActionForm actionId={selectedActionNodeId} />
+          ) : (!isActionNodeSelected && workflowId && workflowTitle && workflowDescription && workflowStatus) ? (
+            <WorkflowForm
+              workflowId={workflowId}
+              workflowTitle={workflowTitle}
+              workflowDescription={workflowDescription}
+              workflowStatus={workflowStatus}
+            />
           ) : (
-            <WorkflowForm />
+            <div className="flex flex-col h-full">
+              <div className="flex-1 flex">
+                <div className="flex-1">
+                  <div className="flex items-center space-x-2 p-4">
+                    <div className="space-y-2">
+                      <Skeleton className="h-4 w-[250px]" />
+                      <Skeleton className="h-4 w-[200px]" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           )}
         </div>
       </div>