feat: ask for password before previewing protected files (#991)

app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx

@@ -7,7 +7,6 @@ import { useEffect, useRef, useState } from 'preact/hooks'
 import { Icon, ICONS } from '@/Components/Icon'
 import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
 import { PopoverFileSubmenu } from './PopoverFileSubmenu'
-import { useFilePreviewModal } from '@/Components/Files/FilePreviewModalProvider'
 
 export const getFileIconComponent = (iconType: string, className: string) => {
   const IconComponent = ICONS[iconType as keyof typeof ICONS]
@@ -30,8 +29,6 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
   getIconType,
   closeOnBlur,
 }) => {
-  const filePreviewModal = useFilePreviewModal()
-
   const [fileName, setFileName] = useState(file.name)
   const [isRenamingFile, setIsRenamingFile] = useState(false)
   const itemRef = useRef<HTMLDivElement>(null)
@@ -68,8 +65,11 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
     renameFile(file, fileName).catch(console.error)
   }
 
-  const clickHandler = () => {
-    filePreviewModal.activate(file)
+  const clickPreviewHandler = () => {
+    handleFileAction({
+      type: PopoverFileItemActionType.PreviewFile,
+      payload: file,
+    }).catch(console.error)
   }
 
   return (
@@ -78,7 +78,7 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
       className="flex items-center justify-between p-3 focus:shadow-none"
       tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
     >
-      <div onClick={clickHandler} className="flex items-center cursor-pointer">
+      <div onClick={clickPreviewHandler} className="flex items-center cursor-pointer">
         {getFileIconComponent(getIconType(file.mimeType), 'w-8 h-8 flex-shrink-0')}
         <div className="flex flex-col mx-4">
           {isRenamingFile ? (
@@ -113,6 +113,7 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
         handleFileAction={handleFileAction}
         setIsRenamingFile={setIsRenamingFile}
         closeOnBlur={closeOnBlur}
+        previewHandler={clickPreviewHandler}
       />
     </div>
   )