fix(studio): fix column drag in empty table triggers file drop behaviour (supabase#40189)

* fix: togling csv import only when draging files

* stamp: improve invalid file feeback

* stamp: format

Author: kallebysantos

apps/studio/components/grid/components/grid/Grid.tsx

@@ -80,7 +80,12 @@ export const Grid = memo(
 
       const { mutate: sendEvent } = useSendEventMutation()
 
-      const { isDraggedOver, onDragOver, onFileDrop } = useCsvFileDrop({
+      const {
+        isValidFile: isValidFileDraggedOver,
+        isDraggedOver,
+        onDragOver,
+        onFileDrop,
+      } = useCsvFileDrop({
         enabled: isTableEmpty && !isForeignTable,
         onFileDropped: (file) => tableEditorSnap.onImportData(valtioRef(file)),
         onTelemetryEvent: (eventName) => {
@@ -133,21 +138,21 @@ export const Grid = memo(
 
       return (
         <div
-          className={cn(
-            'flex flex-col relative transition-colors',
-            containerClass,
-            isTableEmpty && isDraggedOver && 'border-2 border-dashed border-brand-600'
-          )}
+          className={cn('flex flex-col relative transition-colors', containerClass)}
           style={{ width: width || '100%', height: height || '50vh' }}
-          onDragOver={onDragOver}
-          onDragLeave={onDragOver}
-          onDrop={onFileDrop}
         >
           {/* Render no rows fallback outside of the DataGrid */}
           {(rows ?? []).length === 0 && (
             <div
+              className={cn(
+                'absolute top-9 p-2 w-full z-[1]',
+                isTableEmpty && isDraggedOver && 'border-2 border-dashed',
+                isValidFileDraggedOver ? 'border-brand-600' : 'border-destructive-600'
+              )}
               style={{ height: `calc(100% - 35px)` }}
-              className="absolute top-9 p-2 w-full z-[1] pointer-events-none"
+              onDragOver={onDragOver}
+              onDragLeave={onDragOver}
+              onDrop={onFileDrop}
             >
               {isLoading && <GenericSkeletonLoader />}
 
@@ -171,7 +176,15 @@ export const Grid = memo(
                   ) : (filters ?? []).length === 0 ? (
                     <div className="flex flex-col items-center justify-center col-span-full h-full">
                       <p className="text-sm text-light">
-                        {isDraggedOver ? 'Drop your CSV file here' : 'This table is empty'}
+                        {isDraggedOver ? (
+                          isValidFileDraggedOver ? (
+                            'Drop your CSV file here'
+                          ) : (
+                            <span className="text-destructive">Only CSV files are accepted</span>
+                          )
+                        ) : (
+                          'This table is empty'
+                        )}
                       </p>
                       {tableEntityType === ENTITY_TYPE.FOREIGN_TABLE ? (
                         <div className="flex items-center space-x-2 mt-4">

apps/studio/hooks/ui/useCsvFileDrop.ts

@@ -11,6 +11,7 @@ interface UseCsvFileDropOptions {
 
 interface UseCsvFileDropReturn {
   isDraggedOver: boolean
+  isValidFile: boolean
   onDragOver: (event: DragEvent<HTMLDivElement>) => void
   onFileDrop: (event: DragEvent<HTMLDivElement>) => void
 }
@@ -21,20 +22,28 @@ export function useCsvFileDrop({
   onTelemetryEvent,
 }: UseCsvFileDropOptions): UseCsvFileDropReturn {
   const [isDraggedOver, setIsDraggedOver] = useState(false)
+  const [isValidFile, setIsValidFile] = useState(false)
 
   const onDragOver = useCallback(
     (event: DragEvent<HTMLDivElement>) => {
       if (!enabled) return
 
+      const [item] = event.dataTransfer.items
+
+      // ignore non files drop, like column headers
+      if (item && item.kind !== 'file') return
+
       if (event.type === 'dragover' && !isDraggedOver) {
         setIsDraggedOver(true)
+        setIsValidFile(item.type === 'text/csv')
       } else if (event.type === 'dragleave' || event.type === 'drop') {
         setIsDraggedOver(false)
+        setIsValidFile(false)
       }
       event.stopPropagation()
       event.preventDefault()
     },
-    [enabled, isDraggedOver]
+    [enabled, isDraggedOver, isValidFile]
   )
 
   const onFileDrop = useCallback(
@@ -44,6 +53,11 @@ export function useCsvFileDrop({
       onDragOver(event)
 
       const [file] = event.dataTransfer.files
+      const [item] = event.dataTransfer.items
+
+      // ignore non files drop, like column headers
+      if (item && item.kind !== 'file') return
+
       if (flagInvalidFileImport(file)) return
 
       onFileDropped(file)
@@ -54,6 +68,7 @@ export function useCsvFileDrop({
   )
 
   return {
+    isValidFile: isValidFile && isDraggedOver,
     isDraggedOver,
     onDragOver,
     onFileDrop,