chore(next15): migrating to next 15 and eslint 9 (#1720)

* fix(designsystem): Adding NoSSR-workarounds for designsystem flaws * chore(deps): bump next and eslint to new major versions * fix(tooltip): remove old tooltip, we are now using designsystemet * fix(next 15): migrating to next 15 + new linting rules * fix(search): create unique traveltags in the search * fix(nossr): add use client * fix(nossr): remove unsupported clone * fix(posthog): cant have dynamic import in ssr, use suspense * fix(ssr): add clientonly for tooltip in dropdowns * fix(hydration): move toastprovider inside body * refactor: rename to ClientOnly * fix(tooltip): adding id to tooltip:) * fix(contactForm): fixing up
entur · Nov 8, 2024 · eaa950f · eaa950f
1 parent 89a3bf1
commit eaa950f
Show file tree

Hide file tree

Showing 48 changed files with 689 additions and 725 deletions.
diff --git a/tavla/app/(admin)/boards/components/Column/Actions.tsx b/tavla/app/(admin)/boards/components/Column/Actions.tsx
@@ -23,7 +23,11 @@ function Actions({ board }: { board: TBoard }) {
 
 function Edit({ bid }: { bid?: string }) {
     return (
-        <Tooltip content="Rediger tavle" placement="bottom">
+        <Tooltip
+            content="Rediger tavle"
+            placement="bottom"
+            id="tooltip-edit-board"
+        >
             <IconButton
                 as={Link}
                 aria-label="Rediger tavle"

diff --git a/tavla/app/(admin)/boards/components/Column/Delete.tsx b/tavla/app/(admin)/boards/components/Column/Delete.tsx
@@ -1,4 +1,5 @@
 'use client'
+import { useActionState } from 'react'
 import { Button, ButtonGroup, IconButton } from '@entur/button'
 import { DeleteIcon } from '@entur/icons'
 import { TBoard } from 'types/settings'
@@ -8,7 +9,6 @@ import { Modal } from '@entur/modal'
 import { Heading3, Paragraph } from '@entur/typography'
 import { HiddenInput } from 'components/Form/HiddenInput'
 import { FormError } from 'app/(admin)/components/FormError'
-import { useFormState } from 'react-dom'
 import { getFormFeedbackForField } from 'app/(admin)/utils'
 import sheep from 'assets/illustrations/Sheep.png'
 import Image from 'next/image'
@@ -26,7 +26,7 @@ function Delete({
 }) {
     const { addToast } = useToast()
 
-    const [state, deleteBoard] = useFormState(deleteBoardAction, undefined)
+    const [state, deleteBoard] = useActionState(deleteBoardAction, undefined)
     const { isOpen, open, close } = useModalWithValue('delete', board.id ?? '')
 
     const submit = async (data: FormData) => {
@@ -36,9 +36,14 @@ function Delete({
 
     return (
         <>
-            <Tooltip content="Slett tavle" placement="bottom">
+            <Tooltip
+                content="Slett tavle"
+                placement="bottom"
+                id="tooltip-delete-board"
+            >
                 <DeleteButton type={type} onClick={open} />
             </Tooltip>
+
             <Modal
                 open={isOpen}
                 size="small"

diff --git a/tavla/app/(admin)/boards/components/Column/Tags.tsx b/tavla/app/(admin)/boards/components/Column/Tags.tsx
@@ -66,6 +66,7 @@ function Tags({
                                 content={
                                     <TagList tags={tags.slice(displayNumber)} />
                                 }
+                                id="tooltip-tags"
                             >
                                 <Badge variant="neutral">
                                     + {hiddenNumber}

diff --git a/tavla/app/(admin)/boards/components/Search/index.tsx b/tavla/app/(admin)/boards/components/Search/index.tsx
@@ -1,8 +1,8 @@
 'use client'
-import { TextField } from '@entur/form'
 import { SearchIcon } from '@entur/icons'
 import { useSearchParamReplacer } from '../../hooks/useSearchParamReplacer'
 import { useEffect, useState } from 'react'
+import ClientOnlyTextField from 'app/components/NoSSR/TextField'
 
 function Search() {
     const [value, replace] = useSearchParamReplacer('search')
@@ -12,7 +12,7 @@ function Search() {
         replace(search)
     }, [replace, search])
     return (
-        <TextField
+        <ClientOnlyTextField
             label="Søk på navn på tavle eller organisasjon"
             prepend={<SearchIcon inline aria-hidden="true" />}
             value={search}

diff --git a/tavla/app/(admin)/boards/components/TagModal/AddExistingTag.tsx b/tavla/app/(admin)/boards/components/TagModal/AddExistingTag.tsx
@@ -1,11 +1,12 @@
 'use client'
+import { useActionState } from 'react'
 import { difference } from 'lodash'
 import { ActionChip } from '@entur/chip'
 import { AddIcon } from '@entur/icons'
 import { Heading3 } from '@entur/typography'
 import { HiddenInput } from 'components/Form/HiddenInput'
 import { TBoard, TBoardID } from 'types/settings'
-import { useFormState, useFormStatus } from 'react-dom'
+import { useFormStatus } from 'react-dom'
 import { useTags } from '../../utils/context'
 import { FormError } from 'app/(admin)/components/FormError'
 import { getFormFeedbackForField } from 'app/(admin)/utils'
@@ -15,7 +16,7 @@ import { addTag } from './actions'
 function AddExistingTag({ board }: { board: TBoard }) {
     const allTags = useTags()
     const existingTags = difference(allTags, board.meta?.tags ?? [])
-    const [state, action] = useFormState(addTag, undefined)
+    const [state, action] = useActionState(addTag, undefined)
 
     return (
         <div className="flex flex-col gap-1">

diff --git a/tavla/app/(admin)/boards/components/TagModal/AddNewTag.tsx b/tavla/app/(admin)/boards/components/TagModal/AddNewTag.tsx
@@ -1,16 +1,15 @@
 import { Heading3 } from '@entur/typography'
-import { TextField } from '@entur/form'
 import { HiddenInput } from 'components/Form/HiddenInput'
 import { TBoard } from 'types/settings'
-import { useFormState } from 'react-dom'
 import { FormError } from 'app/(admin)/components/FormError'
 import { getFormFeedbackForField } from 'app/(admin)/utils'
-import { useRef } from 'react'
+import { useActionState, useRef } from 'react'
 import { SubmitButton } from 'components/Form/SubmitButton'
 import { addTag } from './actions'
+import ClientOnlyTextField from 'app/components/NoSSR/TextField'
 
 function AddNewTag({ board }: { board: TBoard }) {
-    const [state, action] = useFormState(addTag, undefined)
+    const [state, action] = useActionState(addTag, undefined)
     const form = useRef<HTMLFormElement>(null)
 
     const submit = async (data: FormData) => {
@@ -22,7 +21,7 @@ function AddNewTag({ board }: { board: TBoard }) {
             <Heading3>Legg til ny merkelapp</Heading3>
             <form ref={form} action={submit} className="flex flex-col gap-4">
                 <div className="flex flex-row gap-1 w-full">
-                    <TextField
+                    <ClientOnlyTextField
                         aria-label="Navn på ny merkelapp"
                         name="tag"
                         label="Merkelapp"

diff --git a/tavla/app/(admin)/boards/components/TagModal/index.tsx b/tavla/app/(admin)/boards/components/TagModal/index.tsx
@@ -1,4 +1,5 @@
 'use client'
+import { useActionState } from 'react'
 import { Modal } from '@entur/modal'
 import { AddNewTag } from './AddNewTag'
 import { TBoard } from 'types/settings'
@@ -8,7 +9,6 @@ import { CloseIcon, ReferenceIcon } from '@entur/icons'
 import { ActionChip } from '@entur/chip'
 import { AddExistingTag } from './AddExistingTag'
 import { HiddenInput } from 'components/Form/HiddenInput'
-import { useFormState } from 'react-dom'
 import { FormError } from 'app/(admin)/components/FormError'
 import { getFormFeedbackForField } from 'app/(admin)/utils'
 import { useModalWithValue } from '../../hooks/useModalWithValue'
@@ -18,10 +18,14 @@ import { removeTag } from './actions'
 function TagModal({ board }: { board: TBoard }) {
     const tags = board.meta?.tags ?? []
     const { isOpen, open, close } = useModalWithValue('addTags', board.id ?? '')
-    const [state, action] = useFormState(removeTag, undefined)
+    const [state, action] = useActionState(removeTag, undefined)
     return (
         <>
-            <Tooltip content="Administrer merkelapper" placement="bottom">
+            <Tooltip
+                content="Administrer merkelapper"
+                placement="bottom"
+                id="tooltip-manage-tags"
+            >
                 <IconButton aria-label="Administrer merkelapper" onClick={open}>
                     <ReferenceIcon />
                 </IconButton>

diff --git a/tavla/app/(admin)/components/CreateBoard/NameAndOrganizationSelector.tsx b/tavla/app/(admin)/components/CreateBoard/NameAndOrganizationSelector.tsx
@@ -1,18 +1,18 @@
 'use client'
 import { Dropdown } from '@entur/dropdown'
-import { TextField, Checkbox } from '@entur/form'
+import { Checkbox } from '@entur/form'
 import { Paragraph, Label, Heading2 } from '@entur/typography'
 import { useOrganizations } from 'app/(admin)/hooks/useOrganizations'
 import { getFormFeedbackForField } from 'app/(admin)/utils'
 import { HiddenInput } from 'components/Form/HiddenInput'
 import { SubmitButton } from 'components/Form/SubmitButton'
-import { useState } from 'react'
-import { useFormState } from 'react-dom'
+import { useActionState, useState } from 'react'
 import { createBoard } from './actions'
 import { FormError } from '../FormError'
+import ClientOnlyTextField from 'app/components/NoSSR/TextField'
 
 function NameAndOrganizationSelector() {
-    const [state, action] = useFormState(createBoard, undefined)
+    const [state, action] = useActionState(createBoard, undefined)
 
     const { organizations, selectedOrganization, setSelectedOrganization } =
         useOrganizations()
@@ -29,7 +29,7 @@ function NameAndOrganizationSelector() {
                 en organisasjon vil alle i organisasjonen ha tilgang til tavlen.
             </Paragraph>
             <Label>Gi tavlen et navn</Label>
-            <TextField
+            <ClientOnlyTextField
                 size="medium"
                 label="Navn"
                 id="name"

diff --git a/tavla/app/(admin)/components/Delete/index.tsx b/tavla/app/(admin)/components/Delete/index.tsx
@@ -4,9 +4,7 @@ import { DeleteIcon } from '@entur/icons'
 import { Modal } from '@entur/modal'
 import { Heading3, Paragraph, SubParagraph } from '@entur/typography'
 import { TOrganization } from 'types/settings'
-import { TextField } from '@entur/form'
 import { SubmitButton } from 'components/Form/SubmitButton'
-import { useFormState } from 'react-dom'
 import {
     getFormFeedbackForError,
     getFormFeedbackForField,
@@ -21,9 +19,11 @@ import { useSearchParams } from 'next/navigation'
 import { Tooltip } from '@entur/tooltip'
 import Link from 'next/link'
 import { useToast } from '@entur/alert'
-import { useState } from 'react'
+import { useActionState, useState } from 'react'
 import { HiddenInput } from 'components/Form/HiddenInput'
 
+import ClientOnlyTextField from 'app/components/NoSSR/TextField'
+
 function Delete({
     organization,
     type,
@@ -33,7 +33,10 @@ function Delete({
 }) {
     const [modalIsOpen, close] = useSearchParamsModal('delete')
     const { addToast } = useToast()
-    const [state, deleteOrgAction] = useFormState(deleteOrganization, undefined)
+    const [state, deleteOrgAction] = useActionState(
+        deleteOrganization,
+        undefined,
+    )
     const [nameError, setNameError] = useState<TFormFeedback>()
 
     const params = useSearchParams()
@@ -54,7 +57,11 @@ function Delete({
 
     return (
         <>
-            <Tooltip content="Slett organisasjon" placement="bottom">
+            <Tooltip
+                content="Slett organisasjon"
+                placement="bottom"
+                id="tooltip-delete-org"
+            >
                 <DeleteButton
                     as={Link}
                     href={`?delete=${organization.id}`}
@@ -67,6 +74,7 @@ function Delete({
                     <DeleteIcon />
                 </DeleteButton>
             </Tooltip>
+
             <Modal
                 open={modalIsOpen && pageParam === organization.id}
                 size="small"
@@ -90,7 +98,7 @@ function Delete({
                     <HiddenInput id="oname" value={organization.name} />
                     <HiddenInput id="oid" value={organization.id} />
 
-                    <TextField
+                    <ClientOnlyTextField
                         name="name"
                         label="Organisasjonsnavn"
                         type="text"

diff --git a/tavla/app/(admin)/components/Login/Create.tsx b/tavla/app/(admin)/components/Login/Create.tsx
@@ -1,9 +1,9 @@
 'use client'
+import { useActionState } from 'react'
 import Image from 'next/image'
 import musk from 'assets/illustrations/Musk.png'
 import { Heading3 } from '@entur/typography'
 import { create } from './actions'
-import { TextField } from '@entur/form'
 import {
     createUserWithEmailAndPassword,
     getAuth,
@@ -17,12 +17,12 @@ import {
     getFormFeedbackForField,
 } from 'app/(admin)/utils'
 import { FirebaseError } from 'firebase/app'
-import { useFormState } from 'react-dom'
 import { FormError } from '../FormError'
 import { SubmitButton } from 'components/Form/SubmitButton'
 import { usePathname } from 'next/navigation'
 import { Button, ButtonGroup } from '@entur/button'
 import Link from 'next/link'
+import ClientOnlyTextField from 'app/components/NoSSR/TextField'
 
 function Create() {
     const submit = async (p: TFormFeedback | undefined, data: FormData) => {
@@ -49,7 +49,7 @@ function Create() {
             }
         }
     }
-    const [state, action] = useFormState(submit, undefined)
+    const [state, action] = useActionState(submit, undefined)
     const pathname = usePathname()
 
     return (
@@ -64,23 +64,23 @@ function Create() {
             <Heading3 margin="bottom">Opprett ny bruker</Heading3>
             <form className="flex flex-col gap-4 w-full" action={action}>
                 <div>
-                    <TextField
+                    <ClientOnlyTextField
                         name="email"
                         label="E-post"
                         type="email"
                         {...getFormFeedbackForField('email', state)}
                     />
                 </div>
                 <div>
-                    <TextField
+                    <ClientOnlyTextField
                         name="password"
                         label="Passord"
                         type="password"
                         {...getFormFeedbackForField('password', state)}
                     />
                 </div>
                 <div>
-                    <TextField
+                    <ClientOnlyTextField
                         name="repeat_password"
                         label="Gjenta passord"
                         type="password"

diff --git a/tavla/app/(admin)/components/Login/Email.tsx b/tavla/app/(admin)/components/Login/Email.tsx
@@ -1,4 +1,5 @@
 'use client'
+import { useActionState } from 'react'
 import { useSearchParamsSetter } from 'app/(admin)/hooks/useSearchParamsSetter'
 import {
     getAuth,
@@ -8,7 +9,7 @@ import {
 import { getClientApp } from 'utils/firebase'
 import { login } from './actions'
 import { Heading3, Link as EnturLink } from '@entur/typography'
-import { TextField } from '@entur/form'
+
 import { Button, ButtonGroup } from '@entur/button'
 import Image from 'next/image'
 import musk from 'assets/illustrations/Musk.png'
@@ -18,13 +19,13 @@ import {
     getFormFeedbackForField,
 } from '../../utils'
 
-import { useFormState } from 'react-dom'
 import { FirebaseError } from 'firebase/app'
 import { FormError } from '../FormError'
 import { TLoginPage } from './types'
 import { SubmitButton } from 'components/Form/SubmitButton'
 import { usePathname } from 'next/navigation'
 import Link from 'next/link'
+import ClientOnlyTextField from 'app/components/NoSSR/TextField'
 
 function Email() {
     const submit = async (
@@ -56,7 +57,7 @@ function Email() {
         }
     }
 
-    const [state, action] = useFormState(submit, undefined)
+    const [state, action] = useActionState(submit, undefined)
     const getPathWithParams = useSearchParamsSetter<TLoginPage>('login')
     const pathname = usePathname()
 
@@ -71,15 +72,15 @@ function Email() {
             <Heading3 margin="bottom">Logg inn med e-post</Heading3>
             <form className="flex flex-col gap-4 w-full" action={action}>
                 <div>
-                    <TextField
+                    <ClientOnlyTextField
                         name="email"
                         label="E-post"
                         type="email"
                         {...getFormFeedbackForField('email', state)}
                     />
                 </div>
                 <div>
-                    <TextField
+                    <ClientOnlyTextField
                         name="password"
                         label="Passord"
                         type="password"

diff --git a/tavla/app/(admin)/components/Login/Reset.tsx b/tavla/app/(admin)/components/Login/Reset.tsx
@@ -1,4 +1,5 @@
 'use client'
+import { useActionState } from 'react'
 import Image from 'next/image'
 import { getAuth, sendPasswordResetEmail } from 'firebase/auth'
 import musk from 'assets/illustrations/Musk.png'
@@ -10,7 +11,6 @@ import {
     getFormFeedbackForError,
     getFormFeedbackForField,
 } from 'app/(admin)/utils'
-import { useFormState } from 'react-dom'
 import { FirebaseError } from 'firebase/app'
 import { FormError } from '../FormError'
 import { getClientApp } from 'utils/firebase'
@@ -32,7 +32,7 @@ function Reset() {
             }
         }
     }
-    const [state, action] = useFormState(submit, undefined)
+    const [state, action] = useActionState(submit, undefined)
     return (
         <div className="flex flex-col text-center items-center">
             <Image