From b152f6168b65089924171b7964a7947768ab3e86 Mon Sep 17 00:00:00 2001
From: Adrian Flatner <adrianrflatner@gmail.com>
Date: Fri, 8 Nov 2024 09:51:38 +0100
Subject: [PATCH] fix(tooltip): adding id to tooltip:)

---
 .../boards/components/Column/Actions.tsx      | 25 ++++++-------
 .../boards/components/Column/Delete.tsx       | 14 ++++----
 .../(admin)/boards/components/Column/Tags.tsx | 26 ++++++--------
 .../boards/components/TagModal/index.tsx      | 20 +++++------
 tavla/app/(admin)/components/Delete/index.tsx | 35 ++++++++++---------
 .../edit/[id]/components/Buttons/Copy.tsx     | 21 ++++++-----
 .../edit/[id]/components/Buttons/Open.tsx     | 30 ++++++++--------
 .../edit/[id]/components/Footer/index.tsx     | 18 +++++-----
 .../[id]/components/MetaSettings/Adress.tsx   | 22 ++++++------
 .../edit/[id]/components/TileCard/index.tsx   | 31 ++++++++--------
 .../organizations/components/Actions.tsx      | 27 +++++++-------
 .../components/DefaultColumns/index.tsx       | 29 ++++++++-------
 .../MemberAdministration/RemoveUserButton.tsx | 26 +++++++-------
 13 files changed, 162 insertions(+), 162 deletions(-)

diff --git a/tavla/app/(admin)/boards/components/Column/Actions.tsx b/tavla/app/(admin)/boards/components/Column/Actions.tsx
index 379a9bb8c..79f656fa1 100644
--- a/tavla/app/(admin)/boards/components/Column/Actions.tsx
+++ b/tavla/app/(admin)/boards/components/Column/Actions.tsx
@@ -7,7 +7,6 @@ import { Delete } from './Delete'
 import { Open } from 'app/(admin)/edit/[id]/components/Buttons/Open'
 import { Copy } from 'app/(admin)/edit/[id]/components/Buttons/Copy'
 import { Tooltip } from '@entur/tooltip'
