Update dependencies && remove unused vars (#704)

* use updated versions for diff-viewer and react-json

* update dependencies, remove unused variables

* include babel devdependency to ensure that nothing breaks (fixes warning message)

apps/frontend/craco.config.js

@@ -3,5 +3,23 @@ module.exports = {
         postcss: {
             mode: 'file',
         }
-    }
+    },
+    // create react app is unmaintained :(
+    // this is by no means a good solution (we're basically telling the compiler to ignore cerain warnings)
+    // the good solution is to move away from create-react-app
+    // https://github.com/facebook/create-react-app/discussions/11767#discussioncomment-2421668
+    webpack: {
+        configure: {
+          ignoreWarnings: [
+            function ignoreSourcemapsloaderWarnings(warning) {
+              return (
+                warning.module &&
+                warning.module.resource.includes("node_modules") &&
+                warning.details &&
+                warning.details.includes("source-map-loader")
+              );
+            },
+          ],
+        },
+      },
 }

apps/frontend/package.json

@@ -3,52 +3,52 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@apollo/client": "^3.3.9",
-    "@fontsource/source-sans-pro": "^5.0.0",
-    "@fortawesome/fontawesome-svg-core": "^6.1.0",
-    "@fortawesome/free-brands-svg-icons": "^6.0.0",
-    "@fortawesome/free-regular-svg-icons": "^6.0.0",
-    "@fortawesome/free-solid-svg-icons": "^6.0.0",
+    "@apollo/client": "^3.8.4",
+    "@fontsource/source-sans-pro": "^5.0.8",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@navikt/aksel-icons": "^5.3.1",
-    "@navikt/ds-css": "^5.2.1",
-    "@navikt/ds-react": "^5.2.1",
-    "@navikt/ds-tailwind": "^5.2.1",
-    "@types/draft-js": "^0.11.2",
-    "@types/markdown-draft-js": "^2.2.2",
-    "@types/react-draft-wysiwyg": "^1.13.2",
-    "amplitude-js": "^8.17.0",
-    "axios": "^1.1.2",
+    "@microlink/react-json-view": "^1.22.2",
+    "@navikt/aksel-icons": "^5.6.0",
+    "@navikt/ds-css": "^5.6.0",
+    "@navikt/ds-react": "^5.6.0",
+    "@navikt/ds-tailwind": "^5.6.0",
+    "@types/draft-js": "^0.11.13",
+    "@types/markdown-draft-js": "^2.2.5",
+    "@types/react-draft-wysiwyg": "^1.13.5",
+    "amplitude-js": "^8.21.9",
+    "axios": "^1.5.1",
     "baseui": "^13.0.0",
-    "core-js": "^3.8.3",
+    "core-js": "^3.32.2",
     "draft-js": "^0.11.7",
-    "formik": "^2.2.6",
-    "graphql": "^16.0.0",
+    "formik": "^2.4.5",
+    "graphql": "^16.8.1",
     "history": "5.3.0",
-    "lodash": "^4.17.20",
-    "markdown-draft-js": "^2.2.1",
-    "moment": "^2.29.1",
+    "lodash": "^4.17.21",
+    "markdown-draft-js": "^2.4.0",
+    "moment": "^2.29.4",
     "postcss-import": "^15.1.0",
     "query-string": "^8.1.0",
     "randomcolor": "^0.6.2",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
-    "react-beautiful-dnd": "^13.1.0",
-    "react-diff-viewer": "^3.1.1",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-diff-viewer-continued": "^3.2.6",
     "react-dom": "^18.2.0",
-    "react-draft-wysiwyg": "^1.14.7",
-    "react-json-view": "^1.21.1",
-    "react-markdown": "^8.0.0",
-    "react-markdown-editor-lite": "^1.2.4",
-    "react-player": "^2.9.0",
+    "react-draft-wysiwyg": "^1.15.0",
+    "react-markdown": "^9.0.0",
+    "react-markdown-editor-lite": "^1.3.4",
+    "react-player": "^2.13.0",
     "react-process-string": "^1.2.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "shortid": "^2.2.16",
