From c887eb7094535e335ece5e744855fbbd200c3032 Mon Sep 17 00:00:00 2001
From: Chris Lo <46541035+topher-lo@users.noreply.github.com>
Date: Mon, 20 May 2024 23:37:31 -0700
Subject: [PATCH 1/4] feat(ui): Update default open settings

---
 frontend/src/components/workspace/panel/workflow/controls.tsx | 4 ++--
 frontend/src/components/workspace/panel/workflow/form.tsx     | 2 +-
 frontend/src/components/workspace/panel/workflow/runs.tsx     | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/workspace/panel/workflow/controls.tsx b/frontend/src/components/workspace/panel/workflow/controls.tsx
index ddcc4adfc..201d18088 100644
--- a/frontend/src/components/workspace/panel/workflow/controls.tsx
+++ b/frontend/src/components/workspace/panel/workflow/controls.tsx
@@ -103,8 +103,8 @@ export function WorkflowControlsForm({
 
 
   return (
-    <Accordion type="single" defaultValue="workflow-triggers" collapsible>
-      <AccordionItem value="workflow-triggers">
+    <Accordion type="single" collapsible>
+      <AccordionItem value="workflow-trigger">
         <AccordionTrigger className="px-4 text-xs font-bold tracking-wide">
           <div className="flex items-center">
             <ZapIcon className="mr-3 size-4" />
diff --git a/frontend/src/components/workspace/panel/workflow/form.tsx b/frontend/src/components/workspace/panel/workflow/form.tsx
index a51dff704..2787b9727 100644
--- a/frontend/src/components/workspace/panel/workflow/form.tsx
+++ b/frontend/src/components/workspace/panel/workflow/form.tsx
@@ -109,7 +109,7 @@ export function WorkflowForm({
           <WorkflowSettings workflow={workflow} />
         </div>
         <Separator />
-        <Accordion type="single" defaultValue="workflow-settings" collapsible>
+        <Accordion type="single" collapsible>
           <AccordionItem value="workflow-settings">
             <AccordionTrigger className="px-4 text-xs font-bold tracking-wide">
               <div className="flex items-center">
diff --git a/frontend/src/components/workspace/panel/workflow/runs.tsx b/frontend/src/components/workspace/panel/workflow/runs.tsx
index 378e432c2..ea698524c 100644
--- a/frontend/src/components/workspace/panel/workflow/runs.tsx
+++ b/frontend/src/components/workspace/panel/workflow/runs.tsx
@@ -56,8 +56,8 @@ export function WorkflowRunsView({
     },
   })
   return (
-    <Accordion type="single" collapsible>
-      <AccordionItem value="item-1">
+    <Accordion type="single" defaultValue="workflow-runs" collapsible>
+      <AccordionItem value="workflow-runs">
         <AccordionTrigger className="px-4 text-xs font-bold tracking-wide">
           <div className="flex items-center">
             <HistoryIcon className="mr-3 size-4" />

From 0142a63653d6ba5dfed98febbb4bc4e42b41532b Mon Sep 17 00:00:00 2001
From: Chris Lo <46541035+topher-lo@users.noreply.github.com>
Date: Tue, 21 May 2024 02:49:42 -0700
Subject: [PATCH 2/4] Action form header

---
 .../workspace/canvas/action-node.tsx          |   8 +-
 .../workspace/panel/action/form.tsx           | 395 +++++++++---------
 .../workspace/panel/workflow/form.tsx         |   2 +-
 .../workspace/panel/workspace-panel.tsx       |   2 +-
 4 files changed, 205 insertions(+), 202 deletions(-)

diff --git a/frontend/src/components/workspace/canvas/action-node.tsx b/frontend/src/components/workspace/canvas/action-node.tsx
index 36507ae6a..4c91ae491 100644
--- a/frontend/src/components/workspace/canvas/action-node.tsx
+++ b/frontend/src/components/workspace/canvas/action-node.tsx
@@ -30,7 +30,7 @@ import { Handle, NodeProps, Position, useNodeId, type Node } from "reactflow"
 
 import { type ActionType } from "@/types/schemas"
 import { cn, copyToClipboard, slugify } from "@/lib/utils"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 import {
   Card,
@@ -107,7 +107,7 @@ export function getTileColor(
   return defaultColor
 }
 
-const typeToNodeSubtitle: Record<ActionType, string> = {
+export const typeToNodeSubtitle: Record<ActionType, string> = {
   webhook: "Webhook",
   http_request: "HTTP Request",
   data_transform: "Data Transform",
@@ -135,7 +135,6 @@ export default React.memo(function ActionNode({
   const tileIcon = tileIconMapping[type] ?? Sparkles
   const isConfiguredMessage = isConfigured ? "ready" : "missing inputs"
   const { toast } = useToast()
-  const avatarImageAlt = `${type}-${title}`
 
   const handleCopyToClipboard = useCallback(() => {
     const slug = slugify(title)
@@ -175,10 +174,9 @@ export default React.memo(function ActionNode({
 
   return (
     <Card className={cn("min-w-72", selected && "shadow-xl drop-shadow-xl")}>
-      <CardHeader className="grid p-4 px-4">
+      <CardHeader className="p-4 px-4">
         <div className="flex w-full items-center space-x-4">
           <Avatar>
-            <AvatarImage className="bg-red-600" src="" alt={avatarImageAlt} />
             <AvatarFallback className={cn(getTileColor(type))}>
               {React.createElement(tileIcon, { className: "h-5 w-5" })}
             </AvatarFallback>
diff --git a/frontend/src/components/workspace/panel/action/form.tsx b/frontend/src/components/workspace/panel/action/form.tsx
index 1c3b5197c..0b2075e55 100644
--- a/frontend/src/components/workspace/panel/action/form.tsx
+++ b/frontend/src/components/workspace/panel/action/form.tsx
@@ -2,17 +2,15 @@ import React from "react"
 import { useWorkflowBuilder } from "@/providers/builder"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import { CircleIcon, Save } from "lucide-react"
+import { SaveIcon, Sparkles } from "lucide-react"
 import { FormProvider, useForm } from "react-hook-form"
-import SyntaxHighlighter from "react-syntax-highlighter"
-import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs"
 import { z } from "zod"
 
 import { Action, type ActionType } from "@/types/schemas"
 import { getActionById, updateAction } from "@/lib/flow"
 import { cn } from "@/lib/utils"
-import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import {
   FormControl,
   FormField,
@@ -29,10 +27,9 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip"
 import { toast } from "@/components/ui/use-toast"
-import { CollapsibleSection } from "@/components/collapsible-section"
 import { FormLoading } from "@/components/loading/form"
 import { AlertNotification } from "@/components/notifications"
-import { ActionNodeType } from "@/components/workspace/canvas/action-node"
+import { ActionNodeType, getTileColor, typeToNodeSubtitle, tileIconMapping } from "@/components/workspace/canvas/action-node"
 import {
   baseActionSchema,
   getSubActionSchema,
@@ -114,11 +111,18 @@ export function ActionForm({
     },
   })
   // Set the initial form values
+  // TODO: More robust handling of undefined values
+  const type = action?.type ?? "webhook"
+  const title = action?.title ?? ""
+  const description = action?.description ?? ""
+  const subtitle = typeToNodeSubtitle[type as keyof typeof typeToNodeSubtitle];
+  const tileIcon = tileIconMapping[actionType] ?? Sparkles
+
   const methods = useForm<Schema>({
     resolver: zodResolver(schema),
     values: {
-      title: action?.title ?? "",
-      description: action?.description ?? "",
+      title: title,
+      description: description,
       ...(action?.inputs ? processInputs(action.inputs) : {}), // Unpack the inputs object
     },
   })
@@ -169,199 +173,200 @@ export function ActionForm({
     mutate(values)
   })
 
-  const status = "online"
   return (
-    <div className="flex flex-col overflow-auto" id="INSIDE SCROLL">
+    //       <div id="WRAPPER" className="max-w-full space-y-4 p-4">
+    //         <Separator />
+    //         <div className="mb-4 space-y-4">
+    //           <FormField
+    //             control={methods.control}
+    //             name="title"
+    //             render={({ field }) => (
+    //               <FormItem>
+    //                 <FormLabel className="text-xs">Title</FormLabel>
+    //                 <FormControl>
+    //                   <Input
+    //                     {...field}
+    //                     className="text-xs"
+    //                     placeholder="Add action title..."
+    //                     value={methods.watch("title", "")}
+    //                   />
+    //                 </FormControl>
+    //                 <FormMessage />
+    //               </FormItem>
+    //             )}
+    //           />
+    //           <FormField
+    //             control={methods.control}
+    //             name="description"
+    //             render={({ field }) => (
+    //               <FormItem>
+    //                 <FormLabel className="text-xs">Description</FormLabel>
+    //                 <FormControl>
+    //                   <Textarea
+    //                     {...field}
+    //                     className="text-xs"
+    //                     placeholder="Describe your action..."
+    //                   />
+    //                 </FormControl>
+    //                 <FormMessage />
+    //               </FormItem>
+    //             )}
+    //           />
+    //           <Separator />
+    //           <div className="space-y-4">
+    //             <div className="space-y-4 capitalize">
+    //               {Object.entries(fieldConfig).map(
+    //                 ([inputKey, inputOption]) => {
+    //                   const common = {
+    //                     inputKey,
+    //                     inputOption,
+    //                   }
+    //                   switch (inputOption.type) {
+    //                     case "select":
+    //                       return (
+    //                         <ActionFormSelect<Schema>
+    //                           key={inputKey}
+    //                           defaultValue={action?.inputs?.[inputKey]}
+    //                           {...common}
+    //                         />
+    //                       )
+    //                     case "textarea":
+    //                       return (
+    //                         <ActionFormTextarea<Schema>
+    //                           key={inputKey}
+    //                           {...common}
+    //                         />
+    //                       )
+    //                     case "json":
+    //                       return (
+    //                         <ActionFormJSON<Schema>
+    //                           key={inputKey}
+    //                           {...common}
+    //                         />
+    //                       )
+    //                     case "array":
+    //                       return (
+    //                         <ActionFormArray<Schema>
+    //                           key={inputKey}
+    //                           {...common}
+    //                         />
+    //                       )
+    //                     case "flat-kv":
+    //                       return (
+    //                         <ActionFormFlatKVArray<Schema>
+    //                           key={inputKey}
+    //                           keyName="tag"
+    //                           valueName="value"
+    //                           {...common}
+    //                         />
+    //                       )
+    //                     default:
+    //                       return (
+    //                         <ActionFormInputs<Schema>
+    //                           key={inputKey}
+    //                           {...common}
+    //                         />
+    //                       )
+    //                   }
+    //                 }
+    //               )}
+    //             </div>
+    //             <CollapsibleSection
+    //               node="JSON View"
+    //               showToggleText={false}
+    //               className="text-md truncate text-start font-medium"
+    //               size="lg"
+    //               iconSize="md"
+    //             >
+    //               <SyntaxHighlighter
+    //                 language="json"
+    //                 style={atomOneDark}
+    //                 wrapLines
+    //                 customStyle={{
+    //                   width: "100%",
+    //                   maxWidth: "100%",
+    //                   overflowX: "auto",
+    //                 }}
+    //                 codeTagProps={{
+    //                   className:
+    //                     "text-xs text-background rounded-lg max-w-full overflow-auto",
+    //                 }}
+    //                 {...{
+    //                   className:
+    //                     "rounded-lg p-4 overflow-auto max-w-full w-full no-scrollbar",
+    //                 }}
+    //               >
+    //                 {JSON.stringify(methods.watch(), null, 2)}
+    //               </SyntaxHighlighter>
+    //             </CollapsibleSection>
+    //           </div>
+    //         </div>
+    //       </div>
+    <div className="size-full overflow-auto">
       <FormProvider {...methods}>
-        <form onSubmit={onSubmit} className="flex max-w-full overflow-auto">
-          <div id="WRAPPER" className="max-w-full space-y-4 p-4">
-            <div className="flex w-full flex-col space-y-3 overflow-hidden">
-              <h4 className="text-sm font-medium">Action Status</h4>
-              <div className="flex justify-between">
-                <Badge
-                  variant="outline"
-                  className={cn(
-                    "px-4 py-1",
-                    status === "online" ? "bg-green-100" : "bg-gray-100"
-                  )}
-                >
-                  <CircleIcon
-                    className={cn(
-                      "mr-2 h-3 w-3",
-                      status === "online"
-                        ? "fill-green-600 text-green-600"
-                        : "fill-gray-400 text-gray-400"
-                    )}
-                  />
-                  <span
-                    className={cn(
-                      "capitalize text-muted-foreground",
-                      status === "online" ? "text-green-600" : "text-gray-600"
-                    )}
-                  >
-                    {status}
-                  </span>
-                </Badge>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button type="submit" size="icon">
-                      <Save className="h-4 w-4" />
-                      <span className="sr-only">Save</span>
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>Save</TooltipContent>
-                </Tooltip>
-              </div>
-            </div>
-
-            <Separator />
-            <div className="mb-4 space-y-4">
-              <FormField
-                control={methods.control}
-                name="title"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel className="text-xs">Title</FormLabel>
-                    <FormControl>
-                      <Input
-                        {...field}
-                        className="text-xs"
-                        placeholder="Add action title..."
-                        value={methods.watch("title", "")}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={methods.control}
-                name="description"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel className="text-xs">Description</FormLabel>
-                    <FormControl>
-                      <Textarea
-                        {...field}
-                        className="text-xs"
-                        placeholder="Describe your action..."
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <Separator />
-              <div className="space-y-4">
-                <h4 className="text-m font-medium">Action Inputs</h4>
-                <div className="inline-block space-y-2 text-xs text-muted-foreground">
-                  <p>
-                    Define the inputs for this action here. You may use
-                    templated JSONPath expressions in any type of field other
-                    than list fields.
-                  </p>
-                  <p>For example, this expression:</p>
-                  <pre>
-                    <code>{"{{ $.my_action.output.some_data }}"}</code>
-                  </pre>
-                  <p>
-                    points to the output data field `some_data` from an action
-                    called `My Action`, with slug `my_action`. Select &apos;Copy
-                    JSONPath&apos; from the action tile dropdown to copy the
-                    slug. Note that the `output` field is a default field that
-                    is available for all actions.
-                  </p>
+        <form onSubmit={onSubmit} className="flex flex-col max-w-full overflow-auto">
+          <div className="grid grid-cols-3">
+            <div className="col-span-2 overflow-hidden">
+              <h3 className="p-4 px-4">
+                <div className="flex w-full items-center space-x-4">
+                  <Avatar>
+                    <AvatarFallback className={cn(getTileColor(type))}>
+                      {React.createElement(tileIcon, { className: "h-5 w-5" })}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex w-full flex-1 justify-between space-x-12">
+                    <div className="flex flex-col">
+                      <div className="flex w-full items-center justify-between text-xs font-medium leading-none">
+                        <div className="flex w-full">
+                          {title}
+                          {type.startsWith("llm.") && (
+                            <Sparkles className="ml-2 h-3 w-3 fill-yellow-500 text-yellow-500" />
+                          )}
+                        </div>
+                      </div>
+                      <p className="mt-2 text-xs text-muted-foreground">
+                        {description || subtitle}
+                      </p>
+                    </div>
+                  </div>
                 </div>
-                <div className="space-y-4 capitalize">
-                  {Object.entries(fieldConfig).map(
-                    ([inputKey, inputOption]) => {
-                      const common = {
-                        inputKey,
-                        inputOption,
-                      }
-                      switch (inputOption.type) {
-                        case "select":
-                          return (
-                            <ActionFormSelect<Schema>
-                              key={inputKey}
-                              defaultValue={action?.inputs?.[inputKey]}
-                              {...common}
-                            />
-                          )
-                        case "textarea":
-                          return (
-                            <ActionFormTextarea<Schema>
-                              key={inputKey}
-                              {...common}
-                            />
-                          )
-                        case "json":
-                          return (
-                            <ActionFormJSON<Schema>
-                              key={inputKey}
-                              {...common}
-                            />
-                          )
-                        case "array":
-                          return (
-                            <ActionFormArray<Schema>
-                              key={inputKey}
-                              {...common}
-                            />
-                          )
-                        case "flat-kv":
-                          return (
-                            <ActionFormFlatKVArray<Schema>
-                              key={inputKey}
-                              keyName="tag"
-                              valueName="value"
-                              {...common}
-                            />
-                          )
-                        default:
-                          return (
-                            <ActionFormInputs<Schema>
-                              key={inputKey}
-                              {...common}
-                            />
-                          )
-                      }
-                    }
-                  )}
-                </div>
-                <CollapsibleSection
-                  node="JSON View"
-                  showToggleText={false}
-                  className="text-md truncate text-start font-medium"
-                  size="lg"
-                  iconSize="md"
-                >
-                  <SyntaxHighlighter
-                    language="json"
-                    style={atomOneDark}
-                    wrapLines
-                    customStyle={{
-                      width: "100%",
-                      maxWidth: "100%",
-                      overflowX: "auto",
-                    }}
-                    codeTagProps={{
-                      className:
-                        "text-xs text-background rounded-lg max-w-full overflow-auto",
-                    }}
-                    {...{
-                      className:
-                        "rounded-lg p-4 overflow-auto max-w-full w-full no-scrollbar",
-                    }}
-                  >
-                    {JSON.stringify(methods.watch(), null, 2)}
-                  </SyntaxHighlighter>
-                </CollapsibleSection>
-              </div>
+              </h3>
+            </div>
+            <div className="flex justify-end space-x-2 p-4">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button type="submit" size="icon">
+                    <SaveIcon className="size-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Save</TooltipContent>
+              </Tooltip>
             </div>
           </div>
+          <Separator />
+
+          {/* <SyntaxHighlighter
+            language="json"
+            style={atomOneLight}
+            wrapLines
+            customStyle={{
+              width: "100%",
+              maxWidth: "100%",
+              overflowX: "auto",
+            }}
+            codeTagProps={{
+              className:
+                "text-xs text-background rounded-lg max-w-full overflow-auto",
+            }}
+            {...{
+              className:
+                "rounded-lg p-4 overflow-auto max-w-full w-full no-scrollbar",
+            }}
+          >
+            {JSON.stringify(methods.watch(), null, 2)}
+          </SyntaxHighlighter> */}
         </form>
       </FormProvider>
-    </div>
+    </div >
   )
 }
diff --git a/frontend/src/components/workspace/panel/workflow/form.tsx b/frontend/src/components/workspace/panel/workflow/form.tsx
index 2787b9727..eea0c3696 100644
--- a/frontend/src/components/workspace/panel/workflow/form.tsx
+++ b/frontend/src/components/workspace/panel/workflow/form.tsx
@@ -97,7 +97,7 @@ export function WorkflowForm({
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
-        <div className="flex flex-1 justify-end space-x-2 px-4 mb-4">
+        <div className="flex flex-1 justify-end space-x-2 p-4">
           <Tooltip>
             <TooltipTrigger asChild>
               <Button type="submit" size="icon">
diff --git a/frontend/src/components/workspace/panel/workspace-panel.tsx b/frontend/src/components/workspace/panel/workspace-panel.tsx
index 115b48894..f586acca6 100644
--- a/frontend/src/components/workspace/panel/workspace-panel.tsx
+++ b/frontend/src/components/workspace/panel/workspace-panel.tsx
@@ -23,7 +23,7 @@ export function WorkspacePanel() {
       {selectedNode ? (
         getNodeForm(selectedNode, workflowId)
       ) : workflow ? (
-        <div className="py-4">
+        <div>
           <WorkflowForm workflow={workflow} />
           <WorkflowControlsForm workflow={workflow} />
           <WorkflowRunsView workflowId={workflow.id} />

From c2b2a42229a582a49e347877e91573760cb4c097 Mon Sep 17 00:00:00 2001
From: Chris Lo <46541035+topher-lo@users.noreply.github.com>
Date: Tue, 21 May 2024 14:11:07 -0700
Subject: [PATCH 3/4] Implement accordion sections for action form

---
 .../workspace/canvas/action-node.tsx          |   8 +-
 .../workspace/panel/action/form.tsx           | 273 +++++++++---------
 .../src/components/workspace/panel/common.tsx |   5 +-
 .../workspace/panel/workflow/form.tsx         |   8 +-
 .../workspace/panel/workspace-panel.tsx       |   2 +-
 5 files changed, 149 insertions(+), 147 deletions(-)

diff --git a/frontend/src/components/workspace/canvas/action-node.tsx b/frontend/src/components/workspace/canvas/action-node.tsx
index 4c91ae491..04250aa61 100644
--- a/frontend/src/components/workspace/canvas/action-node.tsx
+++ b/frontend/src/components/workspace/canvas/action-node.tsx
@@ -7,7 +7,6 @@ import {
   CheckSquare,
   ChevronDownIcon,
   CircleCheckBigIcon,
-  LayoutListIcon,
   Container,
   Copy,
   Delete,
@@ -16,6 +15,7 @@ import {
   GitCompareArrows,
   Globe,
   Languages,
+  LayoutListIcon,
   LucideIcon,
   Mail,
   Regex,
@@ -228,11 +228,11 @@ export default React.memo(function ActionNode({
         <div className="grid grid-cols-2 space-x-4 text-xs text-muted-foreground">
           <div className="flex items-center space-x-2">
             {isConfigured ? (
-              <CircleCheckBigIcon className="text-emerald-500 size-4" />
+              <CircleCheckBigIcon className="size-4 text-emerald-500" />
             ) : (
-              <LayoutListIcon className="text-gray-400 size-4" />
+              <LayoutListIcon className="size-4 text-gray-400" />
             )}
-            <span className="capitalize text-xs">{isConfiguredMessage}</span>
+            <span className="text-xs capitalize">{isConfiguredMessage}</span>
           </div>
           <div className="flex items-center justify-end">
             <BellDotIcon className="mr-2 h-3 w-3" />
diff --git a/frontend/src/components/workspace/panel/action/form.tsx b/frontend/src/components/workspace/panel/action/form.tsx
index 0b2075e55..b68c215fe 100644
--- a/frontend/src/components/workspace/panel/action/form.tsx
+++ b/frontend/src/components/workspace/panel/action/form.tsx
@@ -2,15 +2,21 @@ import React from "react"
 import { useWorkflowBuilder } from "@/providers/builder"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import { SaveIcon, Sparkles } from "lucide-react"
+import { LayoutListIcon, SaveIcon, SettingsIcon, Sparkles } from "lucide-react"
 import { FormProvider, useForm } from "react-hook-form"
 import { z } from "zod"
 
 import { Action, type ActionType } from "@/types/schemas"
 import { getActionById, updateAction } from "@/lib/flow"
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
 import {
   FormControl,
   FormField,
@@ -29,7 +35,12 @@ import {
 import { toast } from "@/components/ui/use-toast"
 import { FormLoading } from "@/components/loading/form"
 import { AlertNotification } from "@/components/notifications"
-import { ActionNodeType, getTileColor, typeToNodeSubtitle, tileIconMapping } from "@/components/workspace/canvas/action-node"
+import {
+  ActionNodeType,
+  getTileColor,
+  tileIconMapping,
+  typeToNodeSubtitle,
+} from "@/components/workspace/canvas/action-node"
 import {
   baseActionSchema,
   getSubActionSchema,
@@ -115,7 +126,7 @@ export function ActionForm({
   const type = action?.type ?? "webhook"
   const title = action?.title ?? ""
   const description = action?.description ?? ""
-  const subtitle = typeToNodeSubtitle[type as keyof typeof typeToNodeSubtitle];
+  const subtitle = typeToNodeSubtitle[type as keyof typeof typeToNodeSubtitle]
   const tileIcon = tileIconMapping[actionType] ?? Sparkles
 
   const methods = useForm<Schema>({
@@ -174,137 +185,12 @@ export function ActionForm({
   })
 
   return (
-    //       <div id="WRAPPER" className="max-w-full space-y-4 p-4">
-    //         <Separator />
-    //         <div className="mb-4 space-y-4">
-    //           <FormField
-    //             control={methods.control}
-    //             name="title"
-    //             render={({ field }) => (
-    //               <FormItem>
-    //                 <FormLabel className="text-xs">Title</FormLabel>
-    //                 <FormControl>
-    //                   <Input
-    //                     {...field}
-    //                     className="text-xs"
-    //                     placeholder="Add action title..."
-    //                     value={methods.watch("title", "")}
-    //                   />
-    //                 </FormControl>
-    //                 <FormMessage />
-    //               </FormItem>
-    //             )}
-    //           />
-    //           <FormField
-    //             control={methods.control}
-    //             name="description"
-    //             render={({ field }) => (
-    //               <FormItem>
-    //                 <FormLabel className="text-xs">Description</FormLabel>
-    //                 <FormControl>
-    //                   <Textarea
-    //                     {...field}
-    //                     className="text-xs"
-    //                     placeholder="Describe your action..."
-    //                   />
-    //                 </FormControl>
-    //                 <FormMessage />
-    //               </FormItem>
-    //             )}
-    //           />
-    //           <Separator />
-    //           <div className="space-y-4">
-    //             <div className="space-y-4 capitalize">
-    //               {Object.entries(fieldConfig).map(
-    //                 ([inputKey, inputOption]) => {
-    //                   const common = {
-    //                     inputKey,
-    //                     inputOption,
-    //                   }
-    //                   switch (inputOption.type) {
-    //                     case "select":
-    //                       return (
-    //                         <ActionFormSelect<Schema>
-    //                           key={inputKey}
-    //                           defaultValue={action?.inputs?.[inputKey]}
-    //                           {...common}
-    //                         />
-    //                       )
-    //                     case "textarea":
-    //                       return (
-    //                         <ActionFormTextarea<Schema>
-    //                           key={inputKey}
-    //                           {...common}
-    //                         />
-    //                       )
-    //                     case "json":
-    //                       return (
-    //                         <ActionFormJSON<Schema>
-    //                           key={inputKey}
-    //                           {...common}
-    //                         />
-    //                       )
-    //                     case "array":
-    //                       return (
-    //                         <ActionFormArray<Schema>
-    //                           key={inputKey}
-    //                           {...common}
-    //                         />
-    //                       )
-    //                     case "flat-kv":
-    //                       return (
-    //                         <ActionFormFlatKVArray<Schema>
-    //                           key={inputKey}
-    //                           keyName="tag"
-    //                           valueName="value"
-    //                           {...common}
-    //                         />
-    //                       )
-    //                     default:
-    //                       return (
-    //                         <ActionFormInputs<Schema>
-    //                           key={inputKey}
-    //                           {...common}
-    //                         />
-    //                       )
-    //                   }
-    //                 }
-    //               )}
-    //             </div>
-    //             <CollapsibleSection
-    //               node="JSON View"
-    //               showToggleText={false}
-    //               className="text-md truncate text-start font-medium"
-    //               size="lg"
-    //               iconSize="md"
-    //             >
-    //               <SyntaxHighlighter
-    //                 language="json"
-    //                 style={atomOneDark}
-    //                 wrapLines
-    //                 customStyle={{
-    //                   width: "100%",
-    //                   maxWidth: "100%",
-    //                   overflowX: "auto",
-    //                 }}
-    //                 codeTagProps={{
-    //                   className:
-    //                     "text-xs text-background rounded-lg max-w-full overflow-auto",
-    //                 }}
-    //                 {...{
-    //                   className:
-    //                     "rounded-lg p-4 overflow-auto max-w-full w-full no-scrollbar",
-    //                 }}
-    //               >
-    //                 {JSON.stringify(methods.watch(), null, 2)}
-    //               </SyntaxHighlighter>
-    //             </CollapsibleSection>
-    //           </div>
-    //         </div>
-    //       </div>
     <div className="size-full overflow-auto">
       <FormProvider {...methods}>
-        <form onSubmit={onSubmit} className="flex flex-col max-w-full overflow-auto">
+        <form
+          onSubmit={onSubmit}
+          className="flex max-w-full flex-col overflow-auto"
+        >
           <div className="grid grid-cols-3">
             <div className="col-span-2 overflow-hidden">
               <h3 className="p-4 px-4">
@@ -344,7 +230,124 @@ export function ActionForm({
             </div>
           </div>
           <Separator />
-
+          {/* Metadata */}
+          <Accordion type="single" collapsible>
+            <AccordionItem value="action-settings">
+              <AccordionTrigger className="px-4 text-xs font-bold tracking-wide">
+                <div className="flex items-center">
+                  <SettingsIcon className="mr-3 size-4" />
+                  <span>General</span>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent>
+                <div className="my-4 space-y-2 px-4">
+                  <FormField
+                    control={methods.control}
+                    name="title"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="text-xs">Name</FormLabel>
+                        <FormControl>
+                          <Input
+                            className="text-xs"
+                            placeholder="Name your workflow..."
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={methods.control}
+                    name="description"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="text-xs">Description</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            className="text-xs"
+                            placeholder="Describe your workflow..."
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="action-inputs">
+              <AccordionTrigger className="px-4 text-xs font-bold tracking-wide">
+                <div className="flex items-center">
+                  <LayoutListIcon className="mr-3 size-4" />
+                  <span>Inputs</span>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent>
+                <div className="my-4 space-y-2 px-4">
+                  <div className="space-y-4 capitalize">
+                    {Object.entries(fieldConfig).map(
+                      ([inputKey, inputOption]) => {
+                        const common = {
+                          inputKey,
+                          inputOption,
+                        }
+                        switch (inputOption.type) {
+                          case "select":
+                            return (
+                              <ActionFormSelect<Schema>
+                                key={inputKey}
+                                defaultValue={action?.inputs?.[inputKey]}
+                                {...common}
+                              />
+                            )
+                          case "textarea":
+                            return (
+                              <ActionFormTextarea<Schema>
+                                key={inputKey}
+                                {...common}
+                              />
+                            )
+                          case "json":
+                            return (
+                              <ActionFormJSON<Schema>
+                                key={inputKey}
+                                {...common}
+                              />
+                            )
+                          case "array":
+                            return (
+                              <ActionFormArray<Schema>
+                                key={inputKey}
+                                {...common}
+                              />
+                            )
+                          case "flat-kv":
+                            return (
+                              <ActionFormFlatKVArray<Schema>
+                                key={inputKey}
+                                keyName="tag"
+                                valueName="value"
+                                {...common}
+                              />
+                            )
+                          default:
+                            return (
+                              <ActionFormInputs<Schema>
+                                key={inputKey}
+                                {...common}
+                              />
+                            )
+                        }
+                      }
+                    )}
+                  </div>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
           {/* <SyntaxHighlighter
             language="json"
             style={atomOneLight}
@@ -367,6 +370,6 @@ export function ActionForm({
           </SyntaxHighlighter> */}
         </form>
       </FormProvider>
-    </div >
+    </div>
   )
 }
diff --git a/frontend/src/components/workspace/panel/common.tsx b/frontend/src/components/workspace/panel/common.tsx
index 2618e2f4b..d756fc136 100644
--- a/frontend/src/components/workspace/panel/common.tsx
+++ b/frontend/src/components/workspace/panel/common.tsx
@@ -1,6 +1,5 @@
 import React from "react"
-import { CopyIcon } from "@radix-ui/react-icons"
-import { PlusCircle, Trash2Icon } from "lucide-react"
+import { CopyIcon, PlusCircle, Trash2Icon } from "lucide-react"
 import {
   ArrayPath,
   FieldPath,
@@ -173,7 +172,7 @@ export function ActionFormSelect<T extends FieldValues>({
               </SelectTrigger>
               <SelectContent>
                 {inputOption.options?.map((option: string) => (
-                  <SelectItem key={option} value={option}>
+                  <SelectItem key={option} className="text-xs" value={option}>
                     {option}
                   </SelectItem>
                 ))}
diff --git a/frontend/src/components/workspace/panel/workflow/form.tsx b/frontend/src/components/workspace/panel/workflow/form.tsx
index eea0c3696..0c148b54e 100644
--- a/frontend/src/components/workspace/panel/workflow/form.tsx
+++ b/frontend/src/components/workspace/panel/workflow/form.tsx
@@ -12,13 +12,13 @@ import { z } from "zod"
 
 import { Workflow } from "@/types/schemas"
 import { updateWorkflow } from "@/lib/flow"
-import { Button } from "@/components/ui/button"
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion"
+import { Button } from "@/components/ui/button"
 import {
   Form,
   FormControl,
@@ -118,7 +118,7 @@ export function WorkflowForm({
               </div>
             </AccordionTrigger>
             <AccordionContent>
-              <div className="space-y-2 px-4 my-4">
+              <div className="my-4 space-y-2 px-4">
                 <FormField
                   control={form.control}
                   name="title"
@@ -157,7 +157,7 @@ export function WorkflowForm({
             </AccordionContent>
           </AccordionItem>
         </Accordion>
-      </form >
-    </Form >
+      </form>
+    </Form>
   )
 }
diff --git a/frontend/src/components/workspace/panel/workspace-panel.tsx b/frontend/src/components/workspace/panel/workspace-panel.tsx
index f586acca6..84f08ec64 100644
--- a/frontend/src/components/workspace/panel/workspace-panel.tsx
+++ b/frontend/src/components/workspace/panel/workspace-panel.tsx
@@ -9,9 +9,9 @@ import { ActionNodeData } from "@/components/workspace/canvas/action-node"
 import { IntegrationNodeData } from "@/components/workspace/canvas/integration-node"
 import { ActionForm } from "@/components/workspace/panel/action/form"
 import { IntegrationForm } from "@/components/workspace/panel/integration/form"
+import { WorkflowControlsForm } from "@/components/workspace/panel/workflow/controls"
 import { WorkflowForm } from "@/components/workspace/panel/workflow/form"
 import { WorkflowRunsView } from "@/components/workspace/panel/workflow/runs"
-import { WorkflowControlsForm } from "@/components/workspace/panel/workflow/controls"
 
 export function WorkspacePanel() {
   const { selectedNodeId, getNode } = useWorkflowBuilder()

From 73bcead135701bef53bf38306032c347530422f6 Mon Sep 17 00:00:00 2001
From: Chris Lo <46541035+topher-lo@users.noreply.github.com>
Date: Tue, 21 May 2024 17:49:48 -0700
Subject: [PATCH 4/4] Add syntaxhighlighter

---
 .../workspace/panel/action/form.tsx           | 190 ++++++++++--------
 1 file changed, 109 insertions(+), 81 deletions(-)

diff --git a/frontend/src/components/workspace/panel/action/form.tsx b/frontend/src/components/workspace/panel/action/form.tsx
index b68c215fe..4e3309bf3 100644
--- a/frontend/src/components/workspace/panel/action/form.tsx
+++ b/frontend/src/components/workspace/panel/action/form.tsx
@@ -2,8 +2,17 @@ import React from "react"
 import { useWorkflowBuilder } from "@/providers/builder"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import { LayoutListIcon, SaveIcon, SettingsIcon, Sparkles } from "lucide-react"
+import {
+  BracesIcon,
+  LayoutListIcon,
+  SaveIcon,
+  SettingsIcon,
+  Sparkles,
+  ViewIcon,
+} from "lucide-react"
 import { FormProvider, useForm } from "react-hook-form"
+import SyntaxHighlighter from "react-syntax-highlighter"
+import { atomOneLight } from "react-syntax-highlighter/dist/cjs/styles/hljs"
 import { z } from "zod"
 
 import { Action, type ActionType } from "@/types/schemas"
@@ -15,7 +24,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 import {
   FormControl,
@@ -26,6 +35,7 @@ import {
 } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
 import { Separator } from "@/components/ui/separator"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Textarea } from "@/components/ui/textarea"
 import {
   Tooltip,
@@ -231,7 +241,7 @@ export function ActionForm({
           </div>
           <Separator />
           {/* Metadata */}
-          <Accordion type="single" collapsible>
+          <Accordion type="single" defaultValue="action-inputs" collapsible>
             <AccordionItem value="action-settings">
               <AccordionTrigger className="px-4 text-xs font-bold tracking-wide">
                 <div className="flex items-center">
@@ -286,88 +296,106 @@ export function ActionForm({
                 </div>
               </AccordionTrigger>
               <AccordionContent>
-                <div className="my-4 space-y-2 px-4">
-                  <div className="space-y-4 capitalize">
-                    {Object.entries(fieldConfig).map(
-                      ([inputKey, inputOption]) => {
-                        const common = {
-                          inputKey,
-                          inputOption,
-                        }
-                        switch (inputOption.type) {
-                          case "select":
-                            return (
-                              <ActionFormSelect<Schema>
-                                key={inputKey}
-                                defaultValue={action?.inputs?.[inputKey]}
-                                {...common}
-                              />
-                            )
-                          case "textarea":
-                            return (
-                              <ActionFormTextarea<Schema>
-                                key={inputKey}
-                                {...common}
-                              />
-                            )
-                          case "json":
-                            return (
-                              <ActionFormJSON<Schema>
-                                key={inputKey}
-                                {...common}
-                              />
-                            )
-                          case "array":
-                            return (
-                              <ActionFormArray<Schema>
-                                key={inputKey}
-                                {...common}
-                              />
-                            )
-                          case "flat-kv":
-                            return (
-                              <ActionFormFlatKVArray<Schema>
-                                key={inputKey}
-                                keyName="tag"
-                                valueName="value"
-                                {...common}
-                              />
-                            )
-                          default:
-                            return (
-                              <ActionFormInputs<Schema>
-                                key={inputKey}
-                                {...common}
-                              />
-                            )
-                        }
-                      }
-                    )}
-                  </div>
+                <div className="px-4">
+                  <Tabs defaultValue="gui">
+                    <div className="flex flex-1 justify-end">
+                      <TabsList className="mb-4">
+                        <TabsTrigger className="text-xs" value="gui">
+                          <ViewIcon className="mr-2 size-3.5" />
+                          <span>View</span>
+                        </TabsTrigger>
+                        <TabsTrigger className="text-xs" value="json">
+                          <BracesIcon className="mr-2 size-3.5" />
+                          <span>JSON</span>
+                        </TabsTrigger>
+                      </TabsList>
+                    </div>
+                    <TabsContent value="gui">
+                      <div className="space-y-4">
+                        {Object.entries(fieldConfig).map(
+                          ([inputKey, inputOption]) => {
+                            const common = {
+                              inputKey,
+                              inputOption,
+                            }
+                            switch (inputOption.type) {
+                              case "select":
+                                return (
+                                  <ActionFormSelect<Schema>
+                                    key={inputKey}
+                                    defaultValue={action?.inputs?.[inputKey]}
+                                    {...common}
+                                  />
+                                )
+                              case "textarea":
+                                return (
+                                  <ActionFormTextarea<Schema>
+                                    key={inputKey}
+                                    {...common}
+                                  />
+                                )
+                              case "json":
+                                return (
+                                  <ActionFormJSON<Schema>
+                                    key={inputKey}
+                                    {...common}
+                                  />
+                                )
+                              case "array":
+                                return (
+                                  <ActionFormArray<Schema>
+                                    key={inputKey}
+                                    {...common}
+                                  />
+                                )
+                              case "flat-kv":
+                                return (
+                                  <ActionFormFlatKVArray<Schema>
+                                    key={inputKey}
+                                    keyName="tag"
+                                    valueName="value"
+                                    {...common}
+                                  />
+                                )
+                              default:
+                                return (
+                                  <ActionFormInputs<Schema>
+                                    key={inputKey}
+                                    {...common}
+                                  />
+                                )
+                            }
+                          }
+                        )}
+                      </div>
+                    </TabsContent>
+                    <TabsContent value="json">
+                      <SyntaxHighlighter
+                        language="json"
+                        style={atomOneLight}
+                        wrapLines
+                        customStyle={{
+                          width: "100%",
+                          maxWidth: "100%",
+                          overflowX: "auto",
+                        }}
+                        codeTagProps={{
+                          className:
+                            "text-xs text-background rounded-lg max-w-full overflow-auto",
+                        }}
+                        {...{
+                          className:
+                            "rounded-lg p-4 overflow-auto max-w-full w-full",
+                        }}
+                      >
+                        {JSON.stringify(methods.watch(), null, 2)}
+                      </SyntaxHighlighter>
+                    </TabsContent>
+                  </Tabs>
                 </div>
               </AccordionContent>
             </AccordionItem>
           </Accordion>
-          {/* <SyntaxHighlighter
-            language="json"
-            style={atomOneLight}
-            wrapLines
-            customStyle={{
-              width: "100%",
-              maxWidth: "100%",
-              overflowX: "auto",
-            }}
-            codeTagProps={{
-              className:
-                "text-xs text-background rounded-lg max-w-full overflow-auto",
-            }}
-            {...{
-              className:
-                "rounded-lg p-4 overflow-auto max-w-full w-full no-scrollbar",
-            }}
-          >
-            {JSON.stringify(methods.watch(), null, 2)}
-          </SyntaxHighlighter> */}
         </form>
       </FormProvider>
     </div>