UPDATE: dependency and testenvironment

apps/frontend/jest.config.ts

@@ -23,7 +23,7 @@ export default {
   // collectCoverageFrom: undefined,
 
   // The directory where Jest should output its coverage files
-  coverageDirectory: "coverage",
+  coverageDirectory: 'coverage',
 
   // An array of regexp pattern strings used to skip coverage collection
   // coveragePathIgnorePatterns: [
@@ -137,7 +137,7 @@ export default {
   // snapshotSerializers: [],
 
   // The test environment that will be used for testing
-  testEnvironment: "jsdom",
+  testEnvironment: 'jest-fixed-jsdom',
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},
@@ -191,4 +191,4 @@ export default {
 
   // Whether to use watchman for file crawling
   // watchman: true,
-};
+}

apps/frontend/package.json

@@ -32,9 +32,9 @@
     "react-json-view": "^1.19.1",
     "react-json-view-lite": "^2.0.1",
     "react-localization": "^1.0.15",
-    "react-router-dom": "^7.0.2",
     "react-markdown": "^9.0.0",
     "react-process-string": "^1.2.0",
+    "react-router": "^7.1.1",
     "react-select": "^5.8.1",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
@@ -101,19 +101,19 @@
     "@types/amplitude-js": "^8.0.0",
     "@types/jest": "^29.5.14",
     "@types/lodash": "^4.14.165",
-    "@types/node": "^22.0.0",
+    "@types/node": "^22.10.5",
     "@types/randomcolor": "^0.5.5",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@types/react-helmet": "^6.1.0",
-    "@types/react-router-dom": "^5.3.3",
+    "@types/react-router": "^5.1.20",
     "@types/shortid": "2.2.0",
     "@types/styletron-engine-atomic": "^1.1.0",
     "@types/styletron-react": "^5.0.2",
     "@types/styletron-standard": "^2.0.1",
+    "@types/yup": "^0.32.0",
     "@typescript-eslint/eslint-plugin": "^8.1.0",
     "@typescript-eslint/parser": "^8.1.0",
-    "@types/yup": "^0.32.0",
     "autoprefixer": "^10.4.16",
     "encoding": "^0.1.13",
     "http-proxy-middleware": "^3.0.0",
@@ -127,6 +127,7 @@
     "react-scripts": "5.0.1",
     "tailwindcss": "^3.3.3",
     "ts-jest": "^29.2.5",
+    "jest-fixed-jsdom": "^0.0.9",
     "ts-node": "^10.4.0"
   }
 }

apps/frontend/src/AppRoutes.tsx

@@ -1,7 +1,7 @@
 import { Spinner } from 'baseui/icon'
 import { ParagraphLarge } from 'baseui/typography'
 import { JSX, useEffect, useState } from 'react'
-import { Navigate, Route, Routes, useLocation, useParams } from 'react-router-dom'
+import { Navigate, Route, Routes, useLocation, useParams } from 'react-router'
 import { getDisclosure, getPolicy, getProcess } from './api/GetAllApi'
 import PurposeTable from './components/Dashboard/PurposeTable'
 import DpProcessView from './components/DpProcess/DpProcessView'

apps/frontend/src/components/Charts/Charts.tsx

@@ -1,6 +1,6 @@
 import { Card } from 'baseui/card'
 import { ParagraphLarge, ParagraphMedium } from 'baseui/typography'
