Merge pull request #1972 from navikt/nav-dekoratoren-moduler-update

Oppdaterer nav-dekoratoren-moduler. Invaliderer render-cache ved ny versjon av dekoratøren.

.github/workflows/deploy.dev2.yml

@@ -24,7 +24,7 @@ jobs:
       ADMIN_ORIGIN: https://portal-admin-q6.oera.no
       APP_ORIGIN: https://www-2.ansatt.dev.nav.no
       REVALIDATOR_PROXY_ORIGIN: http://nav-enonicxp-frontend-revalidator-proxy-dev2
-      DECORATOR_URL: https://dekoratoren.ekstern.dev.nav.no
+      DECORATOR_URL: https://dekoratoren-beta.intern.dev.nav.no
       XP_ORIGIN: https://www-q6.nav.no
       TELEMETRY_URL: https://telemetry.ekstern.dev.nav.no/collect
       INNLOGGINGSSTATUS_URL: https://www.ekstern.dev.nav.no/person/nav-dekoratoren-api/auth

.nais/vars/vars-dev2.yml

@@ -4,6 +4,7 @@ dekoratorenApp: nav-dekoratoren-beta
 externalHosts:
   - www-q6.nav.no
   - www-2-failover.intern.dev.nav.no
+  - dekoratoren-beta.intern.dev.nav.no
 secret: nav-enonicxp-dev2
 ingresses:
   - https://www-2.ansatt.dev.nav.no

next.config.js

