MM-53775: hide Thread Overview until a reply occurs (#8316)

mattermost · Nov 6, 2024 · 6f381cf · 6f381cf
1 parent 97e74c9
commit 6f381cf
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 159 deletions.
diff --git a/app/components/post_list/thread_overview/__snapshots__/thread_overview.test.tsx.snap b/app/components/post_list/thread_overview/__snapshots__/thread_overview.test.tsx.snap
@@ -1,126 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ThreadOverview should match snapshot when post is not saved and 0 replies 1`] = `
-<View
-  style={
-    [
-      {
-        "borderBottomWidth": 1,
-        "borderColor": "rgba(63,67,80,0.1)",
-        "borderTopWidth": 1,
-        "flexDirection": "row",
-        "marginVertical": 12,
-        "paddingHorizontal": 16,
-        "paddingVertical": 10,
-      },
-      {
-        "borderBottomWidth": 0,
-      },
-      undefined,
-    ]
-  }
-  testID="thread-overview"
->
-  <View
-    style={
-      {
-        "flex": 1,
-      }
-    }
-  >
-    <Text
-      style={
-        {
-          "color": "rgba(63,67,80,0.64)",
-          "fontFamily": "OpenSans",
-          "fontSize": 16,
-          "fontWeight": "400",
-          "lineHeight": 24,
-          "marginHorizontal": 4,
-        }
-      }
-      testID="thread-overview.no_replies"
-    >
-      No replies yet
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "flexDirection": "row",
-      }
-    }
-  >
-    <RNGestureHandlerButton
-      collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      exclusive={true}
-      handlerTag={1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onGestureEvent={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onHandlerStateChange={[Function]}
-      rippleColor={0}
-      testID="thread-overview.unsave.button"
-      touchSoundDisabled={false}
-    >
-      <View
-        accessible={true}
-        collapsable={false}
-        style={
-          {
-            "marginLeft": 16,
-            "opacity": 1,
-          }
-        }
-      >
-        <Icon
-          color="#386fe5"
-          name="bookmark"
-          size={24}
-        />
-      </View>
-    </RNGestureHandlerButton>
-    <RNGestureHandlerButton
-      collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      exclusive={true}
-      handlerTag={2}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onGestureEvent={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onHandlerStateChange={[Function]}
-      rippleColor={0}
-      testID="thread-overview.post_options.button"
-      touchSoundDisabled={false}
-    >
-      <View
-        accessible={true}
-        collapsable={false}
-        style={
-          {
-            "marginLeft": 16,
-            "opacity": 1,
-          }
-        }
-      >
-        <Icon
-          color="rgba(63,67,80,0.64)"
-          name="dots-horizontal"
-          size={24}
-        />
-      </View>
-    </RNGestureHandlerButton>
-  </View>
-</View>
-`;
-
 exports[`ThreadOverview should match snapshot when post is saved and has replies 1`] = `
 <View
   style={
@@ -174,7 +53,7 @@ exports[`ThreadOverview should match snapshot when post is saved and has replies
       delayLongPress={600}
       enabled={true}
       exclusive={true}
-      handlerTag={3}
+      handlerTag={1}
       handlerType="NativeViewGestureHandler"
       innerRef={null}
       onGestureEvent={[Function]}
@@ -207,7 +86,7 @@ exports[`ThreadOverview should match snapshot when post is saved and has replies
       delayLongPress={600}
       enabled={true}
       exclusive={true}
-      handlerTag={4}
+      handlerTag={2}
       handlerType="NativeViewGestureHandler"
       innerRef={null}
       onGestureEvent={[Function]}
@@ -238,3 +117,5 @@ exports[`ThreadOverview should match snapshot when post is saved and has replies
   </View>
 </View>
 `;
+
+exports[`ThreadOverview should match snapshot when post is saved with no replies 1`] = `null`;
diff --git a/app/components/post_list/thread_overview/thread_overview.test.tsx b/app/components/post_list/thread_overview/thread_overview.test.tsx
@@ -10,7 +10,7 @@ import ThreadOverview from './thread_overview';
 import type PostModel from '@typings/database/models/servers/post';
 
 describe('ThreadOverview', () => {
-    it('should match snapshot when post is not saved and 0 replies', () => {
+    it('should match snapshot when post is saved with no replies', () => {
         const props = {
             isSaved: true,
             repliesCount: 0,

diff --git a/app/components/post_list/thread_overview/thread_overview.tsx b/app/components/post_list/thread_overview/thread_overview.tsx
@@ -13,7 +13,6 @@ import {Screens} from '@constants';
 import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
 import {useIsTablet} from '@hooks/device';
-import {useFetchingThreadState} from '@hooks/fetching_thread';
 import {bottomSheetModalOptions, showModal, showModalOverCurrentContext} from '@screens/navigation';
 import {preventDoubleTap} from '@utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
@@ -58,14 +57,13 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
     };
 });
 
-const ThreadOverview = ({isSaved, repliesCount, rootId, rootPost, style, testID}: Props) => {
+const ThreadOverview = ({isSaved, repliesCount, rootPost, style, testID}: Props) => {
     const theme = useTheme();
     const styles = getStyleSheet(theme);
 
     const intl = useIntl();
     const isTablet = useIsTablet();
     const serverUrl = useServerUrl();
-    const isFetchingThread = useFetchingThreadState(rootId);
 
     const onHandleSavePress = useCallback(preventDoubleTap(() => {
         if (rootPost?.id) {
@@ -101,35 +99,8 @@ const ThreadOverview = ({isSaved, repliesCount, rootId, rootPost, style, testID}
 
     const saveButtonTestId = isSaved ? `${testID}.unsave.button` : `${testID}.save.button`;
 
-    let repliesCountElement;
-    if (repliesCount > 0) {
-        repliesCountElement = (
-            <FormattedText
-                style={styles.repliesCount}
-                id='thread.repliesCount'
-                defaultMessage='{repliesCount, number} {repliesCount, plural, one {reply} other {replies}}'
-                testID={`${testID}.replies_count`}
-                values={{repliesCount}}
-            />
-        );
-    } else if (isFetchingThread) {
-        repliesCountElement = (
-            <FormattedText
-                style={styles.repliesCount}
-                id='thread.loadingReplies'
-                defaultMessage='Loading replies...'
-                testID={`${testID}.loading_replies`}
-            />
-        );
-    } else {
-        repliesCountElement = (
-            <FormattedText
-                style={styles.repliesCount}
-                id='thread.noReplies'
-                defaultMessage='No replies yet'
-                testID={`${testID}.no_replies`}
-            />
-        );
+    if (repliesCount === 0) {
+        return null;
     }
 
     return (
@@ -138,7 +109,13 @@ const ThreadOverview = ({isSaved, repliesCount, rootId, rootPost, style, testID}
             testID={testID}
         >
             <View style={styles.repliesCountContainer}>
-                {repliesCountElement}
+                <FormattedText
+                    style={styles.repliesCount}
+                    id='thread.repliesCount'
+                    defaultMessage='{repliesCount, number} {repliesCount, plural, one {reply} other {replies}}'
+                    testID={`${testID}.replies_count`}
+                    values={{repliesCount}}
+                />
             </View>
             <View style={styles.optionsContainer}>
                 <TouchableOpacity

diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json
@@ -1143,8 +1143,6 @@
   "terms_of_service.title": "Terms of Service",
   "thread.header.thread": "Thread",
   "thread.header.thread_in": "in {channelName}",
-  "thread.loadingReplies": "Loading replies...",
-  "thread.noReplies": "No replies yet",
   "thread.options.title": "Thread Actions",
   "thread.repliesCount": "{repliesCount, number} {repliesCount, plural, one {reply} other {replies}}",
   "threads": "Threads",

diff --git a/detox/e2e/test/smoke_test/messaging.e2e.ts b/detox/e2e/test/smoke_test/messaging.e2e.ts
@@ -111,6 +111,9 @@ describe('Smoke Test - Messaging', () => {
         // * Verify on reply thread screen
         await ThreadScreen.toBeVisible();
 
+        // * Verify no thread overview while there are no replies
+        await expect(ThreadScreen.getThreadOverview()).not.toBeVisible();
+
         // # Reply to parent post
         const replyMessage = `${message} reply`;
         await ThreadScreen.postMessage(replyMessage);
@@ -120,6 +123,9 @@ describe('Smoke Test - Messaging', () => {
         const {postListPostItem: replyPostListPostItem} = ThreadScreen.getPostListPostItem(replyPost.id, replyMessage);
         await expect(replyPostListPostItem).toBeVisible();
 
+        // * Verify thread overview when there are replies
+        await expect(ThreadScreen.getThreadOverview()).toBeVisible();
+
         // # Go back to channel list screen
         await ThreadScreen.back();
         await ChannelScreen.back();