Merge pull request #2200 from navikt/react-18

[TPO-31] Oppgrader til react 18

.github/workflows/gcp.yaml

@@ -20,10 +20,13 @@ jobs:
             - uses: actions/checkout@v4
             - uses: actions/setup-node@v4
               with:
-                  node-version: '18'
+                  node-version: '20'
                   cache: 'npm'
+                  registry-url: https://npm.pkg.github.com
             - name: Install dependencies
               run: npm ci
+              env:
+                NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
             - name: Test
               run: npm run test
             - name: Build

.github/workflows/gh-pages.yml

@@ -20,9 +20,12 @@ jobs:
               uses: actions/checkout@v4
             - uses: actions/setup-node@v4
               with:
-                  node-version: '18'
+                  node-version: '20'
+                  registry-url: https://npm.pkg.github.com
             - name: Install dependencies
               run: npm ci
+              env:
+                NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
             - name: Switch to gh-dev build
               run: |
                   echo 'VITE_USE_HASH_ROUTER=true' >> .env.development

.github/workflows/main.yml

@@ -20,10 +20,13 @@ jobs:
             - uses: actions/checkout@v4
             - uses: actions/setup-node@v4
               with:
-                  node-version: '18'
+                  node-version: '20'
                   cache: 'npm'
+                  registry-url: https://npm.pkg.github.com
             - name: Install dependencies
               run: npm ci
+              env:
+                NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
             - name: Lint
               run: npm run lint
             - name: Test

package.json

@@ -39,15 +39,15 @@
     },
     "dependencies": {
         "@amplitude/analytics-browser": "^2.5.3",
-        "@navikt/aksel-icons": "^6.10.1",
-        "@navikt/ds-css": "^6.10.1",
         "@grafana/faro-react": "^1.7.3",
         "@grafana/faro-web-sdk": "^1.7.3",
         "@grafana/faro-web-tracing": "^1.7.3",
+        "@navikt/aksel-icons": "^6.11.0",
+        "@navikt/ds-css": "^6.11.0",
         "@navikt/fnrvalidator": "^1.1.3",
-        "@navikt/navspa": "^4.0.0",
+        "@navikt/navspa": "^6.1.0",
         "@navikt/tag-input": "^2.0.1",
-        "@navikt/textparser": "^2.3.0",
+        "@navikt/textparser": "^2.4.0",
         "@tanstack/react-query": "^4.12.0",
         "@vitejs/plugin-react": "^4.2.1",
         "classnames": "^2.2.6",
@@ -100,43 +100,42 @@
         "nav-frontend-tekstomrade": "^2.1.1",
         "nav-frontend-typografi": "^3.1.1",
         "nav-frontend-typografi-style": "^1.0.22",
+        "react": "^18.3.1",
         "react-day-picker": "^7.3.2",
-        "react-dom": "^17.0.2",
+        "react-dom": "^18.3.1",
         "react-hook-form": "^7.39.0",
-        "react-modal": "^3.11.2",
+        "react-modal": "^3.16.1",
         "react-redux": "^7.2.0",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
         "redux": "^4.0.5",
         "redux-thunk": "^2.3.0",
-        "styled-components": "^5.1.1",
+        "styled-components": "^6.1.11",
         "vite": "^5.2.10",
         "vite-plugin-svgr": "^4.2.0"
     },
     "devDependencies": {
         "@eslint/js": "^9.3.0",
-        "@testing-library/react-hooks": "^2.0.1",
+        "@testing-library/jest-dom": "^6.4.6",
+        "@testing-library/react": "^16.0.0",
+        "@testing-library/user-event": "^14.5.2",
         "@types/classnames": "^2.2.10",
         "@types/detect-browser": "^2.0.1",
-        "@types/enzyme": "^3.9.3",
         "@types/eslint__js": "^8.42.3",
         "@types/faker": "^4.1.2",
         "@types/lodash.debounce": "^4.0.6",
         "@types/md5": "^2.1.33",
         "@types/node": "^18.0.0",
-        "@types/prop-types": "^15.5.3",
-        "@types/react": "^16.9.41",
+        "@types/prop-types": "^15.7.12",
+        "@types/react": "^18.3.3",
         "@types/react-collapse": "^5.0.0",
-        "@types/react-dom": "^16.9.8",
-        "@types/react-modal": "^3.10.6",
+        "@types/react-dom": "^18.3.0",
+        "@types/react-modal": "^3.16.3",
         "@types/react-redux": "^7.1.9",
         "@types/react-router": "5.1.2",
         "@types/react-router-dom": "^5.1.0",
-        "@types/react-test-renderer": "^16.8.2",
-        "@types/styled-components": "5.1.0",
-        "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
+        "@types/react-test-renderer": "^18.3.0",
         "cross-env": "^7.0.3",
-        "enzyme": "^3.10.0",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.1.3",
@@ -149,16 +148,26 @@
         "nav-faker": "^3.2.3",
         "prettier": "^3.2.5",
         "prop-types": "^15.7.2",
-        "react": "^17.0.2",
-        "react-collapse": "^5.0.1",
-        "react-test-renderer": "^16.8.6",
+        "react-collapse": "^5.1.1",
+        "react-test-renderer": "^18.3.1",
         "redux-devtools-extension": "^2.13.8",
         "typescript": "^5.4.5",
         "typescript-eslint": "^7.11.0",
         "vite-require": "^0.2.3",
         "vitest": "^1.5.2",
         "yet-another-fetch-mock": "^4.0.0"
     },