-import { NavigateFunction, useNavigate } from 'react-router-dom'
+import { NavigateFunction, useNavigate } from 'react-router'
 import {
   EProcessField,
   EProcessState,

apps/frontend/src/components/Dashboard/FilterDashboardStatus.tsx

@@ -1,9 +1,9 @@
 import { Select } from '@navikt/ds-react'
 import { LabelMedium } from 'baseui/typography'
-import { NavigateFunction, useNavigate, useParams } from 'react-router-dom'
+import { useState } from 'react'
+import { NavigateFunction, useNavigate, useParams } from 'react-router'
 import { EProcessStatusFilter } from '../../constants'
 import { theme } from '../../util'
-import { useState } from 'react'
 
 interface IFilterDashboardStatusProps {
   setFilter: React.Dispatch<React.SetStateAction<EProcessStatusFilter>>
@@ -13,7 +13,9 @@ export const FilterDashboardStatus = (props: IFilterDashboardStatusProps) => {
   const { setFilter } = props
   const navigate: NavigateFunction = useNavigate()
   const { processStatus } = useParams<{ processStatus: EProcessStatusFilter }>()
-  const [selectValue, setSelectValue] = useState<string>(processStatus ? (processStatus as EProcessStatusFilter) : EProcessStatusFilter.All)
+  const [selectValue, setSelectValue] = useState<string>(
+    processStatus ? (processStatus as EProcessStatusFilter) : EProcessStatusFilter.All
+  )
 
   return (
     <div className="w-full flex flex-row-reverse mt-4">

apps/frontend/src/components/Dashboard/PurposeTable.tsx

@@ -1,6 +1,6 @@
 import { HeadingLarge } from 'baseui/typography'
 import { useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import {
   getProcessByStateAndStatus,
   getProcessByStateAndStatusForDepartment,

apps/frontend/src/components/DpProcess/DpProcessView.tsx

@@ -2,7 +2,7 @@ import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons'
 import { Spinner } from 'baseui/spinner'
 import { HeadingMedium } from 'baseui/typography'
 import { useEffect, useState } from 'react'
-import { NavigateFunction, useNavigate, useParams } from 'react-router-dom'
+import { NavigateFunction, useNavigate, useParams } from 'react-router'
 import {
   deleteDpProcess,
   dpProcessToFormValues,

apps/frontend/src/components/Header.tsx

@@ -12,7 +12,7 @@ import { TriangleDown } from 'baseui/icon'
 import { StyledLink } from 'baseui/link'
 import { LabelMedium } from 'baseui/typography'
 import { useRef, useState } from 'react'
-import { useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router'
 import { user } from '../service/User'
 import { theme } from '../util'
 import { paddingAll } from './common/Style'

apps/frontend/src/components/InformationType/InformationTypeBannerButtons.tsx

@@ -4,7 +4,7 @@ import { Modal, ModalBody, ModalFooter, ModalHeader } from 'baseui/modal'
 import { Spinner } from 'baseui/spinner'
 import { ParagraphMedium } from 'baseui/typography'
 import { useEffect, useState } from 'react'
-import { NavigateFunction, useNavigate } from 'react-router-dom'
+import { NavigateFunction, useNavigate } from 'react-router'
 import {
   deleteInformationType,
   getDocumentsForInformationType,

apps/frontend/src/components/InformationType/InformationtypeMetadata/AccordionInformationType.tsx

@@ -4,7 +4,7 @@ import { Accordion, Panel } from 'baseui/accordion'
 import { ParagraphMedium } from 'baseui/typography'
 import queryString from 'query-string'
 import { Key } from 'react'
-import { Location, NavigateFunction, useLocation, useNavigate } from 'react-router-dom'
+import { Location, NavigateFunction, useLocation, useNavigate } from 'react-router'
 import { IPolicy } from '../../../constants'
 import { TPurposeMap } from '../../../pages/InformationtypePage'
 import { EListName, ICode, ICodelistProps } from '../../../service/Codelist'

apps/frontend/src/components/InformationType/InformationtypeMetadata/InformationtypeMetadata.tsx

@@ -2,7 +2,7 @@ import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons'
 import { Tab } from 'baseui/tabs'
 import { HeadingMedium, ParagraphSmall } from 'baseui/typography'
 import { useState } from 'react'
-import { NavigateFunction, useNavigate } from 'react-router-dom'
+import { NavigateFunction, useNavigate } from 'react-router'
 import { IDisclosure, IDocument, IInformationType, IPolicy } from '../../../constants'
 import { canViewAlerts } from '../../../pages/AlertEventPage'
 import { CodelistService, ICodelistProps } from '../../../service/Codelist'

apps/frontend/src/components/Process/Accordion/AccordionProcess.tsx

@@ -6,7 +6,7 @@ import { Modal, ModalBody, SIZE } from 'baseui/modal'
 import { Spinner } from 'baseui/spinner'
 import { LabelMedium } from 'baseui/typography'
 import { useEffect, useRef, useState } from 'react'
-import { NavigateFunction, useNavigate, useParams } from 'react-router-dom'
+import { NavigateFunction, useNavigate, useParams } from 'react-router'
 import {
   convertProcessToFormValues,
   getDisclosuresByProcessId,

apps/frontend/src/components/Process/Accordion/ProcessCreatedModal.tsx

@@ -1,6 +1,6 @@
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'baseui/modal'
 import { ParagraphMedium } from 'baseui/typography'
-import { Location, NavigateFunction, useLocation, useNavigate } from 'react-router-dom'
+import { Location, NavigateFunction, useLocation, useNavigate } from 'react-router'
 import Button from '../../common/Button/CustomButton'
 
 interface IProps {

apps/frontend/src/components/Process/ProcessList.tsx

@@ -5,7 +5,7 @@ import { Modal, ModalBody, ModalHeader, SIZE as ModalSize, ROLE } from 'baseui/m
 import { Spinner } from 'baseui/spinner'
 import { HeadingXLarge, LabelMedium } from 'baseui/typography'
 import { useEffect, useState } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router'
 import {
   convertDisclosureToFormValues,
   convertProcessToFormValues,

apps/frontend/src/components/Processor/ProcessorView.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { FlexGrid, FlexGridItem } from 'baseui/flex-grid'
 import { HeadingMedium, ParagraphSmall } from 'baseui/typography'
 import { useEffect, useState } from 'react'
-import { NavigateFunction, useNavigate, useParams } from 'react-router-dom'
+import { NavigateFunction, useNavigate, useParams } from 'react-router'
 import { getProcessesByProcessor, getResourceById, getResourcesByIds } from '../../api/GetAllApi'
 import {
   convertProcessorToFormValues,

apps/frontend/src/components/SideBar/NavItem.tsx

@@ -2,7 +2,7 @@ import { faChevronDown, faChevronRight } from '@fortawesome/free-solid-svg-icons
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Tooltip } from '@navikt/ds-react'
 import { ParagraphMedium } from 'baseui/typography'
-import { useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router'
 import RouteLink from '../common/RouteLink'
 
 interface INavItemProps {

apps/frontend/src/components/ThirdParty/AccordionDisclosure.tsx

@@ -4,7 +4,7 @@ import { StyledLink } from 'baseui/link'
 import { Spinner } from 'baseui/spinner'
 import { ParagraphMedium, ParagraphSmall } from 'baseui/typography'
 import { Fragment, Key, useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { getAlertForDisclosure } from '../../api/AlertApi'
 import { convertDisclosureToFormValues, getDisclosure } from '../../api/GetAllApi'
 import {

apps/frontend/src/components/admin/CodeList/CodelistPage.tsx

@@ -1,7 +1,7 @@
 import { PlusIcon } from '@navikt/aksel-icons'
 import { Button, Heading, Loader, Select } from '@navikt/ds-react'
 import { useEffect, useState } from 'react'
-import { NavigateFunction, useNavigate, useParams } from 'react-router-dom'
+import { NavigateFunction, useNavigate, useParams } from 'react-router'
 import { createCodelist } from '../../../api/GetAllApi'
 import { ICodeListFormValues } from '../../../constants'
 import { ampli } from '../../../service/Amplitude'

apps/frontend/src/components/admin/audit/AuditPage.tsx

@@ -1,7 +1,7 @@
 import { BodyLong, Heading, TextField } from '@navikt/ds-react'
 import _ from 'lodash'
 import { useEffect, useState } from 'react'
-import { NavigateFunction, useNavigate, useParams } from 'react-router-dom'
+import { NavigateFunction, useNavigate, useParams } from 'react-router'
 import { getAuditLog } from '../../../api/AuditApi'
 import { IAuditLog } from '../../../constants'
 import { ampli } from '../../../service/Amplitude'

apps/frontend/src/components/common/RouteLink.tsx

@@ -1,7 +1,7 @@
 import { useStyletron } from 'baseui'
 import { KIND } from 'baseui/button'
 import { StyledLink } from 'baseui/link'
-import { NavigateFunction, useNavigate } from 'react-router-dom'
+import { NavigateFunction, useNavigate } from 'react-router'
 import { EObjectType, IAuditItem, TNavigableItem } from '../../constants'
 import { EListName } from '../../service/Codelist'
 import { AuditButton } from '../admin/audit/AuditButton'

apps/frontend/src/components/common/TableDisclosure.tsx

@@ -3,7 +3,7 @@ import { KIND } from 'baseui/button'
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'baseui/modal'
 import { ParagraphMedium } from 'baseui/typography'
 import { Fragment, useEffect, useState } from 'react'
-import { NavigateFunction, useNavigate } from 'react-router-dom'
+import { NavigateFunction, useNavigate } from 'react-router'
 import { getAlertForDisclosure } from '../../api/AlertApi'
 import { convertDisclosureToFormValues } from '../../api/GetAllApi'
 import {

apps/frontend/src/components/search/MainSearch.tsx

@@ -2,7 +2,7 @@ import { faFilter } from '@fortawesome/free-solid-svg-icons'
 import { MagnifyingGlassIcon } from '@navikt/aksel-icons'
 import { Tag } from '@navikt/ds-react'
 import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { DropdownIndicatorProps, OptionProps, components } from 'react-select'
 import AsyncSelect from 'react-select/async'
 import { searchDpProcess } from '../../api/DpProcessApi'

apps/frontend/src/main.tsx

@@ -1,5 +1,5 @@
 import { BaseProvider } from 'baseui'
-import { BrowserRouter } from 'react-router-dom'
+import { BrowserRouter } from 'react-router'
 import { Fragment } from 'react/jsx-runtime'
 import { Client as Styletron } from 'styletron-engine-atomic'
 import { Provider as StyletronProvider } from 'styletron-react'

apps/frontend/src/pages/AlertEventPage.tsx

@@ -6,7 +6,7 @@ import { SORT_DIRECTION } from 'baseui/table'
 import { HeadingLarge, LabelMedium } from 'baseui/typography'
 import moment from 'moment'
 import { useEffect, useReducer } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import { getAlertEvents } from '../api/AlertApi'
 import { Sensitivity } from '../components/InformationType/Sensitivity'
 import { ObjectLink } from '../components/common/RouteLink'

apps/frontend/src/pages/DashboardPage.tsx

@@ -1,6 +1,6 @@
 import { HeadingMedium } from 'baseui/typography'
 import { useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import { getDashboard } from '../api/GetAllApi'
 import Charts from '../components/Charts/Charts'
 import Departments from '../components/Dashboard/Departments'

apps/frontend/src/pages/DisclosureListPage.tsx

@@ -3,7 +3,7 @@ import { ButtonGroup } from 'baseui/button-group'
 import { Plus } from 'baseui/icon'
 import { HeadingLarge, LabelMedium } from 'baseui/typography'
 import { useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { searchAaregAvtale } from '../api/AaregAvtaleApi'
 import {
   IDisclosureSummary,

apps/frontend/src/pages/DocumentCreatePage.tsx

@@ -1,5 +1,5 @@
 import { HeadingMedium } from 'baseui/typography'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { Fragment } from 'react/jsx-runtime'
 import { createInformationTypesDocument } from '../api/GetAllApi'
 import DocumentForm from '../components/document/component/DocumentForm'

apps/frontend/src/pages/DocumentEditPage.tsx

@@ -1,6 +1,6 @@
 import { HeadingMedium } from 'baseui/typography'
 import { Fragment, useEffect, useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router'
 import shortid from 'shortid'
 import { getDocument, updateInformationTypesDocument } from '../api/GetAllApi'
 import DocumentForm from '../components/document/component/DocumentForm'

apps/frontend/src/pages/DocumentPage.tsx

@@ -4,7 +4,7 @@ import { Notification } from 'baseui/notification'
 import { Tab } from 'baseui/tabs'
 import { HeadingMedium, LabelMedium, ParagraphMedium } from 'baseui/typography'
 import { Key, useEffect, useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router'
 import {
   deleteDocument,
   getAll,

apps/frontend/src/pages/DpProcessPage.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Spinner } from 'baseui/spinner'
 import { HeadingMedium } from 'baseui/typography'
 import { useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { createDpProcess, dpProcessToFormValues, getAllDpProcesses } from '../api/DpProcessApi'
 import DpProcessModal from '../components/DpProcess/DpProcessModal'
 import DpProcessTable from '../components/DpProcess/DpProcessTable'

apps/frontend/src/pages/InformationtypeCreatePage.tsx

@@ -1,6 +1,6 @@
 import { HeadingMedium } from 'baseui/typography'
 import { Fragment, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { createInformationType, mapInfoTypeToFormVals } from '../api/GetAllApi'
 import InformationtypeForm from '../components/InformationType/InformationtypeForm'
 import ErrorNotAllowed from '../components/common/ErrorNotAllowed'

apps/frontend/src/pages/InformationtypeEditPage.tsx

@@ -1,7 +1,7 @@
 import { Spinner } from 'baseui/spinner'
 import { HeadingMedium } from 'baseui/typography'
 import { Fragment, useEffect, useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router'
 import { getInformationType, mapInfoTypeToFormVals, updateInformationType } from '../api/GetAllApi'
 import InformationtypeForm from '../components/InformationType/InformationtypeForm'
 import { IInformationType, IInformationtypeFormValues } from '../constants'

apps/frontend/src/pages/InformationtypePage.tsx

@@ -2,7 +2,7 @@ import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { HeadingMedium } from 'baseui/typography'
 import { useEffect, useState } from 'react'
-import { NavigateFunction, useNavigate, useParams } from 'react-router-dom'
+import { NavigateFunction, useNavigate, useParams } from 'react-router'
 import {
   getCodelistUsageByListName,
   getDisclosuresByInformationTypeId,

apps/frontend/src/pages/LegalPage.tsx

@@ -2,7 +2,7 @@ import { OnChangeParams, Select, Value } from 'baseui/select'
 import { HeadingLarge, HeadingMedium, HeadingSmall } from 'baseui/typography'
 import queryString from 'query-string'
 import { useEffect, useState } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router'
 import { getProcessesFor } from '../api/GetAllApi'
 import { SimpleProcessTable } from '../components/Process/SimpleProcessTable'
 import { IPageResponse, IProcess } from '../constants'

apps/frontend/src/pages/ProcessPage.tsx

@@ -1,7 +1,7 @@
 import { HeadingSmall } from 'baseui/typography'
 import queryString from 'query-string'
 import { useEffect, useState } from 'react'
-import { generatePath, useLocation, useParams } from 'react-router-dom'
+import { generatePath, useLocation, useParams } from 'react-router'
 import { processPath, processPathNoId } from '../AppRoutes'
 import { getDashboard, getDisclosureByDepartment } from '../api/GetAllApi'
 import Charts from '../components/Charts/Charts'

apps/frontend/src/pages/ProcessorListPage.tsx

@@ -2,7 +2,7 @@ import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button, Heading, Loader } from '@navikt/ds-react'
 import { useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { getAll } from '../api/GetAllApi'
 import {
   convertProcessorToFormValues,

apps/frontend/src/pages/ProductAreaPage.tsx

@@ -1,7 +1,7 @@
 import { Tabs } from '@navikt/ds-react'
 import { HeadingSmall } from 'baseui/typography'
 import { useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import { getDashboard, getInformationTypesBy } from '../api/GetAllApi'
 import Charts from '../components/Charts/Charts'
 import { InfoTypeTable } from '../components/InformationType/InfoTypeTableSimple'

apps/frontend/src/pages/PurposeListPage.tsx

@@ -2,7 +2,7 @@ import { faFileWord, faPlusCircle } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { BodyShort, Button, Heading, Link, Modal } from '@navikt/ds-react'
 import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import {
   convertDisclosureToFormValues,
   convertProcessToFormValues,