Fix: non blocking fetch on navigate (#7321)

* non-blocking action loader * fix types * improve plugin logging * use keys to make org change refetch * Update packages/insomnia/src/ui/components/panes/project-empty-state-pane.tsx
Kong · Apr 29, 2024 · 27922a8 · 27922a8
1 parent 69fb149
commit 27922a8
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 29 deletions.
diff --git a/packages/insomnia/src/plugins/index.ts b/packages/insomnia/src/plugins/index.ts
@@ -118,7 +118,8 @@ async function _traversePluginPath(
     if (!fs.existsSync(p)) {
       continue;
     }
-
+    const folders = (await fs.promises.readdir(p)).filter(f => f.startsWith('insomnia-plugin-'));
+    console.log('[plugin] Loading', folders.map(f => f.replace('insomnia-plugin-', '')).join(', '));
     for (const filename of fs.readdirSync(p)) {
       try {
         const modulePath = path.join(p, filename);
@@ -166,7 +167,6 @@ async function _traversePluginPath(
             : { disabled: false },
           module: module,
         };
-        console.log(`[plugin] Loaded ${modulePath}`);
       } catch (err) {
         showError({
           title: 'Plugin Error',

diff --git a/packages/insomnia/src/ui/components/dropdowns/workspace-sync-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/workspace-sync-dropdown.tsx
@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import { FC, useEffect } from 'react';
 import React from 'react';
-import { useRouteLoaderData } from 'react-router-dom';
+import { useFetcher, useParams, useRouteLoaderData } from 'react-router-dom';
 
 import { isRemoteProject } from '../../../models/project';
 import { OrganizationFeatureLoaderData } from '../../routes/organization';
@@ -20,8 +20,21 @@ export const WorkspaceSyncDropdown: FC = () => {
   ) as WorkspaceLoaderData;
 
   const { userSession } = useRootLoaderData();
-  const { features } = useRouteLoaderData(':organizationId') as OrganizationFeatureLoaderData;
-
+  const { organizationId } = useParams() as { organizationId: string };
+  const permissionsFetcher = useFetcher<OrganizationFeatureLoaderData>({ key: `permissions:${organizationId}` });
+
+  useEffect(() => {
+    const isIdleAndUninitialized = permissionsFetcher.state === 'idle' && !permissionsFetcher.data;
+    if (isIdleAndUninitialized) {
+      permissionsFetcher.load(`/organization/${organizationId}/permissions`);
+    }
+  }, [organizationId, permissionsFetcher]);
+
+  const { features } = permissionsFetcher.data || {
+    features: {
+      gitSync: { enabled: false, reason: 'Insomnia API unreachable' },
+    },
+  };
   if (!userSession.id) {
     return null;
   }

diff --git a/packages/insomnia/src/ui/components/panes/project-empty-state-pane.tsx b/packages/insomnia/src/ui/components/panes/project-empty-state-pane.tsx
@@ -1,11 +1,11 @@
-import React, { FC } from 'react';
-import { useParams, useRouteLoaderData } from 'react-router-dom';
+import React, { FC, useEffect } from 'react';
+import { useFetcher, useParams } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { getAccountId } from '../../../account/session';
 import { getAppWebsiteBaseURL } from '../../../common/constants';
 import { isOwnerOfOrganization } from '../../../models/organization';
-import { type FeatureList, useOrganizationLoaderData } from '../../../ui/routes/organization';
+import { OrganizationFeatureLoaderData, useOrganizationLoaderData } from '../../../ui/routes/organization';
 import { useRootLoaderData } from '../../routes/root';
 import { showModal } from '../modals';
 import { AlertModal } from '../modals/alert-modal';
@@ -84,8 +84,20 @@ export const EmptyStatePane: FC<Props> = ({ createRequestCollection, createDesig
   const { organizations } = useOrganizationLoaderData();
   const { userSession } = useRootLoaderData();
   const currentOrg = organizations.find(organization => (organization.id === organizationId));
-  const { features } = useRouteLoaderData(':organizationId') as { features: FeatureList };
+  const permissionsFetcher = useFetcher<OrganizationFeatureLoaderData>({ key: `permissions:${organizationId}` });
 
+  useEffect(() => {
+    const isIdleAndUninitialized = permissionsFetcher.state === 'idle' && !permissionsFetcher.data;
+    if (isIdleAndUninitialized) {
+      permissionsFetcher.load(`/organization/${organizationId}/permissions`);
+    }
+  }, [organizationId, permissionsFetcher]);
+
+  const { features } = permissionsFetcher.data || {
+    features: {
+      gitSync: { enabled: false, reason: 'Insomnia API unreachable' },
+    },
+  };
   const isGitSyncEnabled = features.gitSync.enabled;
   const accountId = getAccountId();
 

diff --git a/packages/insomnia/src/ui/index.tsx b/packages/insomnia/src/ui/index.tsx
@@ -32,7 +32,6 @@ import Login from './routes/auth.login';
 import { ErrorRoute } from './routes/error';
 import Onboarding from './routes/onboarding';
 import { Migrate } from './routes/onboarding.migrate';
-import { shouldOrganizationsRevalidate } from './routes/organization';
 import Root from './routes/root';
 import { initializeSentry } from './sentry';
 
@@ -202,17 +201,19 @@ async function renderApp() {
               {
                 path: ':organizationId',
                 id: ':organizationId',
-                shouldRevalidate: shouldOrganizationsRevalidate,
-                loader: async (...args) =>
-                  (
-                    await import('./routes/organization')
-                  ).singleOrgLoader(...args),
                 children: [
                   {
                     index: true,
                     loader: async (...args) =>
                       (await import('./routes/project')).indexLoader(...args),
                   },
+                  {
+                    path: 'permissions',
+                    loader: async (...args) =>
+                      (
+                        await import('./routes/organization')
+                      ).organizationPermissionsLoader(...args),
+                  },
                   {
                     path: 'sync-projects',
                     action: async (...args) =>

diff --git a/packages/insomnia/src/ui/routes/organization.tsx b/packages/insomnia/src/ui/routes/organization.tsx
@@ -17,7 +17,6 @@ import {
   NavLink,
   Outlet,
   redirect,
-  ShouldRevalidateFunction,
   useFetcher,
   useLoaderData,
   useNavigate,
@@ -302,7 +301,7 @@ export interface OrganizationFeatureLoaderData {
   storage: 'cloud_plus_local' | 'cloud_only' | 'local_only';
 }
 
-export const singleOrgLoader: LoaderFunction = async ({ params }): Promise<OrganizationFeatureLoaderData> => {
+export const organizationPermissionsLoader: LoaderFunction = async ({ params }): Promise<OrganizationFeatureLoaderData> => {
   const { organizationId } = params as { organizationId: string };
   const { id: sessionId, accountId } = await userSession.getOrCreate();
   const fallbackFeatures = {
@@ -363,15 +362,6 @@ export const useOrganizationLoaderData = () => {
   return useRouteLoaderData('/organization') as OrganizationLoaderData;
 };
 
-export const shouldOrganizationsRevalidate: ShouldRevalidateFunction = ({
-  currentParams,
-  nextParams,
-}) => {
-  const isSwitchingBetweenOrganizations = currentParams.organizationId !== nextParams.organizationId;
-
-  return isSwitchingBetweenOrganizations;
-};
-
 const UpgradeButton = ({
   currentPlan,
 }: {

diff --git a/packages/insomnia/src/ui/routes/project.tsx b/packages/insomnia/src/ui/routes/project.tsx
@@ -34,7 +34,6 @@ import {
   useLoaderData,
   useNavigate,
   useParams,
-  useRouteLoaderData,
   useSearchParams,
 } from 'react-router-dom';
 import { useLocalStorage } from 'react-use';
@@ -570,7 +569,25 @@ const ProjectRoute: FC = () => {
 
   const { organizations } = useOrganizationLoaderData();
   const { presence } = useInsomniaEventStreamContext();
-  const { features, billing, storage } = useRouteLoaderData(':organizationId') as OrganizationFeatureLoaderData;
+  const permissionsFetcher = useFetcher<OrganizationFeatureLoaderData>({ key: `permissions:${organizationId}` });
+
+  useEffect(() => {
+    const isIdleAndUninitialized = permissionsFetcher.state === 'idle' && !permissionsFetcher.data && !isScratchpadOrganizationId(organizationId);
+    if (isIdleAndUninitialized) {
+      permissionsFetcher.load(`/organization/${organizationId}/permissions`);
+    }
+  }, [organizationId, permissionsFetcher]);
+
+  const { features, billing, storage } = permissionsFetcher.data || {
+    features: {
+      gitSync: { enabled: false, reason: 'Insomnia API unreachable' },
+      orgBasicRbac: { enabled: false, reason: 'Insomnia API unreachable' },
+    },
+    billing: {
+      isActive: true,
+    },
+    storage: 'cloud_plus_local',
+  };
   const [scope, setScope] = useLocalStorage(`${projectId}:project-dashboard-scope`, 'all');
   const [sortOrder, setSortOrder] = useLocalStorage(`${projectId}:project-dashboard-sort-order`, 'modified-desc');
   const [filter, setFilter] = useLocalStorage(`${projectId}:project-dashboard-filter`, '');