Add error handling and removed loading spinner

frontend/app-development/features/administration/components/Administration.test.tsx

@@ -1,25 +1,16 @@
 import React from 'react';
-import { screen, waitForElementToBeRemoved } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { Administration } from './Administration';
 import { APP_DEVELOPMENT_BASENAME } from 'app-shared/constants';
 import { renderWithProviders } from '../../../test/testUtils';
-import { textMock } from '../../../../testing/mocks/i18nMock';
 import { queriesMock } from 'app-development/test/mocks';
 
 // Test data
-const org = 'my-org';
-const app = 'my-app';
+const org = 'org';
+const app = 'app';
 const title = 'test';
 
 describe('Administration', () => {
-  it('shows spinner when loading required data', () => {
-    renderWithProviders(<Administration />, {
-      startUrl: `${APP_DEVELOPMENT_BASENAME}/${org}/${app}`,
-    });
-    expect(screen.getByText(textMock('general.loading'))).toBeInTheDocument();
-    expect(screen.queryByRole('heading', { name: title })).not.toBeInTheDocument();
-  });
-
   it('renders component', async () => {
     renderWithProviders(<Administration />, {
       startUrl: `${APP_DEVELOPMENT_BASENAME}/${org}/${app}`,
@@ -33,9 +24,24 @@ describe('Administration', () => {
       },
     });
 
-    await waitForElementToBeRemoved(() => screen.queryByText(textMock('general.loading')));
+    expect(await screen.findByRole('heading', { name: title })).toBeInTheDocument();
+    expect(screen.queryByRole('heading', { name: app })).not.toBeInTheDocument();
+  });
+
+  it('shows repository name when loading app name', () => {
+    renderWithProviders(<Administration />, {
+      startUrl: `${APP_DEVELOPMENT_BASENAME}/${org}/${app}`,
+    });
+
+    expect(screen.getByRole('heading', { name: app })).toBeInTheDocument();
+    expect(screen.queryByRole('heading', { name: title })).not.toBeInTheDocument();
+  });
 
-    expect(screen.queryByText(textMock('general.loading'))).not.toBeInTheDocument();
-    expect(screen.getByRole('heading', { name: title })).toBeInTheDocument();
+  it('shows repository name if an error occured while fetching app name', () => {
+    renderWithProviders(<Administration />, {
+      startUrl: `${APP_DEVELOPMENT_BASENAME}/${org}/${app}`,
+    });
+    expect(screen.getByRole('heading', { name: app })).toBeInTheDocument();
+    expect(screen.queryByRole('heading', { name: title })).not.toBeInTheDocument();
   });
 });

frontend/app-development/features/administration/components/Administration.tsx

@@ -2,20 +2,24 @@ import React from 'react';
 import classes from './Administration.module.css';
 import { useAppConfigQuery } from 'app-development/hooks/queries';
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
-import { PageSpinner } from 'app-shared/components/PageSpinner';
 import { Heading } from '@digdir/design-system-react';
+import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
 
 export const Administration = () => {
   const { org, app } = useStudioUrlParams();
-  const { data: appConfigData, isLoading } = useAppConfigQuery(org, app);
+  const { data: appConfigData, isError } = useAppConfigQuery(org, app, { hideDefaultError: true });
+  const { t } = useTranslation();
 
-  if (isLoading) return <PageSpinner />;
+  if (isError) {
+    toast.error(t('administration.fetch_title_error_message'));
+  }
 
   return (
     <div className={classes.administration}>
       <div className={classes.container}>
         <div className={classes.header}>
-          <Heading size='xlarge'>{appConfigData.serviceName}</Heading>
+          <Heading size='xlarge'>{appConfigData?.serviceName || app}</Heading>
         </div>
         <div className={classes.content}>
           <main className={classes.main}>

frontend/app-development/hooks/queries/useAppConfigQuery.ts

@@ -1,4 +1,4 @@
-import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import { QueryMeta, useQuery, UseQueryResult } from '@tanstack/react-query';
 import type { AppConfig } from 'app-shared/types/AppConfig';
 import { useServicesContext } from 'app-shared/contexts/ServicesContext';
 import { QueryKey } from 'app-shared/types/QueryKey';
@@ -14,11 +14,16 @@ import { AxiosError } from 'axios';
  */
 export const useAppConfigQuery = (
   org: string,
-  app: string
+  app: string,
+  meta?: QueryMeta,
 ): UseQueryResult<AppConfig, AxiosError> => {
   const { getAppConfig } = useServicesContext();
 
-  return useQuery<AppConfig, AxiosError>([QueryKey.AppConfig, org, app], () =>
-    getAppConfig(org, app)
+  return useQuery<AppConfig, AxiosError>(
+    [QueryKey.AppConfig, org, app],
+    () => getAppConfig(org, app),
+    {
+      meta,
+    },
   );
 };

frontend/language/src/nb.json

@@ -26,6 +26,7 @@
   "administration.download_repo_full": "Last ned en full kopi av endret repo som zip fil",
   "administration.download_repo_heading": "Last ned alle endringer?",
   "administration.download_repo_info": "Hvis ting henger seg opp, og <em>push</em> ikke virker, kan det være mulig å \"redde\" endringene dine ved å laste ned en zip fil, og manuelt pakke den ut over et lokalt git repo og sjekke inn endrinene.",
+  "administration.fetch_title_error_message": "Kunne ikke laste inn tittelen for denne appen. Prøv igjen senere.",
   "administration.repo_owner_is": "Opprettet for:",
   "administration.reset_repo_button": "Slett mine endringer",
   "administration.reset_repo_completed": "Alle endringer er nå slettet",
@@ -1431,4 +1432,4 @@
   "validation_errors.pattern": "Feil format eller verdi",
   "validation_errors.required": "Feltet er påkrevd",
   "validation_errors.value_as_url": "Ugyldig lenke"
-}
+}