From a65bac38e5d5b9e617a71c36cbf0676c51e157cf Mon Sep 17 00:00:00 2001
From: Vishwanath Martur <64204611+vishwamartur@users.noreply.github.com>
Date: Wed, 30 Oct 2024 17:42:04 +0530
Subject: [PATCH] Redesign the workflow editor experience

Related to #6750

Redesign the workflow editor interface based on learnings and introduce advanced data manipulation features.

* **WorkflowEditorProvider**: Add new helper components `For` and `Liquid` for advanced data manipulation. Update `addStep` function and `WorkflowEditorContext` to include these components.
* **WorkflowEditor**: Update the `WorkflowEditor` component to support a hybrid code/no-code environment. Add new tabs for advanced data manipulation.
* **WorkflowList**: Update the `WorkflowList` component to reflect the redesigned interface. Add new columns for advanced data manipulation.
* **EditWorkflowPage**: Update the `EditWorkflowPage` to use the redesigned workflow editor components. Modify `asideClassName` to include new styles for advanced data manipulation.
---
 .../workflow-editor-provider.tsx              | 19 +++++++++++++++
 .../workflow-editor/workflow-editor.tsx       | 24 +++++++++++++++++++
 .../src/components/workflow-list.tsx          |  9 ++++++-
 apps/dashboard/src/pages/edit-workflow.tsx    |  2 +-
 4 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/src/components/workflow-editor/workflow-editor-provider.tsx b/apps/dashboard/src/components/workflow-editor/workflow-editor-provider.tsx
index 2d344861455..943e3a4ab79 100644
--- a/apps/dashboard/src/components/workflow-editor/workflow-editor-provider.tsx
+++ b/apps/dashboard/src/components/workflow-editor/workflow-editor-provider.tsx
@@ -37,6 +37,23 @@ const createStep = (type: StepTypeEnum): Step => ({
   _id: crypto.randomUUID(),
 });
 
