feat: keep search params when navigate to other tab

Kong · Dec 3, 2024 · bf37b02 · bf37b02
1 parent e33eaf6
commit bf37b02
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 17 deletions.
diff --git a/packages/insomnia/src/ui/components/document-tab.tsx b/packages/insomnia/src/ui/components/document-tab.tsx
@@ -1,3 +1,4 @@
+import classnames from 'classnames';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 
@@ -19,12 +20,10 @@ export const DocumentTab = ({ organizationId, projectId, workspaceId, className
         <NavLink
           key={item.id}
           to={`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/${item.id}`}
-          className={({ isActive, isPending }) =>
-            `${isActive
-              ? 'text-[--color-font] bg-[--color-surprise]'
-              : ''
-            } ${isPending ? 'animate-pulse' : ''} text-center rounded-full px-2`
-          }
+          className={({ isActive, isPending }) => classnames('text-center rounded-full px-2', {
+            'text-[--color-font] bg-[--color-surprise]': isActive,
+            'animate-pulse': isPending,
+          })}
           data-testid={`workspace-${item.id}`}
         >
           {item.name}

diff --git a/packages/insomnia/src/ui/components/tabs/tabList.tsx b/packages/insomnia/src/ui/components/tabs/tabList.tsx
@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
 import { Button, DropIndicator, GridList, Menu, MenuItem, MenuTrigger, Popover, type Selection, useDragAndDrop } from 'react-aria-components';
-import { useFetcher, useNavigate, useParams } from 'react-router-dom';
+import { useFetcher, useParams } from 'react-router-dom';
 
 import { type ChangeBufferEvent, type ChangeType, database } from '../../../common/database';
 import * as models from '../../../models/index';
@@ -42,7 +42,6 @@ export const TAB_ROUTER_PATH: Record<TabEnum, string> = {
 export const OrganizationTabList = ({ showActiveStatus = true, currentPage = '' }) => {
   const { currentOrgTabs, batchUpdateTabs, moveBefore, moveAfter } = useInsomniaTabContext();
   const { tabList, activeTabId } = currentOrgTabs;
-  const navigate = useNavigate();
 
   const [showAddRequestModal, setShowAddRequestModal] = useState(false);
   const [isOverFlow, setIsOverFlow] = useState(false);
@@ -67,8 +66,6 @@ export const OrganizationTabList = ({ showActiveStatus = true, currentPage = ''
   const handleSelectionChange = (keys: Selection) => {
     if (keys !== 'all') {
       const key = [...keys.values()]?.[0] as string;
-      const tab = tabList.find(tab => tab.id === key);
-      tab?.url && navigate(tab?.url);
       changeActiveTab(key);
     }
   };

diff --git a/packages/insomnia/src/ui/context/app/insomnia-tab-context.tsx b/packages/insomnia/src/ui/context/app/insomnia-tab-context.tsx
@@ -1,5 +1,5 @@
 import React, { createContext, type FC, type PropsWithChildren, useCallback, useContext, useRef } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { useLocalStorage } from 'react-use';
 
 import type { BaseTab } from '../../components/tabs/tab';
@@ -60,6 +60,8 @@ export const InsomniaTabProvider: FC<PropsWithChildren> = ({ children }) => {
   const appTabsRef = useRef(appTabs);
 
   const navigate = useNavigate();
+  // keep search params to navigate to another tab
+  const [searchParams] = useSearchParams();
 
   const updateInsomniaTabs = useCallback(({ organizationId, tabList, activeTabId }: UpdateInsomniaTabParams) => {
     const newState = {
@@ -106,14 +108,14 @@ export const InsomniaTabProvider: FC<PropsWithChildren> = ({ children }) => {
     }
     const newTabList = currentTabs.tabList.filter(tab => tab.id !== id);
     if (currentTabs.activeTabId === id) {
-      navigate(newTabList[index - 1 < 0 ? 0 : index - 1]?.url || '');
+      navigate(`${newTabList[Math.max(index - 1, 0)]?.url}?${searchParams.toString()}` || '');
     }
     updateInsomniaTabs({
       organizationId,
       tabList: newTabList,
-      activeTabId: currentTabs.activeTabId === id ? newTabList[index - 1 < 0 ? 0 : index - 1]?.id : currentTabs.activeTabId as string,
+      activeTabId: currentTabs.activeTabId === id ? newTabList[Math.max(index - 1, 0)]?.id : currentTabs.activeTabId as string,
     });
-  }, [navigate, organizationId, projectId, updateInsomniaTabs]);
+  }, [navigate, organizationId, projectId, searchParams, updateInsomniaTabs]);
 
   const closeAllTabsUnderWorkspace = useCallback((workspaceId: string) => {
     const currentTabs = appTabsRef?.current?.[organizationId];
@@ -163,14 +165,14 @@ export const InsomniaTabProvider: FC<PropsWithChildren> = ({ children }) => {
     }
 
     if (currentTabs.activeTabId !== id) {
-      navigate(reservedTab.url);
+      navigate(`${reservedTab.url}?${searchParams.toString()}`);
     }
     updateInsomniaTabs({
       organizationId,
       tabList: [reservedTab],
       activeTabId: id,
     });
-  }, [navigate, organizationId, updateInsomniaTabs]);
+  }, [navigate, organizationId, searchParams, updateInsomniaTabs]);
 
   const updateTabById = useCallback((tabId: string, patches: Partial<BaseTab>) => {
     const currentTabs = appTabsRef?.current?.[organizationId];
@@ -198,12 +200,15 @@ export const InsomniaTabProvider: FC<PropsWithChildren> = ({ children }) => {
     if (!currentTabs) {
       return;
     }
+    const tab = currentTabs?.tabList.find(tab => tab.id === id);
+    // keep the search params when navigate to another tab
+    tab?.url && navigate(`${tab?.url}?${searchParams.toString()}`);
     updateInsomniaTabs({
       organizationId,
       tabList: currentTabs.tabList,
       activeTabId: id,
     });
-  }, [organizationId, updateInsomniaTabs]);
+  }, [navigate, organizationId, searchParams, updateInsomniaTabs]);
 
   const updateProjectName = useCallback((projectId: string, name: string) => {
     const currentTabs = appTabsRef?.current?.[organizationId];