feat: Add and improve triggers UI (#151)

TracecatHQ · Jun 5, 2024 · 3c9f78b · 3c9f78b
1 parent 247c62f
commit 3c9f78b
Show file tree

Hide file tree

Showing 31 changed files with 1,715 additions and 575 deletions.
diff --git a/frontend/src/components/console/control-panel.tsx b/frontend/src/components/console/control-panel.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react"
 import { useEventFeedContext } from "@/providers/event-feed-stream"
-import { useWorkflowMetadata } from "@/providers/workflow"
+import { useWorkflow } from "@/providers/workflow"
 import { FileJson, FileType, Sheet } from "lucide-react"
 import { useFormContext } from "react-hook-form"
 
@@ -53,7 +53,7 @@ export function ConsolePanel({
   className,
 }: React.HTMLAttributes<HTMLDivElement>) {
   const { control } = useFormContext<WorkflowControlsForm>()
-  const { workflow } = useWorkflowMetadata()
+  const { workflow } = useWorkflow()
   const [actions, setActions] = useState<Action[]>([])
   const { isStreaming, clearEvents } = useEventFeedContext()
   useEffect(() => {
@@ -199,11 +199,7 @@ export function ConsolePanel({
             description="You are about to clear all console events from your local browser storage. This action cannot be undone."
             onConfirm={handleClearEvents}
           >
-            <Button
-              className={cn("w-full")}
-              type="button"
-              variant="outline"
-            >
+            <Button className={cn("w-full")} type="button" variant="outline">
               Clear Events
             </Button>
           </ConfirmationDialog>

diff --git a/frontend/src/components/icons.tsx b/frontend/src/components/icons.tsx
@@ -17,6 +17,7 @@ import {
   Sparkles,
   Tags,
   Webhook,
+  ZapIcon,
 } from "lucide-react"
 
 import { cn } from "@/lib/utils"
@@ -202,17 +203,18 @@ export const UDFIcons: Record<
       <BoxesIcon {...rest} />
     </div>
   ),
+  // Triggers namespace
+  trigger: ({ className, ...rest }) => (
+    <div className={cn("bg-indigo-100", basicIconsCommon, className)}>
+      <ZapIcon {...rest} />
+    </div>
+  ),
   // Core namespace
   core: ({ className, ...rest }) => (
     <div className={cn("bg-slate-200/50", basicIconsCommon, className)}>
       <Cpu {...rest} />
     </div>
   ),
-  "core.webhook": ({ className, ...rest }) => (
-    <div className={cn("bg-indigo-100", basicIconsCommon, className)}>
-      <Webhook {...rest} />
-    </div>
-  ),
   "core.http_request": ({ className, ...rest }) => (
     <div className={cn("bg-emerald-100", basicIconsCommon, className)}>
       <Globe {...rest} />

diff --git a/frontend/src/components/nav/workflow-nav.tsx b/frontend/src/components/nav/workflow-nav.tsx
@@ -3,15 +3,15 @@
 import React from "react"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import { useWorkflowMetadata } from "@/providers/workflow"
+import { useWorkflow } from "@/providers/workflow"
 import {
   GitPullRequestCreateArrowIcon,
   RadioIcon,
   ShieldAlertIcon,
   WorkflowIcon,
 } from "lucide-react"
 
-import { useCommitWorkflow } from "@/lib/hooks"
+import { Badge } from "@/components/ui/badge"
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -25,63 +25,62 @@ import { Switch } from "@/components/ui/switch"
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
 export default function WorkflowNav() {
-  const { workflow, workflowId, isLoading, isOnline, setIsOnline } =
-    useWorkflowMetadata()
-  const { mutateAsync: commitAsync } = useCommitWorkflow(workflowId!)
+  const { workflow, isLoading, isOnline, setIsOnline, commit } = useWorkflow()
+
+  const handleCommit = async () => {
+    console.log("Committing changes...")
+    await commit()
+  }
 
   if (!workflow || isLoading) {
     return null
   }
 
-  const handleCommit = async () => {
-    console.log("Committing changes...")
-    await commitAsync()
-  }
   return (
-    workflowId && (
-      <div className="flex w-full items-center space-x-8">
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink href="/workflows">Workflows</BreadcrumbLink>
-            </BreadcrumbItem>
-            {workflow && (
-              <>
-                <BreadcrumbSeparator className="font-semibold">
-                  {"/"}
-                </BreadcrumbSeparator>
-                <BreadcrumbItem>{workflow.title}</BreadcrumbItem>
-              </>
-            )}
-          </BreadcrumbList>
-        </Breadcrumb>
-        <TabSwitcher workflowId={workflowId} />
-        <div className="flex flex-1 items-center justify-end space-x-3">
-          <Button
-            variant="outline"
-            onClick={handleCommit}
-            className="delay-50 h-7 text-xs text-muted-foreground transition duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:bg-emerald-500 hover:text-white"
-          >
-            <GitPullRequestCreateArrowIcon className="mr-2 size-4" />
-            Commit
-          </Button>
+    <div className="flex w-full items-center space-x-8">
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/workflows">Workflows</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator className="font-semibold">
+            {"/"}
+          </BreadcrumbSeparator>
+          <BreadcrumbItem>{workflow.title}</BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+      <TabSwitcher workflowId={workflow.id} />
+      <div className="flex flex-1 items-center justify-end space-x-3">
+        <Button
+          variant="outline"
+          onClick={handleCommit}
+          className="delay-50 h-7 text-xs text-muted-foreground transition duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:bg-emerald-500 hover:text-white"
+        >
+          <GitPullRequestCreateArrowIcon className="mr-2 size-4" />
+          Commit
+        </Button>
+        <Badge
+          variant="outline"
+          className="text-xs font-normal text-muted-foreground hover:cursor-default"
+        >
+          {workflow.version ? `v${workflow.version}` : "Not Committed"}
+        </Badge>
 
-          <Switch
-            id="enable-workflow"
-            checked={isOnline}
-            onCheckedChange={setIsOnline}
-            className="data-[state=checked]:bg-emerald-500"
-          />
-          <Label
-            className="flex text-xs text-muted-foreground"
-            htmlFor="enable-workflow"
-          >
-            <RadioIcon className="mr-2 h-4 w-4" />
-            <span>Enable workflow</span>
-          </Label>
-        </div>
+        <Switch
+          id="enable-workflow"
+          checked={isOnline}
+          onCheckedChange={setIsOnline}
+          className="data-[state=checked]:bg-emerald-500"
+        />
+        <Label
+          className="flex text-xs text-muted-foreground"
+          htmlFor="enable-workflow"
+        >
+          <RadioIcon className="mr-2 h-4 w-4" />
+          <span>Enable workflow</span>
+        </Label>
       </div>
-    )
+    </div>
   )
 }