@@ -279,10 +279,6 @@ const config = {
         {
             source: '/:path*',
             headers: [
-                {
-                    key: 'app-name',
-                    value: 'nav-enonicxp-frontend',
-                },
                 {
                     key: 'Content-Security-Policy',
                     value: await csp(),

package.json

@@ -42,7 +42,7 @@
         "@navikt/ds-css": "6.13.0",
         "@navikt/ds-react": "6.13.0",
         "@navikt/ds-tokens": "6.13.0",
-        "@navikt/nav-dekoratoren-moduler": "2.1.6",
+        "@navikt/nav-dekoratoren-moduler": "3.0.0-beta.4",
         "@navikt/nav-office-reception-info": "1.0.6",
         "@reduxjs/toolkit": "2.2.6",
         "csp-header": "5.2.1",

server/jest.config.mjs

@@ -8,6 +8,7 @@ export default {
         "^.+\\.tsx?$": "ts-jest"
     },
     "moduleNameMapper": {
-        "srcCommon/(.*)": "<rootDir>/../srcCommon/$1"
+        "srcCommon/(.*)": "<rootDir>/../srcCommon/$1",
+        "cache/(.*)": "<rootDir>/src/cache/$1"
     },
 };

server/src/cache/revalidator-proxy-heartbeat.test.ts

@@ -14,7 +14,7 @@ describe('Revalidator proxy heartbeat', () => {
 
         fetchMock.mockResponse('Hello!');
 
-        initRevalidatorProxyHeartbeat('dummy-build-id');
+        initRevalidatorProxyHeartbeat();
 
         expect(fetchMock.mock.calls.length).toEqual(1);
         expect(fetchMock.mock.calls[0][0]).toMatch(new RegExp(`^${revalidatorProxyOrigin}`));

server/src/cache/revalidator-proxy-heartbeat.ts

@@ -3,8 +3,8 @@
 // See: https://github.com/navikt/nav-enonicxp-frontend-revalidator-proxy
 import { networkInterfaces } from 'os';
 import { logger } from 'srcCommon/logger';
-import { getRenderCacheKeyPrefix, getResponseCacheKeyPrefix } from 'srcCommon/redis';
 import { objectToQueryString } from 'srcCommon/fetch-utils';
+import { redisCache } from 'cache/page-cache-handler';
 
 const { ENV, NODE_ENV, DOCKER_HOST_ADDRESS, REVALIDATOR_PROXY_ORIGIN, SERVICE_SECRET } =
     process.env;
@@ -22,31 +22,26 @@ const getPodAddress = () => {
     const podAddress = nets?.eth0?.[0]?.address;
 
     if (!podAddress) {
-        logger.error(
-            'Error: pod IP address could not be determined' +
-                ' - Event driven cache regeneration will not be active for this instance'
-        );
+        logger.error('Error: pod IP address could not be determined!');
         return null;
     }
 
     return podAddress;
 };
 
-const getProxyLivenessUrl = (buildId: string) => {
+const getProxyLivenessUrl = () => {
     const podAddress = getPodAddress();
     return podAddress
         ? `${REVALIDATOR_PROXY_ORIGIN}/liveness${objectToQueryString({
               address: podAddress,
-              redisPrefixes: [getRenderCacheKeyPrefix(buildId), getResponseCacheKeyPrefix()].join(
-                  ','
-              ),
+              redisPrefixes: redisCache.getKeyPrefixes().join(','),
           })}`
         : null;
 };
 
 let didStart = false;
 
-export const initRevalidatorProxyHeartbeat = (buildId: string) => {
+export const initRevalidatorProxyHeartbeat = () => {
     if (NODE_ENV === 'development') {
         return;
     }
@@ -56,16 +51,17 @@ export const initRevalidatorProxyHeartbeat = (buildId: string) => {
         return;
     }
 
-    const url = getProxyLivenessUrl(buildId);
-    if (!url) {
-        return;
-    }
-
     didStart = true;
 
     logger.info('Starting heartbeat loop');
 
     const heartbeatFunc = () => {
+        const url = getProxyLivenessUrl();
+        if (!url) {
+            logger.error('Failed to determine revalidator heartbeat url!');
+            return;
+        }
+
         fetch(url, {
             headers: { secret: SERVICE_SECRET },
         }).catch((e) => logger.error(`Failed to send heartbeat signal - ${e}`));

server/src/server-setup/server-setup-dev.ts

@@ -1,6 +1,5 @@
 import { Express } from 'express';
 import { NextServer } from 'next/dist/server/next';
-import { logger } from 'srcCommon/logger';
 
 const DEV_NAIS_DOMAIN = 'ansatt.dev.nav.no';
 const APP_ORIGIN = process.env.APP_ORIGIN;
@@ -26,7 +25,6 @@ export const serverSetupDev = (expressApp: Express, nextApp: NextServer) => {
     if (APP_ORIGIN.endsWith(DEV_NAIS_DOMAIN)) {
         expressApp.all('*', (req, res, next) => {
             if (!req.hostname.endsWith(DEV_NAIS_DOMAIN)) {
-                logger.info('Redirecting!');
                 return res.redirect(302, `${APP_ORIGIN}${req.path}`);
             }
 

server/src/server-setup/server-setup.ts

@@ -9,7 +9,12 @@ import { handleInvalidateAllReq } from 'req-handlers/invalidate-all';
 import { handleGetPendingResponses } from 'req-handlers/pending-responses';
 import { serverSetupDev } from 'server-setup/server-setup-dev';
 import { logger } from 'srcCommon/logger';
-import { redisCache } from 'cache/page-cache-handler';
+import PageCacheHandler, { redisCache } from 'cache/page-cache-handler';
+import {
+    addDecoratorUpdateListener,
+    getDecoratorVersionId,
+} from '@navikt/nav-dekoratoren-moduler/ssr';
+import { decoratorEnvProps } from 'srcCommon/decorator-utils-serverside';
 
 // Set the no-cache header on json files from the incremental cache to ensure
 // data requested during client side navigation is always validated if cached
@@ -29,7 +34,18 @@ export const serverSetup = async (expressApp: Express, nextApp: NextServer) => {
     const nextServer = await getNextServer(nextApp);
     const currentBuildId = getNextBuildId(nextServer);
 
-    await redisCache.init(currentBuildId);
+    const decoratorVersionId = await getDecoratorVersionId(decoratorEnvProps);
+    if (!decoratorVersionId) {
+        logger.error('Failed to fetch decorator version id!');
+    }
+
+    await redisCache.init(currentBuildId, decoratorVersionId);
+
+    addDecoratorUpdateListener(decoratorEnvProps, (versionId) => {
+        logger.info(`New decorator version: ${versionId} - clearing render caches`);
+        redisCache.updateRenderCacheKeyPrefix(versionId);
+        new PageCacheHandler().clear();
+    });
 
     logger.info(`Current build id: ${currentBuildId}`);
 

server/src/server.ts

@@ -5,7 +5,7 @@ import promBundle from 'express-prom-bundle';
 import { initRevalidatorProxyHeartbeat } from 'cache/revalidator-proxy-heartbeat';
 import { serverSetupFailover } from 'server-setup/server-setup-failover';
 import { serverSetup } from 'server-setup/server-setup';
-import { getNextBuildId, getNextServer } from 'next-utils';
+import { getNextServer } from 'next-utils';
 import { logger } from 'srcCommon/logger';
 import path from 'path';
 import { injectNextImageCacheDir } from 'cache/image-cache-handler';
@@ -47,6 +47,11 @@ nextApp.prepare().then(async () => {
         next();
     });
 
+    expressApp.all('*', (req, res, next) => {
+        res.setHeader('app-name', 'nav-enonicxp-frontend');
+        next();
+    });
+
     if (isFailover) {
         serverSetupFailover(expressApp, nextApp);
     } else {
@@ -78,8 +83,7 @@ nextApp.prepare().then(async () => {
         }
 
         if (!isFailover) {
-            const buildId = getNextBuildId(nextServer);
-            initRevalidatorProxyHeartbeat(buildId);
+            initRevalidatorProxyHeartbeat();
         }
 
         logger.info(`Server started on port ${port}`);

src/components/PageWrapper.tsx

@@ -4,7 +4,7 @@ import { onBreadcrumbClick, onLanguageSelect, setParams } from '@navikt/nav-deko
 import { ContentProps } from 'types/content-props/_content-common';
 import { hookAndInterceptInternalLink, prefetchOnMouseover } from 'utils/links';
 import { hasWhiteHeader, hasWhitePage } from 'utils/appearance';
-import { getDecoratorParams } from 'utils/decorator/decorator-utils';
+import { getDecoratorParams } from 'utils/decorator-utils';
 import { getInternalRelativePath } from 'utils/urls';
 import { store } from 'store/store';
 import { fetchAndSetInnloggingsstatus } from 'utils/fetch/fetch-innloggingsstatus';

src/components/_common/metatags/DocumentParameterMetatags.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Head from 'next/head';
 import { ContentProps } from 'types/content-props/_content-common';
-import { getDecoratorParams } from 'utils/decorator/decorator-utils';
+import { getDecoratorParams } from 'utils/decorator-utils';
 import { isLegacyContentType } from 'utils/content-types';
 
 type Props = {

src/pages/_document.tsx

@@ -4,7 +4,7 @@ import { DocumentInitialProps } from 'next/dist/pages/_document';
 import { DecoratorComponents } from '@navikt/nav-dekoratoren-moduler/ssr';
 import { Language } from 'translations';
 import { DocumentParameter } from 'components/_common/metatags/DocumentParameterMetatags';
-import { getDecoratorComponents } from 'utils/decorator/decorator-utils-serverside';
+import { getDecoratorComponents } from 'srcCommon/decorator-utils-serverside';
 
 type DocumentProps = {
     language: Language;
@@ -57,7 +57,14 @@ class MyDocument extends Document<DocumentProps> {
 
         return (
             <Html lang={language || 'no'}>
-                <Head>{Decorator && <Decorator.Styles />}</Head>
+                <Head>
+                    {Decorator && (
+                        <>
+                            <Decorator.Styles />
+                            <Decorator.HeadAssets />
+                        </>
+                    )}
+                </Head>
                 <body className={isLegacyContentType ? 'legacyContentType' : undefined}>
                     {Decorator && <Decorator.Header />}
                     <Main />

src/utils/decorator/decorator-utils.ts → src/utils/decorator-utils.ts

@@ -1,11 +1,11 @@
 import { DecoratorParams } from '@navikt/nav-dekoratoren-moduler';
 import { Language } from 'translations';
-import { getContentLanguages } from 'utils/languages';
 import { ContentProps, ContentType } from 'types/content-props/_content-common';
 import { LanguageProps } from 'types/language';
-import { stripXpPathPrefix } from 'utils/urls';
 import { Audience, getAudience } from 'types/component-props/_mixins';
-import { hasWhiteHeader } from 'utils/appearance';
+import { stripXpPathPrefix } from './urls';
+import { getContentLanguages } from './languages';
+import { hasWhiteHeader } from './appearance';
 
 const defaultLanguage: DecoratorParams['language'] = 'nb';
 

src/utils/fetch/fetch-content.ts

@@ -26,7 +26,7 @@ const getXpCacheKey =
           })
         : () => ({});
 
-const redisCache = await new RedisCache().init(process.env.BUILD_ID);
+const redisCache = await new RedisCache().init(process.env.BUILD_ID, '');
 
 const fetchConfig = {
     headers: {

src/utils/decorator/decorator-utils-serverside.ts → srcCommon/decorator-utils-serverside.ts

@@ -1,9 +1,9 @@
 import {
+    fetchDecoratorReact,
     DecoratorEnvProps,
     DecoratorFetchProps,
-    fetchDecoratorReact,
+    DecoratorParams,
 } from '@navikt/nav-dekoratoren-moduler/ssr';
-import { DecoratorParams } from '@navikt/nav-dekoratoren-moduler';
 
 type AppEnv = typeof process.env.ENV;
 type DecoratorEnv = DecoratorEnvProps['env'];
@@ -17,7 +17,7 @@ const envMap: Record<AppEnv, DecoratorEnv> = {
 
 const decoratorEnv = envMap[process.env.ENV] || 'prod';
 
-const envProps: DecoratorFetchProps = {
+export const decoratorEnvProps: DecoratorFetchProps = {
     noCache: process.env.DECORATOR_NOCACHE === 'true',
     ...(decoratorEnv === 'localhost'
         ? { env: 'localhost', localUrl: process.env.DECORATOR_URL }
@@ -26,7 +26,7 @@ const envProps: DecoratorFetchProps = {
 
 export const getDecoratorComponents = async (params?: DecoratorParams) => {
     const decoratorComponents = fetchDecoratorReact({
-        ...envProps,
+        ...decoratorEnvProps,
         params,
     });