MM-36640 Bring back permalink view on search/recent mentions/pinned and saved posts (#5482)

* Downgrade RNN to avoid bug that cuts off permalink view on iOS

* Bring back permalink view on search/recent mentions/pinned and saved posts

* fix test snapshot

app/actions/views/permalink.ts

@@ -7,16 +7,22 @@ import {Keyboard} from 'react-native';
 import {dismissAllModals, showModalOverCurrentContext} from '@actions/navigation';
 import {loadChannelsByTeamName} from '@actions/views/channel';
 import {selectFocusedPostId} from '@mm-redux/actions/posts';
+import {getCurrentTeam} from '@mm-redux/selectors/entities/teams';
 import {permalinkBadTeam} from '@utils/general';
 import {changeOpacity} from '@utils/theme';
 
-import type {DispatchFunc} from '@mm-redux/types/actions';
+import type {DispatchFunc, GetStateFunc} from '@mm-redux/types/actions';
 
 let showingPermalink = false;
 
 export function showPermalink(intl: typeof intlShape, teamName: string, postId: string, openAsPermalink = true) {
-    return async (dispatch: DispatchFunc) => {
-        const loadTeam = await dispatch(loadChannelsByTeamName(teamName, permalinkBadTeam.bind(null, intl)));
+    return async (dispatch: DispatchFunc, getState: GetStateFunc) => {
+        let name = teamName;
+        if (!name) {
+            name = getCurrentTeam(getState()).name;
+        }
+
+        const loadTeam = await dispatch(loadChannelsByTeamName(name, permalinkBadTeam.bind(null, intl)));
 
         if (!loadTeam.error) {
             Keyboard.dismiss();

app/components/post_list/post/index.ts

@@ -3,6 +3,7 @@
 
 import {connect} from 'react-redux';
 
+import {showPermalink} from '@actions/views/permalink';
 import {removePost} from '@mm-redux/actions/posts';
 import {getChannel} from '@mm-redux/selectors/entities/channels';
 import {getConfig} from '@mm-redux/selectors/entities/general';
@@ -21,10 +22,12 @@ import type {GlobalState} from '@mm-redux/types/store';
 import Post from './post';
 
 type OwnProps = {
+    highlight?: boolean;
     postId: string;
     post?: PostType;
     previousPostId?: string;
     nextPostId?: string;
+    testID: string;
     theme: Theme;
 }
 
@@ -83,6 +86,7 @@ function mapSateToProps(state: GlobalState, ownProps: OwnProps) {
 
 const mapDispatchToProps = {
     removePost,
+    showPermalink,
 };
 
 export default connect(mapSateToProps, mapDispatchToProps)(Post);

app/components/post_list/post/post.tsx

@@ -3,6 +3,7 @@
 
 import React, {ReactNode, useRef} from 'react';
 import {Keyboard, StyleProp, View, ViewStyle} from 'react-native';
+import {injectIntl, intlShape} from 'react-intl';
 
 import {showModalOverCurrentContext} from '@actions/navigation';
 import SystemHeader from '@components/post_list/system_header';
@@ -28,6 +29,7 @@ type PostProps = {
     enablePostUsernameOverride: boolean;
     highlight?: boolean;
     highlightPinnedOrFlagged?: boolean;
+    intl: typeof intlShape;
     isConsecutivePost?: boolean;
     isFirstReply?: boolean;
     isFlagged?: boolean;
@@ -38,6 +40,7 @@ type PostProps = {
     rootPostAuthor?: string;
     shouldRenderReplyButton?: boolean;
     showAddReaction?: boolean;
+    showPermalink: (intl: typeof intlShape, teamName: string, postId: string) => null;
     skipFlaggedHeader?: boolean;
     skipPinnedHeader?: boolean;
     teammateNameDisplay: string;
@@ -86,8 +89,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
 });
 
 const Post = ({
-    canDelete, enablePostUsernameOverride, highlight, highlightPinnedOrFlagged = true, isConsecutivePost, isFirstReply, isFlagged, isLastReply,
-    location, post, removePost, rootPostAuthor, shouldRenderReplyButton, skipFlaggedHeader, skipPinnedHeader, showAddReaction = true,
+    canDelete, enablePostUsernameOverride, highlight, highlightPinnedOrFlagged = true, intl, isConsecutivePost, isFirstReply, isFlagged, isLastReply,
+    location, post, removePost, rootPostAuthor, shouldRenderReplyButton, skipFlaggedHeader, skipPinnedHeader, showAddReaction = true, showPermalink,
     teammateNameDisplay, testID, theme,
 }: PostProps) => {
     const pressDetected = useRef(false);
@@ -99,11 +102,14 @@ const Post = ({
         if (post) {
             if (location === Screens.THREAD) {
                 Keyboard.dismiss();
+            } else if (location === Screens.SEARCH) {
+                showPermalink(intl, '', post.id);
+                return;
             }
 
             const isValidSystemMessage = fromAutoResponder(post) || !isSystemMessage(post);
             if (post.state !== Posts.POST_DELETED && isValidSystemMessage && !isPostPendingOrFailed(post)) {
-                if ([Screens.CHANNEL, Screens.PERMALINK, Screens.SEARCH].includes(location)) {
+                if ([Screens.CHANNEL, Screens.PERMALINK].includes(location)) {
                     EventEmitter.emit('goToThread', post);
                 }
             } else if ((isPostEphemeral(post) || post.state === Posts.POST_DELETED)) {
@@ -257,4 +263,4 @@ const Post = ({
     );
 };
 
-export default Post;
+export default injectIntl(Post);

app/components/post_list/post_list.tsx

@@ -3,9 +3,10 @@
 
 import React, {ReactElement, useCallback, useEffect, useLayoutEffect, useRef} from 'react';
 import {injectIntl, intlShape} from 'react-intl';
-import {DeviceEventEmitter, FlatList, Platform, StyleSheet, ViewToken} from 'react-native';
+import {DeviceEventEmitter, FlatList, Platform, RefreshControl, StyleSheet, ViewToken} from 'react-native';
 
 import {DeepLinkTypes, NavigationTypes} from '@constants';
+import * as Screens from '@constants/screen';
 import {useResetNativeScrollView} from '@hooks';
 import {Posts} from '@mm-redux/constants';
 import EventEmitter from '@mm-redux/utils/event_emitter';
@@ -282,6 +283,18 @@ const PostList = ({
         }
     }, [initialIndex, highlightPostId]);
 
+    let refreshControl;
+    if (location === Screens.PERMALINK) {
+        // Hack so that the scrolling the permalink does not dismisses the modal screens
+        refreshControl = (
+            <RefreshControl
+                refreshing={false}
+                enabled={Platform.OS === 'ios'}
+                colors={[theme.centerChannelColor]}
+                tintColor={theme.centerChannelColor}
+            />);
+    }
+
     return (
         <>
             <FlatList
@@ -310,6 +323,7 @@ const PostList = ({
                 windowSize={Posts.POST_CHUNK_SIZE / 2}
                 viewabilityConfig={VIEWABILITY_CONFIG}
                 onViewableItemsChanged={onViewableItemsChanged}
+                refreshControl={refreshControl}
                 testID={testID}
             />
             {showMoreMessagesButton &&

app/screens/search/search_result_post/__snapshots__/search_result_post.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SearchResultPost should match snapshot 1`] = `
-<Connect(Post)
+<Connect(InjectIntl(Post))
   highlightPinnedOrFlagged={false}
   isSearchResult={true}
   location="Search"

ios/Podfile.lock

@@ -336,12 +336,12 @@ PODS:
     - React-Core
   - ReactNativeKeyboardTrackingView (5.7.0):
     - React
-  - ReactNativeNavigation (7.13.0):
+  - ReactNativeNavigation (7.11.3):
     - React-Core
     - React-RCTImage
     - React-RCTText
-    - ReactNativeNavigation/Core (= 7.13.0)
-  - ReactNativeNavigation/Core (7.13.0):
+    - ReactNativeNavigation/Core (= 7.11.3)
+  - ReactNativeNavigation/Core (7.11.3):
     - React-Core
     - React-RCTImage
     - React-RCTText
@@ -739,7 +739,7 @@ SPEC CHECKSUMS:
   ReactCommon: 149906e01aa51142707a10665185db879898e966
   ReactNativeExceptionHandler: b11ff67c78802b2f62eed0e10e75cb1ef7947c60
   ReactNativeKeyboardTrackingView: 02137fac3b2ebd330d74fa54ead48b14750a2306
-  ReactNativeNavigation: 4c4ca87edc0da4ee818158a62cb6188088454e5c
+  ReactNativeNavigation: 906b631a6847c26cacf5cb3791566f1fe205c65c
   rn-fetch-blob: 17961aec08caae68bb8fc0e5b40f93b3acfa6932
   RNCAsyncStorage: b03032fdbdb725bea0bd9e5ec5a7272865ae7398
   RNCClipboard: 41d8d918092ae8e676f18adada19104fa3e68495

package-lock.json

@@ -57,7 +57,7 @@
         "react-native-local-auth": "1.6.0",
         "react-native-localize": "2.1.1",
         "react-native-mmkv-storage": "0.6.0",
-        "react-native-navigation": "7.13.0",
+        "react-native-navigation": "7.11.3",
         "react-native-notifications": "3.5.0",
         "react-native-passcode-status": "1.1.2",
         "react-native-permissions": "3.0.4",
@@ -30228,9 +30228,9 @@
       }
     },
     "node_modules/react-native-navigation": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/react-native-navigation/-/react-native-navigation-7.13.0.tgz",
-      "integrity": "sha512-/mdNuTlz9YVplJRB7Rv3g5cDgHCtw4RyG6ATdvrIJvMJOCU57ivCHuZkZDI/YQv7Txm48XD/EUkNahFFUATFZg==",
+      "version": "7.11.3",
+      "resolved": "https://registry.npmjs.org/react-native-navigation/-/react-native-navigation-7.11.3.tgz",
+      "integrity": "sha512-3cCtHwa2Tqc5Uk4QFSfocfOgOSKcRgfVlZ1m40oFUGV8yx9TaqA9BlPyQnWtaaPz8lHgKA3pkUmXQpFq0zOQzw==",
       "dependencies": {
         "hoist-non-react-statics": "3.x.x",
         "lodash": "4.17.x",
@@ -60448,9 +60448,9 @@
       }
     },
     "react-native-navigation": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/react-native-navigation/-/react-native-navigation-7.13.0.tgz",
-      "integrity": "sha512-/mdNuTlz9YVplJRB7Rv3g5cDgHCtw4RyG6ATdvrIJvMJOCU57ivCHuZkZDI/YQv7Txm48XD/EUkNahFFUATFZg==",
+      "version": "7.11.3",
+      "resolved": "https://registry.npmjs.org/react-native-navigation/-/react-native-navigation-7.11.3.tgz",
+      "integrity": "sha512-3cCtHwa2Tqc5Uk4QFSfocfOgOSKcRgfVlZ1m40oFUGV8yx9TaqA9BlPyQnWtaaPz8lHgKA3pkUmXQpFq0zOQzw==",
       "requires": {
         "hoist-non-react-statics": "3.x.x",
         "lodash": "4.17.x",

package.json

@@ -55,7 +55,7 @@
     "react-native-local-auth": "1.6.0",
     "react-native-localize": "2.1.1",
     "react-native-mmkv-storage": "0.6.0",
-    "react-native-navigation": "7.13.0",
+    "react-native-navigation": "7.11.3",
     "react-native-notifications": "3.5.0",
     "react-native-passcode-status": "1.1.2",
     "react-native-permissions": "3.0.4",