remove abstraction

Kong · Feb 12, 2025 · 59c61b3 · 59c61b3
1 parent 8870e59
commit 59c61b3
Show file tree

Hide file tree

Showing 7 changed files with 408 additions and 64 deletions.
diff --git a/packages/insomnia/src/ui/components/tabs/tabList.tsx b/packages/insomnia/src/ui/components/tabs/tabList.tsx
@@ -1,16 +1,21 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Button, DropIndicator, GridList, Menu, MenuItem, MenuTrigger, Popover, type Selection, useDragAndDrop } from 'react-aria-components';
-import { useFetcher, useParams } from 'react-router-dom';
+import { matchPath, useFetcher, useLocation, useParams, useRouteLoaderData, useSearchParams } from 'react-router-dom';
 
 import { type ChangeBufferEvent, type ChangeType, database } from '../../../common/database';
 import { debounce } from '../../../common/misc';
+import type { GrpcRequest } from '../../../models/grpc-request';
 import * as models from '../../../models/index';
 import type { MockRoute } from '../../../models/mock-route';
 import { isRequest, type Request } from '../../../models/request';
-import { isRequestGroup } from '../../../models/request-group';
+import { isRequestGroup, type RequestGroup } from '../../../models/request-group';
+import type { UnitTestSuite } from '../../../models/unit-test-suite';
+import type { WebSocketRequest } from '../../../models/websocket-request';
 import { INSOMNIA_TAB_HEIGHT } from '../../constant';
 import { useInsomniaTabContext } from '../../context/app/insomnia-tab-context';
+// import { useInsomniaTab } from '../../hooks/use-insomnia-tab';
 import { type Size, useResizeObserver } from '../../hooks/use-resize-observer';
+import type { WorkspaceLoaderData } from '../../routes/workspace';
 import { Icon } from '../icon';
 import { AddRequestToCollectionModal } from '../modals/add-request-to-collection-modal';
 import { formatMethodName, getRequestMethodShortHand } from '../tags/method-tag';
@@ -21,6 +26,15 @@ export interface OrganizationTabs {
   activeTabId?: string;
 }
 