+    "overrides": {
+        "nav-frontend-js-utils": {
+            "react": "$react"
+        },
+        "@navikt/tag-input": {
+            "react": "$react"
+        },
+        "connected-react-router": {
+            "react": "$react"
+        }
+    },
     "browserslist": {
         "production": [
             ">0.2%",

src/app/App.test.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import AppContainer from './AppContainer';
 
 it('renders without crashing', () => {
     const div = document.createElement('div');
     div.id = 'root';
     document.body.appendChild(div);
-
-    ReactDOM.render(<AppContainer />, div);
+    const root = createRoot(div);
+    root.render(<AppContainer />);
 });

src/app/LoggetUtModal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import RawModal from 'nav-frontend-modal';
 import { Systemtittel, Normaltekst } from 'nav-frontend-typografi';
 import AdvarselIkon from 'nav-frontend-ikoner-assets/assets/advarsel-sirkel-fyll.svg';

src/app/VelgEnhet.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ChangeEvent, useEffect } from 'react';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { Select } from 'nav-frontend-skjema';
 import theme from '../styles/personOversiktTheme';
 import saksbehandlersEnheter from '../rest/resources/saksbehandlersEnheterResource';

src/app/brukerprofil/BrukeprofilSide.test.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import BrukerprofilSide from './BrukerprofilSide';
 import TestProvider from '../../test/Testprovider';
 
 test('Smoketeste brukerprofil', () => {
-    const brukerprofil = mount(
+    const { container } = render(
         <TestProvider>
             <BrukerprofilSide />
         </TestProvider>
     );
 
-    expect(brukerprofil).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
 });

src/app/brukerprofil/BrukerprofilSide.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { loggEvent } from '../../utils/logger/frontendLogger';
 import { useOnMount } from '../../utils/customHooks';
 import { AlertStripeInfo } from 'nav-frontend-alertstriper';

src/app/brukerprofil/__snapshots__/BrukeprofilSide.test.tsx.snap

@@ -1,3 +1,71 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Smoketeste brukerprofil 1`] = `ReactWrapper {}`;
+exports[`Smoketeste brukerprofil 1`] = `
+.c0 {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.c0 >*:first-child {
+  margin-bottom: 1rem;
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    <div
+      class="alertstripe alertstripe--info"
+    >
+      <span
+        class="alertstripe__ikon"
+      >
+        <span
+          class="sr-only"
+        >
+          info
+        </span>
+        <svg
+          aria-label="info-ikon"
+          focusable="false"
+          height="1.5em"
+          kind="info-sirkel-fyll"
+          role="img"
+          viewBox="0 0 24 24"
+          width="1.5em"
+        >
+          <g
+            fill="none"
+          >
+            <path
+              d="M12 0C5.382 0 0 5.382 0 12s5.382 12 12 12c6.617 0 12-5.382 12-12S18.617 0 12 0z"
+              fill="#337C9B"
+            />
+            <path
+              d="M12 5a1.566 1.566 0 1 1 .11 3.13A1.566 1.566 0 0 1 12 5zm2.976 12.01c.563 0 1.043.431 1.043.991s-.48.992-1.043.992H9.39c-.564 0-1.043-.431-1.043-.992 0-.56.479-.99 1.043-.99h1.6v-5.016h-.986c-.565 0-1.044-.43-1.044-.991 0-.56.48-.991 1.044-.991h2.03c.563 0 1.043.43 1.043.99v6.007h1.899z"
+              fill="#FFF"
+            />
+          </g>
+        </svg>
+      </span>
+      <div
+        class="typo-normal alertstripe__tekst"
+      >
+        Redigering av brukerprofil er flyttet
+      </div>
+    </div>
+    <a
+      class="lenkepanel"
+      href=""
+    >
+      Gå til den nye personforvalteren
+      <span
+        class="lenkepanel__indikator"
+      />
+    </a>
+  </div>
+</div>
+`;

src/app/innstillinger/cogknapp.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import SvgCog from './../../svg/cog.svg';
 import { KnappWrapper } from '../../components/pilknapp';
 import InnstillingerModal from './modal/InnstillingerModal';

src/app/innstillinger/modal/InnstillingerModal.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Modal from 'nav-frontend-modal';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { Systemtittel } from 'nav-frontend-typografi';
 import InnstillingerModalInnhold from './InnstillingerModalInnhold';
 

src/app/innstillinger/modal/InnstillingerModalForm.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { AlertStripeFeil } from 'nav-frontend-alertstriper';
 import { Undertekst } from 'nav-frontend-typografi';
 import { Hovedknapp } from 'nav-frontend-knapper';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import innstillingerResource, {
     Innstillinger,
     SaksbehandlerInnstillinger

src/app/innstillinger/modal/InnstillingerModalInnhold.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { AlertStripeFeil } from 'nav-frontend-alertstriper';
 import { Normaltekst, Undertekst } from 'nav-frontend-typografi';
 import Spinner from 'nav-frontend-spinner';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import InnstillingerModalForm from './InnstillingerModalForm';
 import innstillingerResource from '../../../rest/resources/innstillingerResource';
 

src/app/internarbeidsflatedecorator/Decorator.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import NAVSPA from '@navikt/navspa';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { DecoratorPropsV3 } from './decoratorprops';
 import PersonsokContainer from '../personsok/Personsok';
 import DecoratorEasterEgg from './EasterEggs/DecoratorEasterEgg';

src/app/internarbeidsflatedecorator/EasterEggs/nisselue/Nisselue.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import nisselue from './nisselue.svg';
-import styled, { css, keyframes } from 'styled-components/macro';
+import styled, { css, keyframes } from 'styled-components';
 import Sno from './Sno';
 
 const dropDown = keyframes`

src/app/internarbeidsflatedecorator/EasterEggs/nisselue/Sno.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled, { keyframes } from 'styled-components/macro';
+import styled, { keyframes } from 'styled-components';
 import { useOnMount } from '../../../../utils/customHooks';
 import { loggEvent } from '../../../../utils/logger/frontendLogger';
 

src/app/internarbeidsflatedecorator/EasterEggs/partyhatt/Fireworks.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled, { keyframes } from 'styled-components/macro';
+import styled, { keyframes } from 'styled-components';
 import { useOnMount } from '../../../../utils/customHooks';
 import { loggEvent } from '../../../../utils/logger/frontendLogger';
 

src/app/internarbeidsflatedecorator/EasterEggs/partyhatt/Partyhatt.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
 import partyhatt from './partyhatt.svg';
-import styled, { createGlobalStyle, css, keyframes } from 'styled-components/macro';
+import styled, { createGlobalStyle, css, keyframes } from 'styled-components';
 import { pxToRem } from '../../../../styles/personOversiktTheme';
 import Fireworks from './Fireworks';
 

src/app/internarbeidsflatedecorator/EasterEggs/paskeegg/Chick.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled, { keyframes } from 'styled-components/macro';
+import styled, { keyframes } from 'styled-components';
 import chickIcon from './chickIcon.svg';
 import { useOnMount } from '../../../../utils/customHooks';
 import { loggEvent } from '../../../../utils/logger/frontendLogger';

src/app/internarbeidsflatedecorator/EasterEggs/paskeegg/PaaskeEgg.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import easterEgg from './paaskeegg.svg';
-import styled, { css, keyframes } from 'styled-components/macro';
+import styled, { css, keyframes } from 'styled-components';
 import Chick from './Chick';
 
 const rollIn = keyframes`

src/app/oppdateringslogg/EnkeltOppdateringslogg.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { OppdateringsloggInnslag } from './OppdateringsloggContainer';
 import { Normaltekst, Undertekst, Undertittel } from 'nav-frontend-typografi';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { formatterDatoTidMedMaanedsnavn } from '../../utils/date-utils';
 
 interface Props {

src/app/oppdateringslogg/Oppdateringslogg.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { AlertStripeInfo } from 'nav-frontend-alertstriper';
 import EnkeltOppdateringslogg from './EnkeltOppdateringslogg';
 import { Nesteknapp, Tilbakeknapp } from 'nav-frontend-ikonknapper';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import Stegindikator from 'nav-frontend-stegindikator';
 import { StegindikatorStegProps } from 'nav-frontend-stegindikator/lib/stegindikator-steg';
 import { datoSynkende } from '../../utils/date-utils';

src/app/oppdateringslogg/OppdateringsloggContainer.tsx

@@ -3,7 +3,7 @@ import ModalWrapper from 'nav-frontend-modal';
 import useListener from '../../utils/hooks/use-listener';
 import Oppdateringslogg from './Oppdateringslogg';
 import { Systemtittel } from 'nav-frontend-typografi';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import useSisteLestOppdateringLogg from './useSisteLestOppdateringLogg';
 import useWaitForElement from '../../utils/hooks/use-wait-for-element';
 import { lagOppdateringsloggConfig } from './config/config';