Saksbehandler innlogget + autentisering for nye javascript klienter (#7965)

* Introduserer InnloggetAnsattContext og RootSuspense.

InnloggetAnsattContext er ein global context som blir initialisert av InnloggetAnsattProvider i AppConfigResolver. Den er ein erstatning for bruken av restApiHooks.useGlobalStateRestApiData(K9sakApiKeys.NAV_ANSATT), og returnerer samme data som det kallet.

Med InnloggetAnsattContext har vi ein måte å få info om innlogga saksbehandler uavhengig av om ein er i k9 eller ung.

Innfører her også bruk av Suspense med RootSuspense. Det er tenkt at anna innhenting av data på toppnivå, feks kodeverkoppslag, featuretoggles og liknande også skal bruke denne på sikt.

* AuthFixApi og relatert kode som kan køyre autentiseringsflyt for backends.

For å (re-)autentisere for kommunikasjon med servere via popup som køyre redirect til innlogging når det trengs legger vi til AuthFixApi og kode som implementerer dette. Dette skal brukast i request og response interceptor for genererte typescript klienter, slik at dei mest mulig automatisk og transparent for bruker kan autentisere klienten for kommunikasjon med server.

* Modernisering av app bootstrapping.

Ta i bruk AuthFixApi i genererte klienter slik at autentiseringsfeil blir fiksa.

Bruk layouts i react router oppsett for felles grunnleggande oppsettskode.

Legg til RootLayout med øverste ErrorBoundary, RootSuspense og andre fellestjenester for grunnleggande app initialisering både for k9 og ung.

Dette oppsett muliggjer bruk av useSuspenseQuery, så ein kan sleppe å manuelt sjekke om data er lasta eller om forespørsel feila over alt i applikasjonskoden.

Tek i bruk dette for å forenkle henting av grunnleggande systemdata som innlogget ansatt og kodeverkoppslag.

* Krympa og tydleggjort AuthFixApi litt.

* Storybook test fix.

* Aktiver prefetch av innlogget ansatt.

Så InnloggetAnsattProvider har data tilgjengeleg raskast mulig.

* Litt betre typing.

* Fjern unødvendig promise handtering.

Trengs ikkje lenger etter at api vart endra.

* Fiks manglande /

Author: josstn

loosely-type-checked-files.json

@@ -339,7 +339,6 @@
   "packages/rest-api/src/requestApi/error/RequestErrorEventHandler.ts",
   "packages/rest-api/src/requestApi/requestApi.spec.ts",
   "packages/rest-api/src/requestApi/requestRunner.spec.ts",
-  "packages/sak-app/src/app/components/Dekorator.tsx",
   "packages/sak-app/src/app/useTrackRouteParam.tsx",
   "packages/sak-app/src/behandling/BehandlingEventHandler.ts",
   "packages/sak-app/src/behandling/BehandlingIndex.tsx",
@@ -381,7 +380,6 @@
   "packages/tidslinje/src/Timeline.tsx",
   "packages/tidslinje/src/components/pleiepenger/Tidslinje.spec.tsx",
   "packages/tidslinje/src/components/pleiepenger/Tidslinje.tsx",
-  "packages/ung/sak-app/app/components/Dekorator.tsx",
   "packages/ung/sak-app/app/useTrackRouteParam.tsx",
   "packages/ung/sak-app/behandling/BehandlingEventHandler.ts",
   "packages/ung/sak-app/behandling/BehandlingIndex.tsx",

packages/sak-app/src/app/AppConfigResolver.tsx

@@ -13,6 +13,8 @@ import { useK9Kodeverkoppslag } from '@k9-sak-web/gui/kodeverk/oppslag/useK9Kode
 import { K9KodeverkoppslagContext } from '@k9-sak-web/gui/kodeverk/oppslag/K9KodeverkoppslagContext.jsx';
 import useGetEnabledApplikasjonContext from './useGetEnabledApplikasjonContext';
 import ApplicationContextPath from './ApplicationContextPath';
+import { InnloggetAnsattProvider } from '@k9-sak-web/gui/saksbehandler/InnloggetAnsattProvider.js';
+import { K9SakInnloggetAnsattBackendClient } from '@k9-sak-web/gui/saksbehandler/K9SakInnloggetAnsattBackendClient.js';
 
 interface OwnProps {
   children: ReactElement<any>;
@@ -56,13 +58,14 @@ const AppConfigResolver = ({ children }: OwnProps) => {
     harHentetFerdigKodeverk &&
     navAnsattState === RestApiState.SUCCESS &&
     sprakFilState === RestApiState.SUCCESS &&
-    !k9KodeverkOppslag.isPending &&
     !!featureToggles; // <- sjekker at feature toggles er lasta
 
   return (
     <FeatureTogglesContext.Provider value={featureToggles ?? prodFeatureToggles}>
       <K9KodeverkoppslagContext value={k9KodeverkOppslag}>
-        {harFeilet || erFerdig ? children : <LoadingPanel />}
+        <InnloggetAnsattProvider api={new K9SakInnloggetAnsattBackendClient()}>
+          {harFeilet || erFerdig ? children : <LoadingPanel />}
+        </InnloggetAnsattProvider>
       </K9KodeverkoppslagContext>
     </FeatureTogglesContext.Provider>
   );

packages/sak-app/src/app/AppIndex.tsx

@@ -4,7 +4,7 @@ import { useLocation } from 'react-router';
 
 import { parseQueryString } from '@fpsak-frontend/utils';
 import ForbiddenPage from '@k9-sak-web/gui/app/feilmeldinger/ForbiddenPage.js';
-import UnauthorizedPage from '@k9-sak-web/gui/app/feilmeldinger/UnauthorizedPage.js';
+import UnauthorizedPage, { k9LoginResourcePath } from '@k9-sak-web/gui/app/feilmeldinger/UnauthorizedPage.js';
 import { useRestApiError, useRestApiErrorDispatcher } from '@k9-sak-web/rest-api-hooks';
 import EventType from '@k9-sak-web/rest-api/src/requestApi/eventType';
 import { NavAnsatt } from '@k9-sak-web/types';
@@ -18,29 +18,24 @@ import Home from './components/Home';
 
 import '@fpsak-frontend/assets/styles/global.css';
 import '@navikt/ds-css/darkside';
-import { Theme } from '@navikt/ds-react/Theme';
 import '@navikt/ft-fakta-beregning/dist/style.css';
 import '@navikt/ft-form-hooks/dist/style.css';
 import '@navikt/ft-plattform-komponenter/dist/style.css';
 import '@navikt/ft-prosess-beregningsgrunnlag/dist/style.css';
 import '@navikt/ft-ui-komponenter/dist/style.css';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { RootSuspense } from '@k9-sak-web/gui/app/root/suspense/RootSuspense.js';
+import { usePrefetchQuery } from '@tanstack/react-query';
+import { kodeverkOppslagQueryOptions } from '@k9-sak-web/gui/kodeverk/oppslag/useK9Kodeverkoppslag.js';
+import { innloggetAnsattQueryOptions } from '@k9-sak-web/gui/saksbehandler/InnloggetAnsattProvider.js';
+import { K9SakInnloggetAnsattBackendClient } from '@k9-sak-web/gui/saksbehandler/K9SakInnloggetAnsattBackendClient.js';
 
 const EMPTY_ARRAY = [];
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-    },
-  },
-});
-
 /**
  * AppIndex
  *
- * Container komponent. Dette er toppkomponenten i applikasjonen. Denne vil rendre header
- * og home-komponentene. Home-komponenten vil rendre barn-komponenter via ruter.
+ * Container komponent. Dette er toppkomponenten i den ytelsespesifikke applikasjonen (felles RootLayout er over her).
+ * Denne vil rendre header og home-komponentene. Home-komponenten vil rendre barn-komponenter via ruter.
  */
 const AppIndex = () => {
   const location = useLocation();
@@ -79,30 +74,32 @@ const AppIndex = () => {
   const hasForbiddenOrUnauthorizedErrors = forbiddenErrors.length > 0 || unauthorizedErrors.length > 0;
   const shouldRenderHome = !hasCrashed && !hasForbiddenOrUnauthorizedErrors;
 
+  // Start forhåndslasting av kodeverk oppslag data
+  usePrefetchQuery(kodeverkOppslagQueryOptions.k9sak);
+  usePrefetchQuery(kodeverkOppslagQueryOptions.k9tilbake(true));
+  usePrefetchQuery(kodeverkOppslagQueryOptions.k9klage(true));
+  // Start forhåndslasting av nav ansatt data
+  usePrefetchQuery(innloggetAnsattQueryOptions(new K9SakInnloggetAnsattBackendClient()));
+
+  // Sjå bootstrap for å sjå kva som er lenger oppe i hierarkiet.
   return (
-    // Ytterste feilgrense viser alltid separat feil-side, fordi viss feil har skjedd i AppConfigResolver eller lenger ute
-    // er det sannsynlegvis så grunnleggande at ingenting vil fungere.
-    <ErrorBoundary>
-      <Theme theme="light">
-        <QueryClientProvider client={queryClient}>
-          <AppConfigResolver>
-            <ErrorBoundary errorMessageCallback={addErrorMessageAndSetAsCrashed} doNotShowErrorPage>
-              <LanguageProvider>
-                <Dekorator
-                  hideErrorMessages={hasForbiddenOrUnauthorizedErrors}
-                  queryStrings={queryStrings}
-                  setSiteHeight={setSiteHeight}
-                  pathname={location.pathname}
-                />
-                {shouldRenderHome && <Home headerHeight={headerHeight} />}
-                {forbiddenErrors.length > 0 && <ForbiddenPage />}
-                {unauthorizedErrors.length > 0 && <UnauthorizedPage />}
-              </LanguageProvider>
-            </ErrorBoundary>
-          </AppConfigResolver>
-        </QueryClientProvider>
-      </Theme>
-    </ErrorBoundary>
+    <RootSuspense heading="Laster grunnleggende systemdata">
+      <AppConfigResolver>
+        <ErrorBoundary errorMessageCallback={addErrorMessageAndSetAsCrashed} doNotShowErrorPage>
+          <LanguageProvider>
+            <Dekorator
+              hideErrorMessages={hasForbiddenOrUnauthorizedErrors}
+              queryStrings={queryStrings}
+              setSiteHeight={setSiteHeight}
+              pathname={location.pathname}
+            />
+            {shouldRenderHome && <Home headerHeight={headerHeight} />}
+            {forbiddenErrors.length > 0 && <ForbiddenPage />}
+            {unauthorizedErrors.length > 0 && <UnauthorizedPage loginUrl={k9LoginResourcePath} />}
+          </LanguageProvider>
+        </ErrorBoundary>
+      </AppConfigResolver>
+    </RootSuspense>
   );
 };
 

packages/sak-app/src/app/RestApiProviderLayout.tsx

@@ -0,0 +1,13 @@
+import { RestApiErrorProvider, RestApiProvider } from '@k9-sak-web/rest-api-hooks';
+import { Outlet } from 'react-router';
+
+/** Denne brukast på tvers av k9 og ung for å tilby globale data frå legacy rest api mekanisme til rutene som treng det */
+export const RestApiProviderLayout = () => {
+  return (
+    <RestApiProvider>
+      <RestApiErrorProvider>
+        <Outlet />
+      </RestApiErrorProvider>
+    </RestApiProvider>
+  );
+};

packages/sak-app/src/app/components/Dekorator.tsx

@@ -2,13 +2,12 @@ import { Feilmelding } from '@k9-sak-web/gui/sak/dekoratør/feilmeldingTsType.js
 import HeaderWithErrorPanel from '@k9-sak-web/gui/sak/dekoratør/HeaderWithErrorPanel.js';
 import { AAREG_URL, AINNTEKT_URL } from '@k9-sak-web/konstanter';
 import { useRestApiError, useRestApiErrorDispatcher } from '@k9-sak-web/rest-api-hooks';
-import { NavAnsatt } from '@k9-sak-web/types';
-import { useMemo } from 'react';
+import { use, useMemo } from 'react';
 import { injectIntl, IntlShape, WrappedComponentProps } from 'react-intl';
-import { K9sakApiKeys, restApiHooks } from '../../data/k9sakApi';
 import ErrorFormatter from '../feilhandtering/ErrorFormatter';
 import ErrorMessage from '../feilhandtering/ErrorMessage';
 import { getPathToK9Los, getPathToK9Punsj } from '../paths';
+import { InnloggetAnsattContext } from '@k9-sak-web/gui/saksbehandler/InnloggetAnsattContext.js';
 
 type QueryStrings = {
   errorcode?: string;
@@ -59,7 +58,7 @@ const Dekorator = ({
   pathname,
   hideErrorMessages = false,
 }: OwnProps & WrappedComponentProps) => {
-  const navAnsatt = restApiHooks.useGlobalStateRestApiData<NavAnsatt>(K9sakApiKeys.NAV_ANSATT);
+  const navAnsatt = use(InnloggetAnsattContext);
   const fagsakFraUrl = pathname.split('/fagsak/')[1]?.split('/')[0];
   const isFagsakFraUrlValid = fagsakFraUrl?.match(/^[a-zA-Z0-9]{1,19}$/);
 

packages/sak-app/src/bootstrap.tsx

@@ -1,14 +1,19 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-import { RestApiErrorProvider, RestApiProvider } from '@k9-sak-web/rest-api-hooks';
 import { init } from '@sentry/browser';
 import * as Sentry from '@sentry/react';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
-import { BrowserRouter, createRoutesFromChildren, matchRoutes, useLocation, useNavigationType } from 'react-router';
+import {
+  BrowserRouter,
+  createRoutesFromChildren,
+  matchRoutes,
+  Route,
+  Routes,
+  useLocation,
+  useNavigationType,
+} from 'react-router';
 
 import { ExtendedApiError } from '@k9-sak-web/backend/shared/errorhandling/ExtendedApiError.js';
-import AppIndex from './app/AppIndex';
 import configureStore from './configureStore';
 import { IS_DEV, VITE_SENTRY_RELEASE } from './constants';
 
@@ -17,6 +22,12 @@ import { AxiosError } from 'axios';
 import { configureK9KlageClient } from '@k9-sak-web/backend/k9klage/configureK9KlageClient.js';
 import { configureK9SakClient } from '@k9-sak-web/backend/k9sak/configureK9SakClient.js';
 import { configureK9TilbakeClient } from '@k9-sak-web/backend/k9tilbake/configureK9TilbakeClient.js';
+import { RootLayout } from '@k9-sak-web/gui/app/root/RootLayout.js';
+import { AuthRedirectDoneWindow, authRedirectDoneWindowPath } from '@k9-sak-web/gui/app/auth/AuthRedirectDoneWindow.js';
+import AppIndex from './app/AppIndex';
+import { RestApiProviderLayout } from './app/RestApiProviderLayout.js';
+import { AuthFixer } from '@k9-sak-web/gui/app/auth/AuthFixer.js';
+import { sequentialAuthFixerSetup } from '@k9-sak-web/gui/app/auth/ThisOrOtherAuthFixer.js';
 
 /* eslint no-undef: "error" */
 const isDevelopment = IS_DEV;
@@ -77,13 +88,22 @@ init({
   },
 });
 
-configureK9SakClient();
-configureK9KlageClient();
-configureK9TilbakeClient();
+const basePath = '/k9/web';
+
+const [sakAuthFixer, klageAuthFixer, tilbakeAuthFixer] = sequentialAuthFixerSetup(
+  new AuthFixer(`${basePath}${authRedirectDoneWindowPath}`),
+  new AuthFixer(`${basePath}${authRedirectDoneWindowPath}`),
+  new AuthFixer(`${basePath}${authRedirectDoneWindowPath}`),
+);
+configureK9SakClient(sakAuthFixer);
+configureK9KlageClient(klageAuthFixer);
+configureK9TilbakeClient(tilbakeAuthFixer);
 
 const store = configureStore();
 
-const renderFunc = async Component => {
+const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);
+
+const renderFunc = () => {
   /**
    * Redirecte til riktig basename om man kommer hit uten
    * Vil kunne forekomme lokalt og i tester
@@ -105,19 +125,29 @@ const renderFunc = async Component => {
     }
   };
 
-  await prepare();
-  const root = createRoot(app);
-  root.render(
-    <Provider store={store}>
-      <BrowserRouter basename="/k9/web">
-        <RestApiProvider>
-          <RestApiErrorProvider>
-            <Component />
-          </RestApiErrorProvider>
-        </RestApiProvider>
-      </BrowserRouter>
-    </Provider>,
-  );
+  const run = () => {
+    const root = createRoot(app);
+    root.render(
+      <Provider store={store}>
+        <BrowserRouter basename={basePath}>
+          <SentryRoutes>
+            <Route element={<RootLayout />}>
+              <Route path={authRedirectDoneWindowPath} element={<AuthRedirectDoneWindow />} />
+              <Route element={<RestApiProviderLayout />}>
+                <Route path="*" element={<AppIndex />} />
+              </Route>
+            </Route>
+          </SentryRoutes>
+        </BrowserRouter>
+      </Provider>,
+    );
+  };
+  prepare()
+    .then(run)
+    .catch(err => {
+      console.error(`bootstrap prepare failed, will start running anyways`, err);
+      run();
+    });
 };
 
-void renderFunc(AppIndex);
+renderFunc();

packages/ung/sak-app/app/AppConfigResolver.tsx

@@ -9,6 +9,8 @@ import { useFeatureToggles } from '@k9-sak-web/gui/featuretoggles/useFeatureTogg
 import { UngSakApiKeys, requestApi, restApiHooks } from '../data/ungsakApi';
 import useHentInitLenker from './useHentInitLenker';
 import useHentKodeverk from './useHentKodeverk';
+import { InnloggetAnsattProvider } from '@k9-sak-web/gui/saksbehandler/InnloggetAnsattProvider.js';
+import { UngSakInnloggetAnsattBackendClient } from '@k9-sak-web/gui/saksbehandler/UngSakInnloggetAnsattBackendClient.js';
 
 interface OwnProps {
   children: ReactElement<any>;
@@ -50,7 +52,9 @@ const AppConfigResolver = ({ children }: OwnProps) => {
 
   return (
     <FeatureTogglesContext.Provider value={featureToggles ?? qFeatureToggles}>
-      {harFeilet || erFerdig ? children : <LoadingPanel />}
+      <InnloggetAnsattProvider api={new UngSakInnloggetAnsattBackendClient()}>
+        {harFeilet || erFerdig ? children : <LoadingPanel />}
+      </InnloggetAnsattProvider>
     </FeatureTogglesContext.Provider>
   );
 };