From 9701fc6970cd9059cacf845e5205e8c50908648c Mon Sep 17 00:00:00 2001
From: Patrik <patrik@payloadcms.com>
Date: Wed, 8 Jan 2025 09:06:50 -0500
Subject: [PATCH] fix(ui): removes edit drawer button from `uploads` collection
 edit view (#10426)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### 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)
---
 .../elements/FileDetails/FileMeta/index.tsx   | 30 ++-----------------
 .../FileDetails/StaticFileDetails/index.tsx   |  6 +---
 2 files changed, 4 insertions(+), 32 deletions(-)

diff --git a/packages/ui/src/elements/FileDetails/FileMeta/index.tsx b/packages/ui/src/elements/FileDetails/FileMeta/index.tsx
index 0caf0c70ea4..087c57278c5 100644
--- a/packages/ui/src/elements/FileDetails/FileMeta/index.tsx
+++ b/packages/ui/src/elements/FileDetails/FileMeta/index.tsx
@@ -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}
diff --git a/packages/ui/src/elements/FileDetails/StaticFileDetails/index.tsx b/packages/ui/src/elements/FileDetails/StaticFileDetails/index.tsx
index 5e5618882ac..a92a28d0a9f 100644
--- a/packages/ui/src/elements/FileDetails/StaticFileDetails/index.tsx
+++ b/packages/ui/src/elements/FileDetails/StaticFileDetails/index.tsx
@@ -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}