From 267adea4118a12f1aae614b79abb2f3bfa5cb892 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Thu, 10 Oct 2024 06:59:03 -0700
Subject: [PATCH] Make scrollable areas more consistent (#952)

Co-authored-by: wintonzheng <null>
---
 .../src/components/ui/scroll-area.tsx         |  19 +-
 .../src/routes/tasks/create/PromptBox.tsx     |  38 ++--
 .../tasks/detail/ScrollableActionList.tsx     |  47 ++---
 .../editor/panels/WorkflowParametersPanel.tsx | 174 +++++++++---------
 4 files changed, 154 insertions(+), 124 deletions(-)

diff --git a/skyvern-frontend/src/components/ui/scroll-area.tsx b/skyvern-frontend/src/components/ui/scroll-area.tsx
index 842f82f7..68ec626f 100644
--- a/skyvern-frontend/src/components/ui/scroll-area.tsx
+++ b/skyvern-frontend/src/components/ui/scroll-area.tsx
@@ -12,15 +12,26 @@ const ScrollArea = React.forwardRef<
     className={cn("relative overflow-hidden", className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
+    {children}
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
+const ScrollAreaViewport = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaViewport>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaViewport>
+>(({ children, ...props }, ref) => {
+  return (
+    <ScrollAreaPrimitive.Viewport ref={ref} {...props}>
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+  );
+});
+ScrollAreaViewport.displayName =
+  ScrollAreaPrimitive.ScrollAreaViewport.displayName;
+
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
@@ -43,4 +54,4 @@ const ScrollBar = React.forwardRef<
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar };
+export { ScrollArea, ScrollBar, ScrollAreaViewport };
diff --git a/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx b/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx
index f0bef342..2b5662b4 100644
--- a/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/PromptBox.tsx
@@ -10,7 +10,11 @@ import { AxiosError } from "axios";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { stringify as convertToYAML } from "yaml";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import {
+  ScrollArea,
+  ScrollAreaViewport,
+  ScrollBar,
+} from "@/components/ui/scroll-area";
 
 function createTaskFromTaskGenerationParameters(
   values: TaskGenerationApiResponse,
@@ -178,21 +182,23 @@ function PromptBox() {
         </div>
       </div>
       <ScrollArea>
-        <div className="flex gap-4 rounded-sm bg-slate-elevation1 p-4">
-          {examplePrompts.map((examplePrompt) => {
-            return (
-              <div
-                key={examplePrompt}
-                className="cursor-pointer whitespace-nowrap rounded-sm bg-slate-elevation3 px-4 py-3 hover:bg-slate-elevation5"
-                onClick={() => {
-                  setPrompt(examplePrompt);
-                }}
-              >
-                {examplePrompt}
-              </div>
-            );
-          })}
-        </div>
+        <ScrollAreaViewport className="h-full w-full rounded-[inherit]">
+          <div className="flex gap-4 rounded-sm bg-slate-elevation1 p-4">
+            {examplePrompts.map((examplePrompt) => {
+              return (
+                <div
+                  key={examplePrompt}
+                  className="cursor-pointer whitespace-nowrap rounded-sm bg-slate-elevation3 px-4 py-3 hover:bg-slate-elevation5"
+                  onClick={() => {
+                    setPrompt(examplePrompt);
+                  }}
+                >
+                  {examplePrompt}
+                </div>
+              );
+            })}
+          </div>
+        </ScrollAreaViewport>
         <ScrollBar orientation="horizontal" />
       </ScrollArea>
     </div>
diff --git a/skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx b/skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx
index 44751dbb..58d953b5 100644
--- a/skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx
@@ -2,6 +2,7 @@ import { getClient } from "@/api/AxiosClient";
 import { Action, ActionTypes, ReadableActionTypes } from "@/api/types";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import {
   Tooltip,
@@ -155,29 +156,33 @@ function ScrollableActionList({
           <ArrowDownIcon />
         </Button>
       </div>
-      <div className="w-full space-y-4 overflow-y-scroll px-4 pb-4">
-        {showStreamOption && (
-          <div
-            key="stream"
-            ref={(element) => {
-              refs.current[data.length] = element;
-            }}
-            className={cn(
-              "flex cursor-pointer rounded-lg border p-4 shadow-md hover:border-slate-300",
-              {
-                "border-slate-300": activeIndex === "stream",
-              },
+      <ScrollArea>
+        <ScrollAreaViewport className="h-full w-full rounded-[inherit]">
+          <div className="w-full space-y-4 px-4 pb-4">
+            {showStreamOption && (
+              <div
+                key="stream"
+                ref={(element) => {
+                  refs.current[data.length] = element;
+                }}
+                className={cn(
+                  "flex cursor-pointer rounded-lg border p-4 shadow-md hover:border-slate-300",
+                  {
+                    "border-slate-300": activeIndex === "stream",
+                  },
+                )}
+                onClick={() => onActiveIndexChange("stream")}
+              >
+                <div className="flex items-center gap-2 text-lg">
+                  <DotFilledIcon className="h-6 w-6 text-red-500" />
+                  Live
+                </div>
+              </div>
             )}
-            onClick={() => onActiveIndexChange("stream")}
-          >
-            <div className="flex items-center gap-2 text-lg">
-              <DotFilledIcon className="h-6 w-6 text-red-500" />
-              Live
-            </div>
+            {getReverseActions()}
           </div>
-        )}
-        {getReverseActions()}
-      </div>
+        </ScrollAreaViewport>
+      </ScrollArea>
     </div>
   );
 }
diff --git a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParametersPanel.tsx b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParametersPanel.tsx
index c16c569d..e369d1a5 100644
--- a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParametersPanel.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParametersPanel.tsx
@@ -26,6 +26,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { useReactFlow } from "@xyflow/react";
 import { useWorkflowHasChangesStore } from "@/store/WorkflowHasChangesStore";
+import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
 
 const WORKFLOW_EDIT_PANEL_WIDTH = 20 * 16;
 const WORKFLOW_EDIT_PANEL_GAP = 1 * 16;
@@ -105,89 +106,96 @@ function WorkflowParametersPanel() {
           </DropdownMenuContent>
         </DropdownMenu>
 
-        <section className="max-h-[600px] space-y-2 overflow-y-scroll">
-          {workflowParameters.map((parameter) => {
-            return (
-              <div
-                key={parameter.key}
-                className="flex items-center justify-between rounded-md bg-slate-elevation1 px-3 py-2"
-              >
-                <div className="flex items-center gap-4">
-                  <span className="text-sm">{parameter.key}</span>
-                  {parameter.parameterType === "workflow" ? (
-                    <span className="text-sm text-slate-400">
-                      {parameter.dataType}
-                    </span>
-                  ) : (
-                    <span className="text-sm text-slate-400">
-                      {parameter.parameterType}
-                    </span>
-                  )}
-                </div>
-                <div className="flex items-center gap-2">
-                  <MixerVerticalIcon
-                    className="cursor-pointer"
-                    onClick={() => {
-                      setOperationPanelState({
-                        active: true,
-                        operation: "edit",
-                        parameter: parameter,
-                        type: parameter.parameterType,
-                      });
-                    }}
-                  />
-                  <Dialog>
-                    <DialogTrigger>
-                      <GarbageIcon className="size-4 cursor-pointer text-destructive-foreground text-red-600" />
-                    </DialogTrigger>
-                    <DialogContent>
-                      <DialogHeader>
-                        <DialogTitle>Are you sure?</DialogTitle>
-                        <DialogDescription>
-                          This parameter will be deleted.
-                        </DialogDescription>
-                      </DialogHeader>
-                      <DialogFooter>
-                        <DialogClose asChild>
-                          <Button variant="secondary">Cancel</Button>
-                        </DialogClose>
-                        <Button
-                          variant="destructive"
-                          onClick={() => {
-                            setWorkflowParameters(
-                              workflowParameters.filter(
-                                (p) => p.key !== parameter.key,
-                              ),
-                            );
-                            setHasChanges(true);
-                            setNodes((nodes) => {
-                              return nodes.map((node) => {
-                                if (node.type === "task") {
-                                  return {
-                                    ...node,
-                                    data: {
-                                      ...node.data,
-                                      parameterKeys: (
-                                        node.data.parameterKeys as Array<string>
-                                      ).filter((key) => key !== parameter.key),
-                                    },
-                                  };
-                                }
-                                return node;
-                              });
-                            });
-                          }}
-                        >
-                          Delete
-                        </Button>
-                      </DialogFooter>
-                    </DialogContent>
-                  </Dialog>
-                </div>
-              </div>
-            );
-          })}
-        </section>
+        <ScrollArea>
+          <ScrollAreaViewport className="max-h-[600px]">
+            <section className="space-y-2">
+              {workflowParameters.map((parameter) => {
+                return (
+                  <div
+                    key={parameter.key}
+                    className="flex items-center justify-between rounded-md bg-slate-elevation1 px-3 py-2"
+                  >
+                    <div className="flex items-center gap-4">
+                      <span className="text-sm">{parameter.key}</span>
+                      {parameter.parameterType === "workflow" ? (
+                        <span className="text-sm text-slate-400">
+                          {parameter.dataType}
+                        </span>
+                      ) : (
+                        <span className="text-sm text-slate-400">
+                          {parameter.parameterType}
+                        </span>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <MixerVerticalIcon
+                        className="cursor-pointer"
+                        onClick={() => {
+                          setOperationPanelState({
+                            active: true,
+                            operation: "edit",
+                            parameter: parameter,
+                            type: parameter.parameterType,
+                          });
+                        }}
+                      />
+                      <Dialog>
+                        <DialogTrigger>
+                          <GarbageIcon className="size-4 cursor-pointer text-destructive-foreground text-red-600" />
+                        </DialogTrigger>
+                        <DialogContent>
+                          <DialogHeader>
+                            <DialogTitle>Are you sure?</DialogTitle>
+                            <DialogDescription>
+                              This parameter will be deleted.
+                            </DialogDescription>
+                          </DialogHeader>
+                          <DialogFooter>
+                            <DialogClose asChild>
+                              <Button variant="secondary">Cancel</Button>
+                            </DialogClose>
+                            <Button
+                              variant="destructive"
+                              onClick={() => {
+                                setWorkflowParameters(
+                                  workflowParameters.filter(
+                                    (p) => p.key !== parameter.key,
+                                  ),
+                                );
+                                setHasChanges(true);
+                                setNodes((nodes) => {
+                                  return nodes.map((node) => {
+                                    if (node.type === "task") {
+                                      return {
+                                        ...node,
+                                        data: {
+                                          ...node.data,
+                                          parameterKeys: (
+                                            node.data
+                                              .parameterKeys as Array<string>
+                                          ).filter(
+                                            (key) => key !== parameter.key,
+                                          ),
+                                        },
+                                      };
+                                    }
+                                    return node;
+                                  });
+                                });
+                              }}
+                            >
+                              Delete
+                            </Button>
+                          </DialogFooter>
+                        </DialogContent>
+                      </Dialog>
+                    </div>
+                  </div>
+                );
+              })}
+            </section>
+          </ScrollAreaViewport>
+        </ScrollArea>
       </div>
       {operationPanelState.active && (
         <div