fix(ui): Show action ready vs missing inputs status

TracecatHQ · Mar 5, 2024 · ca5d3fc · ca5d3fc
1 parent 88e308b
commit ca5d3fc
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 26 deletions.
diff --git a/frontend/src/components/action-node.tsx b/frontend/src/components/action-node.tsx
@@ -64,9 +64,9 @@ export default React.memo(function ActionNode({
   data: { type, title, status, isConfigured, numberOfEvents },
 }: NodeProps<ActionNodeData>) {
 
-  const statusCapitalized = status[0].toUpperCase() + status.slice(1);
   const avatarImageAlt = `${type}-${title}`;
   const tileIcon = tileIconMapping[type];
+  const isConfiguredMessage = isConfigured ? "ready" : "missing inputs";
 
   return (
     <Card>
@@ -106,21 +106,21 @@ export default React.memo(function ActionNode({
         <div className="flex space-x-4 text-xs text-muted-foreground">
           <div className="flex items-center">
             {status === "online" && (
-              <CircleIcon className="mr-1 h-3 w-3 fill-green-400 text-green-400" />
+              <CircleIcon className="mr-1 h-3 w-3 fill-green-600 text-green-600" />
             )}
             {status === 'offline' && (
               <CircleIcon className="mr-1 h-3 w-3 fill-gray-400 text-gray-400" />
             )}
-            <span>{statusCapitalized}</span>
+            <span>{status}</span>
           </div>
           <div className="flex items-center">
             {isConfigured && (
-              <CircleIcon className="mr-1 h-3 w-3 fill-green-400 text-green-400" />
+              <CircleIcon className="mr-1 h-3 w-3 fill-green-600 text-green-600" />
             )}
             {!isConfigured && (
               <CircleIcon className="mr-1 h-3 w-3 fill-gray-400 text-gray-400" />
             )}
-            <span>{statusCapitalized}</span>
+            <span>{isConfiguredMessage}</span>
           </div>
           <div className="flex items-center">
             <BellDotIcon className="mr-1 h-3 w-3" />

diff --git a/frontend/src/components/forms/action.tsx b/frontend/src/components/forms/action.tsx
@@ -173,7 +173,6 @@ export function ActionForm({ actionId, actionType }: ActionFormProps): React.JSX
       setStatus(status);
     }
   }, [data, form.reset]);
-  const statusCapitalized = status[0].toUpperCase() + status.slice(1);
 
   // Submit form and update Action
   async function updateAction(actionId: string, values: actionFormSchemaType) {
@@ -201,6 +200,19 @@ export function ActionForm({ actionId, actionType }: ActionFormProps): React.JSX
       // Configure your mutation behavior here
       onSuccess: (data, variables, context) => {
         console.log("Action update successful", data);
+        setNodes((nds: Node[]) =>
+          nds.map((node: Node) => {
+            if (node.id === actionId) {
+              node.data = {
+                ...node.data,
+                title: data.title,
+                status: data.status,
+                isConfigured: data.inputs ? true : false,
+              };
+            }
+            return node;
+          })
+        );
       },
       onError: (error, variables, context) => {
         console.error("Failed to update action:", error);
@@ -213,20 +225,7 @@ export function ActionForm({ actionId, actionType }: ActionFormProps): React.JSX
   const { mutate } = useUpdateAction(actionId);
 
   function onSubmit(values: actionFormSchemaType) {
-    // Execute the mutate operation
-    mutate(values);
-    // Directly update the nodes after calling mutate, assuming mutate triggers the changes you need
-    setNodes((nds: Node[]) =>
-      nds.map((node: Node) => {
-        if (node.id === actionId) {
-          node.data = {
-            ...node.data,
-            title: values.title,
-          };
-        }
-        return node;
-      })
-    );
+    mutate(values)
   }
 
   // Loading state to defend in a user friendly way
@@ -253,7 +252,7 @@ export function ActionForm({ actionId, actionType }: ActionFormProps): React.JSX
               <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>
+                  <span className={`text-muted-foreground ${status === "online" ? 'text-green-600' : 'text-gray-600'}`}>{status}</span>
                 </Badge>
                 <Tooltip>
                   <TooltipTrigger asChild>

diff --git a/frontend/src/components/forms/workflow.tsx b/frontend/src/components/forms/workflow.tsx
@@ -37,8 +37,6 @@ interface WorkflowFormProps {
 
 export function WorkflowForm({ workflowId, workflowTitle, workflowDescription, workflowStatus }: WorkflowFormProps): React.JSX.Element {
 
-  const statusCapitalized = workflowStatus[0].toUpperCase() + workflowStatus.slice(1);
-
   const form = useForm<z.infer<typeof workflowFormSchema>>({
     resolver: zodResolver(workflowFormSchema),
     defaultValues: {
@@ -82,7 +80,7 @@ export function WorkflowForm({ workflowId, workflowTitle, workflowDescription, w
             <div className="flex justify-between">
               <Badge variant="outline" className={`py-1 px-4 ${workflowStatus === "online" ? 'bg-green-600/10' : '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={`${workflowStatus === "online" ? 'text-green-600' : 'text-gray-600'}`}>{statusCapitalized}</span>
+                <span className={`${workflowStatus === "online" ? 'text-green-600' : 'text-gray-600'}`}>{workflowStatus}</span>
               </Badge>
               <Tooltip>
                 <TooltipTrigger asChild>

diff --git a/tracecat/api.py b/tracecat/api.py
@@ -267,8 +267,8 @@ class UpdateActionParams(BaseModel):
     inputs: str | None = None
 
 
-@app.post("/actions/{action_id}", status_code=204)
-def update_action(action_id: str, params: UpdateActionParams) -> None:
+@app.post("/actions/{action_id}")
+def update_action(action_id: str, params: UpdateActionParams) -> ActionResponse:
     with Session(create_db_engine()) as session:
         # Fetch the action by id
         statement = select(Action).where(Action.id == action_id)
@@ -286,6 +286,15 @@ def update_action(action_id: str, params: UpdateActionParams) -> None:
 
         session.add(action)
         session.commit()
+        session.refresh(action)
+
+    return ActionResponse(
+        id=action.id,
+        title=action.title,
+        description=action.description,
+        status=action.status,
+        inputs=json.loads(action.inputs) if action.inputs else None,
+    )
 
 
 @app.delete("/actions/{action_id}", status_code=204)