diff --git a/frontend/app-development/features/administration/components/Administration.test.tsx b/frontend/app-development/features/administration/components/Administration.test.tsx
index 3d99571cab3..de1cb4c6a68 100644
--- a/frontend/app-development/features/administration/components/Administration.test.tsx
+++ b/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(, {
- 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(, {
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(, {
+ 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(, {
+ startUrl: `${APP_DEVELOPMENT_BASENAME}/${org}/${app}`,
+ });
+ expect(screen.getByRole('heading', { name: app })).toBeInTheDocument();
+ expect(screen.queryByRole('heading', { name: title })).not.toBeInTheDocument();
});
});
diff --git a/frontend/app-development/features/administration/components/Administration.tsx b/frontend/app-development/features/administration/components/Administration.tsx
index 1a35aceb3cc..9c35d05e5d2 100644
--- a/frontend/app-development/features/administration/components/Administration.tsx
+++ b/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 ;
+ if (isError) {
+ toast.error(t('administration.fetch_title_error_message'));
+ }
return (
- {appConfigData.serviceName}
+ {appConfigData?.serviceName || app}
diff --git a/frontend/app-development/hooks/queries/useAppConfigQuery.ts b/frontend/app-development/hooks/queries/useAppConfigQuery.ts
index f046093eadb..a6ce17ae452 100644
--- a/frontend/app-development/hooks/queries/useAppConfigQuery.ts
+++ b/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 => {
const { getAppConfig } = useServicesContext();
- return useQuery([QueryKey.AppConfig, org, app], () =>
- getAppConfig(org, app)
+ return useQuery(
+ [QueryKey.AppConfig, org, app],
+ () => getAppConfig(org, app),
+ {
+ meta,
+ },
);
};
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
index 31845f7aace..bbe9e5eaac3 100644
--- a/frontend/language/src/nb.json
+++ b/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 push 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"
-}
+}
\ No newline at end of file