fix(tooltip): adding id to tooltip:)

entur · Nov 8, 2024 · b152f61 · b152f61
1 parent 6ec80b8
commit b152f61
Show file tree

Hide file tree

Showing 13 changed files with 162 additions and 162 deletions.
diff --git 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
@@ -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
@@ -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
@@ -14,24 +14,22 @@ 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 ?? []
     const { isOpen, open, close } = useModalWithValue('addTags', board.id ?? '')
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>