Ability to show attachment if the permalink post contains attachments. (#9101)

* typescript and view component for permalink with user and message

* Old post edited handling in permalink

* Added test and update flag value to EnablePermalinkPreview

* Added test for permalink_preview component

* Added test for content/index.tsx for permalink

* Addressed review comments

* Unit test for missing file and review comments

* Added test to check handlePostEdited permalink sync only calls one time only

* Change TouchableOpacity to Pressable

* When user not found fetch the user from the server

* Removed the redundant test in the test for permalink_preview/index?

* ts to tsx

* Removed the circular dependency

* Address review comments

* displayname fallback

* remove permalink when permalink post is deleted

* UX review comments

* Linter fixes

* Test fixes

* File attachment in permalink preview component

* Fix the width and height of the image in permalink

* Added gredient when exceeds height of permalink container

* Minor

* Updated tests

* Minor

* Review comments

* Minor review comments

* type fixes

* Review comments

* Minor

* Address review comments

* Minor

* Merge fixes

* Addressed review comments

* Some more review comments

* linter fixes

* UX review and remove show more height not require

* Fix tests

* Review fixes, dev and ux

---------

Co-authored-by: yasserfaraazkhan <[email protected]>

Author: Rajat-Dabade

app/components/files/file.tsx

@@ -45,7 +45,6 @@ type FileProps = {
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
     return {
         fileWrapper: {
-            flex: 1,
             flexDirection: 'row',
             alignItems: 'center',
             borderWidth: 1,
@@ -64,7 +63,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
             margin: 4,
         },
         audioFile: {
-            flex: 1,
             flexDirection: 'row',
             alignItems: 'center',
         },

app/components/files/files.tsx

@@ -26,16 +26,17 @@ type FilesProps = {
     isReplyPost: boolean;
     postId?: string;
     postProps?: Record<string, unknown>;
+    isPermalinkPreview?: boolean;
 }
 
 const MAX_VISIBLE_ROW_IMAGES = 4;
 const styles = StyleSheet.create({
     row: {
-        flex: 1,
         flexDirection: 'row',
         marginTop: 5,
+        flexShrink: 0,
     },
-    container: {
+    rowItemContainer: {
         flex: 1,
     },
     gutter: {
@@ -59,6 +60,7 @@ const Files = ({
     location,
     postId,
     postProps,
+    isPermalinkPreview = false,
 }: FilesProps) => {
     const galleryIdentifier = `${postId}-fileAttachments-${location}`;
     const [inViewPort, setInViewPort] = useState(false);
@@ -84,9 +86,14 @@ const Files = ({
 
     const isSingleImage = useMemo(() => filesInfo.filter((f) => isImage(f) || isVideo(f)).length === 1, [filesInfo]);
 
-    const renderItems = (items: FileInfo[], moreImagesCount = 0, includeGutter = false) => {
+    const renderItems = (items: FileInfo[], moreImagesCount = 0, includeGutter = false, isImageRow = false) => {
         let nonVisibleImagesCount: number;
-        let container: StyleProp<ViewStyle> = items.length > 1 ? styles.container : undefined;
+
+        // Apply flex: 1 for multiple items, except in permalink previews where vertical
+        // document lists should not use flex to prevent shrinking under maxHeight constraints.
+        // Horizontal image rows (includeGutter=true) still need flex for space distribution.
+        const shouldApplyFlex = items.length > 1 && !(isPermalinkPreview && !includeGutter);
+        let container: StyleProp<ViewStyle> = shouldApplyFlex ? styles.rowItemContainer : undefined;
         const containerWithGutter = [container, styles.gutter];
         const wrapperWidth = getViewPortWidth(isReplyPost, isTablet) - 6;
 
@@ -98,9 +105,13 @@ const Files = ({
             if (idx !== 0 && includeGutter) {
                 container = containerWithGutter;
             }
+            const shouldRemoveMarginTop = isPermalinkPreview && (
+                (isImageRow) || // Remove marginTop for all images in image row
+                (!isImageRow && idx === 0 && imageAttachments.length === 0) // Remove marginTop for first non-image only if no images present
+            );
             return (
                 <View
-                    style={[container, styles.marginTop]}
+                    style={[container, styles.marginTop, shouldRemoveMarginTop && {marginTop: 0}]}
                     testID={`${file.id}-file-container`}
                     key={file.id}
                 >
@@ -138,10 +149,14 @@ const Files = ({
 
         return (
             <View
-                style={[styles.row, {width: portraitPostWidth}]}
+                style={[
+                    styles.row,
+                    {width: portraitPostWidth},
+                    isPermalinkPreview && {marginTop: 0},
+                ]}
                 testID='image-row'
             >
-                { renderItems(visibleImages, nonVisibleImagesCount, true) }
+                { renderItems(visibleImages, nonVisibleImagesCount, true, true) }
             </View>
         );
     };
@@ -164,7 +179,10 @@ const Files = ({
         <GalleryInit galleryIdentifier={galleryIdentifier}>
             <Animated.View
                 testID='files-container'
-                style={failed ? styles.failed : undefined}
+                style={[
+                    failed ? styles.failed : undefined,
+                    isPermalinkPreview && {marginTop: 0},
+                ]}
             >
                 {renderImageRow()}
                 {renderItems(nonImageAttachments)}

app/components/post_list/post/body/content/content.tsx

@@ -116,6 +116,8 @@ const Content = ({isReplyPost, layoutWidth, location, post, theme, showPermalink
                 <PermalinkPreview
                     embedData={post.metadata!.embeds![0].data as PermalinkEmbedData}
                     location={location}
+                    parentLocation={location}
+                    parentPostId={post.id}
                 />
             );
     }

app/components/post_list/post/body/content/permalink_preview/index.tsx

@@ -24,19 +24,21 @@ const enhance = withObservables(['embedData'], ({database, embedData}: WithDatab
     const userId = embedData?.post?.user_id;
     const author = userId ? observeUser(database, userId) : of$(undefined);
 
-    const isOriginPostDeleted = embedData?.post_id ? observePost(database, embedData.post_id).pipe(
+    const post = embedData?.post_id ? observePost(database, embedData.post_id) : of$(undefined);
+    const isOriginPostDeleted = post.pipe(
         switchMap((p) => {
             const initialDeleted = Boolean(embedData?.post?.delete_at > 0 || embedData?.post?.state === 'DELETED');
             return of$(p ? p.deleteAt > 0 : initialDeleted);
         }),
         distinctUntilChanged(),
-    ) : of$(false);
+    );
 
     return {
         teammateNameDisplay,
         currentUser,
         isMilitaryTime,
         author,
+        post,
         isOriginPostDeleted,
     };
 });

app/components/post_list/post/body/content/permalink_preview/permalink_files.tsx

@@ -0,0 +1,74 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useEffect, useState, useCallback} from 'react';
+import {DeviceEventEmitter, View, type LayoutChangeEvent, StyleSheet} from 'react-native';
+
+import Files from '@components/files';
+import {Events} from '@constants';
+
+import type PostModel from '@typings/database/models/servers/post';
+
+type PermalinkFilesProps = {
+    post: PostModel;
+    location: string;
+    isReplyPost: boolean;
+    failed?: boolean;
+    parentLocation?: string;
+    parentPostId?: string;
+};
+
+const styles = StyleSheet.create({
+    container: {
+        marginBottom: 8,
+    },
+});
+
+const PermalinkFiles = (props: PermalinkFilesProps) => {
+    const {parentLocation, parentPostId, post, location, isReplyPost, failed} = props;
+    const [layoutWidth, setLayoutWidth] = useState(0);
+
+    const listener = useCallback((viewableItemsMap: Record<string, boolean>) => {
+        if (!parentLocation || !parentPostId) {
+            return;
+        }
+
+        const parentKey = `${parentLocation}-${parentPostId}`;
+        if (viewableItemsMap[parentKey]) {
+            const viewableItems = {[`${location}-${post.id}`]: true};
+            DeviceEventEmitter.emit(Events.ITEM_IN_VIEWPORT, viewableItems);
+        }
+    }, [parentLocation, parentPostId, location, post.id]);
+
+    useEffect(() => {
+        if (!parentLocation || !parentPostId) {
+            return undefined;
+        }
+
+        const subscription = DeviceEventEmitter.addListener(Events.ITEM_IN_VIEWPORT, listener);
+        return () => subscription.remove();
+    }, [listener, parentLocation, parentPostId]);
+
+    const onLayout = useCallback((event: LayoutChangeEvent) => {
+        setLayoutWidth(event.nativeEvent.layout.width);
+    }, []);
+
+    return (
+        <View
+            onLayout={onLayout}
+            testID='permalink-files-container'
+            style={styles.container}
+        >
+            <Files
+                post={post}
+                location={location}
+                isReplyPost={isReplyPost}
+                failed={failed}
+                layoutWidth={layoutWidth}
+                isPermalinkPreview={true}
+            />
+        </View>
+    );
+};
+
+export default PermalinkFiles;