🚀 Dont use fnr in path (#474)

* WIP: Dont use fnr in path

* Hardcode basename for internflate

* Reset url when switching tab to dialog or aktivitetsplan

* Redirect to base if no dialog

* Add redirect to dialog without fnr

* Use link to aktivitetsplan without fnr

* Fix link when aktivitetsplan-url is not set

* Use correct fallback operator

* Cleanup

* Fix cache invalidation option name

* Fix redirect for /ny

* Use no-cache from nais-action

* Split redirects into separate components

* Test cdn-no-cache-paths

* don't use nais action no-cache argument

* fix ny redirect queryPart

---------

Co-authored-by: Hans Petter Simonsen <[email protected]>
Co-authored-by: johannetronstad <[email protected]>

.github/workflows/deploy-intern.yml

@@ -43,7 +43,7 @@ jobs:
           cdn-team-name: dab
           source: ./build/
           destination: /${{ inputs.bucket }}/
-          cache-invalidate: true
+          cache-invalidation: true
       - name: Setup gcloud
         uses: google-github-actions/setup-gcloud@v0
       - name: Set Cache policy no-store for asset-manifest

src/App.tsx

@@ -2,8 +2,8 @@ import path from 'path';
 
 import cx from 'classnames';
 import React from 'react';
-import { RouterProvider } from 'react-router';
-import { createBrowserRouter, createHashRouter } from 'react-router-dom';
+import { Navigate, RouterProvider, useParams } from 'react-router';
+import { createBrowserRouter, createHashRouter, useSearchParams } from 'react-router-dom';
 
 import { stripTrailingSlash } from './api/UseApiBasePath';
 import { USE_HASH_ROUTER, erInternFlate } from './constants';
@@ -13,14 +13,27 @@ import AppBody from './view/AppBody';
 import Dialog from './view/dialog/Dialog';
 import DialogInfoMelding from './view/dialog/DialogInfoMelding';
 import NyDialog from './view/dialog/NyDialog';
-import { Provider, useFnrContext } from './view/Provider';
+import { Provider } from './view/Provider';
 import StatusAdvarsel from './view/statusAdvarsel/StatusAdvarsel';
 
 interface Props {
     fnr?: string;
     enhet?: string;
 }
 
+const RedirectToDialogWithoutFnr = () => {
+    // /:fnr/:dialogId -> /:dialogId
+    const params = useParams();
+    return <Navigate replace to={`/` + params.dialogId} />;
+};
+const RedirectToNyDialogWithoutFnr = () => {
+    // Handle route /:fnr/ny?aktivitetId=<id> -> /ny?aktivitetId=<id>
+    const [queryParams, _] = useSearchParams();
+    const aktivitetId = queryParams.get('aktivitetId');
+    const queryPart = aktivitetId ? '?aktivitetId=' + aktivitetId : '';
+    return <Navigate replace to={`/ny${queryPart}`} />;
+};
+
 const dialogRoutes = [
     {
         path: '/',
@@ -47,19 +60,26 @@ const dialogRoutes = [
             {
                 path: '',
                 element: <DialogInfoMelding />
+            },
+            {
+                path: ':fnr/ny',
+                element: <RedirectToNyDialogWithoutFnr />
+            },
+            {
+                path: ':fnr/:dialogId',
+                element: <RedirectToDialogWithoutFnr />
             }
         ]
     }
 ];
 
 const Routes = () => {
-    const fnr = useFnrContext();
     if (USE_HASH_ROUTER) {
         const hashRouter = createHashRouter(dialogRoutes);
         return <RouterProvider router={hashRouter} />;
     }
-    let basename = stripTrailingSlash(import.meta.env.BASE_URL + (fnr ?? ''));
-    if (erInternFlate) basename = `/${fnr}`;
+    let basename = stripTrailingSlash(import.meta.env.BASE_URL);
+    if (erInternFlate) basename = `/`;
     const browserRouter = createBrowserRouter(dialogRoutes, { basename });
     return <RouterProvider router={browserRouter} />;
 };

src/view/aktivitet/AktivitetskortLenke.tsx

@@ -1,17 +1,13 @@
-import React, { MouseEvent } from 'react';
+import { MouseEvent } from 'react';
 
 import { AKTIVITETSPLAN_URL } from '../../constants';
-import { getContextPath } from '../utils/utils';
 
 export const aktivitetLenke = (aktivitetId: string) => {
-    return `${AKTIVITETSPLAN_URL}/aktivitet/vis/${aktivitetId}`;
+    return `${AKTIVITETSPLAN_URL || ''}/aktivitet/vis/${aktivitetId}`;
 };
 
-export const visAktivitetsplan = (aktivitetID: string, fnrContext?: string) => (event: MouseEvent) => {
-    if (!fnrContext) {
-        return;
-    }
+export const visAktivitetsplan = (aktivitetID: string) => (event: MouseEvent) => {
     event.preventDefault();
-    window.history.replaceState({}, 'aktivitetsplan', `${getContextPath()}/${fnrContext}/aktivitet/vis/${aktivitetID}`);
+    window.history.replaceState({}, 'aktivitetsplan', `/aktivitet/vis/${aktivitetID}`);
     window.dispatchEvent(new CustomEvent('visAktivitetsplan', { detail: aktivitetID }));
 };

src/view/aktivitet/DialogMedAktivitetHeader.tsx

@@ -16,7 +16,6 @@ interface Props {
 
 export function DialogMedAktivitetHeader(props: Props) {
     const aktivitet = useSelectedAktivitet();
-    const fnr = useFnrContext();
 
     if (!aktivitet) {
         return null;
@@ -39,7 +38,7 @@ export function DialogMedAktivitetHeader(props: Props) {
             <div className="flex-1 md:max-w-[320px] xl:max-w-screen-w-1/3">
                 <div className="mt-2 flex flex-row items-center justify-between px-2 md:mt-0 md:flex-col md:items-end lg:items-start lg:pl-4">
                     <Detail aria-hidden="true">{typeTekst.toUpperCase()}</Detail>
-                    <Link href={aktivitetLenke(aktivitet.id)} onClick={visAktivitetsplan(aktivitet.id, fnr)}>
+                    <Link href={aktivitetLenke(aktivitet.id)} onClick={visAktivitetsplan(aktivitet.id)}>
                         Gå til aktiviteten
                     </Link>
                 </div>

src/view/dialog/Dialog.tsx

@@ -1,6 +1,9 @@
+import { Loader } from '@navikt/ds-react';
 import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
 
+import { useRoutes } from '../../routes';
 import { UpdateTypes, dispatchUpdate } from '../../utils/UpdateEvent';
 import useKansendeMelding from '../../utils/UseKanSendeMelding';
 import { useUserInfoContext } from '../BrukerProvider';
@@ -14,7 +17,6 @@ import { endreDialogSomVises } from '../ViewState';
 import ManagedDialogCheckboxes from './DialogCheckboxes';
 import DialogInputBoxVisible from './henvendelseInput/MeldingInputBox';
 import HistoriskInfo from './HistoriskInfo';
-import { IngenDialog } from './IngenDialog';
 
 export function Dialog() {
     const oppfolgingContext = useOppfolgingContext();
@@ -63,8 +65,11 @@ export function Dialog() {
         }
     }, [dialogId, lest, activeTab, activePersonflateTab, lesDialog]);
 
+    const routes = useRoutes();
+    const navigate = useNavigate();
     if (!valgtDialog) {
-        return <IngenDialog />;
+        navigate(routes.baseRoute(), { replace: true });
+        return <Loader />;
     }
 
     const aktivDialog = !valgtDialog.historisk;

src/view/utils/utils.ts

@@ -21,10 +21,6 @@ export const settSammenmedSlasher = (...ss: Array<string | undefined>): string =
     else return '';
 };
 
-const erGCP = (): boolean => window.location.hostname.endsWith('intern.nav.no');
-
-export const getContextPath = (): string => (erGCP() ? '' : '/veilarbpersonflatefs');
-
 export const getAktivitetType = (aktivitet: Aktivitet | ArenaAktivitet): AlleAktivitetTypes => {
     if (aktivitet.type === AktivitetTypes.EKSTERN_AKTIVITET) {
         return aktivitet.eksternAktivitet!!.type;