feat(edit): show tavle url in copyable text (#1799)

* feat(edit): show tavle url in copyable text

* fix(edit): rename duplicate button

* feat(edit): link not crunching on mobile screen

* fix(edit): not show copyable text if link is undefined

Author: emilielr

tavla/app/(admin)/edit/[id]/components/ActionsMenu/index.tsx

@@ -2,7 +2,6 @@
 import { OverflowMenu } from '@entur/menu'
 import { TBoard, TOrganizationID } from 'types/settings'
 import { DuplicateBoard } from '../DuplicateBoard'
-import { Delete } from 'app/(admin)/boards/components/Column/Delete'
 
 function ActionsMenu({ board, oid }: { board: TBoard; oid?: TOrganizationID }) {
     return (
@@ -22,9 +21,8 @@ function OverflowActionsMenu({
 }) {
     return (
         <div className="hidden md:flex">
-            <OverflowMenu position="left">
+            <OverflowMenu placement="bottom-left">
                 <DuplicateBoard board={board} oid={oid} />
-                <Delete board={board} type="action" />
             </OverflowMenu>
         </div>
     )
@@ -34,7 +32,6 @@ function ButtonsMenu({ board, oid }: { board: TBoard; oid?: TOrganizationID }) {
     return (
         <div className="flex flex-col md:flex-row md:items-center gap-4 md:hidden">
             <DuplicateBoard board={board} oid={oid} type="button" />
-            <Delete board={board} type="button" />
         </div>
     )
 }

tavla/app/(admin)/edit/[id]/components/Buttons/Copy.tsx

@@ -1,6 +1,6 @@
 'use client'
-import { useToast } from '@entur/alert'
-import { Button, IconButton } from '@entur/button'
+import { CopyableText, useToast } from '@entur/alert'
+import { IconButton } from '@entur/button'
 import { CopyIcon } from '@entur/icons'
 import { Tooltip } from '@entur/tooltip'
 import { useLink } from 'hooks/useLink'
@@ -10,20 +10,22 @@ function Copy({ type, bid }: { type?: 'button' | 'icon'; bid?: string }) {
     const link = useLink(bid)
     const copy = () => {
         navigator.clipboard.writeText(link ?? '')
-        addToast('Lenke til Tavla kopiert')
+        addToast('Lenken til tavlen ble kopiert!')
     }
 
     if (type === 'button') {
-        return (
-            <Button
-                variant="secondary"
-                aria-label="Kopier lenken til tavlen"
-                onClick={copy}
-            >
-                Kopier lenke
-                <CopyIcon className="!top-[-1px]" />
-            </Button>
-        )
+        if (link) {
+            return (
+                <CopyableText
+                    successHeading=""
+                    successMessage="Lenken til tavlen ble kopiert!"
+                    aria-label="Kopier lenken til tavlen"
+                >
+                    {link.toString()}
+                </CopyableText>
+            )
+        }
+        return
     }
     return (
         <Tooltip

tavla/app/(admin)/edit/[id]/components/DuplicateBoard/index.tsx

@@ -37,7 +37,7 @@ function DuplicateBoard({
                 aria-label="Dupliser tavle"
                 onClick={handleSelect}
             >
-                Dupliser Tavle
+                Dupliser tavle
                 <AddIcon />
             </Button>
         )

tavla/app/(admin)/edit/[id]/page.tsx

@@ -20,6 +20,7 @@ import { ThemeSelect } from './components/ThemeSelect'
 import { TileList } from './components/TileList'
 import { getBoard } from 'Board/scenarios/Board/firebase'
 import { getUserFromSessionCookie } from 'app/(admin)/utils/server'
+import { Delete } from 'app/(admin)/boards/components/Column/Delete'
 
 export type TProps = {
     params: Promise<{ id: TBoardID }>
@@ -60,10 +61,13 @@ export default async function EditPage(props: TProps) {
                     <div className="flex flex-col md:flex-row md:items-center gap-4">
                         <Open bid={board.id} type="button" />
                         <RefreshButton board={board} />
-                        <Copy bid={board.id} type="button" />
+                        <Delete board={board} type="button" />
                         <ActionsMenu board={board} oid={organization?.id} />
                     </div>
                 </div>
+                <div className="md:w-fit">
+                    <Copy bid={board.id} type="button" />
+                </div>
 
                 <div className="bg-background rounded-md py-8 px-6 flex flex-col gap-4">
                     <Heading2>Stoppesteder</Heading2>