Testversjonbanner

.env.example

@@ -5,4 +5,5 @@ DEKORATOR_URL=https://dekoratoren.ekstern.dev.nav.no
 MILJO=local
 MIN_SIDE_ARBEIDSGIVER_URL=https://arbeidsgiver.ekstern.dev.nav.no/min-side-arbeidsgiver
 FOREBYGGE_FRAVAR_URL=https://arbeidsgiver.ekstern.dev.nav.no/forebygge-fravar
-GRAFANA_AGENT_COLLECTOR_URL=http://localhost:12347/collect
+GRAFANA_AGENT_COLLECTOR_URL=http://localhost:12347/collect
+PROD_URL=https://arbeidsgiver.nav.no/sykefravarsstatistikk

.github/workflows/build-deploy.yaml

@@ -50,7 +50,7 @@ jobs:
 
   deploy-to-dev-gcp:
     name: Deploy to dev-gcp
-    if: github.ref == 'refs/heads/master'
+    if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/test-versjon-banner'
     needs: docker-build-push
     runs-on: ubuntu-latest
     timeout-minutes: 5

nais/dev-ekstern.yaml

@@ -36,6 +36,8 @@ spec:
           value: https://arbeidsgiver.ekstern.dev.nav.no/min-side-arbeidsgiver
         - name: FOREBYGGE_FRAVAR_URL
           value: https://arbeidsgiver.ekstern.dev.nav.no/forebygge-fravar
+        - name: PROD_URL
+          value: https://arbeidsgiver.nav.no/sykefravarsstatistikk
     accessPolicy:
         outbound:
             external:

public/index.html

@@ -10,7 +10,8 @@
         {
             "MILJØ": "{{MILJO}}",
             "MIN_SIDE_ARBEIDSGIVER_URL": "{{{MIN_SIDE_ARBEIDSGIVER_URL}}}",
-            "GRAFANA_AGENT_COLLECTOR_URL": "{{{GRAFANA_AGENT_COLLECTOR_URL}}}"
+            "GRAFANA_AGENT_COLLECTOR_URL": "{{{GRAFANA_AGENT_COLLECTOR_URL}}}",
+            "PROD_URL": "{{{PROD_URL}}}"
         }
     </script>
     <title>Sykefraværsstatistikk</title>

src/Banner/TestVersjonBanner.module.css

@@ -0,0 +1,5 @@
+.alert {
+    max-width: 60rem;
+    width: 100%;
+    margin: 0 auto 1.5rem auto;
+}

src/Banner/TestVersjonBanner.tsx

@@ -0,0 +1,33 @@
+import { Alert, BodyShort, Heading, Link } from '@navikt/ds-react';
+import styles from './TestVersjonBanner.module.css';
+import { EnvironmentContext } from '../Context/EnvironmentContext';
+import { useContext } from 'react';
+import { MILJØ } from '../konstanter';
+
+const TestVersjonBanner = () => {
+    const { PROD_URL, MILJØ: miljø } = useContext(EnvironmentContext);
+    const erPåDevEllerLocal = miljø === MILJØ.DEV_EKSTERN || miljø === MILJØ.LOCAL;
+
+    const prodUrl =
+        PROD_URL?.length && !PROD_URL.startsWith('{{{') && !PROD_URL.endsWith('}}}')
+            ? PROD_URL
+            : null;
+
+    if (!erPåDevEllerLocal) return null;
+
+    return (
+        <Alert variant="warning" size="medium" className={styles.alert}>
+            <Heading spacing level="2" size="small">
+                Dette er en testversjon
+            </Heading>
+            <BodyShort>
+                Her kan du bli bedre kjent med samtalestøtte for arbeidsgiver.
+                {prodUrl?.length ? (
+                    <Link href={prodUrl}>Klikk her for å gå til den vanlige siden.</Link>
+                ) : null}
+            </BodyShort>
+        </Alert>
+    );
+};
+
+export default TestVersjonBanner;

src/Context/EnvironmentContext.ts

@@ -5,11 +5,15 @@ import { MILJØ } from '../konstanter';
 const notEmptyTemplateString = z
     .string()
     .refine((value) => !value.startsWith('{{') || !value.endsWith('}}'));
+const optionalTemplateString = z.optional(
+    z.string().refine((value) => !value.startsWith('{{') || !value.endsWith('}}'))
+);
 
 const Data = z.object({
     MILJØ: notEmptyTemplateString.refine((value) => isMiljø(value)),
     MIN_SIDE_ARBEIDSGIVER_URL: notEmptyTemplateString,
     GRAFANA_AGENT_COLLECTOR_URL: notEmptyTemplateString,
+    PROD_URL: optionalTemplateString,
 });
 
 type Data = z.infer<typeof Data>;
@@ -25,6 +29,7 @@ const fallbackData: Data = {
     MILJØ: MILJØ.LOCAL,
     MIN_SIDE_ARBEIDSGIVER_URL: '',
     GRAFANA_AGENT_COLLECTOR_URL: '',
+    PROD_URL: 'https://arbeidsgiver.nav.no/sykefravarsstatistikk',
 };
 export const getEnvironmentContext = (): Data => {
     if (typeof document === 'undefined') {

src/Forside/Forside.tsx

@@ -16,6 +16,7 @@ import Tabell, { hentTabellProps } from '../Historikk/Tabell/Tabell';
 import { SlikHarViKommetFramTilDittResultat } from './SlikHarViKommetFramTilDittResultat/SlikHarViKommetFramTilDittResultat';
 import { PeriodeForStatistikk } from './PeriodeForStatistikk';
 import { PubliseringsdatoOppdateringsinfo } from './PubliseringsdatoOppdateringsinfo';
+import TestVersjonBanner from '../Banner/TestVersjonBanner';
 
 export const Forside: FunctionComponent<SykefraværAppData> = (appData) => {
     const orgnr = useOrgnr() || '';
@@ -51,6 +52,7 @@ export const Forside: FunctionComponent<SykefraværAppData> = (appData) => {
         return (
             <div className="forside__wrapper">
                 <div className="forside">
+                    <TestVersjonBanner />
                     <div className="forside__innhold">
                         <div className="forside__innhold__header">
                             <BodyShort className="forside__innhold__href">
@@ -115,6 +117,7 @@ export const Forside: FunctionComponent<SykefraværAppData> = (appData) => {
     return (
         <div className="forside__wrapper">
             <div className="forside">
+                <TestVersjonBanner />
                 <div className="forside__innhold" ref={innholdRef}>
                     {harFeil && (
                         <Alert