Merge pull request #1895 from Agenta-AI/feat/1789-save-variant-postions

Feat: save variant tabs position
Agenta-AI · Jul 16, 2024 · c399e7b · c399e7b
2 parents 19b9ce3 + 4cb45ed
commit c399e7b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git 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
@@ -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
             })