Skip to content

Commit

Permalink
fix(ui): removes edit drawer button from uploads collection edit vi…
Browse files Browse the repository at this point in the history
…ew (#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)
  • Loading branch information
PatrikKozak authored Jan 8, 2025
1 parent ac97bfd commit 9701fc6
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 32 deletions.
30 changes: 3 additions & 27 deletions packages/ui/src/elements/FileDetails/FileMeta/index.tsx
Original file line number Diff line number Diff line change
@@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -26,7 +25,6 @@ export type StaticFileDetailsProps = {

export const StaticFileDetails: React.FC<StaticFileDetailsProps> = (props) => {
const {
collectionSlug,
customUploadActions,
doc,
enableAdjustments,
Expand All @@ -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}>
Expand All @@ -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}
Expand Down

0 comments on commit 9701fc6

Please sign in to comment.