Add useEffect to select the first available workflow

Author: aliasaria

src/renderer/components/Experiment/Workflows/index.tsx

@@ -29,7 +29,7 @@ import {
   Trash2Icon,
   WorkflowIcon,
 } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import * as chatAPI from '../../../lib/transformerlab-api-sdk';
 import useSWR from 'swr';
@@ -75,6 +75,15 @@ export default function Workflows({ experimentInfo }) {
     mutate: mutateWorkflows,
   } = useSWR(chatAPI.Endpoints.Workflows.List(), fetcher);
 
+  // select the first workflow available:
+  useEffect(() => {
+    if (workflowsData && workflowsData.length > 0) {
+      if (selectedWorkflowId == null && !newWorkflowModalOpen) {
+        setSelectedWorkflowId(workflowsData[0].id);
+      }
+    }
+  }, [selectedWorkflowId, newWorkflowModalOpen]);
+
   const workflows = workflowsData;
 
   const selectedWorkflow = workflows?.find(