From c12e5985c4f46285a3a4ee6e9c545f27fd5e520f Mon Sep 17 00:00:00 2001 From: Jostein Stuhaug Date: Wed, 14 Aug 2024 17:10:52 +0200 Subject: [PATCH 01/20] =?UTF-8?q?Ny=20komponent=20for=20stor=20feilmelding?= =?UTF-8?q?=20p=C3=A5=20side.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bruker aksel komponenter og dropper intl støtte for å forenkle kodebasen. --- .../src/sak/systeminfo/BigError.stories.tsx | 59 +++++++++++++++++++ .../v2/gui/src/sak/systeminfo/BigError.tsx | 17 ++++++ 2 files changed, 76 insertions(+) create mode 100644 packages/v2/gui/src/sak/systeminfo/BigError.stories.tsx create mode 100644 packages/v2/gui/src/sak/systeminfo/BigError.tsx diff --git a/packages/v2/gui/src/sak/systeminfo/BigError.stories.tsx b/packages/v2/gui/src/sak/systeminfo/BigError.stories.tsx new file mode 100644 index 0000000000..cf9832fda3 --- /dev/null +++ b/packages/v2/gui/src/sak/systeminfo/BigError.stories.tsx @@ -0,0 +1,59 @@ +import { BigError } from './BigError.js'; +import type { Meta, StoryObj } from '@storybook/react'; +import { expect } from '@storybook/test'; + +const meta = { + title: 'gui/sak/systeminfo/BigError', + component: BigError, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const EnkelFeilmelding: Story = { + args: { + title: 'Overskrift feil', + children: 'Enkel feilmeldingstekst', + }, + play: async ({ canvas, args }) => { + await expect(canvas.getByRole('heading')).toHaveTextContent(args.title || ''); + await expect(typeof args.children).toBe('string'); + if (typeof args.children === 'string') { + await expect(canvas.getByText(args.children)).toBeInTheDocument(); + } + }, +}; + +export const FeilmeldingMedUtfyllandeTekst: Story = { + args: { + title: 'Overskrift utfyllande feil', + children: ( +

+ Her er meir utfyllande tekst, inkludert link til meir info +

+ ), + }, + play: async ({ canvas }) => { + await expect(canvas.getByText('Her er meir utfyllande tekst,', { exact: false })).toBeInTheDocument(); + }, +}; + +export const FleireAvsnitt: Story = { + args: { + title: 'Overskrift', + children: ( + <> +

Første avsnitt med feilmeldingstekst.

+

Andre avsnitt med feilmeldingstekst.

+

Tredje avsnitt med feilmeldingstekst.

+ + ), + }, +}; + +export const UtenTittel: Story = { + args: { + children: 'Feilmeldingstekst', + }, +}; diff --git a/packages/v2/gui/src/sak/systeminfo/BigError.tsx b/packages/v2/gui/src/sak/systeminfo/BigError.tsx new file mode 100644 index 0000000000..6e5958ecc4 --- /dev/null +++ b/packages/v2/gui/src/sak/systeminfo/BigError.tsx @@ -0,0 +1,17 @@ +import { Heading, HStack, VStack } from '@navikt/ds-react'; +import { XMarkOctagonIcon } from '@navikt/aksel-icons'; + +export interface BigErrorProps { + readonly title?: string; + readonly children: string | React.ReactNode; +} + +export const BigError = ({ title, children }: BigErrorProps) => ( + + + + {title && {title}} +
{children}
+ + +); From c953f890e1daf2f2166783b3585db3eb968b7ee5 Mon Sep 17 00:00:00 2001 From: Jostein Stuhaug Date: Wed, 14 Aug 2024 17:13:50 +0200 Subject: [PATCH 02/20] =?UTF-8?q?Skriver=20om=20ForbiddenPage=20komponent?= =?UTF-8?q?=20til=20=C3=A5=20bruke=20ny=20BigError=20komponent.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Lager også separat, moderne storybook fil for den, og flytter test inn i storybook. --- packages/sak-infosider/i18n/nb_NO.json | 2 -- .../sak-infosider/src/ForbiddenPage.spec.tsx | 21 ------------------- .../src/ForbiddenPage.stories.tsx | 21 +++++++++++++++++++ packages/sak-infosider/src/ForbiddenPage.tsx | 13 ++++-------- .../src/InfosiderSakIndex.stories.tsx | 3 --- 5 files changed, 25 insertions(+), 35 deletions(-) delete mode 100644 packages/sak-infosider/src/ForbiddenPage.spec.tsx create mode 100644 packages/sak-infosider/src/ForbiddenPage.stories.tsx diff --git a/packages/sak-infosider/i18n/nb_NO.json b/packages/sak-infosider/i18n/nb_NO.json index 6393202b04..9270915961 100644 --- a/packages/sak-infosider/i18n/nb_NO.json +++ b/packages/sak-infosider/i18n/nb_NO.json @@ -4,8 +4,6 @@ "NotFoundPage.LinkText": "Gå til forsiden", "UnauthorizedPage.Header": "Du må logge inn for å få tilgang til systemet", "UnauthorizedPage.LinkText": "Gå til innloggingssiden", - "ForbiddenPage.Header": "Du har ikke tilgang til å slå opp denne personen", - "ForbiddenPage.LinkText": "Gå til forsiden", "ErrorPage.Header": "Det har oppstått en teknisk feil i denne behandlingen. {br}Meld feilen i Porten. Ta med feilmeldingsteksten.", "IngenBehandlingValgtPanel.ZeroBehandlinger": "Ingen behandlinger er opprettet", diff --git a/packages/sak-infosider/src/ForbiddenPage.spec.tsx b/packages/sak-infosider/src/ForbiddenPage.spec.tsx deleted file mode 100644 index f38e1dd7d5..0000000000 --- a/packages/sak-infosider/src/ForbiddenPage.spec.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { renderWithIntl } from '@fpsak-frontend/utils-test/test-utils'; -import { screen } from '@testing-library/react'; -import React from 'react'; -import { MemoryRouter } from 'react-router'; -import messages from '../i18n/nb_NO.json'; -import ForbiddenPage from './ForbiddenPage'; - -describe('', () => { - it('skal rendre ForbiddenPage korrekt', () => { - renderWithIntl( - - - , - { messages }, - ); - expect( - screen.getByRole('heading', { name: 'Du har ikke tilgang til å slå opp denne personen' }), - ).toBeInTheDocument(); - expect(screen.getByRole('link', { name: 'Gå til forsiden' })).toBeInTheDocument(); - }); -}); diff --git a/packages/sak-infosider/src/ForbiddenPage.stories.tsx b/packages/sak-infosider/src/ForbiddenPage.stories.tsx new file mode 100644 index 0000000000..556199225a --- /dev/null +++ b/packages/sak-infosider/src/ForbiddenPage.stories.tsx @@ -0,0 +1,21 @@ +import ForbiddenPage from './ForbiddenPage.js'; +import { Meta, StoryObj } from '@storybook/react'; +import { expect } from '@storybook/test'; + +const meta = { + title: 'sak/sak-infosider', + component: ForbiddenPage, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const FeilmeldingIkkeTilgang: Story = { + play: async ({ canvas }) => { + await expect( + canvas.getByRole('heading', { name: 'Du har ikke tilgang til å slå opp denne personen' }), + ).toBeInTheDocument(); + await expect(canvas.getByRole('link', { name: 'Gå til forsiden' })).toBeInTheDocument(); + }, +}; diff --git a/packages/sak-infosider/src/ForbiddenPage.tsx b/packages/sak-infosider/src/ForbiddenPage.tsx index 0b1a50c541..58bfbf41ca 100644 --- a/packages/sak-infosider/src/ForbiddenPage.tsx +++ b/packages/sak-infosider/src/ForbiddenPage.tsx @@ -1,8 +1,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { FormattedMessage } from 'react-intl'; -import ErrorPageWrapper from './components/ErrorPageWrapper'; +import { BigError } from '@k9-sak-web/gui/sak/systeminfo/BigError.js'; /** * ForbiddenPage @@ -12,13 +11,9 @@ import ErrorPageWrapper from './components/ErrorPageWrapper'; */ // eslint-disable-next-line @typescript-eslint/no-unused-vars const ForbiddenPage = () => ( - -
- - - -
- + + Gå til forsiden + ); export default ForbiddenPage; diff --git a/packages/sak-infosider/src/InfosiderSakIndex.stories.tsx b/packages/sak-infosider/src/InfosiderSakIndex.stories.tsx index 5c026452f1..2e28aca3c2 100644 --- a/packages/sak-infosider/src/InfosiderSakIndex.stories.tsx +++ b/packages/sak-infosider/src/InfosiderSakIndex.stories.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import ForbiddenPage from './ForbiddenPage'; import IngenBehandlingValgtPanel from './IngenBehandlingValgtPanel'; import NotFoundPage from './NotFoundPage'; import UnauthorizedPage from './UnauthorizedPage'; @@ -8,8 +7,6 @@ export default { title: 'sak/sak-infosider', }; -export const visPanelForHarIkkeTilgang = () => ; - export const visPanelForSideIkkeFunnet = () => ; export const visPanelForIkkeInnloggetBruker = () => ; From 1391eeac6195c66e908e2df452add1772e774a44 Mon Sep 17 00:00:00 2001 From: Jostein Stuhaug Date: Wed, 14 Aug 2024 17:23:22 +0200 Subject: [PATCH 03/20] =?UTF-8?q?Skriver=20om=20NotFoundPage=20komponent?= =?UTF-8?q?=20til=20=C3=A5=20bruke=20ny=20BigError=20komponent.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Lager også separat, moderne storybook fil for den, og flytter test inn i storybook. --- packages/sak-infosider/i18n/nb_NO.json | 2 -- .../src/InfosiderSakIndex.stories.tsx | 3 --- .../sak-infosider/src/NotFoundPage.spec.tsx | 20 ------------------ .../src/NotFoundPage.stories.tsx | 21 +++++++++++++++++++ packages/sak-infosider/src/NotFoundPage.tsx | 12 ++++------- 5 files changed, 25 insertions(+), 33 deletions(-) delete mode 100644 packages/sak-infosider/src/NotFoundPage.spec.tsx create mode 100644 packages/sak-infosider/src/NotFoundPage.stories.tsx diff --git a/packages/sak-infosider/i18n/nb_NO.json b/packages/sak-infosider/i18n/nb_NO.json index 9270915961..64c04af13e 100644 --- a/packages/sak-infosider/i18n/nb_NO.json +++ b/packages/sak-infosider/i18n/nb_NO.json @@ -1,7 +1,5 @@ { "GenericErrorPage.Header": "Noe gikk galt", - "NotFoundPage.Header": "Beklager, vi finner ikke siden du leter etter.", - "NotFoundPage.LinkText": "Gå til forsiden", "UnauthorizedPage.Header": "Du må logge inn for å få tilgang til systemet", "UnauthorizedPage.LinkText": "Gå til innloggingssiden", "ErrorPage.Header": "Det har oppstått en teknisk feil i denne behandlingen. {br}Meld feilen i Porten. Ta med feilmeldingsteksten.", diff --git a/packages/sak-infosider/src/InfosiderSakIndex.stories.tsx b/packages/sak-infosider/src/InfosiderSakIndex.stories.tsx index 2e28aca3c2..f916f272bd 100644 --- a/packages/sak-infosider/src/InfosiderSakIndex.stories.tsx +++ b/packages/sak-infosider/src/InfosiderSakIndex.stories.tsx @@ -1,14 +1,11 @@ import React from 'react'; import IngenBehandlingValgtPanel from './IngenBehandlingValgtPanel'; -import NotFoundPage from './NotFoundPage'; import UnauthorizedPage from './UnauthorizedPage'; export default { title: 'sak/sak-infosider', }; -export const visPanelForSideIkkeFunnet = () => ; - export const visPanelForIkkeInnloggetBruker = () => ; export const visPanelForBehandlingErIkkeValgt = () => ; diff --git a/packages/sak-infosider/src/NotFoundPage.spec.tsx b/packages/sak-infosider/src/NotFoundPage.spec.tsx deleted file mode 100644 index e184d736a3..0000000000 --- a/packages/sak-infosider/src/NotFoundPage.spec.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { renderWithIntl } from '@fpsak-frontend/utils-test/test-utils'; -import { screen } from '@testing-library/react'; -import React from 'react'; -import { MemoryRouter } from 'react-router-dom'; -import messages from '../i18n/nb_NO.json'; -import NotFoundPage from './NotFoundPage'; - -describe('', () => { - it('skal rendre NotFoundPage korrekt', () => { - renderWithIntl( - - - , - { messages }, - ); - - expect(screen.getByRole('heading', { name: 'Beklager, vi finner ikke siden du leter etter.' })).toBeInTheDocument(); - expect(screen.getByRole('link', { name: 'Gå til forsiden' })).toBeInTheDocument(); - }); -}); diff --git a/packages/sak-infosider/src/NotFoundPage.stories.tsx b/packages/sak-infosider/src/NotFoundPage.stories.tsx new file mode 100644 index 0000000000..4a2e3c950e --- /dev/null +++ b/packages/sak-infosider/src/NotFoundPage.stories.tsx @@ -0,0 +1,21 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { expect } from '@storybook/test'; +import NotFoundPage from './NotFoundPage.js'; + +const meta = { + title: 'sak/sak-infosider', + component: NotFoundPage, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const FeilmeldingIkkeFunnet: Story = { + play: async ({ canvas }) => { + await expect( + canvas.getByRole('heading', { name: 'Beklager, vi finner ikke siden du leter etter.' }), + ).toBeInTheDocument(); + await expect(canvas.getByRole('link', { name: 'Gå til forsiden' })).toBeInTheDocument(); + }, +}; diff --git a/packages/sak-infosider/src/NotFoundPage.tsx b/packages/sak-infosider/src/NotFoundPage.tsx index 877c988280..ca090b5a1c 100644 --- a/packages/sak-infosider/src/NotFoundPage.tsx +++ b/packages/sak-infosider/src/NotFoundPage.tsx @@ -1,8 +1,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { FormattedMessage } from 'react-intl'; - -import ErrorPageWrapper from './components/ErrorPageWrapper'; +import { BigError } from '@k9-sak-web/gui/sak/systeminfo/BigError.js'; /** * NotFoundPage @@ -11,11 +9,9 @@ import ErrorPageWrapper from './components/ErrorPageWrapper'; * Det blir presentert en generell feilmelding og en lenke som tar NAV-ansatt tilbake til hovedsiden. */ const NotFoundPage = () => ( - - - - - + + Gå til forsiden + ); export default NotFoundPage; From 88373b632f10c68fa5a9bc217537c7a57ae297a9 Mon Sep 17 00:00:00 2001 From: Jostein Stuhaug Date: Thu, 15 Aug 2024 09:52:01 +0200 Subject: [PATCH 04/20] =?UTF-8?q?Skriver=20om=20UnauthorizedPage=20kompone?= =?UTF-8?q?nt=20til=20=C3=A5=20bruke=20ny=20BigError=20komponent.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Lager også separat, moderne storybook fil for den, og flytter test inn i storybook. --- packages/sak-infosider/i18n/nb_NO.json | 2 -- packages/sak-infosider/src/ForbiddenPage.tsx | 1 - .../src/InfosiderSakIndex.stories.tsx | 3 --- .../src/UnauthorizedPage.spec.tsx | 20 ------------------ .../src/UnauthorizedPage.stories.tsx | 21 +++++++++++++++++++ .../sak-infosider/src/UnauthorizedPage.tsx | 12 ++++------- 6 files changed, 25 insertions(+), 34 deletions(-) delete mode 100644 packages/sak-infosider/src/UnauthorizedPage.spec.tsx create mode 100644 packages/sak-infosider/src/UnauthorizedPage.stories.tsx diff --git a/packages/sak-infosider/i18n/nb_NO.json b/packages/sak-infosider/i18n/nb_NO.json index 64c04af13e..f1af0f5150 100644 --- a/packages/sak-infosider/i18n/nb_NO.json +++ b/packages/sak-infosider/i18n/nb_NO.json @@ -1,7 +1,5 @@ { "GenericErrorPage.Header": "Noe gikk galt", - "UnauthorizedPage.Header": "Du må logge inn for å få tilgang til systemet", - "UnauthorizedPage.LinkText": "Gå til innloggingssiden", "ErrorPage.Header": "Det har oppstått en teknisk feil i denne behandlingen. {br}Meld feilen i Porten. Ta med feilmeldingsteksten.", "IngenBehandlingValgtPanel.ZeroBehandlinger": "Ingen behandlinger er opprettet", diff --git a/packages/sak-infosider/src/ForbiddenPage.tsx b/packages/sak-infosider/src/ForbiddenPage.tsx index 58bfbf41ca..cf3d60e878 100644 --- a/packages/sak-infosider/src/ForbiddenPage.tsx +++ b/packages/sak-infosider/src/ForbiddenPage.tsx @@ -9,7 +9,6 @@ import { BigError } from '@k9-sak-web/gui/sak/systeminfo/BigError.js'; * Presentasjonskomponent. Denne komponenten vises når den NAV-ansatte prøver å aksessere en url som ikke finnes. * Det blir presentert en generell feilmelding og en lenke som tar NAV-ansatt tilbake til hovedsiden. */ -// eslint-disable-next-line @typescript-eslint/no-unused-vars const ForbiddenPage = () => ( Gå til forsiden diff --git a/packages/sak-infosider/src/InfosiderSakIndex.stories.tsx b/packages/sak-infosider/src/InfosiderSakIndex.stories.tsx index f916f272bd..a4ad0295f9 100644 --- a/packages/sak-infosider/src/InfosiderSakIndex.stories.tsx +++ b/packages/sak-infosider/src/InfosiderSakIndex.stories.tsx @@ -1,13 +1,10 @@ import React from 'react'; import IngenBehandlingValgtPanel from './IngenBehandlingValgtPanel'; -import UnauthorizedPage from './UnauthorizedPage'; export default { title: 'sak/sak-infosider', }; -export const visPanelForIkkeInnloggetBruker = () => ; - export const visPanelForBehandlingErIkkeValgt = () => ; export const visPanelForBehandlingerFinnesIkke = () => ; diff --git a/packages/sak-infosider/src/UnauthorizedPage.spec.tsx b/packages/sak-infosider/src/UnauthorizedPage.spec.tsx deleted file mode 100644 index 4a733283f4..0000000000 --- a/packages/sak-infosider/src/UnauthorizedPage.spec.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { renderWithIntl } from '@fpsak-frontend/utils-test/test-utils'; -import { screen } from '@testing-library/react'; -import React from 'react'; -import { MemoryRouter } from 'react-router-dom'; -import messages from '../i18n/nb_NO.json'; -import UnauthorizedPage from './UnauthorizedPage'; - -describe('', () => { - it('skal rendre UnauthorizedPage korrekt', () => { - renderWithIntl( - - - , - { messages }, - ); - - expect(screen.getByRole('heading', { name: 'Du må logge inn for å få tilgang til systemet' })).toBeInTheDocument(); - expect(screen.getByRole('link', { name: 'Gå til innloggingssiden' })).toBeInTheDocument(); - }); -}); diff --git a/packages/sak-infosider/src/UnauthorizedPage.stories.tsx b/packages/sak-infosider/src/UnauthorizedPage.stories.tsx new file mode 100644 index 0000000000..b9ff126400 --- /dev/null +++ b/packages/sak-infosider/src/UnauthorizedPage.stories.tsx @@ -0,0 +1,21 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { expect } from '@storybook/test'; +import UnauthorizedPage from './UnauthorizedPage.js'; + +const meta = { + title: 'sak/sak-infosider', + component: UnauthorizedPage, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const FeilmeldingIkkeInnlogget: Story = { + play: async ({ canvas }) => { + await expect( + canvas.getByRole('heading', { name: 'Du må logge inn for å få tilgang til systemet' }), + ).toBeInTheDocument(); + await expect(canvas.getByRole('link', { name: 'Gå til innloggingssiden' })).toBeInTheDocument(); + }, +}; diff --git a/packages/sak-infosider/src/UnauthorizedPage.tsx b/packages/sak-infosider/src/UnauthorizedPage.tsx index 577aa72a13..a4f90ee39e 100644 --- a/packages/sak-infosider/src/UnauthorizedPage.tsx +++ b/packages/sak-infosider/src/UnauthorizedPage.tsx @@ -1,8 +1,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { FormattedMessage } from 'react-intl'; - -import ErrorPageWrapper from './components/ErrorPageWrapper'; +import { BigError } from '@k9-sak-web/gui/sak/systeminfo/BigError.js'; /** * UnauthorizedPage @@ -10,14 +8,12 @@ import ErrorPageWrapper from './components/ErrorPageWrapper'; * Presentasjonskomponent. Denne komponenten vises når den NAV-ansatte prøver å aksessere en url som ikke finnes. * Det blir presentert en generell feilmelding og en lenke som tar NAV-ansatt tilbake til hovedsiden. */ -// eslint-disable-next-line @typescript-eslint/no-unused-vars const UnauthorizedPage = () => ( - + - + Gå til innloggingssiden -
- + ); export default UnauthorizedPage; From f1b25f041d57f88e9a88ca12b460cca4b5f6ba16 Mon Sep 17 00:00:00 2001 From: Jostein Stuhaug Date: Thu, 15 Aug 2024 10:12:31 +0200 Subject: [PATCH 05/20] =?UTF-8?q?Skriver=20om=20IngenBehandlingValgtPanel?= =?UTF-8?q?=20komponent=20til=20=C3=A5=20ikkje=20bruke=20intl=20lenger?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Lager også separat, moderne storybook fil for den, og flytter test inn i storybook. --- packages/sak-infosider/i18n/nb_NO.json | 3 -- .../src/InfosiderSakIndex.stories.tsx | 10 ------ .../src/IngenBehandlingValgtPanel.spec.tsx | 29 ---------------- .../src/IngenBehandlingValgtPanel.stories.tsx | 34 +++++++++++++++++++ .../src/IngenBehandlingValgtPanel.tsx | 30 ++++------------ 5 files changed, 40 insertions(+), 66 deletions(-) delete mode 100644 packages/sak-infosider/src/InfosiderSakIndex.stories.tsx delete mode 100644 packages/sak-infosider/src/IngenBehandlingValgtPanel.spec.tsx create mode 100644 packages/sak-infosider/src/IngenBehandlingValgtPanel.stories.tsx diff --git a/packages/sak-infosider/i18n/nb_NO.json b/packages/sak-infosider/i18n/nb_NO.json index f1af0f5150..a1ca2f1193 100644 --- a/packages/sak-infosider/i18n/nb_NO.json +++ b/packages/sak-infosider/i18n/nb_NO.json @@ -1,7 +1,4 @@ { "GenericErrorPage.Header": "Noe gikk galt", "ErrorPage.Header": "Det har oppstått en teknisk feil i denne behandlingen. {br}Meld feilen i Porten. Ta med feilmeldingsteksten.", - - "IngenBehandlingValgtPanel.ZeroBehandlinger": "Ingen behandlinger er opprettet", - "IngenBehandlingValgtPanel.PleaseSelectBehandling": "Velg behandling" } diff --git a/packages/sak-infosider/src/InfosiderSakIndex.stories.tsx b/packages/sak-infosider/src/InfosiderSakIndex.stories.tsx deleted file mode 100644 index a4ad0295f9..0000000000 --- a/packages/sak-infosider/src/InfosiderSakIndex.stories.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import IngenBehandlingValgtPanel from './IngenBehandlingValgtPanel'; - -export default { - title: 'sak/sak-infosider', -}; - -export const visPanelForBehandlingErIkkeValgt = () => ; - -export const visPanelForBehandlingerFinnesIkke = () => ; diff --git a/packages/sak-infosider/src/IngenBehandlingValgtPanel.spec.tsx b/packages/sak-infosider/src/IngenBehandlingValgtPanel.spec.tsx deleted file mode 100644 index 7fc8eefa91..0000000000 --- a/packages/sak-infosider/src/IngenBehandlingValgtPanel.spec.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { renderWithIntl } from '@fpsak-frontend/utils-test/test-utils'; -import { screen } from '@testing-library/react'; -import React from 'react'; -import { MemoryRouter } from 'react-router'; -import messages from '../i18n/nb_NO.json'; -import IngenBehandlingValgtPanel from './IngenBehandlingValgtPanel'; - -describe('', () => { - it('skal rendre korrekt melding ved 0 behandlinger', () => { - renderWithIntl( - - - , - { messages }, - ); - expect(screen.getByText('Ingen behandlinger er opprettet')).toBeInTheDocument(); - }); - - it('skal rendre korrekt melding ved to behandlinger', () => { - renderWithIntl( - - - , - { messages }, - ); - - expect(screen.getByText('Velg behandling')).toBeInTheDocument(); - }); -}); diff --git a/packages/sak-infosider/src/IngenBehandlingValgtPanel.stories.tsx b/packages/sak-infosider/src/IngenBehandlingValgtPanel.stories.tsx new file mode 100644 index 0000000000..bf4a250867 --- /dev/null +++ b/packages/sak-infosider/src/IngenBehandlingValgtPanel.stories.tsx @@ -0,0 +1,34 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { expect } from '@storybook/test'; +import IngenBehandlingValgtPanel from './IngenBehandlingValgtPanel.js'; + +const meta = { + title: 'sak/sak-infosider', + component: IngenBehandlingValgtPanel, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const IngenBehandlingTilgjengelig: Story = { + args: { + numBehandlinger: 0, + }, + play: async ({ canvas, step }) => { + await step('skal rendre korrekt melding ved 0 behandlinger', async () => { + await expect(canvas.getByText('Ingen behandlinger er opprettet')).toBeInTheDocument(); + }); + }, +}; + +export const IngenBehandlingValgt: Story = { + args: { + numBehandlinger: 2, + }, + play: async ({ canvas, step }) => { + await step('skal rendre korrekt melding ved to behandlinger', async () => { + await expect(canvas.getByText('Velg behandling')).toBeInTheDocument(); + }); + }, +}; diff --git a/packages/sak-infosider/src/IngenBehandlingValgtPanel.tsx b/packages/sak-infosider/src/IngenBehandlingValgtPanel.tsx index 92a82867f2..641066c977 100644 --- a/packages/sak-infosider/src/IngenBehandlingValgtPanel.tsx +++ b/packages/sak-infosider/src/IngenBehandlingValgtPanel.tsx @@ -1,24 +1,10 @@ import { Alert, BodyShort } from '@navikt/ds-react'; import React from 'react'; -import { FormattedMessage, RawIntlProvider, createIntl, createIntlCache } from 'react-intl'; -import messages from '../i18n/nb_NO.json'; import styles from './ingenBehandlingValgtPanel.module.css'; -const cache = createIntlCache(); - -const intl = createIntl( - { - locale: 'nb-NO', - messages, - }, - cache, -); - const getMessage = (numBehandlinger: number): string => - numBehandlinger === 0 - ? 'IngenBehandlingValgtPanel.ZeroBehandlinger' - : 'IngenBehandlingValgtPanel.PleaseSelectBehandling'; + numBehandlinger === 0 ? 'Ingen behandlinger er opprettet' : 'Velg behandling'; interface OwnProps { numBehandlinger: number; @@ -30,15 +16,11 @@ interface OwnProps { * Presentasjonskomponent. Vises når ingen behandling er valgt på en fagsak */ const IngenBehandlingValgtPanel = ({ numBehandlinger }: OwnProps) => ( - -
- - - - - -
- +
+ + {getMessage(numBehandlinger)} + +
); export default IngenBehandlingValgtPanel; From e2f527c09c04e3b3cc0453a7b41b13a93b918bf1 Mon Sep 17 00:00:00 2001 From: Jostein Stuhaug Date: Thu, 15 Aug 2024 11:29:54 +0200 Subject: [PATCH 06/20] =?UTF-8?q?Fjerna=20ubrukt=20textCode=20prop=20p?= =?UTF-8?q?=C3=A5=20ErrorBoundary,=20lagt=20til=20storybook=20test?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sak-app/src/app/ErrorBoundary.stories.tsx | 45 +++++++++++++++++++ packages/sak-app/src/app/ErrorBoundary.tsx | 5 +-- 2 files changed, 47 insertions(+), 3 deletions(-) create mode 100644 packages/sak-app/src/app/ErrorBoundary.stories.tsx diff --git a/packages/sak-app/src/app/ErrorBoundary.stories.tsx b/packages/sak-app/src/app/ErrorBoundary.stories.tsx new file mode 100644 index 0000000000..98bf1efad7 --- /dev/null +++ b/packages/sak-app/src/app/ErrorBoundary.stories.tsx @@ -0,0 +1,45 @@ +import ErrorBoundary from './ErrorBoundary.js'; +import { Meta, StoryObj } from '@storybook/react'; +import { fn, expect } from '@storybook/test'; +import { useEffect } from 'react'; + +const meta = { + title: 'sak/sak-app', + component: ErrorBoundary, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +const NonFailingChild = () =>

Nothing to see here, move along.

; + +const FailingChild = () => { + useEffect(() => { + throw new Error('TEST FAIL'); + }, []); + return

Error boundary should be displayed instead of this

; +}; + +export const ErrorBoundaryNotTriggered: Story = { + args: { + errorMessageCallback: fn(), + children: , + }, + play: async ({ args }) => { + await expect(args.errorMessageCallback).toHaveBeenCalledTimes(0); + }, +}; + +export const ErrorBoundaryTriggered: Story = { + args: { + errorMessageCallback: fn(), + children: , + }, + play: async ({ canvas, args }) => { + await expect(args.errorMessageCallback).toHaveBeenCalledOnce(); + await expect(canvas.getByRole('heading')).toHaveTextContent( + 'Det har oppstått en teknisk feil i denne behandlingen. Meld feilen i Porten. Ta med feilmeldingsteksten.', + ); + }, +}; diff --git a/packages/sak-app/src/app/ErrorBoundary.tsx b/packages/sak-app/src/app/ErrorBoundary.tsx index 765b6fb511..70511ca3c5 100644 --- a/packages/sak-app/src/app/ErrorBoundary.tsx +++ b/packages/sak-app/src/app/ErrorBoundary.tsx @@ -5,7 +5,6 @@ import { ErrorPage } from '@k9-sak-web/sak-infosider'; interface OwnProps { errorMessageCallback: (error: any) => void; - textCode?: string; children: ReactNode; doNotShowErrorPage?: boolean; } @@ -54,10 +53,10 @@ export class ErrorBoundary extends Component { } render(): ReactNode { - const { children, doNotShowErrorPage, textCode } = this.props; + const { children, doNotShowErrorPage } = this.props; const { hasError } = this.state; - return hasError && !doNotShowErrorPage ? : children; + return hasError && !doNotShowErrorPage ? : children; } } From 0e5f72778ca02174bcce0b9cd694cec5ad4de0ec Mon Sep 17 00:00:00 2001 From: Jostein Stuhaug Date: Thu, 15 Aug 2024 11:32:17 +0200 Subject: [PATCH 07/20] =?UTF-8?q?Endra=20ErrorPage=20til=20=C3=A5=20bruke?= =?UTF-8?q?=20BigError,=20fjerna=20ErrorPageWrapper.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Lage samtidig story for ErrorPage og flytte test inn der. --- packages/sak-infosider/i18n/nb_NO.json | 4 -- packages/sak-infosider/src/ErrorPage.spec.tsx | 24 ----------- .../sak-infosider/src/ErrorPage.stories.tsx | 20 +++++++++ packages/sak-infosider/src/ErrorPage.tsx | 9 ++-- .../src/components/ErrorPageWrapper.spec.tsx | 18 -------- .../src/components/ErrorPageWrapper.tsx | 41 ------------------- .../components/errorPageWrapper.module.css | 6 --- .../v2/gui/src/sak/systeminfo/BigError.tsx | 2 +- 8 files changed, 24 insertions(+), 100 deletions(-) delete mode 100644 packages/sak-infosider/i18n/nb_NO.json delete mode 100644 packages/sak-infosider/src/ErrorPage.spec.tsx create mode 100644 packages/sak-infosider/src/ErrorPage.stories.tsx delete mode 100644 packages/sak-infosider/src/components/ErrorPageWrapper.spec.tsx delete mode 100644 packages/sak-infosider/src/components/ErrorPageWrapper.tsx delete mode 100644 packages/sak-infosider/src/components/errorPageWrapper.module.css diff --git a/packages/sak-infosider/i18n/nb_NO.json b/packages/sak-infosider/i18n/nb_NO.json deleted file mode 100644 index a1ca2f1193..0000000000 --- a/packages/sak-infosider/i18n/nb_NO.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "GenericErrorPage.Header": "Noe gikk galt", - "ErrorPage.Header": "Det har oppstått en teknisk feil i denne behandlingen. {br}Meld feilen i Porten. Ta med feilmeldingsteksten.", -} diff --git a/packages/sak-infosider/src/ErrorPage.spec.tsx b/packages/sak-infosider/src/ErrorPage.spec.tsx deleted file mode 100644 index d2e535eb6f..0000000000 --- a/packages/sak-infosider/src/ErrorPage.spec.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { renderWithIntl } from '@fpsak-frontend/utils-test/test-utils'; -import { screen } from '@testing-library/react'; -import React from 'react'; -import { MemoryRouter } from 'react-router'; -import messages from '../i18n/nb_NO.json'; -import ErrorPage from './ErrorPage'; - -describe('', () => { - it('skal rendre ErrorPage korrekt', () => { - renderWithIntl( - - - , - { messages }, - ); - expect( - screen.getAllByText( - (_, element) => - element.textContent === - 'Det har oppstått en teknisk feil i denne behandlingen. Meld feilen i Porten. Ta med feilmeldingsteksten.', - )[0], - ).toBeInTheDocument(); - }); -}); diff --git a/packages/sak-infosider/src/ErrorPage.stories.tsx b/packages/sak-infosider/src/ErrorPage.stories.tsx new file mode 100644 index 0000000000..b90a4c0bb4 --- /dev/null +++ b/packages/sak-infosider/src/ErrorPage.stories.tsx @@ -0,0 +1,20 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { expect } from '@storybook/test'; +import ErrorPage from './ErrorPage.js'; + +const meta = { + title: 'sak/sak-infosider', + component: ErrorPage, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const GenerellFeilmelding: Story = { + play: async ({ canvas }) => { + await expect(canvas.getByRole('heading')).toHaveTextContent( + 'Det har oppstått en teknisk feil i denne behandlingen. Meld feilen i Porten. Ta med feilmeldingsteksten.', + ); + }, +}; diff --git a/packages/sak-infosider/src/ErrorPage.tsx b/packages/sak-infosider/src/ErrorPage.tsx index ee70289b6f..f7055f9a32 100644 --- a/packages/sak-infosider/src/ErrorPage.tsx +++ b/packages/sak-infosider/src/ErrorPage.tsx @@ -1,11 +1,8 @@ import React from 'react'; +import { BigError } from '@k9-sak-web/gui/sak/systeminfo/BigError.js'; -import ErrorPageWrapper from './components/ErrorPageWrapper'; - -const ErrorPage = ({ textCode }: { textCode?: string }) => ( - -
- +const ErrorPage = () => ( + ); export default ErrorPage; diff --git a/packages/sak-infosider/src/components/ErrorPageWrapper.spec.tsx b/packages/sak-infosider/src/components/ErrorPageWrapper.spec.tsx deleted file mode 100644 index 4643a79a10..0000000000 --- a/packages/sak-infosider/src/components/ErrorPageWrapper.spec.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { renderWithIntl } from '@fpsak-frontend/utils-test/test-utils'; -import { screen } from '@testing-library/react'; -import React from 'react'; -import messages from '../../i18n/nb_NO.json'; -import ErrorPageWrapper from './ErrorPageWrapper'; - -describe('', () => { - it('skal rendre ErrorPageWrapper korrekt', () => { - renderWithIntl( - -
pageContent
- , - { messages }, - ); - expect(screen.getByRole('heading', { name: 'Noe gikk galt' })).toBeInTheDocument(); - expect(screen.getByText('pageContent')).toBeInTheDocument(); - }); -}); diff --git a/packages/sak-infosider/src/components/ErrorPageWrapper.tsx b/packages/sak-infosider/src/components/ErrorPageWrapper.tsx deleted file mode 100644 index 88b6aebbea..0000000000 --- a/packages/sak-infosider/src/components/ErrorPageWrapper.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React, { ReactNode } from 'react'; -import { createIntl, createIntlCache, FormattedMessage, RawIntlProvider } from 'react-intl'; - -import { Heading } from '@navikt/ds-react'; -import messages from '../../i18n/nb_NO.json'; -import styles from './errorPageWrapper.module.css'; - -const cache = createIntlCache(); - -const intl = createIntl( - { - locale: 'nb-NO', - messages, - }, - cache, -); - -interface OwnProps { - children: ReactNode | ReactNode[]; - titleCode?: string; -} - -/** - * FeilsideContainer - * - * Presentasjonskomponent. Denne komponenten vises når den NAV-ansatte prøver å aksessere en url som ikke finnes. - * Det blir presentert en generell feilmelding og en lenke som tar NAV-ansatt tilbake til hovedsiden. - */ -const ErrorPageWrapper = ({ children, titleCode = 'GenericErrorPage.Header' }: OwnProps) => ( - -
- - }} /> - -
- {children} -
- -); - -export default ErrorPageWrapper; diff --git a/packages/sak-infosider/src/components/errorPageWrapper.module.css b/packages/sak-infosider/src/components/errorPageWrapper.module.css deleted file mode 100644 index c2ff35d33c..0000000000 --- a/packages/sak-infosider/src/components/errorPageWrapper.module.css +++ /dev/null @@ -1,6 +0,0 @@ -.pageContainer { - font-size: 20px; - font-weight: bold; - margin-top: 100px; - text-align: center; -} diff --git a/packages/v2/gui/src/sak/systeminfo/BigError.tsx b/packages/v2/gui/src/sak/systeminfo/BigError.tsx index 6e5958ecc4..f144de9afc 100644 --- a/packages/v2/gui/src/sak/systeminfo/BigError.tsx +++ b/packages/v2/gui/src/sak/systeminfo/BigError.tsx @@ -3,7 +3,7 @@ import { XMarkOctagonIcon } from '@navikt/aksel-icons'; export interface BigErrorProps { readonly title?: string; - readonly children: string | React.ReactNode; + readonly children?: string | React.ReactNode; } export const BigError = ({ title, children }: BigErrorProps) => ( From 742eb710c60a8db4afd522cb144cd4f70eb251f2 Mon Sep 17 00:00:00 2001 From: Jostein Stuhaug Date: Thu, 15 Aug 2024 11:52:07 +0200 Subject: [PATCH 08/20] =?UTF-8?q?Legg=20til=20standardfeilmelding=20og=20s?= =?UTF-8?q?t=C3=B8rre=20margin=20p=C3=A5=20BigError.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/sak/systeminfo/BigError.stories.tsx | 8 ++++++ .../v2/gui/src/sak/systeminfo/BigError.tsx | 25 +++++++++++++------ 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/packages/v2/gui/src/sak/systeminfo/BigError.stories.tsx b/packages/v2/gui/src/sak/systeminfo/BigError.stories.tsx index cf9832fda3..91d24ebbaa 100644 --- a/packages/v2/gui/src/sak/systeminfo/BigError.stories.tsx +++ b/packages/v2/gui/src/sak/systeminfo/BigError.stories.tsx @@ -57,3 +57,11 @@ export const UtenTittel: Story = { children: 'Feilmeldingstekst', }, }; + +export const UtenTekst: Story = { + args: { + title: 'Bare overskrift', + }, +}; + +export const IngenInfoSpesifisert: Story = {}; diff --git a/packages/v2/gui/src/sak/systeminfo/BigError.tsx b/packages/v2/gui/src/sak/systeminfo/BigError.tsx index f144de9afc..34308aecce 100644 --- a/packages/v2/gui/src/sak/systeminfo/BigError.tsx +++ b/packages/v2/gui/src/sak/systeminfo/BigError.tsx @@ -6,12 +6,21 @@ export interface BigErrorProps { readonly children?: string | React.ReactNode; } -export const BigError = ({ title, children }: BigErrorProps) => ( - - - - {title && {title}} -
{children}
- - +const DefaultChildren = () => ( + <> + Forøk gjerne å laste siden på nytt, eller meld fra i porten hvis + problemet vedvarer. + ); + +export const BigError = ({ title = 'Uventet feil', children = }: BigErrorProps) => { + return ( + + + + {title && {title}} + {children &&
{children}
} + + + ); +}; From 7b8cf8cee4f09afcbc465e309dc417cb7e972489 Mon Sep 17 00:00:00 2001 From: Jostein Stuhaug Date: Thu, 15 Aug 2024 12:25:58 +0200 Subject: [PATCH 09/20] =?UTF-8?q?Justert=20feilmelding=20som=20viser=20n?= =?UTF-8?q?=C3=A5r=20ErrorBoundary=20blir=20utl=C3=B8st.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Oppfordrer brukeren til å laste sida på nytt for å prøve igjen, og så melde frå viss det ikkje hjalp. --- packages/sak-app/src/app/ErrorBoundary.stories.tsx | 2 +- packages/sak-infosider/src/ErrorPage.stories.tsx | 3 ++- packages/sak-infosider/src/ErrorPage.tsx | 4 +--- .../v2/gui/src/sak/systeminfo/BigError.stories.tsx | 8 +++++++- packages/v2/gui/src/sak/systeminfo/BigError.tsx | 11 +++++++---- 5 files changed, 18 insertions(+), 10 deletions(-) diff --git a/packages/sak-app/src/app/ErrorBoundary.stories.tsx b/packages/sak-app/src/app/ErrorBoundary.stories.tsx index 98bf1efad7..8dbee99298 100644 --- a/packages/sak-app/src/app/ErrorBoundary.stories.tsx +++ b/packages/sak-app/src/app/ErrorBoundary.stories.tsx @@ -39,7 +39,7 @@ export const ErrorBoundaryTriggered: Story = { play: async ({ canvas, args }) => { await expect(args.errorMessageCallback).toHaveBeenCalledOnce(); await expect(canvas.getByRole('heading')).toHaveTextContent( - 'Det har oppstått en teknisk feil i denne behandlingen. Meld feilen i Porten. Ta med feilmeldingsteksten.', + 'Det har oppstått en teknisk feil i denne behandlingen.', ); }, }; diff --git a/packages/sak-infosider/src/ErrorPage.stories.tsx b/packages/sak-infosider/src/ErrorPage.stories.tsx index b90a4c0bb4..fb02a45013 100644 --- a/packages/sak-infosider/src/ErrorPage.stories.tsx +++ b/packages/sak-infosider/src/ErrorPage.stories.tsx @@ -14,7 +14,8 @@ type Story = StoryObj; export const GenerellFeilmelding: Story = { play: async ({ canvas }) => { await expect(canvas.getByRole('heading')).toHaveTextContent( - 'Det har oppstått en teknisk feil i denne behandlingen. Meld feilen i Porten. Ta med feilmeldingsteksten.', + 'Det har oppstått en teknisk feil i denne behandlingen.', ); + await expect(canvas.getByText('Meld fra i porten hvis problemet vedvarer.', { exact: false })).toBeInTheDocument(); }, }; diff --git a/packages/sak-infosider/src/ErrorPage.tsx b/packages/sak-infosider/src/ErrorPage.tsx index f7055f9a32..dd6a868a74 100644 --- a/packages/sak-infosider/src/ErrorPage.tsx +++ b/packages/sak-infosider/src/ErrorPage.tsx @@ -1,8 +1,6 @@ import React from 'react'; import { BigError } from '@k9-sak-web/gui/sak/systeminfo/BigError.js'; -const ErrorPage = () => ( - -); +const ErrorPage = () => ; export default ErrorPage; diff --git a/packages/v2/gui/src/sak/systeminfo/BigError.stories.tsx b/packages/v2/gui/src/sak/systeminfo/BigError.stories.tsx index 91d24ebbaa..23684887eb 100644 --- a/packages/v2/gui/src/sak/systeminfo/BigError.stories.tsx +++ b/packages/v2/gui/src/sak/systeminfo/BigError.stories.tsx @@ -64,4 +64,10 @@ export const UtenTekst: Story = { }, }; -export const IngenInfoSpesifisert: Story = {}; +export const IngenInfoSpesifisert: Story = { + play: async ({ canvas }) => { + await expect(canvas.getByRole('heading')).toHaveTextContent('Uventet feil'); + await expect(canvas.getByText('Meld fra i porten hvis problemet vedvarer', { exact: false })).toBeInTheDocument(); + await expect(canvas.getByRole('link', { name: 'laste siden på nytt' })).toBeInTheDocument(); + }, +}; diff --git a/packages/v2/gui/src/sak/systeminfo/BigError.tsx b/packages/v2/gui/src/sak/systeminfo/BigError.tsx index 34308aecce..1a4564bcea 100644 --- a/packages/v2/gui/src/sak/systeminfo/BigError.tsx +++ b/packages/v2/gui/src/sak/systeminfo/BigError.tsx @@ -6,14 +6,17 @@ export interface BigErrorProps { readonly children?: string | React.ReactNode; } -const DefaultChildren = () => ( +const DefaultErrorMsg = () => ( <> - Forøk gjerne å laste siden på nytt, eller meld fra i porten hvis - problemet vedvarer. + Forøk gjerne å{' '} + window.location.reload()}> + laste siden på nytt + + . Meld fra i porten hvis problemet vedvarer. ); -export const BigError = ({ title = 'Uventet feil', children = }: BigErrorProps) => { +export const BigError = ({ title = 'Uventet feil', children = }: BigErrorProps) => { return ( From d634a9b1a4ba8e0a414fc6fe19692da9f9d8e1e0 Mon Sep 17 00:00:00 2001 From: Jostein Stuhaug Date: Thu, 15 Aug 2024 14:30:52 +0200 Subject: [PATCH 10/20] ErrorBoundary viser no referanse til sentry rapport. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Slik at saksbehandler kan inkludere denne viss feil blir rapportert inn, og forenkle vår feilsøking. --- packages/sak-app/src/app/ErrorBoundary.tsx | 13 +++++++---- packages/sak-infosider/src/ErrorPage.tsx | 23 +++++++++++++++++-- .../v2/gui/src/sak/systeminfo/BigError.tsx | 10 ++++---- 3 files changed, 35 insertions(+), 11 deletions(-) diff --git a/packages/sak-app/src/app/ErrorBoundary.tsx b/packages/sak-app/src/app/ErrorBoundary.tsx index 70511ca3c5..82ca5632c5 100644 --- a/packages/sak-app/src/app/ErrorBoundary.tsx +++ b/packages/sak-app/src/app/ErrorBoundary.tsx @@ -11,6 +11,7 @@ interface OwnProps { interface State { hasError: boolean; + sentryId: string | undefined; } export class ErrorBoundary extends Component { @@ -20,7 +21,7 @@ export class ErrorBoundary extends Component { constructor(props: OwnProps) { super(props); - this.state = { hasError: false }; + this.state = { hasError: false, sentryId: undefined }; } static getDerivedStateFromError() { @@ -34,7 +35,11 @@ export class ErrorBoundary extends Component { withScope(scope => { Object.keys(info).forEach(key => { scope.setExtra(key, info[key]); - captureException(error); + const sentryId = captureException(error); + this.setState({ + ...this.state, + sentryId, + }); }); }); @@ -54,9 +59,9 @@ export class ErrorBoundary extends Component { render(): ReactNode { const { children, doNotShowErrorPage } = this.props; - const { hasError } = this.state; + const { hasError, sentryId } = this.state; - return hasError && !doNotShowErrorPage ? : children; + return hasError && !doNotShowErrorPage ? : children; } } diff --git a/packages/sak-infosider/src/ErrorPage.tsx b/packages/sak-infosider/src/ErrorPage.tsx index dd6a868a74..da9bfecfb6 100644 --- a/packages/sak-infosider/src/ErrorPage.tsx +++ b/packages/sak-infosider/src/ErrorPage.tsx @@ -1,6 +1,25 @@ import React from 'react'; -import { BigError } from '@k9-sak-web/gui/sak/systeminfo/BigError.js'; +import { BigError, DefaultErrorMsg } from '@k9-sak-web/gui/sak/systeminfo/BigError.js'; +import { CopyButton } from '@navikt/ds-react'; -const ErrorPage = () => ; +export interface ErrorPageProps { + readonly sentryId?: string; +} + +const ErrorPage = ({ sentryId }: ErrorPageProps) => { + const SentryRef = () => + sentryId !== undefined ? ( +

+ Inkluder referanse {sentryId} {' '} + hvis du melder feilen inn. +

+ ) : undefined; + return ( + + + + + ); +}; export default ErrorPage; diff --git a/packages/v2/gui/src/sak/systeminfo/BigError.tsx b/packages/v2/gui/src/sak/systeminfo/BigError.tsx index 1a4564bcea..e2cdad36c4 100644 --- a/packages/v2/gui/src/sak/systeminfo/BigError.tsx +++ b/packages/v2/gui/src/sak/systeminfo/BigError.tsx @@ -6,21 +6,21 @@ export interface BigErrorProps { readonly children?: string | React.ReactNode; } -const DefaultErrorMsg = () => ( - <> +export const DefaultErrorMsg = () => ( +

Forøk gjerne å{' '} window.location.reload()}> - laste siden på nytt + laste siden på nytt{' '} . Meld fra i porten hvis problemet vedvarer. - +

); export const BigError = ({ title = 'Uventet feil', children = }: BigErrorProps) => { return ( - + {title && {title}} {children &&
{children}
} From 9ea8ca6e3e8436d3f7b282486c227f99a7ad9214 Mon Sep 17 00:00:00 2001 From: Jostein Stuhaug Date: Thu, 15 Aug 2024 15:09:58 +0200 Subject: [PATCH 11/20] Flytta sak-infosider til v2/gui/src/sak/feilmeldinger. Sletta gammal sak-infosider pakke. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Gjere og nødvendige tilpassinger for at kode skal kompilere under v2/. Bytter og namn på ny v2 sak/infomeldinger til sak/feilmeldinger. Justerer title i tilhøyrande storybook filer for å matche ny filsti. --- packages/sak-app/src/app/AppIndex.tsx | 3 ++- packages/sak-app/src/app/ErrorBoundary.tsx | 3 +-- packages/sak-app/src/app/components/Home.tsx | 2 +- .../sak-app/src/behandling/BehandlingerIndex.tsx | 6 +++--- packages/sak-infosider/index.ts | 5 ----- packages/sak-infosider/package.json | 12 ------------ .../BigError.stories.tsx | 6 +++--- .../sak/{systeminfo => feilmeldinger}/BigError.tsx | 0 .../gui/src/sak/feilmeldinger}/ErrorPage.stories.tsx | 4 ++-- .../gui/src/sak/feilmeldinger}/ErrorPage.tsx | 5 ++--- .../src/sak/feilmeldinger}/ForbiddenPage.stories.tsx | 4 ++-- .../gui/src/sak/feilmeldinger}/ForbiddenPage.tsx | 3 +-- .../IngenBehandlingValgtPanel.stories.tsx | 4 ++-- .../sak/feilmeldinger}/IngenBehandlingValgtPanel.tsx | 1 - .../src/sak/feilmeldinger}/NotFoundPage.stories.tsx | 4 ++-- .../gui/src/sak/feilmeldinger}/NotFoundPage.tsx | 3 +-- .../sak/feilmeldinger}/UnauthorizedPage.stories.tsx | 4 ++-- .../gui/src/sak/feilmeldinger}/UnauthorizedPage.tsx | 3 +-- .../ingenBehandlingValgtPanel.module.css | 0 .../ingenBehandlingValgtPanel.module.d.css.ts | 4 ++++ 20 files changed, 29 insertions(+), 47 deletions(-) delete mode 100644 packages/sak-infosider/index.ts delete mode 100644 packages/sak-infosider/package.json rename packages/v2/gui/src/sak/{systeminfo => feilmeldinger}/BigError.stories.tsx (93%) rename packages/v2/gui/src/sak/{systeminfo => feilmeldinger}/BigError.tsx (100%) rename packages/{sak-infosider/src => v2/gui/src/sak/feilmeldinger}/ErrorPage.stories.tsx (86%) rename packages/{sak-infosider/src => v2/gui/src/sak/feilmeldinger}/ErrorPage.tsx (81%) rename packages/{sak-infosider/src => v2/gui/src/sak/feilmeldinger}/ForbiddenPage.stories.tsx (86%) rename packages/{sak-infosider/src => v2/gui/src/sak/feilmeldinger}/ForbiddenPage.tsx (83%) rename packages/{sak-infosider/src => v2/gui/src/sak/feilmeldinger}/IngenBehandlingValgtPanel.stories.tsx (90%) rename packages/{sak-infosider/src => v2/gui/src/sak/feilmeldinger}/IngenBehandlingValgtPanel.tsx (96%) rename packages/{sak-infosider/src => v2/gui/src/sak/feilmeldinger}/NotFoundPage.stories.tsx (85%) rename packages/{sak-infosider/src => v2/gui/src/sak/feilmeldinger}/NotFoundPage.tsx (82%) rename packages/{sak-infosider/src => v2/gui/src/sak/feilmeldinger}/UnauthorizedPage.stories.tsx (86%) rename packages/{sak-infosider/src => v2/gui/src/sak/feilmeldinger}/UnauthorizedPage.tsx (84%) rename packages/{sak-infosider/src => v2/gui/src/sak/feilmeldinger}/ingenBehandlingValgtPanel.module.css (100%) create mode 100644 packages/v2/gui/src/sak/feilmeldinger/ingenBehandlingValgtPanel.module.d.css.ts diff --git a/packages/sak-app/src/app/AppIndex.tsx b/packages/sak-app/src/app/AppIndex.tsx index fe388c468c..a8a05012ef 100644 --- a/packages/sak-app/src/app/AppIndex.tsx +++ b/packages/sak-app/src/app/AppIndex.tsx @@ -5,7 +5,8 @@ import { useLocation } from 'react-router-dom'; import { parseQueryString } from '@fpsak-frontend/utils'; import { useRestApiError, useRestApiErrorDispatcher } from '@k9-sak-web/rest-api-hooks'; import EventType from '@k9-sak-web/rest-api/src/requestApi/eventType'; -import { ForbiddenPage, UnauthorizedPage } from '@k9-sak-web/sak-infosider'; +import ForbiddenPage from '@k9-sak-web/gui/sak/feilmeldinger/ForbiddenPage.js'; +import UnauthorizedPage from '@k9-sak-web/gui/sak/feilmeldinger/UnauthorizedPage.js'; import { NavAnsatt } from '@k9-sak-web/types'; import { K9sakApiKeys, restApiHooks } from '../data/k9sakApi'; diff --git a/packages/sak-app/src/app/ErrorBoundary.tsx b/packages/sak-app/src/app/ErrorBoundary.tsx index 82ca5632c5..29398149dd 100644 --- a/packages/sak-app/src/app/ErrorBoundary.tsx +++ b/packages/sak-app/src/app/ErrorBoundary.tsx @@ -1,7 +1,6 @@ import React, { Component, ReactNode, ErrorInfo } from 'react'; import { captureException, withScope } from '@sentry/browser'; - -import { ErrorPage } from '@k9-sak-web/sak-infosider'; +import ErrorPage from '@k9-sak-web/gui/sak/feilmeldinger/ErrorPage.js'; interface OwnProps { errorMessageCallback: (error: any) => void; diff --git a/packages/sak-app/src/app/components/Home.tsx b/packages/sak-app/src/app/components/Home.tsx index 6e0a4d0eab..2c733b8e06 100644 --- a/packages/sak-app/src/app/components/Home.tsx +++ b/packages/sak-app/src/app/components/Home.tsx @@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import React from 'react'; import { Route, Routes } from 'react-router-dom'; -import { NotFoundPage } from '@k9-sak-web/sak-infosider'; +import NotFoundPage from '@k9-sak-web/gui/sak/feilmeldinger/NotFoundPage.js'; import AktoerIndex from '../../aktoer/AktoerIndex'; import FagsakIndex from '../../fagsak/FagsakIndex'; diff --git a/packages/sak-app/src/behandling/BehandlingerIndex.tsx b/packages/sak-app/src/behandling/BehandlingerIndex.tsx index ae94e585a2..47fe304b30 100644 --- a/packages/sak-app/src/behandling/BehandlingerIndex.tsx +++ b/packages/sak-app/src/behandling/BehandlingerIndex.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Route, Routes } from 'react-router-dom'; import { BehandlingAppKontekst, Fagsak, ArbeidsgiverOpplysningerWrapper } from '@k9-sak-web/types'; -import { IngenBehandlingValgtPanel } from '@k9-sak-web/sak-infosider'; +import IngenBehandlingValgtPanel from '@k9-sak-web/gui/sak/feilmeldinger/IngenBehandlingValgtPanel.js'; import BehandlingIndex from './BehandlingIndex'; import { behandlingRoutePath } from '../app/paths'; @@ -25,7 +25,7 @@ export const BehandlingerIndex = ({ - )} + } /> } /> diff --git a/packages/sak-infosider/index.ts b/packages/sak-infosider/index.ts deleted file mode 100644 index 8f87bd95a3..0000000000 --- a/packages/sak-infosider/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { default as ForbiddenPage } from './src/ForbiddenPage'; -export { default as NotFoundPage } from './src/NotFoundPage'; -export { default as UnauthorizedPage } from './src/UnauthorizedPage'; -export { default as ErrorPage } from './src/ErrorPage'; -export { default as IngenBehandlingValgtPanel } from './src/IngenBehandlingValgtPanel'; diff --git a/packages/sak-infosider/package.json b/packages/sak-infosider/package.json deleted file mode 100644 index e067596260..0000000000 --- a/packages/sak-infosider/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@k9-sak-web/sak-infosider", - "version": "1.0.0", - "module": "index.ts", - "license": "MIT", - "private": true, - "dependencies": { - "react": "18.3.1", - "react-intl": "6.6.8", - "react-router-dom": "6.26.0" - } -} diff --git a/packages/v2/gui/src/sak/systeminfo/BigError.stories.tsx b/packages/v2/gui/src/sak/feilmeldinger/BigError.stories.tsx similarity index 93% rename from packages/v2/gui/src/sak/systeminfo/BigError.stories.tsx rename to packages/v2/gui/src/sak/feilmeldinger/BigError.stories.tsx index 23684887eb..4059444ac8 100644 --- a/packages/v2/gui/src/sak/systeminfo/BigError.stories.tsx +++ b/packages/v2/gui/src/sak/feilmeldinger/BigError.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { expect } from '@storybook/test'; const meta = { - title: 'gui/sak/systeminfo/BigError', + title: 'gui/sak/feilmeldinger/BigError', component: BigError, } satisfies Meta; @@ -52,13 +52,13 @@ export const FleireAvsnitt: Story = { }, }; -export const UtenTittel: Story = { +export const UtenTittelSpesifisert: Story = { args: { children: 'Feilmeldingstekst', }, }; -export const UtenTekst: Story = { +export const UtenTekstSpesifisert: Story = { args: { title: 'Bare overskrift', }, diff --git a/packages/v2/gui/src/sak/systeminfo/BigError.tsx b/packages/v2/gui/src/sak/feilmeldinger/BigError.tsx similarity index 100% rename from packages/v2/gui/src/sak/systeminfo/BigError.tsx rename to packages/v2/gui/src/sak/feilmeldinger/BigError.tsx diff --git a/packages/sak-infosider/src/ErrorPage.stories.tsx b/packages/v2/gui/src/sak/feilmeldinger/ErrorPage.stories.tsx similarity index 86% rename from packages/sak-infosider/src/ErrorPage.stories.tsx rename to packages/v2/gui/src/sak/feilmeldinger/ErrorPage.stories.tsx index fb02a45013..16bc15a860 100644 --- a/packages/sak-infosider/src/ErrorPage.stories.tsx +++ b/packages/v2/gui/src/sak/feilmeldinger/ErrorPage.stories.tsx @@ -1,9 +1,9 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { expect } from '@storybook/test'; import ErrorPage from './ErrorPage.js'; const meta = { - title: 'sak/sak-infosider', + title: 'gui/sak/feilmeldinger', component: ErrorPage, } satisfies Meta; diff --git a/packages/sak-infosider/src/ErrorPage.tsx b/packages/v2/gui/src/sak/feilmeldinger/ErrorPage.tsx similarity index 81% rename from packages/sak-infosider/src/ErrorPage.tsx rename to packages/v2/gui/src/sak/feilmeldinger/ErrorPage.tsx index da9bfecfb6..fd4db0d6af 100644 --- a/packages/sak-infosider/src/ErrorPage.tsx +++ b/packages/v2/gui/src/sak/feilmeldinger/ErrorPage.tsx @@ -1,5 +1,4 @@ -import React from 'react'; -import { BigError, DefaultErrorMsg } from '@k9-sak-web/gui/sak/systeminfo/BigError.js'; +import { BigError, DefaultErrorMsg } from '@k9-sak-web/gui/sak/feilmeldinger/BigError.js'; import { CopyButton } from '@navikt/ds-react'; export interface ErrorPageProps { @@ -13,7 +12,7 @@ const ErrorPage = ({ sentryId }: ErrorPageProps) => { Inkluder referanse {sentryId} {' '} hvis du melder feilen inn.

- ) : undefined; + ) : null; return ( diff --git a/packages/sak-infosider/src/ForbiddenPage.stories.tsx b/packages/v2/gui/src/sak/feilmeldinger/ForbiddenPage.stories.tsx similarity index 86% rename from packages/sak-infosider/src/ForbiddenPage.stories.tsx rename to packages/v2/gui/src/sak/feilmeldinger/ForbiddenPage.stories.tsx index 556199225a..7e998f13f2 100644 --- a/packages/sak-infosider/src/ForbiddenPage.stories.tsx +++ b/packages/v2/gui/src/sak/feilmeldinger/ForbiddenPage.stories.tsx @@ -1,9 +1,9 @@ import ForbiddenPage from './ForbiddenPage.js'; -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { expect } from '@storybook/test'; const meta = { - title: 'sak/sak-infosider', + title: 'gui/sak/feilmeldinger', component: ForbiddenPage, } satisfies Meta; diff --git a/packages/sak-infosider/src/ForbiddenPage.tsx b/packages/v2/gui/src/sak/feilmeldinger/ForbiddenPage.tsx similarity index 83% rename from packages/sak-infosider/src/ForbiddenPage.tsx rename to packages/v2/gui/src/sak/feilmeldinger/ForbiddenPage.tsx index cf3d60e878..22bd6eb9d7 100644 --- a/packages/sak-infosider/src/ForbiddenPage.tsx +++ b/packages/v2/gui/src/sak/feilmeldinger/ForbiddenPage.tsx @@ -1,7 +1,6 @@ -import React from 'react'; import { Link } from 'react-router-dom'; -import { BigError } from '@k9-sak-web/gui/sak/systeminfo/BigError.js'; +import { BigError } from '@k9-sak-web/gui/sak/feilmeldinger/BigError.js'; /** * ForbiddenPage diff --git a/packages/sak-infosider/src/IngenBehandlingValgtPanel.stories.tsx b/packages/v2/gui/src/sak/feilmeldinger/IngenBehandlingValgtPanel.stories.tsx similarity index 90% rename from packages/sak-infosider/src/IngenBehandlingValgtPanel.stories.tsx rename to packages/v2/gui/src/sak/feilmeldinger/IngenBehandlingValgtPanel.stories.tsx index bf4a250867..40fb12ef2d 100644 --- a/packages/sak-infosider/src/IngenBehandlingValgtPanel.stories.tsx +++ b/packages/v2/gui/src/sak/feilmeldinger/IngenBehandlingValgtPanel.stories.tsx @@ -1,9 +1,9 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { expect } from '@storybook/test'; import IngenBehandlingValgtPanel from './IngenBehandlingValgtPanel.js'; const meta = { - title: 'sak/sak-infosider', + title: 'gui/sak/feilmeldinger', component: IngenBehandlingValgtPanel, } satisfies Meta; diff --git a/packages/sak-infosider/src/IngenBehandlingValgtPanel.tsx b/packages/v2/gui/src/sak/feilmeldinger/IngenBehandlingValgtPanel.tsx similarity index 96% rename from packages/sak-infosider/src/IngenBehandlingValgtPanel.tsx rename to packages/v2/gui/src/sak/feilmeldinger/IngenBehandlingValgtPanel.tsx index 641066c977..aa76eaa88d 100644 --- a/packages/sak-infosider/src/IngenBehandlingValgtPanel.tsx +++ b/packages/v2/gui/src/sak/feilmeldinger/IngenBehandlingValgtPanel.tsx @@ -1,5 +1,4 @@ import { Alert, BodyShort } from '@navikt/ds-react'; -import React from 'react'; import styles from './ingenBehandlingValgtPanel.module.css'; diff --git a/packages/sak-infosider/src/NotFoundPage.stories.tsx b/packages/v2/gui/src/sak/feilmeldinger/NotFoundPage.stories.tsx similarity index 85% rename from packages/sak-infosider/src/NotFoundPage.stories.tsx rename to packages/v2/gui/src/sak/feilmeldinger/NotFoundPage.stories.tsx index 4a2e3c950e..e691954910 100644 --- a/packages/sak-infosider/src/NotFoundPage.stories.tsx +++ b/packages/v2/gui/src/sak/feilmeldinger/NotFoundPage.stories.tsx @@ -1,9 +1,9 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { expect } from '@storybook/test'; import NotFoundPage from './NotFoundPage.js'; const meta = { - title: 'sak/sak-infosider', + title: 'gui/sak/feilmeldinger', component: NotFoundPage, } satisfies Meta; diff --git a/packages/sak-infosider/src/NotFoundPage.tsx b/packages/v2/gui/src/sak/feilmeldinger/NotFoundPage.tsx similarity index 82% rename from packages/sak-infosider/src/NotFoundPage.tsx rename to packages/v2/gui/src/sak/feilmeldinger/NotFoundPage.tsx index ca090b5a1c..aa503e936d 100644 --- a/packages/sak-infosider/src/NotFoundPage.tsx +++ b/packages/v2/gui/src/sak/feilmeldinger/NotFoundPage.tsx @@ -1,6 +1,5 @@ -import React from 'react'; import { Link } from 'react-router-dom'; -import { BigError } from '@k9-sak-web/gui/sak/systeminfo/BigError.js'; +import { BigError } from '@k9-sak-web/gui/sak/feilmeldinger/BigError.js'; /** * NotFoundPage diff --git a/packages/sak-infosider/src/UnauthorizedPage.stories.tsx b/packages/v2/gui/src/sak/feilmeldinger/UnauthorizedPage.stories.tsx similarity index 86% rename from packages/sak-infosider/src/UnauthorizedPage.stories.tsx rename to packages/v2/gui/src/sak/feilmeldinger/UnauthorizedPage.stories.tsx index b9ff126400..b927d9148f 100644 --- a/packages/sak-infosider/src/UnauthorizedPage.stories.tsx +++ b/packages/v2/gui/src/sak/feilmeldinger/UnauthorizedPage.stories.tsx @@ -1,9 +1,9 @@ -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { expect } from '@storybook/test'; import UnauthorizedPage from './UnauthorizedPage.js'; const meta = { - title: 'sak/sak-infosider', + title: 'gui/sak/feilmeldinger', component: UnauthorizedPage, } satisfies Meta; diff --git a/packages/sak-infosider/src/UnauthorizedPage.tsx b/packages/v2/gui/src/sak/feilmeldinger/UnauthorizedPage.tsx similarity index 84% rename from packages/sak-infosider/src/UnauthorizedPage.tsx rename to packages/v2/gui/src/sak/feilmeldinger/UnauthorizedPage.tsx index a4f90ee39e..d30f858f1b 100644 --- a/packages/sak-infosider/src/UnauthorizedPage.tsx +++ b/packages/v2/gui/src/sak/feilmeldinger/UnauthorizedPage.tsx @@ -1,6 +1,5 @@ -import React from 'react'; import { Link } from 'react-router-dom'; -import { BigError } from '@k9-sak-web/gui/sak/systeminfo/BigError.js'; +import { BigError } from '@k9-sak-web/gui/sak/feilmeldinger/BigError.js'; /** * UnauthorizedPage diff --git a/packages/sak-infosider/src/ingenBehandlingValgtPanel.module.css b/packages/v2/gui/src/sak/feilmeldinger/ingenBehandlingValgtPanel.module.css similarity index 100% rename from packages/sak-infosider/src/ingenBehandlingValgtPanel.module.css rename to packages/v2/gui/src/sak/feilmeldinger/ingenBehandlingValgtPanel.module.css diff --git a/packages/v2/gui/src/sak/feilmeldinger/ingenBehandlingValgtPanel.module.d.css.ts b/packages/v2/gui/src/sak/feilmeldinger/ingenBehandlingValgtPanel.module.d.css.ts new file mode 100644 index 0000000000..f1d915afd8 --- /dev/null +++ b/packages/v2/gui/src/sak/feilmeldinger/ingenBehandlingValgtPanel.module.d.css.ts @@ -0,0 +1,4 @@ +declare const styles: { + readonly noSelectedBehandlingPanel: string; +}; +export = styles; From 16826a82da1bf372c64f8a5463331c97e9f15b20 Mon Sep 17 00:00:00 2001 From: Jostein Stuhaug Date: Thu, 15 Aug 2024 15:42:14 +0200 Subject: [PATCH 12/20] =?UTF-8?q?Fiks=20s=C3=A5=20CopyButton=20p=C3=A5=20E?= =?UTF-8?q?rrorPage=20blir=20inline=20i=20feilmelding.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/v2/gui/src/sak/feilmeldinger/ErrorPage.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/v2/gui/src/sak/feilmeldinger/ErrorPage.tsx b/packages/v2/gui/src/sak/feilmeldinger/ErrorPage.tsx index fd4db0d6af..e95f1d4bc9 100644 --- a/packages/v2/gui/src/sak/feilmeldinger/ErrorPage.tsx +++ b/packages/v2/gui/src/sak/feilmeldinger/ErrorPage.tsx @@ -9,8 +9,9 @@ const ErrorPage = ({ sentryId }: ErrorPageProps) => { const SentryRef = () => sentryId !== undefined ? (

- Inkluder referanse {sentryId} {' '} - hvis du melder feilen inn. + Inkluder referanse {sentryId}{' '} + hvis + du melder feilen inn.

) : null; return ( From 7aa5091647869a8fa21bade552ae43e1223b9e0e Mon Sep 17 00:00:00 2001 From: Jostein Stuhaug Date: Thu, 15 Aug 2024 17:01:24 +0200 Subject: [PATCH 13/20] typofix i BigError.tsx --- packages/v2/gui/src/sak/feilmeldinger/BigError.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/v2/gui/src/sak/feilmeldinger/BigError.tsx b/packages/v2/gui/src/sak/feilmeldinger/BigError.tsx index e2cdad36c4..bd0fd72f3b 100644 --- a/packages/v2/gui/src/sak/feilmeldinger/BigError.tsx +++ b/packages/v2/gui/src/sak/feilmeldinger/BigError.tsx @@ -8,7 +8,7 @@ export interface BigErrorProps { export const DefaultErrorMsg = () => (

- Forøk gjerne å{' '} + Forsøk gjerne å{' '} window.location.reload()}> laste siden på nytt{' '} From 7354429c92382af66284757c9e11833cf9347ccd Mon Sep 17 00:00:00 2001 From: Jostein Stuhaug Date: Thu, 15 Aug 2024 17:05:39 +0200 Subject: [PATCH 14/20] NetworkErrorPage komponent for bruk ved nettverksfeil lagt til. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Oppfordrer saksbehandler til å prøve igjen ved nettverksfeil, og inkludere litt feilsøkingsinfo ved innrapportering av feil som ikkje løyser seg ved retry. --- .../src/error/extractErrorInfo.ts | 28 ++++++++++++++++++ .../NetworkErrorPage.stories.tsx | 25 ++++++++++++++++ .../sak/feilmeldinger/NetworkErrorPage.tsx | 29 +++++++++++++++++++ 3 files changed, 82 insertions(+) create mode 100644 packages/rest-api-hooks/src/error/extractErrorInfo.ts create mode 100644 packages/v2/gui/src/sak/feilmeldinger/NetworkErrorPage.stories.tsx create mode 100644 packages/v2/gui/src/sak/feilmeldinger/NetworkErrorPage.tsx diff --git a/packages/rest-api-hooks/src/error/extractErrorInfo.ts b/packages/rest-api-hooks/src/error/extractErrorInfo.ts new file mode 100644 index 0000000000..95ee8b6f18 --- /dev/null +++ b/packages/rest-api-hooks/src/error/extractErrorInfo.ts @@ -0,0 +1,28 @@ +import { AxiosError } from 'axios'; + +interface ErrorInfo { + navCallId: string | undefined; + statusCode: number | undefined; +} + +/** + * Kan brukast for å hente ut meta informasjon frå AxiosError som har skjedd. + * Brukast for å vise referanse i feilmelding til bruker, slik at denne kan inkluderast i evt feilmelding vidare. + * + * @param error feil som har oppstått + * @returns objekt med Nav-Callid string og http status kode for respons viss denne info finnast. + */ +export const extractErrorInfo = (error: unknown): Readonly => { + const resp: ErrorInfo = { + navCallId: undefined, + statusCode: undefined, + }; + if (error instanceof AxiosError) { + const callId = error.config.headers.get('Nav-Callid'); + if (typeof callId === 'string') { + resp.navCallId = callId; + } + resp.statusCode = error.status; + } + return resp; +}; diff --git a/packages/v2/gui/src/sak/feilmeldinger/NetworkErrorPage.stories.tsx b/packages/v2/gui/src/sak/feilmeldinger/NetworkErrorPage.stories.tsx new file mode 100644 index 0000000000..04fed908e5 --- /dev/null +++ b/packages/v2/gui/src/sak/feilmeldinger/NetworkErrorPage.stories.tsx @@ -0,0 +1,25 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { expect } from '@storybook/test'; +import NetworkErrorPage from './NetworkErrorPage.tsx'; + +const meta = { + title: 'gui/sak/feilmeldinger', + component: NetworkErrorPage, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Nettverksfeil: Story = { + args: { + statusCode: 400, + navCallId: 'CallId_1231242_444445', + }, + play: async ({ canvas, args }) => { + await expect(canvas.getByRole('heading')).toHaveTextContent('Feil ved henting/sending av data'); + await expect(canvas.getByText('Meld fra i porten hvis problemet vedvarer.', { exact: false })).toBeInTheDocument(); + await expect(canvas.getByText(`${args.navCallId}`, { exact: false })).toBeInTheDocument(); + await expect(canvas.getByText(` (${args.statusCode})`, { exact: false })).toBeInTheDocument(); + }, +}; diff --git a/packages/v2/gui/src/sak/feilmeldinger/NetworkErrorPage.tsx b/packages/v2/gui/src/sak/feilmeldinger/NetworkErrorPage.tsx new file mode 100644 index 0000000000..ccf635656e --- /dev/null +++ b/packages/v2/gui/src/sak/feilmeldinger/NetworkErrorPage.tsx @@ -0,0 +1,29 @@ +import { BigError, DefaultErrorMsg } from '@k9-sak-web/gui/sak/feilmeldinger/BigError.js'; +import { CopyButton } from '@navikt/ds-react'; + +export interface NetworkErrorPageProps { + readonly navCallId?: string; + readonly statusCode?: number; +} + +const NetworkErrorPage = ({ navCallId, statusCode = 0 }: NetworkErrorPageProps) => { + const NavCallId = () => + navCallId !== undefined || statusCode !== undefined ? ( +

+ Inkluder referanse{' '} + + {navCallId} ({statusCode}) + + hvis + du melder feilen inn. +

+ ) : null; + return ( + + + + + ); +}; + +export default NetworkErrorPage; From d4e41a4416c1941b11df7820a9deae1d0f286dc5 Mon Sep 17 00:00:00 2001 From: Jostein Stuhaug Date: Thu, 15 Aug 2024 17:07:19 +0200 Subject: [PATCH 15/20] Handter nettverksfeil i BehandlingTilbakekrevingIndex. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Viser feilmelding istadenfor å prøve å køyre vidare med manglande data viss lasting av data frå server feiler. --- .../src/BehandlingTilbakekrevingIndex.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/behandling-tilbakekreving/src/BehandlingTilbakekrevingIndex.tsx b/packages/behandling-tilbakekreving/src/BehandlingTilbakekrevingIndex.tsx index dd93bcb209..0762afff91 100644 --- a/packages/behandling-tilbakekreving/src/BehandlingTilbakekrevingIndex.tsx +++ b/packages/behandling-tilbakekreving/src/BehandlingTilbakekrevingIndex.tsx @@ -1,17 +1,19 @@ -import React, { useEffect, useState, useCallback } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { ReduxFormStateCleaner, Rettigheter, useSetBehandlingVedEndring } from '@k9-sak-web/behandling-felles'; -import { KodeverkMedNavn, Behandling, Fagsak, FagsakPerson } from '@k9-sak-web/types'; +import { Behandling, Fagsak, FagsakPerson, KodeverkMedNavn } from '@k9-sak-web/types'; import { LoadingPanel } from '@fpsak-frontend/shared-components'; import { RestApiState, useRestApiErrorDispatcher } from '@k9-sak-web/rest-api-hooks'; import TilbakekrevingPaneler from './components/TilbakekrevingPaneler'; import FetchedData from './types/fetchedDataTsType'; import { - restApiTilbakekrevingHooks, requestTilbakekrevingApi, + restApiTilbakekrevingHooks, TilbakekrevingBehandlingApiKeys, } from './data/tilbakekrevingBehandlingApi'; +import NetworkErrorPage from '@k9-sak-web/gui/sak/feilmeldinger/NetworkErrorPage.js'; +import { extractErrorInfo } from '../../rest-api-hooks/src/error/extractErrorInfo.js'; const tilbakekrevingData = [ { key: TilbakekrevingBehandlingApiKeys.AKSJONSPUNKTER }, @@ -124,7 +126,7 @@ const BehandlingTilbakekrevingIndex = ({ }; }, []); - const { data, state } = restApiTilbakekrevingHooks.useMultipleRestApi(tilbakekrevingData, { + const { data, state, error } = restApiTilbakekrevingHooks.useMultipleRestApi(tilbakekrevingData, { keepData: true, updateTriggers: [behandling?.versjon], suspendRequest: !behandling, @@ -135,6 +137,10 @@ const BehandlingTilbakekrevingIndex = ({ return ; } + if (state === RestApiState.ERROR) { + return ; + } + return ( <> Date: Fri, 16 Aug 2024 09:29:31 +0200 Subject: [PATCH 16/20] Fjern utdatert referanse til sak-infosider, fiks ulovlig import path. --- packages/sak-app/package.json | 1 - .../sak/feilmeldinger/NetworkErrorPage.stories.tsx | 2 +- yarn.lock | 11 ----------- 3 files changed, 1 insertion(+), 13 deletions(-) diff --git a/packages/sak-app/package.json b/packages/sak-app/package.json index 940d2c7aa8..33f14fcdca 100644 --- a/packages/sak-app/package.json +++ b/packages/sak-app/package.json @@ -39,7 +39,6 @@ "@k9-sak-web/rest-api-hooks": "1.0.0", "@k9-sak-web/sak-aktor": "1.0.0", "@k9-sak-web/sak-behandling-velger": "1.0.0", - "@k9-sak-web/sak-infosider": "1.0.0", "@k9-sak-web/sak-meldinger": "1.0.0", "@k9-sak-web/sak-meny-marker-behandling": "1.0.0", "@k9-sak-web/sak-notat": "1.0.0", diff --git a/packages/v2/gui/src/sak/feilmeldinger/NetworkErrorPage.stories.tsx b/packages/v2/gui/src/sak/feilmeldinger/NetworkErrorPage.stories.tsx index 04fed908e5..4c19175546 100644 --- a/packages/v2/gui/src/sak/feilmeldinger/NetworkErrorPage.stories.tsx +++ b/packages/v2/gui/src/sak/feilmeldinger/NetworkErrorPage.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import { expect } from '@storybook/test'; -import NetworkErrorPage from './NetworkErrorPage.tsx'; +import NetworkErrorPage from './NetworkErrorPage.js'; const meta = { title: 'gui/sak/feilmeldinger', diff --git a/yarn.lock b/yarn.lock index 004a124091..d816f957f5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4395,7 +4395,6 @@ __metadata: "@k9-sak-web/rest-api-hooks": 1.0.0 "@k9-sak-web/sak-aktor": 1.0.0 "@k9-sak-web/sak-behandling-velger": 1.0.0 - "@k9-sak-web/sak-infosider": 1.0.0 "@k9-sak-web/sak-meldinger": 1.0.0 "@k9-sak-web/sak-meny-marker-behandling": 1.0.0 "@k9-sak-web/sak-notat": 1.0.0 @@ -4446,16 +4445,6 @@ __metadata: languageName: unknown linkType: soft -"@k9-sak-web/sak-infosider@1.0.0, @k9-sak-web/sak-infosider@workspace:packages/sak-infosider": - version: 0.0.0-use.local - resolution: "@k9-sak-web/sak-infosider@workspace:packages/sak-infosider" - dependencies: - react: 18.3.1 - react-intl: 6.6.8 - react-router-dom: 6.26.0 - languageName: unknown - linkType: soft - "@k9-sak-web/sak-meldinger@1.0.0, @k9-sak-web/sak-meldinger@workspace:packages/sak-meldinger": version: 0.0.0-use.local resolution: "@k9-sak-web/sak-meldinger@workspace:packages/sak-meldinger" From b788582edaa24ed0b817487636885a5915a37808 Mon Sep 17 00:00:00 2001 From: Jostein Stuhaug Date: Fri, 16 Aug 2024 09:36:36 +0200 Subject: [PATCH 17/20] css module typegen From b0d6b3041c88747e747efe43ac601affa01f7313 Mon Sep 17 00:00:00 2001 From: Jostein Stuhaug Date: Fri, 16 Aug 2024 09:37:53 +0200 Subject: [PATCH 18/20] =?UTF-8?q?legg=20til=20"--allow-empty"=20p=C3=A5=20?= =?UTF-8?q?lint-staged=20hook.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ellers vart commit av generert typescript deklarasjon for css modul blokkert. --- .husky/pre-commit | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index a926c364e6..030e3a62b2 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,2 +1,2 @@ #!/bin/sh -npx lint-staged +npx lint-staged --allow-empty From 3f17890585d2a56a32cc4e1bf985767f29bae9bb Mon Sep 17 00:00:00 2001 From: Jostein Stuhaug Date: Fri, 16 Aug 2024 10:46:42 +0200 Subject: [PATCH 19/20] Behold quotes i modules.d.css.ts filer MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit prettier fjerner disse, men då feila typed-css-modules sjekken etterpå, så må beholde disse quotes. --- .../feilmeldinger/ingenBehandlingValgtPanel.module.d.css.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/v2/gui/src/sak/feilmeldinger/ingenBehandlingValgtPanel.module.d.css.ts b/packages/v2/gui/src/sak/feilmeldinger/ingenBehandlingValgtPanel.module.d.css.ts index f1d915afd8..56e96ef573 100644 --- a/packages/v2/gui/src/sak/feilmeldinger/ingenBehandlingValgtPanel.module.d.css.ts +++ b/packages/v2/gui/src/sak/feilmeldinger/ingenBehandlingValgtPanel.module.d.css.ts @@ -1,4 +1,5 @@ declare const styles: { - readonly noSelectedBehandlingPanel: string; + readonly "noSelectedBehandlingPanel": string; }; export = styles; + From aefce92f8a41552c8017451305ad378e86cdbb39 Mon Sep 17 00:00:00 2001 From: Jostein Stuhaug Date: Fri, 16 Aug 2024 10:47:15 +0200 Subject: [PATCH 20/20] =?UTF-8?q?Revert=20"legg=20til=20"--allow-empty"=20?= =?UTF-8?q?p=C3=A5=20lint-staged=20hook."?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit b0d6b3041c88747e747efe43ac601affa01f7313. --- .husky/pre-commit | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index 030e3a62b2..a926c364e6 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,2 +1,2 @@ #!/bin/sh -npx lint-staged --allow-empty +npx lint-staged