Ulagret data modal (#1768)

* legger til to komponenter: ModalWrapper og UlagretDataModal * legger til funksjonalitet for å registrere komponenter med ulagrede data. * oppdatert tester -> skal sjekke at navigate() blir kalt med riktige argumenter
navikt · May 13, 2024 · e82771b · e82771b
1 parent e7f167f
commit e82771b
Show file tree

Hide file tree

Showing 24 changed files with 367 additions and 66 deletions.
diff --git a/package.json b/package.json
@@ -54,6 +54,7 @@
     "react-collapse": "^5.1.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.0",
+    "react-router-prompt": "^0.7.0",
     "styled-components": "^6.1.1",
     "stylis": "^4.3.0",
     "uuid": "^9.0.0"

diff --git a/src/frontend/context/BehandlingContext.tsx b/src/frontend/context/BehandlingContext.tsx
@@ -1,8 +1,7 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { AxiosError } from 'axios';
 import createUseContext from 'constate';
-import { useNavigate } from 'react-router-dom';
 
 import { useHttp } from '@navikt/familie-http';
 import {
@@ -35,9 +34,37 @@ const [BehandlingProvider, useBehandling] = createUseContext(() => {
     const [harKravgrunnlag, settHarKravgrunnlag] = useState<boolean>();
     const [behandlingILesemodus, settBehandlingILesemodus] = useState<boolean>();
     const [åpenHøyremeny, settÅpenHøyremeny] = useState(true);
+    const [ikkePersisterteKomponenter, settIkkePersisterteKomponenter] = useState<Set<string>>(
+        new Set()
+    );
+    const [harUlagredeData, settHarUlagredeData] = useState<boolean>(
+        ikkePersisterteKomponenter.size > 0
+    );
     const { fagsak } = useFagsak();
     const { request } = useHttp();
-    const navigate = useNavigate();
+
+    useEffect(
+        () => settHarUlagredeData(ikkePersisterteKomponenter.size > 0),
+        [ikkePersisterteKomponenter]
+    );
+
+    const settIkkePersistertKomponent = (komponentId: string) => {
+        if (ikkePersisterteKomponenter.has(komponentId)) return;
+
+        settIkkePersisterteKomponenter(new Set(ikkePersisterteKomponenter).add(komponentId));
+    };
+
+    const nullstillIkkePersistertKomponent = (komponentId: string) => {
+        const kopi = new Set(ikkePersisterteKomponenter);
+        kopi.delete(komponentId);
+        settIkkePersisterteKomponenter(kopi);
+    };
+
+    const nullstillIkkePersisterteKomponenter = () => {
+        if (ikkePersisterteKomponenter.size > 0) {
+            settIkkePersisterteKomponenter(new Set());
+        }
+    };
 
     const hentBehandlingMedEksternBrukId = (fagsak: IFagsak, behandlingId: string): void => {
         const fagsakBehandling = fagsak.behandlinger.find(
@@ -50,11 +77,7 @@ const [BehandlingProvider, useBehandling] = createUseContext(() => {
         }
     };
 
-    const hentBehandlingMedBehandlingId = (
-        behandlingId: string,
-        henterEtterStatusendring?: boolean | false,
-        ønsketPathEtterHenting?: string | undefined
-    ): void => {
+    const hentBehandlingMedBehandlingId = (behandlingId: string): void => {
         settBehandling(byggHenterRessurs());
         settAktivtSteg(undefined);
         settHarKravgrunnlag(undefined);
@@ -106,14 +129,6 @@ const [BehandlingProvider, useBehandling] = createUseContext(() => {
                             settVisVenteModal(true);
                         }
                     }
-                    if (henterEtterStatusendring) {
-                        navigate(
-                            // @ts-ignore - fagsak er hentet på dette tidspunktet
-                            `/fagsystem/${fagsak?.data?.fagsystem}/fagsak/${fagsak?.data?.eksternFagsakId}/behandling/${hentetBehandling.data.eksternBrukId}`
-                        );
-                    } else if (ønsketPathEtterHenting !== undefined) {
-                        navigate(ønsketPathEtterHenting);
-                    }
                 }
                 settBehandling(hentetBehandling);
             })
@@ -194,6 +209,10 @@ const [BehandlingProvider, useBehandling] = createUseContext(() => {
         settÅpenHøyremeny,
         visBrevmottakerModal,
         settVisBrevmottakerModal,
+        harUlagredeData,
+        settIkkePersistertKomponent,
+        nullstillIkkePersistertKomponent,
+        nullstillIkkePersisterteKomponenter,
     };
 });
 

diff --git a/src/frontend/komponenter/Container.tsx b/src/frontend/komponenter/Container.tsx
@@ -1,12 +1,19 @@
 import * as React from 'react';
 
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import {
+    createBrowserRouter,
+    createRoutesFromElements,
+    RouterProvider,
+    Outlet,
+    Route,
+} from 'react-router-dom';
 
 import FagsakContainer from './Fagsak/FagsakContainer';
 import Dashboard from './Felleskomponenter/Dashboard';
 import Feilmelding from './Felleskomponenter/Feilmelding';
 import FTHeader from './Felleskomponenter/FTHeader/FTHeader';
 import UgyldigSesjon from './Felleskomponenter/Modal/SesjonUtløpt';
+import UlagretDataModal from './Felleskomponenter/Modal/UlagretDataModal';
 import Toasts from './Felleskomponenter/Toast/Toasts';
 import { useApp } from '../context/AppContext';
 import { BehandlingProvider } from '../context/BehandlingContext';
@@ -16,31 +23,48 @@ const Container: React.FC = () => {
     const { autentisert, innloggetSaksbehandler } = useApp();
 
     return (
-        <Router>
+        <>
             {autentisert ? (
                 <>
                     <Toasts />
                     <main>
                         <FTHeader innloggetSaksbehandler={innloggetSaksbehandler} />
                         <FagsakProvider>
                             <BehandlingProvider>
-                                <Routes>
-                                    <Route
-                                        path="/fagsystem/:fagsystem/fagsak/:fagsakId/*"
-                                        element={<FagsakContainer />}
-                                    />
-                                    <Route path="/" element={<Dashboard />} />
-                                    <Route path="/*" element={<Feilmelding />} />
-                                </Routes>
+                                <AppRoutes />
                             </BehandlingProvider>
                         </FagsakProvider>
                     </main>
                 </>
             ) : (
                 <UgyldigSesjon />
             )}
-        </Router>
+        </>
     );
 };
 
+const AppRoutes = () => {
+    const router = createBrowserRouter(
+        createRoutesFromElements(
+            <Route path="/" element={<UlagretDataModalContainer />}>
+                <Route
+                    path="/fagsystem/:fagsystem/fagsak/:fagsakId/*"
+                    element={<FagsakContainer />}
+                />
+                <Route path="/" element={<Dashboard />} />
+                <Route path="/*" element={<Feilmelding />} />
+            </Route>
+        )
+    );
+
+    return <RouterProvider router={router} />;
+};
+
+const UlagretDataModalContainer = () => (
+    <>
+        <Outlet />
+        <UlagretDataModal />
+    </>
+);
+
 export default Container;
diff --git a/src/frontend/komponenter/Fagsak/Fakta/FaktaContainer.test.tsx b/src/frontend/komponenter/Fagsak/Fakta/FaktaContainer.test.tsx
@@ -10,7 +10,7 @@ import FaktaContainer from './FaktaContainer';
 import { FeilutbetalingFaktaProvider } from './FeilutbetalingFaktaContext';
 import { useBehandlingApi } from '../../../api/behandling';
 import { useBehandling } from '../../../context/BehandlingContext';
-import { HendelseType, HendelseUndertype, Ytelsetype } from '../../../kodeverk';
+import { Fagsystem, HendelseType, HendelseUndertype, Ytelsetype } from '../../../kodeverk';
 import { IBehandling } from '../../../typer/behandling';
 import { IFagsak } from '../../../typer/fagsak';
 import {
@@ -27,6 +27,13 @@ jest.mock('../../../api/behandling', () => ({
     useBehandlingApi: jest.fn(),
 }));
 
+const mockedNavigate = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useNavigate: () => mockedNavigate,
+}));
+
 describe('Tester: FaktaContainer', () => {
     const perioder: FaktaPeriode[] = [
         {
@@ -76,6 +83,8 @@ describe('Tester: FaktaContainer', () => {
     };
     const fagsak = mock<IFagsak>({
         institusjon: undefined,
+        fagsystem: Fagsystem.EF,
+        eksternFagsakId: '1',
     });
 
     const setupMock = (behandlet: boolean, lesemodus: boolean, fakta: IFeilutbetalingFakta) => {
@@ -108,7 +117,7 @@ describe('Tester: FaktaContainer', () => {
     test('- vis og fyll ut skjema', async () => {
         const user = userEvent.setup();
         setupMock(false, false, feilutbetalingFakta);
-        const behandling = mock<IBehandling>();
+        const behandling = mock<IBehandling>({ eksternBrukId: '1' });
 
         const { getByText, getByRole, getAllByRole, getByTestId, queryAllByText } = render(
             <FeilutbetalingFaktaProvider behandling={behandling} fagsak={fagsak}>
@@ -198,12 +207,13 @@ describe('Tester: FaktaContainer', () => {
             )
         );
         expect(queryAllByText('Feltet må fylles ut')).toHaveLength(0);
+        expect(mockedNavigate).toHaveBeenCalledWith('/fagsystem/EF/fagsak/1/behandling/1');
     });
 
     test('- vis og fyll ut skjema - behandle perioder samlet', async () => {
         const user = userEvent.setup();
         setupMock(false, false, feilutbetalingFakta);
-        const behandling = mock<IBehandling>();
+        const behandling = mock<IBehandling>({ eksternBrukId: '1' });
 
         const { getByText, getByLabelText, getByRole, getAllByRole, getByTestId, queryAllByText } =
             render(
@@ -276,6 +286,7 @@ describe('Tester: FaktaContainer', () => {
             )
         );
         expect(queryAllByText('Feltet må fylles ut')).toHaveLength(0);
+        expect(mockedNavigate).toHaveBeenCalledWith('/fagsystem/EF/fagsak/1/behandling/1');
     });
 
     test('- vis utfylt skjema - Barnetrygd', async () => {

diff --git a/src/frontend/komponenter/Fagsak/Fakta/FeilutbetalingFaktaContext.tsx b/src/frontend/komponenter/Fagsak/Fakta/FeilutbetalingFaktaContext.tsx
@@ -241,7 +241,10 @@ const [FeilutbetalingFaktaProvider, useFeilutbetalingFakta] = createUseContext(
                         (respons: Ressurs<string>) => {
                             settSenderInn(false);
                             if (respons.status === RessursStatus.SUKSESS) {
-                                hentBehandlingMedBehandlingId(behandling.behandlingId, true);
+                                hentBehandlingMedBehandlingId(behandling.behandlingId);
+                                navigate(
+                                    `/fagsystem/${fagsak.fagsystem}/fagsak/${fagsak.eksternFagsakId}/behandling/${behandling.eksternBrukId}`
+                                );
                             }
                         }
                     );

diff --git a/src/frontend/komponenter/Fagsak/Foreldelse/FeilutbetalingForeldelseContext.tsx b/src/frontend/komponenter/Fagsak/Foreldelse/FeilutbetalingForeldelseContext.tsx
@@ -217,7 +217,10 @@ const [FeilutbetalingForeldelseProvider, useFeilutbetalingForeldelse] = createUs
                     (respons: Ressurs<string>) => {
                         settSenderInn(false);
                         if (respons.status === RessursStatus.SUKSESS) {
-                            hentBehandlingMedBehandlingId(behandling.behandlingId, true);
+                            hentBehandlingMedBehandlingId(behandling.behandlingId);
+                            navigate(
+                                `/fagsystem/${fagsak.fagsystem}/fagsak/${fagsak.eksternFagsakId}/behandling/${behandling.eksternBrukId}`
+                            );
                         }
                     }
                 );

diff --git a/src/frontend/komponenter/Fagsak/Foreldelse/ForeldelseContainer.test.tsx b/src/frontend/komponenter/Fagsak/Foreldelse/ForeldelseContainer.test.tsx
@@ -10,7 +10,7 @@ import { FeilutbetalingForeldelseProvider } from './FeilutbetalingForeldelseCont
 import ForeldelseContainer from './ForeldelseContainer';
 import { useBehandlingApi } from '../../../api/behandling';
 import { useBehandling } from '../../../context/BehandlingContext';
-import { Foreldelsevurdering } from '../../../kodeverk';
+import { Fagsystem, Foreldelsevurdering } from '../../../kodeverk';
 import { Behandlingstatus, IBehandling } from '../../../typer/behandling';
 import { IFagsak } from '../../../typer/fagsak';
 import { ForeldelsePeriode, IFeilutbetalingForeldelse } from '../../../typer/feilutbetalingtyper';
@@ -33,6 +33,13 @@ jest.mock('../../../api/behandling', () => ({
     useBehandlingApi: jest.fn(),
 }));
 
+const mockedNavigate = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useNavigate: () => mockedNavigate,
+}));
+
 describe('Tester: ForeldelseContainer', () => {
     const perioder: ForeldelsePeriode[] = [
         {
@@ -101,8 +108,8 @@ describe('Tester: ForeldelseContainer', () => {
     test('- vis og fyll ut perioder og send inn', async () => {
         const user = userEvent.setup();
         setupMock(false, false, false, feilutbetalingForeldelse);
-        const behandling = mock<IBehandling>();
-        const fagsak = mock<IFagsak>();
+        const fagsak = mock<IFagsak>({ fagsystem: Fagsystem.EF, eksternFagsakId: '1' });
+        const behandling = mock<IBehandling>({ eksternBrukId: '1' });
 
         const { getByText, getByRole, getByLabelText, queryAllByText, queryByText } = render(
             <FeilutbetalingForeldelseProvider behandling={behandling} fagsak={fagsak}>
@@ -192,6 +199,7 @@ describe('Tester: ForeldelseContainer', () => {
                 })
             )
         );
+        expect(mockedNavigate).toHaveBeenCalledWith('/fagsystem/EF/fagsak/1/behandling/1');
     });
 
     test('- vis utfylt', async () => {

diff --git a/src/frontend/komponenter/Fagsak/Høyremeny/Menykontainer.tsx b/src/frontend/komponenter/Fagsak/Høyremeny/Menykontainer.tsx
@@ -40,7 +40,7 @@ const Menykontainer: React.FC<IProps> = ({ valgtMenyside, fagsak, behandling })
             );
         case Menysider.SEND_BREV:
             return (
-                <SendMeldingProvider behandling={behandling}>
+                <SendMeldingProvider behandling={behandling} fagsak={fagsak}>
                     <SendMelding fagsak={fagsak} behandling={behandling} />
                 </SendMeldingProvider>
             );