Skip to content

Commit 9701fc6

Browse files
authored
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](https://github.com/payloadcms/payload/blob/4d7587d26a149313240086c298790f7da79b7376/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)
1 parent ac97bfd commit 9701fc6

File tree

2 files changed

+4
-32
lines changed

2 files changed

+4
-32
lines changed

packages/ui/src/elements/FileDetails/FileMeta/index.tsx

Lines changed: 3 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,36 @@
11
'use client'
22
import { formatFilesize } from 'payload/shared'
3-
import React, { useState } from 'react'
3+
import React from 'react'
44

55
export type FileMetaProps = {
6-
collection?: string
76
filename: string
87
filesize: number
98
height?: number
10-
id?: string
119
mimeType: string
1210
sizes?: unknown
1311
url: string
1412
width?: number
1513
}
1614

17-
import { EditIcon } from '../../../icons/Edit/index.js'
1815
import { CopyToClipboard } from '../../CopyToClipboard/index.js'
19-
import { useDocumentDrawer } from '../../DocumentDrawer/index.js'
20-
import { Tooltip } from '../../Tooltip/index.js'
2116
import './index.scss'
2217

2318
const baseClass = 'file-meta'
2419

2520
export const FileMeta: React.FC<FileMetaProps> = (props) => {
26-
const { id, collection, filename, filesize, height, mimeType, url: fileURL, width } = props
27-
28-
const [hovered, setHovered] = useState(false)
29-
const openInDrawer = Boolean(id && collection)
30-
31-
const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({
32-
id,
33-
collectionSlug: collection,
34-
})
21+
const { filename, filesize, height, mimeType, url: fileURL, width } = props
3522

3623
return (
3724
<div className={baseClass}>
3825
<div className={`${baseClass}__url`}>
39-
{openInDrawer && <DocumentDrawer />}
4026
<a href={fileURL} rel="noopener noreferrer" target="_blank">
4127
{filename}
4228
</a>
4329
<CopyToClipboard defaultMessage="Copy URL" value={fileURL} />
44-
{openInDrawer && (
45-
<DocumentDrawerToggler
46-
className={`${baseClass}__edit`}
47-
onMouseEnter={() => setHovered(true)}
48-
onMouseLeave={() => setHovered(false)}
49-
>
50-
<EditIcon />
51-
<Tooltip show={hovered}>Edit</Tooltip>
52-
</DocumentDrawerToggler>
53-
)}
5430
</div>
5531
<div className={`${baseClass}__size-type`}>
5632
{formatFilesize(filesize)}
57-
{width && height && (
33+
{typeof width === 'number' && typeof height === 'number' && (
5834
<React.Fragment>
5935
&nbsp;-&nbsp;
6036
{width}x{height}

packages/ui/src/elements/FileDetails/StaticFileDetails/index.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ const baseClass = 'file-details'
1212
import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'
1313

1414
export type StaticFileDetailsProps = {
15-
collectionSlug: string
1615
customUploadActions?: React.ReactNode[]
1716
doc: {
1817
sizes?: FileSizes
@@ -26,7 +25,6 @@ export type StaticFileDetailsProps = {
2625

2726
export const StaticFileDetails: React.FC<StaticFileDetailsProps> = (props) => {
2827
const {
29-
collectionSlug,
3028
customUploadActions,
3129
doc,
3230
enableAdjustments,
@@ -36,7 +34,7 @@ export const StaticFileDetails: React.FC<StaticFileDetailsProps> = (props) => {
3634
uploadConfig,
3735
} = props
3836

39-
const { id, filename, filesize, height, mimeType, thumbnailURL, url, width } = doc
37+
const { filename, filesize, height, mimeType, thumbnailURL, url, width } = doc
4038

4139
return (
4240
<div className={baseClass}>
@@ -51,11 +49,9 @@ export const StaticFileDetails: React.FC<StaticFileDetailsProps> = (props) => {
5149
/>
5250
<div className={`${baseClass}__main-detail`}>
5351
<FileMeta
54-
collection={collectionSlug}
5552
filename={filename as string}
5653
filesize={filesize as number}
5754
height={height as number}
58-
id={id as string}
5955
mimeType={mimeType as string}
6056
url={url as string}
6157
width={width as number}

0 commit comments

Comments
 (0)