fix(admin): show single no-access alert instead of one per section in app details

src/Designer/frontend/admin/features/apps/pages/appDetails/AppDetails.tsx

@@ -1,4 +1,4 @@
-import { StudioHeading } from '@studio/components';
+import { StudioAlert, StudioHeading } from '@studio/components';
 import { AppMetrics } from './components/AppMetrics';
 import { useQueryParamState } from 'admin/features/apps/hooks/useQueryParamState';
 import classes from './AppDetails.module.css';
@@ -7,8 +7,14 @@ import { AppInfo } from './components/AppInfo';
 import { Breadcrumbs } from 'admin/features/apps/components/Breadcrumbs/Breadcrumbs';
 import { DEFAULT_SEARCH_PARAMS } from 'admin/constants/constants';
 import { useRequiredRoutePathsParams } from 'admin/hooks/useRequiredRoutePathsParams';
+import { useAppHealthMetricsQuery } from 'admin/features/apps/hooks/queries/useAppHealthMetricsQuery';
+import { isAxiosError } from 'axios';
+import { useCurrentOrg } from 'admin/contexts/OrgContext';
+import { useEnvironmentTitle } from 'admin/features/apps/hooks/useEnvironmentTitle';
+import { useTranslation } from 'react-i18next';
 
 export const AppsDetails = () => {
+  const { t } = useTranslation();
   const {
     owner: org,
     environment,
@@ -17,6 +23,21 @@ export const AppsDetails = () => {
   const defaultRange = DEFAULT_SEARCH_PARAMS.range;
   const [range, setRange] = useQueryParamState<number>('range', defaultRange);
 
+  const currentOrg = useCurrentOrg();
+  const orgName = currentOrg.full_name || currentOrg.username;
+  const envTitle = useEnvironmentTitle(environment);
+
+  const { isError: healthIsError, error: healthError } = useAppHealthMetricsQuery(
+    org,
+    environment,
+    app,
+    {
+      hideDefaultError: true,
+    },
+  );
+  const hasNoAccess =
+    healthIsError && isAxiosError(healthError) && healthError.response?.status === 403;
+
   return (
     <div className={classes.container}>
       <Breadcrumbs
@@ -28,12 +49,20 @@ export const AppsDetails = () => {
       />
       <StudioHeading data-size='lg'>{app}</StudioHeading>
       <AppInfo org={org} environment={environment} app={app} />
-      <div className={classes.metrics}>
-        <AppMetrics range={range ?? defaultRange} setRange={setRange} />
-      </div>
-      <div>
-        <Instances />
-      </div>
+      {hasNoAccess ? (
+        <StudioAlert data-color='info'>
+          {t('admin.app.missing_rights', { envTitle, orgName })}
+        </StudioAlert>
+      ) : (
+        <>
+          <div className={classes.metrics}>
+            <AppMetrics range={range ?? defaultRange} setRange={setRange} />
+          </div>
+          <div>
+            <Instances />
+          </div>
+        </>
+      )}
     </div>
   );
 };

src/Designer/frontend/admin/features/apps/pages/appDetails/components/AppMetrics.test.tsx

@@ -49,55 +49,50 @@ const defaultProps: AppMetricsProps = {
 describe('AppMetrics', () => {
   afterEach(jest.clearAllMocks);
 
-  describe('app health metrics', () => {
-    it('should render loading state', () => {
-      renderAppMetrics();
+  it('should render merged info alert when all queries return 403', async () => {
+    const axiosError = createApiErrorMock(ServerCodes.Forbidden);
+    (axios.get as jest.Mock).mockRejectedValue(axiosError);
+
+    renderAppMetrics();
 
+    await waitFor(() => {
       expect(
-        screen.getByLabelText(textMock('admin.metrics.app.health.loading')),
-      ).toBeInTheDocument();
+        screen.queryByLabelText(textMock('admin.metrics.app.health.loading')),
+      ).not.toBeInTheDocument();
     });
 
-    it('should render info alert when missing rights', async () => {
-      const axiosError = createApiErrorMock(ServerCodes.Forbidden);
-      (axios.get as jest.Mock).mockRejectedValue(axiosError);
+    expect(
+      screen.getByText(
+        textMock('admin.metrics.missing_rights', { envTitle, orgName: orgFullName }),
+      ),
+    ).toBeInTheDocument();
+  });
 
-      renderAppMetrics();
+  it('should use org username when full name is missing in merged missing rights alert', async () => {
+    const axiosError = createApiErrorMock(ServerCodes.Forbidden);
+    (axios.get as jest.Mock).mockRejectedValue(axiosError);
 
-      await waitFor(() => {
-        expect(
-          screen.queryByLabelText(textMock('admin.metrics.app.health.loading')),
-        ).not.toBeInTheDocument();
-      });
+    renderAppMetrics(createQueryClientMock(), defaultProps, orgMockWithoutFullName);
 
+    await waitFor(() => {
       expect(
-        screen.getByText(
-          textMock('admin.metrics.app.health.missing_rights', { envTitle, orgName: orgFullName }),
-        ),
-      ).toBeInTheDocument();
+        screen.queryByLabelText(textMock('admin.metrics.app.health.loading')),
+      ).not.toBeInTheDocument();
     });
 
-    it.each([
-      ['health', 'admin.metrics.app.health.missing_rights', 'admin.metrics.app.health.loading'],
-      ['errors', 'admin.metrics.app.errors.missing_rights', 'admin.metrics.app.errors.loading'],
-      ['app', 'admin.metrics.app.missing_rights', 'admin.metrics.app.loading'],
-    ])(
-      'should use org username when full name is missing in %s missing rights alert',
-      async (_section, missingRightsKey, loadingKey) => {
-        const axiosError = createApiErrorMock(ServerCodes.Forbidden);
-        (axios.get as jest.Mock).mockRejectedValue(axiosError);
-
-        renderAppMetrics(createQueryClientMock(), defaultProps, orgMockWithoutFullName);
+    expect(
+      screen.getByText(textMock('admin.metrics.missing_rights', { envTitle, orgName: org })),
+    ).toBeInTheDocument();
+  });
 
-        await waitFor(() => {
-          expect(screen.queryByLabelText(textMock(loadingKey))).not.toBeInTheDocument();
-        });
+  describe('app health metrics', () => {
+    it('should render loading state', () => {
+      renderAppMetrics();
 
-        expect(
-          screen.getByText(textMock(missingRightsKey, { envTitle, orgName: org })),
-        ).toBeInTheDocument();
-      },
-    );
+      expect(
+        screen.getByLabelText(textMock('admin.metrics.app.health.loading')),
+      ).toBeInTheDocument();
+    });
 
     it('should render error state', async () => {
       const axiosError = createApiErrorMock(ServerCodes.InternalServerError);
@@ -175,25 +170,6 @@ describe('AppMetrics', () => {
       ).toBeInTheDocument();
     });
 
-    it('should render info alert when missing rights', async () => {
-      const axiosError = createApiErrorMock(ServerCodes.Forbidden);
-      (axios.get as jest.Mock).mockRejectedValue(axiosError);
-
-      renderAppMetrics();
-
-      await waitFor(() => {
-        expect(
-          screen.queryByLabelText(textMock('admin.metrics.app.errors.loading')),
-        ).not.toBeInTheDocument();
-      });
-
-      expect(
-        screen.getByText(
-          textMock('admin.metrics.app.errors.missing_rights', { envTitle, orgName: orgFullName }),
-        ),
-      ).toBeInTheDocument();
-    });
-
     it('should render error state', async () => {
       const axiosError = createApiErrorMock(ServerCodes.InternalServerError);
       (axios.get as jest.Mock).mockRejectedValue(axiosError);
@@ -294,25 +270,6 @@ describe('AppMetrics', () => {
       expect(screen.getByLabelText(textMock('admin.metrics.app.loading'))).toBeInTheDocument();
     });
 
-    it('should render info alert when missing rights', async () => {
-      const axiosError = createApiErrorMock(ServerCodes.Forbidden);
-      (axios.get as jest.Mock).mockRejectedValue(axiosError);
-
-      renderAppMetrics();
-
-      await waitFor(() => {
-        expect(
-          screen.queryByLabelText(textMock('admin.metrics.app.loading')),
-        ).not.toBeInTheDocument();
-      });
-
-      expect(
-        screen.getByText(
-          textMock('admin.metrics.app.missing_rights', { envTitle, orgName: orgFullName }),
-        ),
-      ).toBeInTheDocument();
-    });
-
     it('should render error state', async () => {
       const axiosError = createApiErrorMock(ServerCodes.InternalServerError);
       (axios.get as jest.Mock).mockRejectedValue(axiosError);

src/Designer/frontend/admin/features/apps/pages/appDetails/components/AppMetrics.tsx

@@ -163,6 +163,17 @@ export const AppMetrics = ({ range, setRange }: AppMetricsProps) => {
     ));
   };
 
+  const allMissingRights =
+    appHealthMetricsIsError &&
+    isAxiosError(appHealthMetricsError) &&
+    appHealthMetricsError.response?.status === 403 &&
+    appErrorMetricsIsError &&
+    isAxiosError(appErrorMetricsError) &&
+    appErrorMetricsError.response?.status === 403 &&
+    appMetricsIsError &&
+    isAxiosError(appMetricsError) &&
+    appMetricsError.response?.status === 403;
+
   return (
     <StudioCard data-color='neutral' className={classes.container}>
       <StudioHeading className={classes.heading} data-size='sm'>
@@ -173,9 +184,17 @@ export const AppMetrics = ({ range, setRange }: AppMetricsProps) => {
         />
       </StudioHeading>
       <div className={classes.content}>
-        {renderAppHealthMetrics()}
-        {renderAppErrorMetrics()}
-        {renderAppMetrics()}
+        {allMissingRights ? (
+          <StudioAlert data-color='info' className={classes.metric}>
+            {t('admin.metrics.missing_rights', { envTitle, orgName })}
+          </StudioAlert>
+        ) : (
+          <>
+            {renderAppHealthMetrics()}
+            {renderAppErrorMetrics()}
+            {renderAppMetrics()}
+          </>
+        )}
       </div>
     </StudioCard>
   );

src/Designer/frontend/admin/features/apps/pages/instances/Instances.test.tsx

@@ -0,0 +1,81 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { Instances } from './Instances';
+import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { textMock } from '@studio/testing/mocks/i18nMock';
+import { app, org } from '@studio/testing/testids';
+import axios from 'axios';
+import { createApiErrorMock } from 'app-shared/mocks/apiErrorMock';
+import { ServerCodes } from 'app-shared/enums/ServerCodes';
+import { useQueryParamState } from 'admin/features/apps/hooks/useQueryParamState';
+import { OrgContext } from 'admin/contexts/OrgContext';
+
+const env = 'test';
+
+const orgMock = {
+  username: org,
+  full_name: 'Test Org',
+  avatar_url: '',
+  id: 1,
+};
+
+jest.mock('admin/hooks/useRequiredRoutePathsParams', () => ({
+  useRequiredRoutePathsParams: () => ({ owner: org, environment: env, app }),
+}));
+jest.mock('axios', () => ({
+  ...jest.requireActual('axios'),
+  get: jest.fn(),
+}));
+jest.mock('admin/features/apps/hooks/useQueryParamState');
+
+describe('Instances', () => {
+  beforeEach(() => {
+    jest
+      .mocked(useQueryParamState)
+      .mockImplementation((_key, defaultValue) => [defaultValue, jest.fn()]);
+  });
+  afterEach(jest.clearAllMocks);
+
+  it('should render filters while loading', () => {
+    (axios.get as jest.Mock).mockReturnValue(new Promise(() => {}));
+
+    renderInstances();
+
+    expect(
+      screen.getByLabelText(textMock('admin.instances.archive_reference')),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('combobox', { name: textMock('admin.instances.status.completed') }),
+    ).toBeInTheDocument();
+  });
+
+  it('should hide filters when instances query returns 403', async () => {
+    const axiosError = createApiErrorMock(ServerCodes.Forbidden);
+    (axios.get as jest.Mock).mockRejectedValue(axiosError);
+
+    renderInstances();
+
+    await waitFor(() => {
+      expect(
+        screen.queryByLabelText(textMock('admin.instances.archive_reference')),
+      ).not.toBeInTheDocument();
+    });
+
+    expect(
+      screen.queryByRole('combobox', { name: textMock('admin.instances.status.completed') }),
+    ).not.toBeInTheDocument();
+  });
+});
+
+const renderInstances = () => {
+  render(
+    <MemoryRouter>
+      <OrgContext.Provider value={orgMock}>
+        <QueryClientProvider client={createQueryClientMock()}>
+          <Instances />
+        </QueryClientProvider>
+      </OrgContext.Provider>
+    </MemoryRouter>,
+  );
+};