legg til ny applikasjons versjon markering

Author: sirimykland

Dockerfile

@@ -2,7 +2,7 @@ FROM europe-north1-docker.pkg.dev/cgr-nav/pull-through/nav.no/node:22-slim
 
 LABEL org.opencontainers.image.source=https://github.com/navikt/fp-frontend
 ENV TZ="Europe/Oslo"
-ENV NODE_ENV production
+ENV NODE_ENV=production
 
 WORKDIR /app
 

apps/fp-frontend/src/app/components/Dekorator.tsx

@@ -19,6 +19,7 @@ import { notEmpty } from '@navikt/fp-utils';
 
 import { initFetchOptions } from '../../data/fagsakApi';
 import { JOURNALFØRING_PATH, UTBETALINGSDATA_PATH } from '../paths';
+import { useAppVersjonDeteksjon } from './useAppVersjonDeteksjon';
 
 type QueryStrings = {
   errorcode?: string;
@@ -43,6 +44,7 @@ export const Dekorator = ({
   setTheme,
 }: Props) => {
   const intl = useIntl();
+  const nyVersjonTilgjengelig = useAppVersjonDeteksjon();
 
   const errorMessages = useRestApiError();
   const { removeErrorMessages } = useRestApiErrorDispatcher();
@@ -54,6 +56,7 @@ export const Dekorator = ({
   const visLos = (e: React.SyntheticEvent) => {
     if (e.type === 'click') {
       void navigate('/');
+      window.location.reload();
     }
     if (e.type === 'contextmenu') {
       globalThis.open('/', '_newtab');
@@ -115,6 +118,7 @@ export const Dekorator = ({
       eksterneLenker={eksterneLenker}
       theme={theme}
       setTheme={setTheme}
+      nyVersjonTilgjengelig={nyVersjonTilgjengelig}
     />
   );
 };

apps/fp-frontend/src/app/components/useAppVersjonDeteksjon.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+
+const POLLING_INTERVAL_MS = 10 * 60 * 1000;
+
+export const useAppVersjonDeteksjon = () => {
+  const [serverVersjon, setServerVersjon] = useState<string | null>(null);
+  const [nyVersjonTilgjengelig, setNyVersjonTilgjengelig] = useState(false);
+
+  const [klientVersjon, setKlientVersjon] = useState<string | null>(null);
+
+  useEffect(() => {
+    const sjekkServerVersjon = async () => {
+      try {
+        const res = await fetch('/version');
+
+        if (res.ok) {
+          const data = (await res.json()) as { app_image?: string };
+
+          if (klientVersjon === null && data.app_image) {
+            setKlientVersjon(data.app_image);
+          }
+          if (data.app_image && data.app_image !== serverVersjon) {
+            setServerVersjon(data.app_image);
+
+            if (klientVersjon && data.app_image !== klientVersjon) {
+              setNyVersjonTilgjengelig(true);
+            }
+          }
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('Feilet med å hente app-versjon:', e);
+      }
+    };
+    void sjekkServerVersjon();
+
+    const interval = setInterval(sjekkServerVersjon, POLLING_INTERVAL_MS);
+    return () => clearInterval(interval);
+  }, [klientVersjon, serverVersjon]);
+
+  return nyVersjonTilgjengelig;
+};

packages/sak/dekorator/i18n/nb_NO.json

@@ -7,5 +7,6 @@
   "DekoratorMedFeilviserSakIndex.Vedtakslosningen": "Vedtaksløsningen",
   "DekoratorMedFeilviserSakIndex.EksternLenke": "Ekstern lenke",
   "DekoratorMedFeilviserSakIndex.EndreTilLysTema": "Endre til lyst tema",
-  "DekoratorMedFeilviserSakIndex.EndreTilMorkTema": "Endre til mørkt tema"
+  "DekoratorMedFeilviserSakIndex.EndreTilMorkTema": "Endre til mørkt tema",
+  "DekoratorMedFeilviserSakIndex.NyVersjon": "Det finnes en ny versjon av applikasjonen. Klikk for å laste siden på nytt."
 }

packages/sak/dekorator/src/DekoratorMedFeilviserSakIndex.tsx

@@ -1,8 +1,8 @@
 import React, { type ComponentProps, useEffect, useRef } from 'react';
 import { FormattedMessage, RawIntlProvider } from 'react-intl';
 
-import { ExternalLinkIcon, MenuGridIcon, MoonIcon, SunIcon } from '@navikt/aksel-icons';
-import { Dropdown, InternalHeader, Link, Spacer, Theme } from '@navikt/ds-react';
+import { ArrowCirclepathIcon, ExternalLinkIcon, MenuGridIcon, MoonIcon, SunIcon } from '@navikt/aksel-icons';
+import { Dropdown, InternalHeader, Link, Spacer, Theme, Tooltip } from '@navikt/ds-react';
 import { createIntl } from '@navikt/ft-utils';
 
 import { FeilmeldingPanel } from './components/FeilmeldingPanel';
@@ -27,6 +27,7 @@ interface Props {
   eksterneLenker: DekoratorLenke[];
   theme: ComponentProps<typeof Theme>['theme'];
   setTheme: (theme: NonNullable<ComponentProps<typeof Theme>['theme']>) => void;
+  nyVersjonTilgjengelig?: boolean;
 }
 
 /**
@@ -48,6 +49,7 @@ export const DekoratorMedFeilviserSakIndex = ({
   eksterneLenker,
   theme,
   setTheme,
+  nyVersjonTilgjengelig,
 }: Props) => {
   const fixedHeaderRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -64,10 +66,17 @@ export const DekoratorMedFeilviserSakIndex = ({
             {tittel}
           </InternalHeader.Title>
           <Spacer />
+          {nyVersjonTilgjengelig && (
+            <InternalHeader.Button>
+              <Tooltip content={intl.formatMessage({ id: 'DekoratorMedFeilviserSakIndex.NyVersjon' })}>
+                <ArrowCirclepathIcon fontSize="1.5rem" color="var(--ax-text-accent-subtle)" />
+              </Tooltip>
+            </InternalHeader.Button>
+          )}
           <Dropdown>
             <InternalHeader.Button as={Dropdown.Toggle}>
               <MenuGridIcon
-                style={{ fontSize: '1.5rem' }}
+                fontSize="1.5rem"
                 title={intl.formatMessage({ id: 'DekoratorMedFeilviserSakIndex.SystemerOgOppslagsverk' })}
               />
             </InternalHeader.Button>

server/src/server.ts

@@ -78,6 +78,19 @@ function startApp() {
   // The routes below require the user to be authenticated
   server.use(verifyToken);
 
+  server.get(["/version"], async (_, res, next) => {
+    try {
+      res.set("Cache-Control", "no-store");
+      res
+        .json({
+          app_image: process.env.NAIS_APP_IMAGE,
+        })
+        .send();
+    } catch (error) {
+      return next(error);
+    }
+  });
+
   server.get(["/logout"], async (req, res) => {
     if (req.headers.authorization) {
       res.redirect("/oauth2/logout");