backport #10102 to release/13.0 (#10116)

* backport: manual resolution required for #10102

* fix conflict

* fix conflict

---------

Co-authored-by: Kent Wang <kent.wang@konghq.com>

packages/insomnia/src/routes/organization.$organizationId.project.$projectId._index.tsx

@@ -1,5 +1,5 @@
 import type { IconName, IconProp } from '@fortawesome/fontawesome-svg-core';
-import type { GitRepository, Project, WorkspaceScope } from 'insomnia-data';
+import type { WorkspaceScope } from 'insomnia-data';
 import { models } from 'insomnia-data';
 import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import {
@@ -29,7 +29,7 @@ import {
 } from '~/common/constants';
 import { scopeToBgColorMap, scopeToIconMap, scopeToTextColorMap } from '~/common/get-workspace-label';
 import { fuzzyMatchAll } from '~/common/misc';
-import type { InsomniaFile } from '~/common/project';
+import { getAllLocalFiles, getAllRemoteFiles, type InsomniaFile } from '~/common/project';
 import { sortMethodMap } from '~/common/sorting';
 import { useRootLoaderData } from '~/root';
 import { useOrganizationLoaderData } from '~/routes/organization';
@@ -59,26 +59,27 @@ import { useLoaderDeferData } from '~/ui/hooks/use-loader-defer-data';
 import { useOrganizationPermissions } from '~/ui/hooks/use-organization-features';
 import { DEFAULT_STORAGE_RULES } from '~/ui/organization-utils';
 import { isPrimaryClickModifier } from '~/ui/utils';
+import { invariant } from '~/utils/invariant';
 
-export interface ProjectLoaderData {
-  localFiles: InsomniaFile[];
-  allFilesCount: number;
-  documentsCount: number;
-  environmentsCount: number;
-  collectionsCount: number;
-  mockServersCount: number;
-  mcpClientsCount: number;
-  projectsCount: number;
-  activeProject?: Project;
-  activeProjectGitRepository?: GitRepository;
-  projects: (Project & { gitRepository?: GitRepository })[];
-  remoteFilesPromise?: Promise<InsomniaFile[]>;
-  projectsSyncStatusPromise?: Promise<Record<string, boolean>>;
+import type { Route } from './+types/organization.$organizationId.project.$projectId._index';
+
+export async function clientLoader({ params }: Route.ClientLoaderArgs) {
+  const { organizationId, projectId } = params;
+  invariant(projectId, 'Project ID is required');
+  invariant(organizationId, 'Organization ID is required');
+
+  const remoteFilesPromise = getAllRemoteFiles({ projectId, organizationId });
+  const localFiles = await getAllLocalFiles({ projectId });
+
+  return {
+    localFiles,
+    remoteFilesPromise,
+  };
 }
 
-const Component = () => {
-  const { localFiles, activeProject, activeProjectGitRepository, projects, remoteFilesPromise } =
-    useProjectLoaderData()!;
+const Component = ({ loaderData }: Route.ComponentProps) => {
+  const { localFiles, remoteFilesPromise } = loaderData;
+  const { activeProject, activeProjectGitRepository, projects } = useProjectLoaderData()!;
   const { activeSidebarTab } = useProjectRouteContext();
   const { organizationId, projectId } = useParams() as {
     organizationId: string;

packages/insomnia/src/routes/organization.$organizationId.project.$projectId.tsx

@@ -9,12 +9,7 @@ import * as reactUse from 'react-use';
 import { logout } from '~/account/session';
 import { Icon } from '~/basic-components/icon';
 import { DEFAULT_SIDEBAR_SIZE } from '~/common/constants';
-import {
-  checkAllProjectSyncStatus,
-  getAllLocalFiles,
-  getAllRemoteFiles,
-  getProjectsWithGitRepositories,
-} from '~/common/project';
+import { checkAllProjectSyncStatus, getProjectsWithGitRepositories } from '~/common/project';
 import { useStorageRulesLoaderFetcher } from '~/routes/organization.$organizationId.storage-rules';
 import { ProjectModal } from '~/ui/components/modals/project-modal';
 import { ScratchPadTutorialPanel } from '~/ui/components/panes/scratchpad-tutorial-pane';
@@ -123,13 +118,10 @@ export async function clientLoader({ params }: Route.ClientLoaderArgs) {
     url: '',
   };
 
-  const [localFiles, organizationProjects = []] = await Promise.all([
-    getAllLocalFiles({ projectId }),
-    getProjectsWithGitRepositories({ organizationId }),
-  ]);
+  const organizationProjects = await getProjectsWithGitRepositories({ organizationId });
+
   const projects = models.project.sortProjects(organizationProjects);
 
-  const remoteFilesPromise = getAllRemoteFiles({ projectId, organizationId });
   const learningFeaturePromise = getInsomniaLearningFeature(fallbackLearningFeature);
 
   const projectsSyncStatusPromise = checkAllProjectSyncStatus(projects);
@@ -140,18 +132,9 @@ export async function clientLoader({ params }: Route.ClientLoaderArgs) {
       : undefined;
 
   return {
-    localFiles,
-    remoteFilesPromise,
     projects,
-    projectsCount: organizationProjects.length,
     activeProject: project,
     activeProjectGitRepository,
-    allFilesCount: localFiles.length,
-    environmentsCount: localFiles.filter(file => file.scope === 'environment').length,
-    documentsCount: localFiles.filter(file => file.scope === 'design').length,
-    collectionsCount: localFiles.filter(file => file.scope === 'collection').length,
-    mockServersCount: localFiles.filter(file => file.scope === 'mock-server').length,
-    mcpClientsCount: localFiles.filter(file => file.scope === 'mcp').length,
     projectsSyncStatusPromise,
     learningFeaturePromise,
   };