allow opening edit view via context menu

Author: tak-amboss

Diff for: packages/ui/src/elements/Link/index.tsx

@@ -30,6 +30,12 @@ type Props = {
    * @default true
    */
   preventDefault?: boolean
+  /**
+   * Skip the route transition if true
+   *
+   * @default false
+   */
+  skipRouteTransition?: boolean
 } & Parameters<typeof NextLink>[0]
 
 export const Link: React.FC<Props> = ({
@@ -40,6 +46,7 @@ export const Link: React.FC<Props> = ({
   ref,
   replace,
   scroll,
+  skipRouteTransition = false,
   ...rest
 }) => {
   const router = useRouter()
@@ -63,6 +70,10 @@ export const Link: React.FC<Props> = ({
           e.preventDefault()
         }
 
+        if (skipRouteTransition) {
+          return
+        }
+
         startRouteTransition(() => {
           const url = typeof href === 'string' ? href : formatUrl(href)
 

Diff for: packages/ui/src/elements/ReactSelect/types.ts

@@ -3,6 +3,7 @@ import type { CommonProps, GroupBase, Props as ReactSelectStateManagerProps } fr
 import type { DocumentDrawerProps, UseDocumentDrawer } from '../DocumentDrawer/types.js'
 
 type CustomSelectProps = {
+  adminRoute: string
   disableKeyDown?: boolean
   disableMouseDown?: boolean
   DocumentDrawerToggler?: ReturnType<UseDocumentDrawer>[1]

Diff for: packages/ui/src/fields/Relationship/index.tsx

@@ -697,6 +697,7 @@ const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) =>
                 ...(appearance !== 'select' && { DropdownIndicator: null }),
               }}
               customProps={{
+                adminRoute: config.routes.admin,
                 disableKeyDown: isDrawerOpen || isListDrawerOpen,
                 disableMouseDown: isDrawerOpen || isListDrawerOpen,
                 onDocumentOpen,

Diff for: packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.tsx

@@ -1,12 +1,14 @@
 'use client'
 import type { MultiValueProps } from 'react-select'
 
+import { formatAdminURL } from 'payload/shared'
 import React, { Fragment, useState } from 'react'
 import { components } from 'react-select'
 
 import type { ReactSelectAdapterProps } from '../../../../elements/ReactSelect/types.js'
 import type { Option } from '../../types.js'
 
+import { Link } from '../../../../elements/Link/index.js'
 import { Tooltip } from '../../../../elements/Tooltip/index.js'
 import { EditIcon } from '../../../../icons/Edit/index.js'
 import { useAuth } from '../../../../providers/Auth/index.js'
@@ -25,13 +27,17 @@ export const MultiValueLabel: React.FC<
 > = (props) => {
   const {
     data: { allowEdit, label, relationTo, value },
-    selectProps: { customProps: { draggableProps, onDocumentOpen } = {} } = {},
+    selectProps: { customProps: { adminRoute, draggableProps, onDocumentOpen } = {} } = {},
   } = props
 
   const { permissions } = useAuth()
   const [showTooltip, setShowTooltip] = useState(false)
   const { t } = useTranslation()
   const hasReadPermission = Boolean(permissions?.collections?.[relationTo]?.read)
+  const docUrl = formatAdminURL({
+    adminRoute,
+    path: `/collections/${relationTo}/${value}`,
+  })
 
   return (
     <div className={baseClass}>
@@ -46,9 +52,10 @@ export const MultiValueLabel: React.FC<
       </div>
       {relationTo && hasReadPermission && allowEdit !== false && (
         <Fragment>
-          <button
+          <Link
             aria-label={`Edit ${label}`}
             className={`${baseClass}__drawer-toggler`}
+            href={docUrl}
             onClick={(event) => {
               setShowTooltip(false)
               onDocumentOpen({
@@ -67,13 +74,13 @@ export const MultiValueLabel: React.FC<
             onMouseEnter={() => setShowTooltip(true)}
             onMouseLeave={() => setShowTooltip(false)}
             onTouchEnd={(e) => e.stopPropagation()} // prevents react-select dropdown from opening
-            type="button"
+            skipRouteTransition
           >
             <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>
               {t('general:editLabel', { label: '' })}
             </Tooltip>
             <EditIcon className={`${baseClass}__icon`} />
-          </button>
+          </Link>
         </Fragment>
       )}
     </div>

Diff for: packages/ui/src/fields/Relationship/select-components/SingleValue/index.tsx

@@ -1,12 +1,14 @@
 'use client'
 import type { SingleValueProps } from 'react-select'
 
+import { formatAdminURL } from 'payload/shared'
 import React, { Fragment, useState } from 'react'
 import { components as SelectComponents } from 'react-select'
 
 import type { ReactSelectAdapterProps } from '../../../../elements/ReactSelect/types.js'
 import type { Option } from '../../types.js'
 
+import { Link } from '../../../../elements/Link/index.js'
 import { Tooltip } from '../../../../elements/Tooltip/index.js'
 import { EditIcon } from '../../../../icons/Edit/index.js'
 import { useAuth } from '../../../../providers/Auth/index.js'
@@ -26,13 +28,17 @@ export const SingleValue: React.FC<
   const {
     children,
     data: { allowEdit, label, relationTo, value },
-    selectProps: { customProps: { onDocumentOpen } = {} } = {},
+    selectProps: { customProps: { adminRoute, onDocumentOpen } = {} } = {},
   } = props
 
   const [showTooltip, setShowTooltip] = useState(false)
   const { t } = useTranslation()
   const { permissions } = useAuth()
   const hasReadPermission = Boolean(permissions?.collections?.[relationTo]?.read)
+  const docUrl = formatAdminURL({
+    adminRoute,
+    path: `/collections/${relationTo}/${value}`,
+  })
 
   return (
     <SelectComponents.SingleValue {...props} className={baseClass}>
@@ -41,9 +47,10 @@ export const SingleValue: React.FC<
           <div className={`${baseClass}__text`}>{children}</div>
           {relationTo && hasReadPermission && allowEdit !== false && (
             <Fragment>
-              <button
+              <Link
                 aria-label={t('general:editLabel', { label })}
                 className={`${baseClass}__drawer-toggler`}
+                href={docUrl}
                 onClick={(event) => {
                   setShowTooltip(false)
                   onDocumentOpen({
@@ -62,13 +69,13 @@ export const SingleValue: React.FC<
                 onMouseEnter={() => setShowTooltip(true)}
                 onMouseLeave={() => setShowTooltip(false)}
                 onTouchEnd={(e) => e.stopPropagation()} // prevents react-select dropdown from openingtype="button"
-                type="button"
+                skipRouteTransition
               >
                 <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>
                   {t('general:edit')}
                 </Tooltip>
                 <EditIcon />
-              </button>
+              </Link>
             </Fragment>
           )}
         </div>