-    "styletron-engine-atomic": "^1.4.8",
-    "styletron-react": "^6.0.2",
-    "typescript": "^5.0.3",
-    "yup": "^1.1.1"
+    "styletron-engine-atomic": "^1.5.0",
+    "styletron-react": "^6.1.0",
+    "typescript": "^5.2.2",
+    "yup": "^1.3.1"
   },
   "scripts": {
     "start": "craco start",
@@ -87,30 +87,31 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-transform-private-property-in-object": "^7.22.11",
     "@craco/craco": "^7.1.0",
-    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.0.0",
-    "@types/amplitude-js": "^8.0.0",
-    "@types/jest": "^29.1.2",
-    "@types/lodash": "^4.14.165",
-    "@types/node": "^20.1.0",
-    "@types/randomcolor": "^0.5.5",
-    "@types/react": "^18.0.15",
-    "@types/react-beautiful-dnd": "^13.0.0",
-    "@types/react-dom": "^18.0.6",
-    "@types/react-helmet": "^6.1.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/amplitude-js": "^8.16.3",
+    "@types/jest": "^29.5.5",
+    "@types/lodash": "^4.14.199",
+    "@types/node": "^20.7.1",
+    "@types/randomcolor": "^0.5.7",
+    "@types/react": "^18.2.23",
+    "@types/react-beautiful-dnd": "^13.1.5",
+    "@types/react-dom": "^18.2.8",
+    "@types/react-helmet": "^6.1.7",
     "@types/react-router-dom": "^5.3.3",
     "@types/shortid": "^0.0.30",
-    "@types/styletron-react": "^5.0.2",
+    "@types/styletron-react": "^5.0.4",
     "@types/yup": "^0.32.0",
-    "autoprefixer": "^10.4.15",
-    "http-proxy-middleware": "^2.0.0",
-    "postcss": "^8.4.29",
+    "autoprefixer": "^10.4.16",
+    "http-proxy-middleware": "^2.0.6",
+    "postcss": "^8.4.30",
     "prettier": "3.0.3",
     "react-helmet": "^6.1.0",
-    "react-localization": "^1.0.15",
-    "react-router-dom": "^6.4.0",
+    "react-localization": "^1.0.19",
+    "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
     "tailwindcss": "^3.3.3"
   }

apps/frontend/src/api/ArkiveringApi.ts

@@ -82,7 +82,7 @@ export const useArkiveringByEtterlevelseDokumentasjonId = (etterlevelseDokumenta
         .then((resp) => setData(arkiveringMapToFormVal(resp.content[0])))
         .catch((e) => {
           setData(arkiveringMapToFormVal({ id: '' }))
-          console.log("couldn't find arkivering with etterlevelse dokumentasjon id = ", e)
+          console.log('couldn\'t find arkivering with etterlevelse dokumentasjon id = ', e)
         })
   }, [etterlevelseDokumentasjonId])
 

apps/frontend/src/api/BehandlingApi.ts

@@ -31,7 +31,7 @@ export const useBehandling = (id?: string) => {
         .then(setData)
         .catch((e) => {
           setData(undefined)
-          console.log("couldn't find behandling", e)
+          console.log('couldn\'t find behandling', e)
         })
   }, [id])
 
@@ -72,7 +72,7 @@ export const useMyBehandlinger = () => {
         .catch((e) => {
           setData([])
           setLoading(false)
-          console.log("couldn't find behandlinger", e)
+          console.log('couldn\'t find behandlinger', e)
         })
   }, [ident])
 

apps/frontend/src/api/EtterlevelseApi.ts

@@ -113,6 +113,7 @@ export const mapEtterlevelseToFormValue = (etterlevelse: Partial<Etterlevelse>,
           if (sb.suksesskriterieId === s.id) {
             sb.behovForBegrunnelse = s.behovForBegrunnelse
           }
+          return sb
         })
       })
     } else {

apps/frontend/src/api/EtterlevelseDokumentasjonApi.ts

@@ -74,6 +74,7 @@ export const useEtterlevelseDokumentasjon = (etterlevelseDokumentasjonId?: strin
           if (behandlinger && behandlinger.length > 0) {
             behandlinger.map((b) => {
               b.navn = behandlingName(b)
+              return b
             })
           }
           setData({ ...etterlevelseDokumentasjon, behandlinger: behandlinger, virkemiddel: virkmiddel })

apps/frontend/src/api/TeamApi.ts

@@ -120,7 +120,7 @@ export const useTeam = () => {
 }
 
 export const useMyTeams = () => {
-  const [productAreas, productAreasLoading] = useMyProductAreas()
+  const [productAreas] = useMyProductAreas()
   const [data, setData] = useState<Team[]>([])
   const [loading, setLoading] = useState(true)
   const ident = user.getIdent()
@@ -149,7 +149,7 @@ export const useMyTeams = () => {
         .catch((e) => {
           setData([])
           setLoading(false)
-          console.log("couldn't find teams", e)
+          console.log('couldn\'t find teams', e)
         })
     !ident && setLoading(false)
   }, [ident, productAreas])

apps/frontend/src/api/TilbakemeldingApi.ts

@@ -47,7 +47,7 @@ export const useTilbakemeldinger = (kravNummer: number, kravVersjon: number) =>
         .catch((e) => {
           setData([])
           setLoading(false)
-          console.error("couldn't find krav", e)
+          console.error('couldn\'t find krav', e)
         })
     }
   }, [kravNummer, kravVersjon])

