diff --git a/packages/insomnia/src/ui/components/document-tab.tsx b/packages/insomnia/src/ui/components/document-tab.tsx index e9e5711e2b7..ee2d7220744 100644 --- 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 - `${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 index 6487cc37e25..cc7e283afc0 100644 --- 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 = { 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 index 43421a8e8f9..6ffd24bcce1 100644 --- 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 = ({ 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 = ({ 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 = ({ 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) => { const currentTabs = appTabsRef?.current?.[organizationId]; @@ -198,12 +200,15 @@ export const InsomniaTabProvider: FC = ({ 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];