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:

#### After:

This commit is contained in:
@@ -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>
|
||||
-
|
||||
{width}x{height}
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user