+interface TabListProps {
+  showActiveStatus?: boolean;
+  currentPage?: string;
+  activeRequest?: Request | GrpcRequest | WebSocketRequest;
+  activeRequestGroup?: RequestGroup;
+  activeMockRoute?: MockRoute;
+  unitTestSuite?: UnitTestSuite;
+};
+
 export const enum TAB_CONTEXT_MENU_COMMAND {
   CLOSE_ALL = 'Close all',
   CLOSE_OTHERS = 'Close others',
@@ -39,17 +53,26 @@ export const TAB_ROUTER_PATH: Record<TabType, string> = {
   testSuite: '/organization/:organizationId/project/:projectId/workspace/:workspaceId/test/test-suite/*',
 };
 
-export const OrganizationTabList = ({ showActiveStatus = true, currentPage = '' }) => {
+export const OrganizationTabList = ({
+  showActiveStatus = true,
+  currentPage = '',
+  activeRequest,
+  activeRequestGroup,
+  activeMockRoute,
+  unitTestSuite,
+}: TabListProps) => {
 
   const [showAddRequestModal, setShowAddRequestModal] = useState(false);
   const [isOverFlow, setIsOverFlow] = useState(false);
   const [leftScrollDisable, setLeftScrollDisable] = useState(false);
   const [rightScrollDisable, setRightScrollDisable] = useState(false);
 
   const requestFetcher = useFetcher();
-  const { organizationId, projectId } = useParams();
+  const { organizationId = '', projectId = '', workspaceId = '' } = useParams();
 
   const {
+    appTabsRef,
+    addTab,
     changeActiveTab,
     closeTabById,
     closeAllTabsUnderWorkspace,
@@ -329,6 +352,277 @@ export const OrganizationTabList = ({ showActiveStatus = true, currentPage = ''
     },
   });
 
+  const workspaceRouteData = useRouteLoaderData(
+    ':workspaceId'
+  ) as WorkspaceLoaderData | undefined;
+
+  const { activeProject, activeWorkspace } = workspaceRouteData || {};
+
+  // useInsomniaTab({
+  //   organizationId,
+  //   projectId,
+  //   workspaceId,
+  //   activeWorkspace,
+  //   activeProject,
+  //   activeRequest,
+  //   activeRequestGroup,
+  //   activeMockRoute,
+  //   unitTestSuite,
+  // });
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+
+  const generateTabUrl = useCallback((type: TabType) => {
+    if (type === 'request') {
+      return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${activeRequest?._id}`;
+    }
+
+    if (type === 'folder') {
+      return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/${activeRequestGroup?._id}`;
+    }
+
+    if (type === 'collection') {
+      return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug?doNotSkipToActiveRequest=true`;
+    }
+
+    if (type === 'environment') {
+      return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment`;
+    }
+
+    if (type === 'runner') {
+      return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/runner${location.search}`;
+    }
+
+    if (type === 'mockServer') {
+      return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/mock-server`;
+    }
+
+    if (type === 'mockRoute') {
+      return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/mock-server/mock-route/${activeMockRoute?._id}`;
+    }
+
+    if (type === 'document') {
+      return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/spec`;
+    }
+
+    if (type === 'test') {
+      return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test`;
+    }
+
+    if (type === 'testSuite') {
+      return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${unitTestSuite?._id}`;
+    }
+    return '';
+  }, [activeMockRoute?._id, activeRequest?._id, activeRequestGroup?._id, location.search, organizationId, projectId, unitTestSuite?._id, workspaceId]);
+
+  const getTabType = (pathname: string): TabType | null => {
+    for (const type in TAB_ROUTER_PATH) {
+      const ifMatch = matchPath({
+        path: TAB_ROUTER_PATH[type as TabType],
+        end: true,
+      }, pathname);
+      if (ifMatch) {
+        return type as TabType;
+      }
+    }
+
+    return null;
+  };
+
+  const getRunnerTabId = useCallback(() => {
+    const folderId = searchParams.get('folder');
+    if (folderId) {
+      return `runner_${folderId}`;
+    }
+    return `runner_${workspaceId}`;
+  }, [searchParams, workspaceId]);
+
+  const getCurrentTab = useCallback((type: TabType | null) => {
+    if (!type) {
+      return undefined;
+    }
+    const currentOrgTabs = appTabsRef?.current?.[organizationId];
+    if (type === 'request') {
+      return currentOrgTabs?.tabList.find(tab => tab.id === activeRequest?._id);
+    }
+
+    if (type === 'folder') {
+      return currentOrgTabs?.tabList.find(tab => tab.id === activeRequestGroup?._id);
+    }
+
+    if (type === 'runner') {
+      // collection runner tab id is prefixed with 'runner_'
+      const runnerTabId = getRunnerTabId();
+      return currentOrgTabs?.tabList.find(tab => tab.id === runnerTabId);
+    }
+
+    if (type === 'mockRoute') {
+      return currentOrgTabs?.tabList.find(tab => tab.id === activeMockRoute?._id);
+    }
+
+    if (type === 'testSuite') {
+      return currentOrgTabs?.tabList.find(tab => tab.id === unitTestSuite?._id);
+    }
+
+    const collectionTabTypes: TabType[] = ['collection', 'document', 'environment', 'mockServer', 'test'];
+    if (collectionTabTypes.includes(type)) {
+      return currentOrgTabs?.tabList.find(tab => tab.id === workspaceId);
+    }
+    return undefined;
+  }, [activeMockRoute?._id, activeRequest?._id, activeRequestGroup?._id, appTabsRef, getRunnerTabId, organizationId, unitTestSuite?._id, workspaceId]);
+
+  const getTabId = useCallback((type: TabType | null): string => {
+    if (!type) {
+      return '';
+    }
+    if (type === 'request') {
+      return activeRequest?._id || '';
+    }
+
+    if (type === 'folder') {
+      return activeRequestGroup?._id || '';
+    }
+
+    if (type === 'runner') {
+      const runnerTabId = getRunnerTabId();
+      return runnerTabId;
+    }
+
+    if (type === 'mockRoute') {
+      return activeMockRoute?._id || '';
+    }
+
+    if (type === 'testSuite') {
+      return unitTestSuite?._id || '';
+    }
+    const collectionTabTypes: TabType[] = ['collection', 'document', 'environment', 'mockServer', 'test'];
+    if (collectionTabTypes.includes(type)) {
+      return workspaceId;
+    }
+
+    return '';
+  }, [activeMockRoute?._id, activeRequest?._id, activeRequestGroup?._id, getRunnerTabId, unitTestSuite?._id, workspaceId]);
+
+  const packTabInfo = useCallback((type: TabType): BaseTab | undefined => {
+    if (!type) {
+      return undefined;
+    }
+    if (type === 'request') {
+      return {
+        type,
+        name: activeRequest?.name || 'New Request',
+        url: generateTabUrl(type),
+        organizationId: organizationId,
+        projectId: projectId,
+        workspaceId: workspaceId,
+        id: getTabId(type),
+        projectName: activeProject?.name || '',
+        workspaceName: activeWorkspace?.name || '',
+        tag: getRequestMethodShortHand(activeRequest),
+        method: (activeRequest as Request)?.method || '',
+      };
+    }
+
+    if (type === 'folder') {
+      return {
+        type,
+        name: activeRequestGroup?.name || 'My Folder',
+        url: generateTabUrl(type),
+        organizationId: organizationId,
+        projectId: projectId,
+        workspaceId: workspaceId,
+        id: getTabId(type),
+        projectName: activeProject?.name || '',
+        workspaceName: activeWorkspace?.name || '',
+      };
+    }
+
+    const collectionTabTypes: TabType[] = ['collection', 'document', 'environment', 'mockServer', 'test'];
+    if (collectionTabTypes.includes(type)) {
+      return {
+        type,
+        name: activeWorkspace?.name || '',
+        url: generateTabUrl(type),
+        organizationId: organizationId,
+        projectId: projectId,
+        workspaceId: workspaceId,
+        id: getTabId(type),
+        projectName: activeProject?.name || '',
+        workspaceName: activeWorkspace?.name || '',
+      };
+    }
+
+    if (type === 'runner') {
+      return {
+        type,
+        name: 'Runner',
+        url: generateTabUrl(type),
+        organizationId: organizationId,
+        projectId: projectId,
+        workspaceId: workspaceId,
+        id: getTabId(type),
+        projectName: activeProject?.name || '',
+        workspaceName: activeWorkspace?.name || '',
+      };
+    }
+
+    if (type === 'mockRoute') {
+      return {
+        type,
+        name: activeMockRoute?.name || 'Untitled mock route',
+        url: generateTabUrl(type),
+        organizationId: organizationId,
+        projectId: projectId,
+        workspaceId: workspaceId,
+        id: getTabId(type),
+        tag: formatMethodName(activeMockRoute?.method || ''),
+        projectName: activeProject?.name || '',
+        workspaceName: activeWorkspace?.name || '',
+        method: activeMockRoute?.method || '',
+      };
+    }
+
+    if (type === 'testSuite') {
+      return {
+        type,
+        name: unitTestSuite?.name || 'Untitled test suite',
+        url: generateTabUrl(type),
+        organizationId: organizationId,
+        projectId: projectId,
+        workspaceId: workspaceId,
+        id: getTabId(type),
+        projectName: activeProject?.name || '',
+        workspaceName: activeWorkspace?.name || '',
+      };
+    }
+
+    return;
+  }, [activeMockRoute?.method, activeMockRoute?.name, activeProject?.name, activeRequest, activeRequestGroup?.name, activeWorkspace?.name, generateTabUrl, getTabId, organizationId, projectId, unitTestSuite?.name, workspaceId]);
+
+  useEffect(() => {
+    const type = getTabType(location.pathname);
+    if (!type) {
+      // when in the dashboard page, the type is null and no need to add tab
+      return;
+    }
+    const currentTab = getCurrentTab(type);
+    if (!currentTab && type) {
+      const tabInfo = packTabInfo(type);
+      if (tabInfo) {
+        addTab(tabInfo);
+        return;
+      }
+    }
+
+    // keep active tab in sync with the current route
+    if (currentTab) {
+      const currentActiveTabId = appTabsRef?.current?.[organizationId]?.activeTabId;
+      if (currentActiveTabId !== currentTab.id) {
+        changeActiveTab(currentTab.id);
+      }
+    }
+  }, [addTab, appTabsRef, changeActiveTab, getCurrentTab, location.pathname, organizationId, packTabInfo]);
+
   if (!tabList.length) {
     return null;
   };

diff --git a/packages/insomnia/src/ui/routes/debug.tsx b/packages/insomnia/src/ui/routes/debug.tsx
@@ -107,7 +107,7 @@ import { WebSocketRequestPane } from '../components/websockets/websocket-request
 import { INSOMNIA_TAB_HEIGHT } from '../constant';
 import { useCloseConnection } from '../hooks/use-close-connection';
 import { useExecutionState } from '../hooks/use-execution-state';
-import { useInsomniaTab } from '../hooks/use-insomnia-tab';
+// import { useInsomniaTab } from '../hooks/use-insomnia-tab';
 import { useReadyState } from '../hooks/use-ready-state';
 import {
   type CreateRequestType,
@@ -752,15 +752,15 @@ export const Debug: FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useInsomniaTab({
-    organizationId,
-    projectId,
-    workspaceId,
-    activeWorkspace,
-    activeProject,
-    activeRequest,
-    activeRequestGroup,
-  });
+  // useInsomniaTab({
+  //   organizationId,
+  //   projectId,
+  //   workspaceId,
+  //   activeWorkspace,
+  //   activeProject,
+  //   activeRequest,
+  //   activeRequestGroup,
+  // });
 
   return (
     <PanelGroup ref={sidebarPanelRef} autoSaveId="insomnia-sidebar" id="wrapper" className='new-sidebar w-full h-full text-[--color-font]' direction='horizontal'>
@@ -1151,7 +1151,11 @@ export const Debug: FC = () => {
       </Panel>
       <PanelResizeHandle className='h-full w-[1px] bg-[--hl-md]' />
       <Panel className='flex flex-col'>
-        <OrganizationTabList currentPage='debug' />
+        <OrganizationTabList
+          currentPage='debug'
+          activeRequest={activeRequest}
+          activeRequestGroup={activeRequestGroup}
+        />
         <PanelGroup autoSaveId="insomnia-panels" id="insomnia-panels" direction={direction}>
           <Routes>
             <Route