fix(ui): removes edit drawer button from uploads collection edit view (#10426)

### What?

Previously, the `uploads` collection edit view contained an unnecessary
button in the file details which allowed opening the same document in a
drawer.

### Why?

This button was left over from `v2` when it was originally built to
allow editing of uploads from different collection edit views that had
`upload` type fields (relationship) within them.

This edit drawer button is now a separate button on the Upload
relationship component
[here](4d7587d26a/packages/ui/src/fields/Upload/RelationshipContent/index.tsx (L109)).

### How?

Removes edit drawer button from the FileDetails component.

#### Before:
![Screenshot 2025-01-07 at 1 49
18 PM](https://github.com/user-attachments/assets/50b2e789-69e7-47a5-99b8-ddbe1bf42f03)

#### After:
![Screenshot 2025-01-07 at 1 47
51 PM](https://github.com/user-attachments/assets/31a56aac-cb96-4fda-bad5-00759820da02)
This commit is contained in:
Patrik
2025-01-08 09:06:50 -05:00
committed by GitHub
parent ac97bfdc47
commit 9701fc6970
2 changed files with 4 additions and 32 deletions

View File

@@ -1,60 +1,36 @@
'use client'
import { formatFilesize } from 'payload/shared'
import React, { useState } from 'react'
import React from 'react'
export type FileMetaProps = {
collection?: string
filename: string
filesize: number
height?: number
id?: string
mimeType: string
sizes?: unknown
url: string
width?: number
}
import { EditIcon } from '../../../icons/Edit/index.js'
import { CopyToClipboard } from '../../CopyToClipboard/index.js'
import { useDocumentDrawer } from '../../DocumentDrawer/index.js'
import { Tooltip } from '../../Tooltip/index.js'
import './index.scss'
const baseClass = 'file-meta'
export const FileMeta: React.FC<FileMetaProps> = (props) => {
const { id, collection, filename, filesize, height, mimeType, url: fileURL, width } = props
const [hovered, setHovered] = useState(false)
const openInDrawer = Boolean(id && collection)
const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({
id,
collectionSlug: collection,
})
const { filename, filesize, height, mimeType, url: fileURL, width } = props
return (
<div className={baseClass}>
<div className={`${baseClass}__url`}>
{openInDrawer && <DocumentDrawer />}
<a href={fileURL} rel="noopener noreferrer" target="_blank">
{filename}
</a>
<CopyToClipboard defaultMessage="Copy URL" value={fileURL} />
{openInDrawer && (
<DocumentDrawerToggler
className={`${baseClass}__edit`}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
>
<EditIcon />
<Tooltip show={hovered}>Edit</Tooltip>
</DocumentDrawerToggler>
)}
</div>
<div className={`${baseClass}__size-type`}>
{formatFilesize(filesize)}
{width && height && (
{typeof width === 'number' && typeof height === 'number' && (
<React.Fragment>
&nbsp;-&nbsp;
{width}x{height}

View File

@@ -12,7 +12,6 @@ const baseClass = 'file-details'
import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'
export type StaticFileDetailsProps = {
collectionSlug: string
customUploadActions?: React.ReactNode[]
doc: {
sizes?: FileSizes
@@ -26,7 +25,6 @@ export type StaticFileDetailsProps = {
export const StaticFileDetails: React.FC<StaticFileDetailsProps> = (props) => {
const {
collectionSlug,
customUploadActions,
doc,
enableAdjustments,
@@ -36,7 +34,7 @@ export const StaticFileDetails: React.FC<StaticFileDetailsProps> = (props) => {
uploadConfig,
} = props
const { id, filename, filesize, height, mimeType, thumbnailURL, url, width } = doc
const { filename, filesize, height, mimeType, thumbnailURL, url, width } = doc
return (
<div className={baseClass}>
@@ -51,11 +49,9 @@ export const StaticFileDetails: React.FC<StaticFileDetailsProps> = (props) => {
/>
<div className={`${baseClass}__main-detail`}>
<FileMeta
collection={collectionSlug}
filename={filename as string}
filesize={filesize as number}
height={height as number}
id={id as string}
mimeType={mimeType as string}
url={url as string}
width={width as number}