Display nickname or fullname in Threads based on settings (#30453)

* Convert mention in threads based on setting

* Fix lint

* Applying useMemo to makeGetMentionKeysForPost

* Update mockState thread_item.test.tsx

* Update snap

* Fix lint

* Fix lint

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/threading/global_threads/thread_item/__snapshots__/thread_item.test.tsx.snap

@@ -78,10 +78,17 @@ exports[`components/threading/global_threads/thread_item should report total num
           "onImageLoaded": [Function],
         }
       }
+      mentionKeys={
+        Array [
+          Object {
+            "key": "@some-user",
+          },
+        ]
+      }
       message="test msg"
       options={
         Object {
-          "atMentions": false,
+          "atMentions": true,
           "mentionHighlight": false,
           "singleline": true,
         }
@@ -201,10 +208,17 @@ exports[`components/threading/global_threads/thread_item should report unread me
           "onImageLoaded": [Function],
         }
       }
+      mentionKeys={
+        Array [
+          Object {
+            "key": "@some-user",
+          },
+        ]
+      }
       message="test msg"
       options={
         Object {
-          "atMentions": false,
+          "atMentions": true,
           "mentionHighlight": false,
           "singleline": true,
         }
@@ -322,10 +336,17 @@ exports[`components/threading/global_threads/thread_item should report unread me
           "onImageLoaded": [Function],
         }
       }
+      mentionKeys={
+        Array [
+          Object {
+            "key": "@some-user",
+          },
+        ]
+      }
       message="test msg"
       options={
         Object {
-          "atMentions": false,
+          "atMentions": true,
           "mentionHighlight": false,
           "singleline": true,
         }

webapp/channels/src/components/threading/global_threads/thread_item/thread_item.test.tsx

@@ -100,6 +100,27 @@ describe('components/threading/global_threads/thread_item', () => {
             entities: {
                 users: {
                     currentUserId: user.id,
+                    profiles: {
+                        [user.id]: user,
+                    },
+                },
+                groups: {
+                    groups: {},
+                    myGroups: [],
+                },
+                teams: {
+                    teams: {
+                        currentTeamId: 'tid',
+                    },
+                    groupsAssociatedToTeam: {
+                        tid: {},
+                    },
+                },
+                channels: {
+                    channels: [mockChannel],
+                    groupsAssociatedToChannel: {
+                        [mockChannel.id]: {},
+                    },
                 },
                 preferences: {
                     myPreferences: {},

webapp/channels/src/components/threading/global_threads/thread_item/thread_item.tsx

@@ -25,6 +25,7 @@ import {manuallyMarkThreadAsUnread} from 'actions/views/threads';
 import {getIsMobileView} from 'selectors/views/browser';
 
 import Markdown from 'components/markdown';
+import {makeGetMentionKeysForPost} from 'components/post_markdown';
 import PriorityBadge from 'components/post_priority/post_priority_badge';
 import Button from 'components/threading/common/button';
 import Timestamp from 'components/timestamp';
@@ -66,7 +67,7 @@ type Props = {
 const markdownPreviewOptions = {
     singleline: true,
     mentionHighlight: false,
-    atMentions: false,
+    atMentions: true,
 };
 
 function ThreadItem({
@@ -91,6 +92,8 @@ function ThreadItem({
     const showListTutorialTip = tipStep === CrtTutorialSteps.LIST_POPOVER;
     const msgDeleted = formatMessage({id: 'post_body.deleted', defaultMessage: '(message deleted)'});
     const postAuthor = ensureString(post.props?.override_username) || displayName;
+    const getMentionKeysForPost = useMemo(() => makeGetMentionKeysForPost(), []);
+    const mentionsKeys = useSelector((state: GlobalState) => getMentionKeysForPost(state, post, channel));
 
     useEffect(() => {
         if (channel?.teammate_id) {
@@ -255,6 +258,7 @@ function ThreadItem({
                         message={post.state === Posts.POST_DELETED ? msgDeleted : post.message}
                         options={markdownPreviewOptions}
                         imagesMetadata={post?.metadata && post?.metadata?.images}
+                        mentionKeys={mentionsKeys}
                         imageProps={imageProps}
                     />
                 ) : (