-import ClientOnly from 'app/components/NoSSR/ClientOnly'
 
 function Actions({ board }: { board: TBoard }) {
     return (
@@ -24,17 +23,19 @@ function Actions({ board }: { board: TBoard }) {
 
 function Edit({ bid }: { bid?: string }) {
     return (
-        <ClientOnly>
-            <Tooltip content="Rediger tavle" placement="bottom">
-                <IconButton
-                    as={Link}
-                    aria-label="Rediger tavle"
-                    href={`/edit/${bid}`}
-                >
-                    <EditIcon />
-                </IconButton>
-            </Tooltip>
-        </ClientOnly>
+        <Tooltip
+            content="Rediger tavle"
+            placement="bottom"
+            id="tooltip-edit-board"
+        >
+            <IconButton
+                as={Link}
+                aria-label="Rediger tavle"
+                href={`/edit/${bid}`}
+            >
+                <EditIcon />
+            </IconButton>
+        </Tooltip>
     )
 }
 
diff --git a/tavla/app/(admin)/boards/components/Column/Delete.tsx b/tavla/app/(admin)/boards/components/Column/Delete.tsx
index 697ef2482..ac2d15571 100644
--- a/tavla/app/(admin)/boards/components/Column/Delete.tsx
+++ b/tavla/app/(admin)/boards/components/Column/Delete.tsx
@@ -16,7 +16,6 @@ import { SubmitButton } from 'components/Form/SubmitButton'
 import { OverflowMenuItem } from '@entur/menu'
 import { useToast } from '@entur/alert'
 import { deleteBoardAction } from '../../utils/actions'
-import ClientOnly from 'app/components/NoSSR/ClientOnly'
 
 function Delete({
     board,
@@ -37,11 +36,14 @@ function Delete({
 
     return (
         <>
-            <ClientOnly>
-                <Tooltip content="Slett tavle" placement="bottom">
-                    <DeleteButton type={type} onClick={open} />
-                </Tooltip>
-            </ClientOnly>
+            <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
index 159805022..95d98a98c 100644
--- a/tavla/app/(admin)/boards/components/Column/Tags.tsx
+++ b/tavla/app/(admin)/boards/components/Column/Tags.tsx
@@ -9,7 +9,6 @@ import { Column } from './Column'
 import { colorsFromHash, sortArrayByOverlap } from '../../utils'
 import { TagsContext } from '../../utils/context'
 import { useSearchParam } from '../../hooks/useSearchParam'
-import ClientOnly from 'app/components/NoSSR/ClientOnly'
 
 function TagList({ tags, children }: { tags: TTag[]; children?: ReactNode }) {
     return (
@@ -62,20 +61,17 @@ function Tags({
                     <TagModal board={board} />
                     <TagList tags={tags.slice(0, displayNumber)}>
                         {hiddenNumber > 0 && (
-                            <ClientOnly>
-                                <Tooltip
-                                    placement="bottom"
-                                    content={
-                                        <TagList
-                                            tags={tags.slice(displayNumber)}
-                                        />
-                                    }
-                                >
-                                    <Badge variant="neutral">
-                                        + {hiddenNumber}
-                                    </Badge>
-                                </Tooltip>
-                            </ClientOnly>
+                            <Tooltip
+                                placement="bottom"
+                                content={
+                                    <TagList tags={tags.slice(displayNumber)} />
+                                }
+                                id="tooltip-tags"
+                            >
+                                <Badge variant="neutral">
+                                    + {hiddenNumber}
+                                </Badge>
+                            </Tooltip>
                         )}
                     </TagList>
                 </div>
diff --git a/tavla/app/(admin)/boards/components/TagModal/index.tsx b/tavla/app/(admin)/boards/components/TagModal/index.tsx
index 3a570d6e9..0937d7a69 100644
--- a/tavla/app/(admin)/boards/components/TagModal/index.tsx
+++ b/tavla/app/(admin)/boards/components/TagModal/index.tsx
@@ -14,7 +14,6 @@ import { getFormFeedbackForField } from 'app/(admin)/utils'
 import { useModalWithValue } from '../../hooks/useModalWithValue'
 import { DEFAULT_BOARD_NAME } from 'app/(admin)/utils/constants'
 import { removeTag } from './actions'
-import ClientOnly from 'app/components/NoSSR/ClientOnly'
 
 function TagModal({ board }: { board: TBoard }) {
     const tags = board.meta?.tags ?? []
@@ -22,16 +21,15 @@ function TagModal({ board }: { board: TBoard }) {
     const [state, action] = useActionState(removeTag, undefined)
     return (
         <>
-            <ClientOnly>
-                <Tooltip content="Administrer merkelapper" placement="bottom">
-                    <IconButton
-                        aria-label="Administrer merkelapper"
-                        onClick={open}
-                    >
-                        <ReferenceIcon />
-                    </IconButton>
-                </Tooltip>
-            </ClientOnly>
+            <Tooltip
+                content="Administrer merkelapper"
+                placement="bottom"
+                id="tooltip-manage-tags"
+            >
+                <IconButton aria-label="Administrer merkelapper" onClick={open}>
+                    <ReferenceIcon />
+                </IconButton>
+            </Tooltip>
 
             <Modal
                 size="medium"
diff --git a/tavla/app/(admin)/components/Delete/index.tsx b/tavla/app/(admin)/components/Delete/index.tsx
index 69e3bc3ac..fecff96e3 100644
--- a/tavla/app/(admin)/components/Delete/index.tsx
+++ b/tavla/app/(admin)/components/Delete/index.tsx
@@ -21,7 +21,7 @@ import Link from 'next/link'
 import { useToast } from '@entur/alert'
 import { useActionState, useState } from 'react'
 import { HiddenInput } from 'components/Form/HiddenInput'
-import ClientOnly from 'app/components/NoSSR/ClientOnly'
+
 import ClientOnlyTextField from 'app/components/NoSSR/TextField'
 
 function Delete({
@@ -57,21 +57,24 @@ function Delete({
 
     return (
         <>
-            <ClientOnly>
-                <Tooltip content="Slett organisasjon" placement="bottom">
-                    <DeleteButton
-                        as={Link}
-                        href={`?delete=${organization.id}`}
-                        className="gap-4"
-                        variant="secondary"
-                        aria-label="Slett organisasjon"
-                        size="small"
-                    >
-                        {type === 'secondary' && 'Slett'}
-                        <DeleteIcon />
-                    </DeleteButton>
-                </Tooltip>
-            </ClientOnly>
+            <Tooltip
+                content="Slett organisasjon"
+                placement="bottom"
+                id="tooltip-delete-org"
+            >
+                <DeleteButton
+                    as={Link}
+                    href={`?delete=${organization.id}`}
+                    className="gap-4"
+                    variant="secondary"
+                    aria-label="Slett organisasjon"
+                    size="small"
+                >
+                    {type === 'secondary' && 'Slett'}
+                    <DeleteIcon />
+                </DeleteButton>
+            </Tooltip>
+
             <Modal
                 open={modalIsOpen && pageParam === organization.id}
                 size="small"
diff --git a/tavla/app/(admin)/edit/[id]/components/Buttons/Copy.tsx b/tavla/app/(admin)/edit/[id]/components/Buttons/Copy.tsx
index 07974fb26..15e0ed7f3 100644
--- a/tavla/app/(admin)/edit/[id]/components/Buttons/Copy.tsx
+++ b/tavla/app/(admin)/edit/[id]/components/Buttons/Copy.tsx
@@ -3,7 +3,7 @@ import { useToast } from '@entur/alert'
 import { Button, IconButton } from '@entur/button'
 import { CopyIcon } from '@entur/icons'
 import { Tooltip } from '@entur/tooltip'
-import ClientOnly from 'app/components/NoSSR/ClientOnly'
+
 import { useLink } from 'hooks/useLink'
 
 function Copy({ type, bid }: { type?: 'button' | 'icon'; bid?: string }) {
@@ -27,16 +27,15 @@ function Copy({ type, bid }: { type?: 'button' | 'icon'; bid?: string }) {
         )
     }
     return (
-        <ClientOnly>
-            <Tooltip content="Kopier lenken til tavlen" placement="bottom">
-                <IconButton
-                    aria-label="Kopier lenken til tavlen"
-                    onClick={copy}
-                >
-                    <CopyIcon />
-                </IconButton>
-            </Tooltip>
-        </ClientOnly>
+        <Tooltip
+            content="Kopier lenken til tavlen"
+            placement="bottom"
+            id="tooltip-copy-link-board"
+        >
+            <IconButton aria-label="Kopier lenken til tavlen" onClick={copy}>
+                <CopyIcon />
+            </IconButton>
+        </Tooltip>
     )
 }
 export { Copy }
diff --git a/tavla/app/(admin)/edit/[id]/components/Buttons/Open.tsx b/tavla/app/(admin)/edit/[id]/components/Buttons/Open.tsx
index e3744a5e1..b7c9e0d9b 100644
--- a/tavla/app/(admin)/edit/[id]/components/Buttons/Open.tsx
+++ b/tavla/app/(admin)/edit/[id]/components/Buttons/Open.tsx
@@ -2,7 +2,7 @@
 import { Button, IconButton } from '@entur/button'
 import { ExternalIcon } from '@entur/icons'
 import { Tooltip } from '@entur/tooltip'
-import ClientOnly from 'app/components/NoSSR/ClientOnly'
+
 import { useLink } from 'hooks/useLink'
 import Link from 'next/link'
 import { usePostHog } from 'posthog-js/react'
@@ -28,19 +28,21 @@ function Open({ type, bid }: { type?: 'button' | 'icon'; bid?: string }) {
     }
 
     return (
-        <ClientOnly>
-            <Tooltip content="Åpne tavle" placement="bottom">
-                <IconButton
-                    as={Link}
-                    aria-label="Åpne tavle"
-                    href={link ?? '/'}
-                    target="_blank"
-                    onClick={() => posthog.capture('OPEN_BOARD_BTN')}
-                >
-                    <ExternalIcon />
-                </IconButton>
-            </Tooltip>
-        </ClientOnly>
+        <Tooltip
+            content="Åpne tavle"
+            placement="bottom"
+            id="tooltip-open-board"
+        >
+            <IconButton
+                as={Link}
+                aria-label="Åpne tavle"
+                href={link ?? '/'}
+                target="_blank"
+                onClick={() => posthog.capture('OPEN_BOARD_BTN')}
+            >
+                <ExternalIcon />
+            </IconButton>
+        </Tooltip>
     )
 }
 
diff --git a/tavla/app/(admin)/edit/[id]/components/Footer/index.tsx b/tavla/app/(admin)/edit/[id]/components/Footer/index.tsx
index b666d06c2..c83a9387c 100644
--- a/tavla/app/(admin)/edit/[id]/components/Footer/index.tsx
+++ b/tavla/app/(admin)/edit/[id]/components/Footer/index.tsx
@@ -8,7 +8,7 @@ import { TBoardID, TFooter } from 'types/settings'
 import { setFooter } from './actions'
 import { useState } from 'react'
 import { Tooltip } from '@entur/tooltip'
-import ClientOnly from 'app/components/NoSSR/ClientOnly'
+
 import ClientOnlyTextField from 'app/components/NoSSR/TextField'
 
 function Footer({
@@ -40,14 +40,14 @@ function Footer({
         <form className="box flex flex-col" action={submitOrgBoard}>
             <div className="flex flex-row items-center gap-2">
                 <Heading3 margin="bottom">Infomelding</Heading3>
-                <ClientOnly>
-                    <Tooltip
-                        content="Skriv en kort tekst som skal vises nederst i tavlen."
-                        placement="top"
-                    >
-                        <ValidationInfoFilledIcon className="mb-3" size={20} />
-                    </Tooltip>
-                </ClientOnly>
+
+                <Tooltip
+                    content="Skriv en kort tekst som skal vises nederst i tavlen."
+                    placement="top"
+                    id="tooltip-footer"
+                >
+                    <ValidationInfoFilledIcon className="mb-3" size={20} />
+                </Tooltip>
             </div>
             <div className="h-full">
                 <ClientOnlyTextField
diff --git a/tavla/app/(admin)/edit/[id]/components/MetaSettings/Adress.tsx b/tavla/app/(admin)/edit/[id]/components/MetaSettings/Adress.tsx
index a2f3999e5..f1f2eed63 100644
--- a/tavla/app/(admin)/edit/[id]/components/MetaSettings/Adress.tsx
+++ b/tavla/app/(admin)/edit/[id]/components/MetaSettings/Adress.tsx
@@ -34,17 +34,17 @@ function Address({ bid, location }: { bid: TBoardID; location?: TLocation }) {
         <form onSubmit={handleSubmit} className="box flex flex-col">
             <div className="flex flex-row items-center gap-2">
                 <Heading3 margin="bottom">Adresse</Heading3>
-                <ClientOnly>
-                    <Tooltip
-                        content="Under innstillingene til hvert stoppested kan du velge om gåavstanden, fra tavlens adresse til selve stoppestedet, skal vises"
-                        placement="top"
-                    >
-                        <ValidationInfoFilledIcon
-                            className="md:mb-2 mb-3"
-                            size={20}
-                        />
-                    </Tooltip>
-                </ClientOnly>
+
+                <Tooltip
+                    content="Under innstillingene til hvert stoppested kan du velge om gåavstanden, fra tavlens adresse til selve stoppestedet, skal vises"
+                    placement="top"
+                    id="tooltip-address"
+                >
+                    <ValidationInfoFilledIcon
+                        className="md:mb-2 mb-3"
+                        size={20}
+                    />
+                </Tooltip>
             </div>
             <div className="h-full">
                 <ClientOnly>
diff --git a/tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx b/tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx
index 0dc9fd581..16eb3c22d 100644
--- a/tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx
+++ b/tavla/app/(admin)/edit/[id]/components/TileCard/index.tsx
@@ -57,7 +57,6 @@ import {
     getFormFeedbackForField,
 } from 'app/(admin)/utils'
 import { NEW_LINE_IDS, OLD_LINE_IDS, SWITCH_DATE } from '../../compatibility'
-import ClientOnly from 'app/components/NoSSR/ClientOnly'
 import ClientOnlyTextField from 'app/components/NoSSR/TextField'
 
 function TileCard({
@@ -381,23 +380,21 @@ function TileCard({
 
                         <div className="flex flex-row items-baseline gap-1">
                             <Heading4>Kolonner</Heading4>
-                            <ClientOnly>
-                                <Tooltip
-                                    aria-hidden
-                                    placement="top"
-                                    content="Vis forklaring på kolonner"
+
+                            <Tooltip
+                                aria-hidden
+                                placement="top"
+                                content="Vis forklaring på kolonner"
+                                id="tooltip-columns"
+                            >
+                                <IconButton
+                                    type="button"
+                                    aria-label="Vis forklaring på kolonner"
+                                    onClick={() => setIsColumnModalOpen(true)}
                                 >
-                                    <IconButton
-                                        type="button"
-                                        aria-label="Vis forklaring på kolonner"
-                                        onClick={() =>
-                                            setIsColumnModalOpen(true)
-                                        }
-                                    >
-                                        <QuestionFilledIcon />
-                                    </IconButton>
-                                </Tooltip>
-                            </ClientOnly>
+                                    <QuestionFilledIcon />
+                                </IconButton>
+                            </Tooltip>
                         </div>
                         <div className="flex flex-row items-start gap-2">
                             <SubParagraph>
diff --git a/tavla/app/(admin)/organizations/components/Actions.tsx b/tavla/app/(admin)/organizations/components/Actions.tsx
index 2ebcd4d43..00eea20ad 100644
--- a/tavla/app/(admin)/organizations/components/Actions.tsx
+++ b/tavla/app/(admin)/organizations/components/Actions.tsx
@@ -5,22 +5,23 @@ import Link from 'next/link'
 import { TOrganization, TUserID } from 'types/settings'
 import { Delete } from 'app/(admin)/components/Delete'
 import { Tooltip } from '@entur/tooltip'
-import ClientOnly from 'app/components/NoSSR/ClientOnly'
 
 function Edit({ oid }: { oid?: string }) {
     return (
-        <ClientOnly>
-            <Tooltip content="Rediger organisasjon" placement="bottom">
-                <IconButton
-                    as={Link}
-                    aria-label="Rediger organisasjon"
-                    href={`/organizations/${oid}`}
-                    size="small"
-                >
-                    <EditIcon />
-                </IconButton>
-            </Tooltip>
-        </ClientOnly>
+        <Tooltip
+            content="Rediger organisasjon"
+            placement="bottom"
+            id="tooltip-edit-org"
+        >
+            <IconButton
+                as={Link}
+                aria-label="Rediger organisasjon"
+                href={`/organizations/${oid}`}
+                size="small"
+            >
+                <EditIcon />
+            </IconButton>
+        </Tooltip>
     )
 }
 
diff --git a/tavla/app/(admin)/organizations/components/DefaultColumns/index.tsx b/tavla/app/(admin)/organizations/components/DefaultColumns/index.tsx
index 97d333438..2d116fb81 100644
--- a/tavla/app/(admin)/organizations/components/DefaultColumns/index.tsx
+++ b/tavla/app/(admin)/organizations/components/DefaultColumns/index.tsx
@@ -17,7 +17,6 @@ import { Tooltip } from '@entur/tooltip'
 import { IconButton } from '@entur/button'
 import { QuestionFilledIcon } from '@entur/icons'
 import { ColumnModal } from './ColumnModal'
-import ClientOnly from 'app/components/NoSSR/ClientOnly'
 
 function DefaultColumns({
     oid,
@@ -53,21 +52,21 @@ function DefaultColumns({
         <div className="box flex flex-col gap-1">
             <div className="flex flex-row items-baseline">
                 <Heading2>Kolonner</Heading2>
-                <ClientOnly>
-                    <Tooltip
-                        aria-hidden
-                        placement="top"
-                        content="Vis forklaring"
+
+                <Tooltip
+                    aria-hidden
+                    placement="top"
+                    content="Vis forklaring"
+                    id="tooltip-columns-explanation"
+                >
+                    <IconButton
+                        type="button"
+                        aria-label="Vis forklaring på kolonner"
+                        onClick={() => setIsOpen(true)}
                     >
-                        <IconButton
-                            type="button"
-                            aria-label="Vis forklaring på kolonner"
-                            onClick={() => setIsOpen(true)}
-                        >
-                            <QuestionFilledIcon size={24} />
-                        </IconButton>
-                    </Tooltip>
-                </ClientOnly>
+                        <QuestionFilledIcon size={24} />
+                    </IconButton>
+                </Tooltip>
             </div>
 
             <Paragraph margin="none">
diff --git a/tavla/app/(admin)/organizations/components/MemberAdministration/RemoveUserButton.tsx b/tavla/app/(admin)/organizations/components/MemberAdministration/RemoveUserButton.tsx
index c4d3cb632..b427630ee 100644
--- a/tavla/app/(admin)/organizations/components/MemberAdministration/RemoveUserButton.tsx
+++ b/tavla/app/(admin)/organizations/components/MemberAdministration/RemoveUserButton.tsx
@@ -14,7 +14,6 @@ import Image from 'next/image'
 import sheep from 'assets/illustrations/Sheep.png'
 import { useModalWithValue } from 'app/(admin)/boards/hooks/useModalWithValue'
 import { removeUser } from './actions'
-import ClientOnly from 'app/components/NoSSR/ClientOnly'
 
 function RemoveUserButton({
     user,
@@ -30,17 +29,20 @@ function RemoveUserButton({
     )
     return (
         <>
-            <ClientOnly>
-                <Tooltip content="Slett bruker" placement="bottom">
-                    <IconButton
-                        type="submit"
-                        aria-label="Slett bruker"
-                        onClick={open}
-                    >
-                        <DeleteIcon />
-                    </IconButton>
-                </Tooltip>
-            </ClientOnly>
+            <Tooltip
+                content="Slett bruker"
+                placement="bottom"
+                id="tooltip-delete-user"
+            >
+                <IconButton
+                    type="submit"
+                    aria-label="Slett bruker"
+                    onClick={open}
+                >
+                    <DeleteIcon />
+                </IconButton>
+            </Tooltip>
+
             <Modal
                 open={isOpen}
                 size="small"