feat(admin): add copy direct link button to showcase page

Lets admins copy the public /demo/:slug URL for a showcase directly
from the showcase editor header.

Signed-off-by: Emiliano Suñé <2395873+esune@users.noreply.github.com>

Author: esune

frontend/src/admin/pages/ShowcasePage.tsx

@@ -1,7 +1,8 @@
-import { UserIcon, QueueListIcon, FilmIcon, ArrowLeftIcon } from '@heroicons/react/24/outline'
+import { UserIcon, QueueListIcon, FilmIcon, ArrowLeftIcon, LinkIcon } from '@heroicons/react/24/outline'
 import { useEffect, useState } from 'react'
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 
+import { basePath as clientBasePath } from '../../client/utils/BasePath'
 import { adminBaseRoute } from '../api/adminApi'
 import { AdminNavbar } from '../components/AdminNavbar'
 import { SecondaryNavbar } from '../components/showcase/SecondaryNavbar'
@@ -25,6 +26,7 @@ export function ShowcasePage() {
   const { showcase, isLoading, refetch } = useShowcase()
   const [isExpanded, setIsExpanded] = useState(false)
   const [isNewShowcase, setIsNewShowcase] = useState(location.state?.isNewShowcase || false)
+  const [linkCopied, setLinkCopied] = useState(false)
   const tabFromUrl = searchParams.get('tab')
   const [activeTab, setActiveTab] = useState<TabId>(isValidTabId(tabFromUrl) ? tabFromUrl : 'persona')
 
@@ -57,6 +59,18 @@ export function ShowcasePage() {
     navigate(`${adminBaseRoute}/creator`)
   }
 
+  const handleCopyDirectLink = () => {
+    if (!showcase?.slug) return
+    const directLink = `${window.location.origin}${clientBasePath}/demo/${showcase.slug}`
+    navigator.clipboard
+      .writeText(directLink)
+      .then(() => {
+        setLinkCopied(true)
+        setTimeout(() => setLinkCopied(false), 2000)
+      })
+      .catch(() => undefined)
+  }
+
   return (
     <div className="flex flex-col h-screen bg-gray-50">
       <AdminNavbar onLogoClick={handleLogoClick} />
@@ -71,7 +85,19 @@ export function ShowcasePage() {
           <span className="font-medium">Back to Showcases</span>
         </button>
         <div className="w-full max-w-4xl">
-          <h2 className="text-2xl font-semibold text-bcgov-black">{showcase?.name || 'Showcase Name'}</h2>
+          <div className="flex items-center gap-2">
+            <h2 className="text-2xl font-semibold text-bcgov-black">{showcase?.name || 'Showcase Name'}</h2>
+            {showcase?.slug && (
+              <button
+                onClick={handleCopyDirectLink}
+                title="Copy direct link"
+                className="text-gray-400 hover:text-bcgov-blue transition-all p-1 rounded"
+              >
+                <LinkIcon className="w-5 h-5" />
+              </button>
+            )}
+            {linkCopied && <span className="text-sm text-bcgov-blue">Copied!</span>}
+          </div>
           <h5 className="text-gray-500 mt-2">{showcase?.description || 'Description of the showcase.'}</h5>
         </div>
       </div>

frontend/src/admin/types/index.ts

@@ -99,6 +99,7 @@ export type ShowcaseStatus = 'active' | 'hidden' | 'pending'
 
 export interface Showcase {
   name: string
+  slug?: string
   status?: ShowcaseStatus
   deleted_at?: string | null
   description?: string