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