feat(ui): Implement workflow alias UI (#677)

TracecatHQ · Dec 28, 2024 · 4948349 · 4948349
1 parent 2a0e2d4
commit 4948349
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 15 deletions.
diff --git a/frontend/src/components/dashboard/dashboard-table.tsx b/frontend/src/components/dashboard/dashboard-table.tsx
@@ -89,21 +89,32 @@ export function WorkflowsDashboardTable() {
             enableHiding: false,
           },
           {
-            accessorKey: "description",
+            accessorKey: "alias",
             header: ({ column }) => (
               <DataTableColumnHeader
                 className="text-xs"
                 column={column}
-                title="Description"
+                title="Alias"
               />
             ),
-            cell: ({ row }) => (
-              <div className="text-xs text-foreground/80">
-                {row.getValue<WorkflowReadMinimal["description"]>(
-                  "description"
-                ) || "-"}
-              </div>
-            ),
+            cell: ({ row }) => {
+              const alias = row.getValue<WorkflowReadMinimal["alias"]>("alias")
+              if (!alias) {
+                return (
+                  <span className="text-xs text-muted-foreground/80">
+                    No alias
+                  </span>
+                )
+              }
+              return (
+                <Badge
+                  className="font-mono text-xs font-medium tracking-tighter text-foreground/80"
+                  variant="secondary"
+                >
+                  {alias}
+                </Badge>
+              )
+            },
             enableSorting: true,
             enableHiding: false,
           },

diff --git a/frontend/src/components/workbench/panel/workflow-panel.tsx b/frontend/src/components/workbench/panel/workflow-panel.tsx
@@ -32,6 +32,7 @@ import {
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -50,9 +51,10 @@ import { toast } from "@/components/ui/use-toast"
 import { CopyButton } from "@/components/copy-button"
 import { DynamicCustomEditor } from "@/components/editor/dynamic"
 
-const workflowConfigFormSchema = z.object({
+const workflowUpdateFormSchema = z.object({
   title: z.string(),
   description: z.string(),
+  alias: z.string().nullish(),
   config: z.string().transform((val, ctx) => {
     try {
       return YAML.parse(val) || {}
@@ -102,7 +104,7 @@ const workflowConfigFormSchema = z.object({
   }),
 })
 
-type WorkflowConfigForm = z.infer<typeof workflowConfigFormSchema>
+type WorkflowUpdateForm = z.infer<typeof workflowUpdateFormSchema>
 
 export function WorkflowPanel({
   workflow,
@@ -116,11 +118,12 @@ export function WorkflowPanel({
   )
 
   const { updateWorkflow } = useWorkflow()
-  const methods = useForm<WorkflowConfigForm>({
-    resolver: zodResolver(workflowConfigFormSchema),
+  const methods = useForm<WorkflowUpdateForm>({
+    resolver: zodResolver(workflowUpdateFormSchema),
     defaultValues: {
       title: workflow.title || "",
       description: workflow.description || "",
+      alias: workflow.alias,
       config: isEmptyObjectOrNullish(workflow.config)
         ? YAML.stringify({
             environment: null,
@@ -137,8 +140,9 @@ export function WorkflowPanel({
         : YAML.stringify(workflow.returns),
     },
   })
+  console.log("workflow alias", workflow.alias)
 
-  const onSubmit = async (values: WorkflowConfigForm) => {
+  const onSubmit = async (values: WorkflowUpdateForm) => {
     console.log("Saving changes...", values)
     try {
       await updateWorkflow(values)
@@ -159,7 +163,7 @@ export function WorkflowPanel({
       // Save whenever focus changes, regardless of where it's going
       const values = methods.getValues()
       // Parse values through zod schema first
-      const result = await workflowConfigFormSchema.safeParseAsync(values)
+      const result = await workflowUpdateFormSchema.safeParseAsync(values)
       if (!result.success) {
         console.error("Validation failed:", result.error)
         return
@@ -224,6 +228,7 @@ export function WorkflowPanel({
                         render={({ field }) => (
                           <FormItem>
                             <FormLabel className="text-xs">Name</FormLabel>
+
                             <FormControl>
                               <Input
                                 className="text-xs"
@@ -254,6 +259,40 @@ export function WorkflowPanel({
                           </FormItem>
                         )}
                       />
+
+                      <FormField
+                        control={methods.control}
+                        name="alias"
+                        render={({ field }) => (
+                          <FormItem>
+                            <div className="flex items-center gap-2">
+                              <FormLabel className="text-xs">
+                                <span>Alias</span>
+                              </FormLabel>
+                              {field.value && (
+                                <CopyButton
+                                  value={field.value}
+                                  toastMessage="Copied workflow alias to clipboard"
+                                />
+                              )}
+                            </div>
+                            <FormDescription className="text-xs">
+                              A name that can be used to uniquely identify this
+                              workflow.
+                            </FormDescription>
+                            <FormControl>
+                              <Input
+                                className="text-xs"
+                                placeholder="A name that can be used to uniquely identify this workflow"
+                                {...field}
+                                value={field.value || ""}
+                                onChange={field.onChange}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
                       <div className="space-y-2">
                         <FormLabel className="flex items-center gap-2 text-xs">
                           <span>Workflow ID</span>