From 8f04efa7b3895a2b186465af7ea419f5496f8cf9 Mon Sep 17 00:00:00 2001
From: Kerem Yilmaz <kerem@skyvern.com>
Date: Wed, 18 Sep 2024 05:59:01 -0700
Subject: [PATCH] Auto minimize the sidebar in workflow editor (#848)

---
 .../routes/workflows/editor/WorkflowEditor.tsx    |  9 +++++++++
 skyvern-frontend/src/store/SidebarStore.ts        | 15 +++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 skyvern-frontend/src/store/SidebarStore.ts

diff --git a/skyvern-frontend/src/routes/workflows/editor/WorkflowEditor.tsx b/skyvern-frontend/src/routes/workflows/editor/WorkflowEditor.tsx
index 81b0edc59..baf50cb64 100644
--- a/skyvern-frontend/src/routes/workflows/editor/WorkflowEditor.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/WorkflowEditor.tsx
@@ -23,16 +23,25 @@ import {
   BitwardenSensitiveInformationParameter,
   ContextParameter,
 } from "../types/workflowTypes";
+import { useSidebarStore } from "@/store/SidebarStore";
+import { useMountEffect } from "@/hooks/useMountEffect";
 
 function WorkflowEditor() {
   const { workflowPermanentId } = useParams();
   const credentialGetter = useCredentialGetter();
   const queryClient = useQueryClient();
+  const setCollapsed = useSidebarStore((state) => {
+    return state.setCollapsed;
+  });
 
   const { data: workflow, isLoading } = useWorkflowQuery({
     workflowPermanentId,
   });
 
+  useMountEffect(() => {
+    setCollapsed(true);
+  });
+
   const saveWorkflowMutation = useMutation({
     mutationFn: async (data: {
       parameters: Array<ParameterYAML>;
diff --git a/skyvern-frontend/src/store/SidebarStore.ts b/skyvern-frontend/src/store/SidebarStore.ts
new file mode 100644
index 000000000..450b23d3a
--- /dev/null
+++ b/skyvern-frontend/src/store/SidebarStore.ts
@@ -0,0 +1,15 @@
+import { create } from "zustand";
+
+type SidebarStore = {
+  collapsed: boolean;
+  setCollapsed: (collapsed: boolean) => void;
+};
+
+const useSidebarStore = create<SidebarStore>((set) => {
+  return {
+    collapsed: false,
+    setCollapsed: (collapsed: boolean) => set({ collapsed }),
+  };
+});
+
+export { useSidebarStore };