apps/frontend/src/components/DeleteItem.tsx

@@ -1,7 +1,6 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'baseui/modal'
 import { useNavigate } from 'react-router-dom'
-import { deleteIcon } from './Images'
 import { Button } from '@navikt/ds-react'
 import { TrashIcon } from '@navikt/aksel-icons'
 

apps/frontend/src/components/EtterlevelseDokumentasjonTema/KravCard.tsx

@@ -1,8 +1,7 @@
 import { EtterlevelseMetadata, KRAV_FILTER_TYPE, KravEtterlevelseData } from '../../constants'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { getEtterlevelseMetadataByEtterlevelseDokumentasjonAndKravNummerAndKravVersion, mapEtterlevelseMetadataToFormValue } from '../../api/EtterlevelseMetadataApi'
 import { Block } from 'baseui/block'
-import Button from '../common/Button'
 import { ettlevColors } from '../../util/theme'
 import { borderStyle, marginAll } from '../common/Style'
 import { LabelSmall, ParagraphXSmall } from 'baseui/typography'
@@ -12,7 +11,7 @@ import TildeltPopoever from '../etterlevelseMetadata/TildeltPopover'
 import { faEllipsisVertical } from '@fortawesome/free-solid-svg-icons'
 import { arkCheckIcon, arkPennIcon, warningAlert } from '../Images'
 import { getEtterlevelserByEtterlevelseDokumentasjonIdKravNumber } from '../../api/EtterlevelseApi'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { getNumberOfDaysBetween } from '../../util/checkAge'
 import { isFerdigUtfylt } from '../../pages/EtterlevelseDokumentasjonTemaPage'
 import { getEtterlevelseStatus, getStatusLabelColor } from '../etterlevelseDokumentasjon/common/utils'
