fix(plugin-search): generates full docURL with basePath from next config (#10910)

Fixes #10878. The Search Plugin displays a link within the search
results collection that points to the underlying document that is
related to that result. The href used, however, was not accounting for
any `basePath` provided to the `next.config.js`, leading to a 404 if
using a custom base path. The fix is to use the `Link` component from
`next/link` instead of an anchor tag directly. This will automatically
inject the the base path into the href before rendering it.

This PR also brings back the `CopyToClipboard` component. This makes it
easy for the user to copy the href instead of navigating to it.

---------

Co-authored-by: Jacob Fletcher <jacobsfletch@gmail.com>

Author: jessrynkar

packages/plugin-search/src/Search/ui/LinkToDoc/index.client.tsx

@@ -1,10 +1,11 @@
 'use client'
 
-import { useConfig, useField } from '@payloadcms/ui'
+import { CopyToClipboard, useConfig, useField } from '@payloadcms/ui'
 import { formatAdminURL } from '@payloadcms/ui/shared'
+import LinkImport from 'next/link.js'
 import React from 'react'
-// TODO: fix this import to work in dev mode within the monorepo in a way that is backwards compatible with 1.x
-// import CopyToClipboard from 'payload/dist/admin/components/elements/CopyToClipboard'
+
+const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
 
 export const LinkToDocClient: React.FC = () => {
   const { config } = useConfig()
@@ -27,6 +28,8 @@ export const LinkToDocClient: React.FC = () => {
     path: `/collections/${value.relationTo || ''}/${value.value || ''}`,
   })}`
 
+  const hrefToDisplay = `${process.env.NEXT_BASE_PATH || ''}${href}`
+
   return (
     <div style={{ marginBottom: 'var(--spacing-field, 1rem)' }}>
       <div>
@@ -38,7 +41,7 @@ export const LinkToDocClient: React.FC = () => {
         >
           Doc URL
         </span>
-        {/* <CopyToClipboard value={href} /> */}
+        <CopyToClipboard value={hrefToDisplay} />
       </div>
       <div
         style={{
@@ -47,9 +50,9 @@ export const LinkToDocClient: React.FC = () => {
           textOverflow: 'ellipsis',
         }}
       >
-        <a href={href} target="_blank">
-          {href}
-        </a>
+        <Link href={href} passHref {...{ rel: 'noopener noreferrer', target: '_blank' }}>
+          {hrefToDisplay}
+        </Link>
       </div>
     </div>
   )

tsconfig.base.json

@@ -31,7 +31,7 @@
       }
     ],
     "paths": {
-      "@payload-config": ["./test/fields/config.ts"],
+      "@payload-config": ["./test/plugin-search/config.ts"],
       "@payloadcms/live-preview": ["./packages/live-preview/src"],
       "@payloadcms/live-preview-react": ["./packages/live-preview-react/src/index.ts"],
       "@payloadcms/live-preview-vue": ["./packages/live-preview-vue/src/index.ts"],