+const For = ({ items, renderItem }: { items: any[]; renderItem: (item: any) => ReactNode }) => {
+  return <>{items.map(renderItem)}</>;
+};
+
+const Liquid = ({ template, data }: { template: string; data: any }) => {
+  const compiledTemplate = compileTemplate(template);
+  return <>{compiledTemplate(data)}</>;
+};
+
+const compileTemplate = (template: string) => {
+  // Implement the logic to compile the Liquid template
+  return (data: any) => {
+    // Implement the logic to render the compiled template with data
+    return template;
+  };
+};
+
 export const WorkflowEditorProvider = ({ children }: { children: ReactNode }) => {
   const changesSavedToastIdRef = useRef<string | number>();
   const { currentEnvironment } = useEnvironment();
@@ -125,6 +142,8 @@ export const WorkflowEditorProvider = ({ children }: { children: ReactNode }) =>
   const value = useMemo(
     () => ({
       addStep,
+      For,
+      Liquid,
     }),
     [addStep]
   );
diff --git a/apps/dashboard/src/components/workflow-editor/workflow-editor.tsx b/apps/dashboard/src/components/workflow-editor/workflow-editor.tsx
index df77c2e3e77..87055ae5bec 100644
--- a/apps/dashboard/src/components/workflow-editor/workflow-editor.tsx
+++ b/apps/dashboard/src/components/workflow-editor/workflow-editor.tsx
@@ -39,10 +39,34 @@ export const WorkflowEditor = () => {
               Trigger
             </Link>
           </TabsTrigger>
+          <TabsTrigger value="advanced" asChild>
+            <Link
+              to={buildRoute(ROUTES.ADVANCED_WORKFLOW, {
+                environmentId,
+                workflowId,
+              })}
+            >
+              Advanced
+            </Link>
+          </TabsTrigger>
         </TabsList>
         <TabsContent value="workflow" className="mt-0 h-full w-full">
           {steps && <WorkflowCanvas steps={steps} />}
         </TabsContent>
+        <TabsContent value="advanced" className="mt-0 h-full w-full">
+          <div className="p-4">
+            <h2 className="text-lg font-semibold">Advanced Data Manipulation</h2>
+            <p className="mt-2 text-sm text-gray-600">Use the helper components to manipulate data:</p>
+            <ul className="mt-4 list-disc list-inside">
+              <li>
+                <strong>For:</strong> Loop through items and render them.
+              </li>
+              <li>
+                <strong>Liquid:</strong> Use Liquid templates to render dynamic content.
+              </li>
+            </ul>
+          </div>
+        </TabsContent>
       </Tabs>
     </div>
   );
diff --git a/apps/dashboard/src/components/workflow-list.tsx b/apps/dashboard/src/components/workflow-list.tsx
index 74319a3a6c7..54dcd54a55d 100644
--- a/apps/dashboard/src/components/workflow-list.tsx
+++ b/apps/dashboard/src/components/workflow-list.tsx
@@ -124,6 +124,7 @@ export const WorkflowList = () => {
             <TableHead>Steps</TableHead>
             <TableHead>Tags</TableHead>
             <TableHead>Last updated</TableHead>
+            <TableHead>Advanced Data</TableHead>
             <TableHead />
           </TableRow>
         </TableHeader>
@@ -148,6 +149,9 @@ export const WorkflowList = () => {
                   <TableCell className="text-foreground-600 text-sm font-medium">
                     <Skeleton className="h-5 w-[14ch] rounded-full" />
                   </TableCell>
+                  <TableCell>
+                    <Skeleton className="h-5 w-[10ch] rounded-full" />
+                  </TableCell>
                   <TableCell className="text-foreground-600 text-sm font-medium">
                     <RiMore2Fill className="size-4 opacity-50" />
                   </TableCell>
@@ -202,6 +206,9 @@ export const WorkflowList = () => {
                         day: 'numeric',
                       })}
                     </TableCell>
+                    <TableCell className="text-foreground-600 text-sm font-medium">
+                      {workflow.advancedData || 'N/A'}
+                    </TableCell>
                     <TableCell className="w-1">
                       <DropdownMenu>
                         <DropdownMenuTrigger asChild>
@@ -247,7 +254,7 @@ export const WorkflowList = () => {
         {workflowsQuery.data && limit < workflowsQuery.data.totalCount && (
           <TableFooter>
             <TableRow>
-              <TableCell colSpan={5}>
+              <TableCell colSpan={6}>
                 <div className="flex items-center justify-between">
                   {workflowsQuery.data ? (
                     <span className="text-foreground-600 block text-sm font-normal">
diff --git a/apps/dashboard/src/pages/edit-workflow.tsx b/apps/dashboard/src/pages/edit-workflow.tsx
index 61ea915e0ed..374297ac2e8 100644
--- a/apps/dashboard/src/pages/edit-workflow.tsx
+++ b/apps/dashboard/src/pages/edit-workflow.tsx
@@ -6,7 +6,7 @@ import { Toaster } from '@/components/primitives/sonner';
 import { AnimatedOutlet } from '@/components/animated-outlet';
 
 const asideClassName =
-  'text-foreground-950 flex h-full w-[300px] max-w-[350px] flex-col border-l pb-5 pt-3.5 [&_input]:text-xs [&_input]:text-neutral-600 [&_label]:text-xs [&_label]:font-medium [&_textarea]:text-xs [&_textarea]:text-neutral-600';
+  'text-foreground-950 flex h-full w-[300px] max-w-[350px] flex-col border-l pb-5 pt-3.5 [&_input]:text-xs [&_input]:text-neutral-600 [&_label]:text-xs [&_label]:font-medium [&_textarea]:text-xs [&_textarea]:text-neutral-600 [&_advanced-data]:text-xs [&_advanced-data]:text-neutral-600';
 
 export const EditWorkflowPage = () => {
   return (