@@ -21,7 +20,6 @@ import RouteLink from '../common/RouteLink'
 export const KravCard = (props: { krav: KravEtterlevelseData; noStatus?: boolean; etterlevelseDokumentasjonId: string; noVarsling?: boolean; kravFilter: KRAV_FILTER_TYPE }) => {
   const [nyVersionFlag, setNyVersionFlag] = useState<boolean>(false)
   const [hover, setHover] = useState(false)
-  const navigate = useNavigate()
   const location = useLocation()
   const [kravAge, setKravAge] = useState<number>(0)
 

apps/frontend/src/components/EtterlevelseDokumentasjonTema/common/utils.ts

@@ -10,6 +10,7 @@ export const filterKrav = async (allKravPriority: KravPrioritering[], kravList?:
   unfilteredkraver.map((k) => {
     const priority = allKravPriority.filter((kp) => kp.kravNummer === k.kravNummer && kp.kravVersjon === k.kravVersjon)
     k.prioriteringsId = priority.length ? priority[0].prioriteringsId : ''
+    return k
   })
 
   const sortedKrav = sortKraverByPriority<KravQL>(unfilteredkraver, temaData?.shortName || '')

apps/frontend/src/components/Header.tsx

@@ -24,7 +24,7 @@ import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { faBars, faChevronDown, faChevronUp, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { faUser } from '@fortawesome/free-regular-svg-icons'
 import SkipToContent from './common/SkipToContent/SkipToContent'
-import { borderColor, borderStyle, borderWidth, marginAll } from './common/Style'
+import { marginAll } from './common/Style'
 import { AlertType, Melding, MeldingStatus, MeldingType } from '../constants'
 import { getMeldingByType } from '../api/MeldingApi'
 import { Markdown } from './common/Markdown'
@@ -101,10 +101,6 @@ const LoggedInHeader = () => {
         // { label: intl.settings, href: '/admin/settings', disabled: true },
       ]
     : []
-  const otherPages = [
-    { label: 'Mine innstillinger', href: '/innstillinger', disabled: true },
-    { label: 'Hjelp', href: '/hjelp', disabled: true },
-  ]
 
   return (
     <Block display="flex" justifyContent="center" alignItems="center">
@@ -359,7 +355,7 @@ const Header = (props: { noSearchBar?: boolean; noLoginButton?: boolean }) => {
       </Block>
       {systemVarsel && systemVarsel.meldingStatus === MeldingStatus.ACTIVE && (
         <div 
-          className={`flex flex-col items-center py-2 border-b border-t ${systemVarsel.alertType === "INFO" ? "bg-surface-info-subtle border-surface-info" : "bg-surface-warning-subtle border-surface-warning"}`}
+          className={`flex flex-col items-center py-2 border-b border-t ${systemVarsel.alertType === 'INFO' ? 'bg-surface-info-subtle border-surface-info' : 'bg-surface-warning-subtle border-surface-warning'}`}
           aria-label="Systemvarsel"
           role="complementary"
         >

apps/frontend/src/components/Lov.tsx

@@ -1,9 +1,7 @@
-import React from 'react'
 import { codelist, ListName } from '../services/Codelist'
 import { env } from '../util/env'
 import { Regelverk } from '../constants'
 import { Block } from 'baseui/block'
-import CustomizedLink from './common/CustomizedLink'
 import { Link } from '@navikt/ds-react'
 
 const reactProcessString = require('react-process-string')

apps/frontend/src/components/Navigation/Burger/index.tsx

@@ -2,35 +2,25 @@ import * as React from 'react'
 import Button from '../../common/Button'
 import { ANCHOR, Drawer } from 'baseui/drawer'
 import { theme } from '../../../util'
-import { Block, BlockProps } from 'baseui/block'
+import { Block } from 'baseui/block'
 import { StyledLink } from 'baseui/link'
 import { HeadingXLarge, ParagraphMedium } from 'baseui/typography'
 import RouteLink from '../../common/RouteLink'
 import { useLocation } from 'react-router-dom'
 import { env } from '../../../util/env'
 import { useStyletron } from 'styletron-react'
 import { user } from '../../../services/User'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBars, faChevronDown, faChevronRight, faTimes } from '@fortawesome/free-solid-svg-icons'
+import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { ettlevColors } from '../../../util/theme'
 import { arkPennIcon, exitIcon, grafIcon, husIcon, paragrafIcon } from '../../Images'
 
-const drawerFooterProps: BlockProps = {
-  display: 'flex',
-  width: '100%',
-  height: '100%',
-  bottom: '0',
-  alignItems: 'flex-end',
-  marginTop: theme.sizing.scale800,
-}
-
 const Brand = () => (
   <StyledLink style={{ textDecoration: 'none' }} href="/">
     <HeadingXLarge color={ettlevColors.green800}>Støtte til etterlevelse</HeadingXLarge>
   </StyledLink>
 )
 
-const MenuItem = (props: { to: string; text: string; icon: string; setShowMenu: Function }) => (
+const MenuItem = (props: { to: string, text: string, icon: string, setShowMenu: Function }) => (
   <Block
     display={'flex'}
     alignItems={'center'}
@@ -55,18 +45,6 @@ const MenuItem = (props: { to: string; text: string; icon: string; setShowMenu:
   </Block>
 )
 
-const NavItem = (props: { to: string; text: string }) => (
-  <RouteLink href={props.to} style={{ textDecoration: 'none' }}>
-    <Block display="flex" alignItems="center">
-      <Block marginRight={theme.sizing.scale500}>
-        <FontAwesomeIcon icon={useLocation().pathname.split('/')[1].includes(props.to.split('/')[1]) ? faChevronDown : faChevronRight} color="white" size="lg" />
-      </Block>
-
-      <ParagraphMedium color={ettlevColors.green800}>{props.text}</ParagraphMedium>
-    </Block>
-  </RouteLink>
-)
-
 const LoginButton = (props: { location: string }) => {
   const [useCss] = useStyletron()
   const linkCss = useCss({ textDecoration: 'none', color: 'white' })

apps/frontend/src/components/Navigation/Footer.tsx

@@ -1,12 +1,5 @@
 import { Block } from 'baseui/block'
-import { theme } from '../../util'
 import { datajegerSlackLink, documentationLink, githubRepo } from '../../util/config'
-import SlackLogo from '../../resources/Slack_Monochrome_White.svg'
-import { LabelMedium } from 'baseui/typography'
-import { StatefulTooltip } from 'baseui/tooltip'
-import { env } from '../../util/env'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCodeBranch } from '@fortawesome/free-solid-svg-icons'
 import * as React from 'react'
 import { ExternalLink } from '../common/RouteLink'
 import ToTopCircle from '../../resources/ToTopCircle.svg'

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

@@ -9,10 +9,8 @@ import {
   LovCodeData,
   LovCodeRelevans,
   lovCodeRelevansToOptions,
-  lovCodeRelevansToText,
   TemaCodeData,
 } from '../../../services/Codelist'
-import * as React from 'react'
 import { SIZE as InputSIZE } from 'baseui/input'
 import { OptionList } from '../../common/Inputs'
 import { temaBilder } from '../../Images'