fix(app-shell): do not fetch project extensions if user has no projec…

…t access (#3579)
commercetools · Aug 5, 2024 · ed2158c · ed2158c
1 parent 839d185
commit ed2158c
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 1 deletion.
diff --git a/.changeset/spotty-dragons-peel.md b/.changeset/spotty-dragons-peel.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-frontend/application-shell': patch
+---
+
+Do not fetch project extensions for navbar if user cannot access a project.
diff --git a/packages/application-shell/src/components/application-shell/application-shell.spec.js b/packages/application-shell/src/components/application-shell/application-shell.spec.js
@@ -1372,6 +1372,41 @@ describe('navbar menu links interactions', () => {
       });
     });
   });
+  describe('when accessing a project that does not exist or the user has no access', () => {
+    it('should render page not found', async () => {
+      let isQueryCalled = false;
+      mockServer.use(
+        ...getDefaultMockResolvers(),
+        graphql.query('FetchProjectExtensionsNavbar', (req, res, ctx) => {
+          isQueryCalled = true;
+          return res(
+            ctx.status(401),
+            ctx.errors([
+              new GraphQLError('User is not authorized', {
+                extensions: {
+                  code: 'UNAUTHENTICATED',
+                },
+              }),
+            ])
+          );
+        }),
+        graphql
+          .link(`${window.location.origin}/api/graphql`)
+          .query('FetchApplicationsMenu', (req, res, ctx) =>
+            res(ctx.data({ applicationsMenu: null }))
+          )
+      );
+      renderApp(null, {
+        environment: {
+          servedByProxy: 'true',
+        },
+        route: '/not-found',
+      });
+
+      await screen.findByText('We could not find this Project');
+      expect(isQueryCalled).toBe(false);
+    });
+  });
 });
 describe('when navbar menu items are hidden', () => {
   beforeEach(() => {

diff --git a/packages/application-shell/src/components/navbar/navbar.tsx b/packages/application-shell/src/components/navbar/navbar.tsx
@@ -336,6 +336,7 @@ const NavBar = (props: TNavbarProps) => {
     allApplicationsNavbarMenuGroups,
   } = useNavbarStateManager({
     environment: props.environment,
+    project: props.project,
   });
   const useFullRedirectsForLinks = Boolean(
     props.environment.useFullRedirectsForLinks

diff --git a/packages/application-shell/src/components/navbar/use-navbar-state-manager.ts b/packages/application-shell/src/components/navbar/use-navbar-state-manager.ts
@@ -18,6 +18,7 @@ import {
 import { reportErrorToSentry } from '@commercetools-frontend/sentry';
 import { WINDOW_SIZES } from '../../constants';
 import useApplicationsMenu from '../../hooks/use-applications-menu';
+import type { TFetchProjectQuery } from '../../types/generated/mc';
 import type {
   TNavbarMenu,
   TNavbarMenuGroup,
@@ -31,6 +32,7 @@ import nonNullable from './non-nullable';
 
 type HookProps = {
   environment: TApplicationContext<{}>['environment'];
+  project: TFetchProjectQuery['project'];
 };
 type State = {
   activeItemIndex?: string;
@@ -97,7 +99,7 @@ const useNavbarStateManager = (props: HookProps) => {
     TFetchProjectExtensionsNavbarQuery,
     TFetchProjectExtensionsNavbarQueryVariables
   >(FetchProjectExtensionsNavbar, {
-    skip: !props.environment.servedByProxy,
+    skip: !props.project || !props.environment.servedByProxy,
     context: {
       target: GRAPHQL_TARGETS.SETTINGS_SERVICE,
     },