Show friendly message for non-previewable file previews

[abdulrahmancodes]

Closes #15771

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:55958

This environment will automatically shut down when the PR is closed or after 5 hours.

[greptile-apps]

Greptile Overview

Greptile Summary

Refactored file preview handling to show friendly messages for non-previewable files. The previewability check was moved from AttachmentRow into DocumentViewer, improving separation of concerns. When users click on non-previewable files (like archives), they now see a contextual message with a download button instead of having the file open in a new tab.

Key changes:

• Simplified AttachmentRow by removing duplicate previewability logic - all files now use the same click handler
• Added fallback UI in DocumentViewer for non-previewable files with contextual messages differentiating archives from other file types
• Maintained support for Cmd/Ctrl+click to bypass preview and open files in new tabs

Confidence Score: 4/5

• This PR is safe to merge with one logic issue that should be verified
• The refactoring improves code organization by moving the previewability check into DocumentViewer. However, there is one comment flagged about the click handler logic that should be reviewed to ensure the interaction behavior is as intended for all file types and preview states
• Pay attention to AttachmentRow.tsx to verify the click handler behavior works correctly for all combinations of preview enabled/disabled and previewable/non-previewable files

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx	4/5	Simplified attachment link logic by removing previewability check - now all files trigger preview modal when clicked
packages/twenty-front/src/modules/activities/files/components/DocumentViewer.tsx	5/5	Added friendly UI for non-previewable files with contextual messages and download button

Sequence Diagram

sequenceDiagram
    participant User
    participant AttachmentRow
    participant AttachmentList
    participant Modal
    participant DocumentViewer
    
    User->>AttachmentRow: Click attachment link
    AttachmentRow->>AttachmentRow: handleOpenDocument()
    alt Preview enabled (onPreview defined)
        AttachmentRow->>AttachmentRow: e.preventDefault()
        AttachmentRow->>AttachmentList: onPreview(attachment)
        AttachmentList->>Modal: openModal(PREVIEW_MODAL_ID)
        Modal->>DocumentViewer: Render with documentUrl and documentName
        DocumentViewer->>DocumentViewer: Check isPreviewable
        alt File is previewable
            DocumentViewer->>DocumentViewer: Render DocViewer component
            DocumentViewer-->>User: Show file preview
        else File is NOT previewable
            DocumentViewer->>DocumentViewer: Render friendly message UI
            DocumentViewer-->>User: Show "Preview Not Available" with download button
        end
    else Preview disabled (onPreview undefined)
        AttachmentRow-->>User: Link opens in new tab (default behavior)
    end

Loading

[greptile-apps]

Additional Comments (1)

1. packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx, line 143-154 (link)

   logic: logic bug: clicking a non-previewable file now triggers both the modal and opens a new tab

   The onClick handler will fire regardless of whether the file is previewable, calling onPreview(attachment) which opens the modal. The link also opens a new tab because e.preventDefault() only runs when onPreview exists AND the user doesn't press modifier keys.

   For non-previewable files, we want the link to open in a new tab WITHOUT opening the modal. The previous code checked isPreviewable before deciding which behavior to use.

   Consider restoring the previewability check or moving it into handleOpenDocument:

   But you'll also need to add back the isPreviewable logic to conditionally attach the onClick handler.

_{2 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}