From 06a1ed20bcb7fc26ed8d170fefa652da4086d6b6 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Sat, 15 Jun 2024 16:32:50 +0600
Subject: [PATCH] feat: implemented variant tabs position saving feature

---
 agenta-web/src/components/AppSelector/AppCard.tsx |  2 ++
 .../src/components/Playground/Playground.tsx      | 15 ++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/agenta-web/src/components/AppSelector/AppCard.tsx b/agenta-web/src/components/AppSelector/AppCard.tsx
index 2cceb51363..23ece4e7a6 100644
--- a/agenta-web/src/components/AppSelector/AppCard.tsx
+++ b/agenta-web/src/components/AppSelector/AppCard.tsx
@@ -91,6 +91,8 @@ const AppCard: React.FC<{
         } catch (error) {
             console.error(error)
         } finally {
+            // remove variant tabs position index from LS
+            localStorage.removeItem(`tabIndex_${app.app_id}`)
             setVisibleDelete(false)
             setConfirmLoading(false)
         }
diff --git a/agenta-web/src/components/Playground/Playground.tsx b/agenta-web/src/components/Playground/Playground.tsx
index 1777822149..03b76b9b88 100644
--- a/agenta-web/src/components/Playground/Playground.tsx
+++ b/agenta-web/src/components/Playground/Playground.tsx
@@ -35,6 +35,7 @@ const Playground: React.FC = () => {
     const variantHelpers = useRef<{[name: string]: {save: Function; delete: Function}}>({})
     const sensor = useSensor(PointerSensor, {activationConstraint: {distance: 50}}) // Initializes a PointerSensor with a specified activation distance.
     const [compareMode, setCompareMode] = useLocalStorage("compareMode", false)
+    const [tabIndex, setTabIndex] = useLocalStorage(`tabIndex_${appId}`, [] as string[])
     const tabID = useRef("")
 
     const addTab = async () => {
@@ -89,6 +90,8 @@ const Playground: React.FC = () => {
             setVariants((prevState: any) => [...prevState, newVariant])
             setActiveKey(updateNewVariantName)
             setUnsavedVariants((prev) => ({...prev, [newVariant.variantName!]: false}))
+            tabIndex.length > 0 &&
+                setTabIndex((prev) => [...prev, newVariant.variantName as string])
         } catch (error) {
             message.error("Failed to add new variant. Please try again later.")
             console.error("Error adding new variant:", error)
@@ -116,12 +119,20 @@ const Playground: React.FC = () => {
             return newUnsavedVariants
         })
         setActiveKey(newActiveKey)
+        tabIndex.length > 0 && setTabIndex(tabIndex.filter((tabKey) => toDelete !== tabKey))
     }
 
     const fetchData = async () => {
         try {
             const backendVariants = await fetchVariants(appId)
             if (backendVariants.length > 0) {
+                if (tabIndex.length > 0) {
+                    // Align tabs position according to user preference
+                    backendVariants.sort(
+                        (a, b) => tabIndex.indexOf(a.variantName) - tabIndex.indexOf(b.variantName),
+                    )
+                }
+
                 setVariants(backendVariants)
                 if (!activeKey) setActiveKey(backendVariants[0].variantName)
             }
@@ -262,7 +273,9 @@ const Playground: React.FC = () => {
                 const overIndex = prev.findIndex((variant) => variant.variantName === overId)
 
                 if (activeIndex !== -1 && overIndex !== -1) {
-                    return arrayMove(prev, activeIndex, overIndex)
+                    const tabMoved = arrayMove(prev, activeIndex, overIndex)
+                    setTabIndex(tabMoved.map((tab) => tab.variantName))
+                    return tabMoved
                 }
                 return prev
             })