MM-59373: Respecting name display preference in boards (#22)

* MM-59373: Respecting name display preference in boards * clean up * removed unwanted code * refactor: fix this type for global PostUtil * chore * type fix * create mock store for mm * added the missing flag to focus fetch the missing users * updated test and snapshots * mocking messageHtmlToComponent at global level
mattermost · Nov 8, 2024 · 957a8f2 · 957a8f2
1 parent 62db52c
commit 957a8f2
Show file tree

Hide file tree

Showing 12 changed files with 281 additions and 63 deletions.
diff --git a/webapp/package.json b/webapp/package.json
@@ -97,7 +97,8 @@
 		"collectCoverageFrom": [
 			"src/**/*.{ts,tsx,js,jsx}",
 			"!src/test/**"
-		]
+		],
+		"setupFiles": ["./tests/setupFile.ts"]
 	},
 	"devDependencies": {
 		"@formatjs/cli": "^4.8.2",

diff --git a/webapp/src/components/cardDetail/__snapshots__/comment.test.tsx.snap b/webapp/src/components/cardDetail/__snapshots__/comment.test.tsx.snap
@@ -118,11 +118,9 @@ exports[`components/cardDetail/comment return comment 1`] = `
       </div>
     </div>
     <div
-      class="comment-text"
+      class="mocked-message-html"
     >
-      <p>
-        Test comment
-      </p>
+      Test Comment
     </div>
   </div>
 </div>
@@ -246,11 +244,9 @@ exports[`components/cardDetail/comment return comment and delete comment 1`] = `
       </div>
     </div>
     <div
-      class="comment-text"
+      class="mocked-message-html"
     >
-      <p>
-        Test comment
-      </p>
+      Test Comment
     </div>
   </div>
 </div>
@@ -285,11 +281,9 @@ exports[`components/cardDetail/comment return comment readonly 1`] = `
       </div>
     </div>
     <div
-      class="comment-text"
+      class="mocked-message-html"
     >
-      <p>
-        Test comment
-      </p>
+      Test Comment
     </div>
   </div>
 </div>
@@ -422,11 +416,9 @@ exports[`components/cardDetail/comment return guest comment 1`] = `
       </div>
     </div>
     <div
-      class="comment-text"
+      class="mocked-message-html"
     >
-      <p>
-        Test comment
-      </p>
+      Test Comment
     </div>
   </div>
 </div>
@@ -559,11 +551,9 @@ exports[`components/cardDetail/comment return guest comment and delete comment 1
       </div>
     </div>
     <div
-      class="comment-text"
+      class="mocked-message-html"
     >
-      <p>
-        Test comment
-      </p>
+      Test Comment
     </div>
   </div>
 </div>
@@ -607,11 +597,9 @@ exports[`components/cardDetail/comment return guest comment readonly 1`] = `
       </div>
     </div>
     <div
-      class="comment-text"
+      class="mocked-message-html"
     >
-      <p>
-        Test comment
-      </p>
+      Test Comment
     </div>
   </div>
 </div>

diff --git a/webapp/src/components/cardDetail/__snapshots__/commentsList.test.tsx.snap b/webapp/src/components/cardDetail/__snapshots__/commentsList.test.tsx.snap
@@ -65,11 +65,9 @@ exports[`components/cardDetail/CommentsList comments show up 1`] = `
         </div>
       </div>
       <div
-        class="comment-text"
+        class="mocked-message-html"
       >
-        <p>
-          Comment 2
-        </p>
+        Test Comment
       </div>
     </div>
     <div
@@ -111,11 +109,9 @@ exports[`components/cardDetail/CommentsList comments show up 1`] = `
         </div>
       </div>
       <div
-        class="comment-text"
+        class="mocked-message-html"
       >
-        <p>
-          Comment 1
-        </p>
+        Test Comment
       </div>
     </div>
     <hr
@@ -155,11 +151,9 @@ exports[`components/cardDetail/CommentsList comments show up in readonly mode 1`
         </div>
       </div>
       <div
-        class="comment-text"
+        class="mocked-message-html"
       >
-        <p>
-          Comment 2
-        </p>
+        Test Comment
       </div>
     </div>
     <div
@@ -187,11 +181,9 @@ exports[`components/cardDetail/CommentsList comments show up in readonly mode 1`
         </div>
       </div>
       <div
-        class="comment-text"
+        class="mocked-message-html"
       >
-        <p>
-          Comment 1
-        </p>
+        Test Comment
       </div>
     </div>
     <hr

diff --git a/webapp/src/components/cardDetail/cardDetail.test.tsx b/webapp/src/components/cardDetail/cardDetail.test.tsx
@@ -21,6 +21,8 @@ import octoClient from '../../octoClient'
 
 import {createTextBlock} from '../../blocks/textBlock'
 
+import {mockMMStore} from '../../../tests/mock_window'
+
 import CardDetail from './cardDetail'
 
 global.fetch = FetchMock.fn
@@ -42,6 +44,7 @@ beforeAll(() => {
 })
 
 describe('components/cardDetail/CardDetail', () => {
+    (window as any).store = mockMMStore
     const board = TestBlockFactory.createBoard()
 
     const view = TestBlockFactory.createBoardView(board)
@@ -73,7 +76,7 @@ describe('components/cardDetail/CardDetail', () => {
                 },
             },
             teams: {
-                current: {id: 'team-id'},
+                current: {id: 'team_id'},
             },
             boards: {
                 boards: {
@@ -126,7 +129,7 @@ describe('components/cardDetail/CardDetail', () => {
         expect(container).toBeDefined()
 
         // Comments show up
-        const comments = container!.querySelectorAll('.comment-text')
+        const comments = container!.querySelectorAll('.mocked-message-html')
         expect(comments.length).toBe(2)
 
         // Add comment option visible when readonly mode is off
@@ -138,7 +141,7 @@ describe('components/cardDetail/CardDetail', () => {
         const mockStore = configureStore([])
         const store = mockStore({
             teams: {
-                current: {id: 'team-id'},
+                current: {id: 'team_id'},
             },
             boards: {
                 boards: {
@@ -190,7 +193,7 @@ describe('components/cardDetail/CardDetail', () => {
         expect(container).toBeDefined()
 
         // comments show up
-        const comments = container!.querySelectorAll('.comment-text')
+        const comments = container!.querySelectorAll('.mocked-message-html')
         expect(comments.length).toBe(2)
 
         // Add comment option is not shown in readonly mode
@@ -223,7 +226,7 @@ describe('components/cardDetail/CardDetail', () => {
                 },
             },
             teams: {
-                current: {id: 'team-id'},
+                current: {id: 'team_id'},
             },
             boards: {
                 boards: {
@@ -330,7 +333,7 @@ describe('components/cardDetail/CardDetail', () => {
                 },
             },
             teams: {
-                current: {id: 'team-id'},
+                current: {id: 'team_id'},
             },
             boards: {
                 boards: {
@@ -435,7 +438,7 @@ describe('components/cardDetail/CardDetail', () => {
                 },
             },
             teams: {
-                current: {id: 'team-id'},
+                current: {id: 'team_id'},
             },
             boards: {
                 boards: {
@@ -533,7 +536,7 @@ describe('components/cardDetail/CardDetail', () => {
                 ],
             },
             teams: {
-                current: {id: 'team-id'},
+                current: {id: 'team_id'},
             },
             boards: {
                 boards: {

diff --git a/webapp/src/components/cardDetail/comment.test.tsx b/webapp/src/components/cardDetail/comment.test.tsx
@@ -14,6 +14,8 @@ import {TestBlockFactory} from '../../test/testBlockFactory'
 
 import mutator from '../../mutator'
 
+import {mockMMStore} from '../../../tests/mock_window'
+
 import Comment from './comment'
 
 jest.mock('../../mutator')
@@ -30,10 +32,14 @@ comment.title = 'Test comment'
 const userImageUrl = 'data:image/svg+xml'
 
 describe('components/cardDetail/comment', () => {
+    (window as any).store = mockMMStore
     const state = {
         users: {
             boardUsers: {[comment.modifiedBy]: {username: 'username_1'}},
         },
+        teams: {
+            current: {id: 'team_id'},
+        },
     }
     const store = mockStateStore([], state)
 
@@ -101,7 +107,19 @@ describe('components/cardDetail/comment', () => {
     })
 
     test('return guest comment', () => {
-        const localStore = mockStateStore([], {users: {boardUsers: {[comment.modifiedBy]: {username: 'username_1', is_guest: true}}}})
+        const localStore = mockStateStore([], {
+            users: {
+                boardUsers: {
+                    [comment.modifiedBy]: {
+                        username: 'username_1', 
+                        is_guest: true
+                    }
+                }
+            }, 
+            teams: {
+                current: {id: 'team_id'},
+            }
+        })
         const {container} = render(wrapIntl(
             <ReduxProvider store={localStore}>
                 <Comment
@@ -118,7 +136,19 @@ describe('components/cardDetail/comment', () => {
     })
 
     test('return guest comment readonly', () => {
-        const localStore = mockStateStore([], {users: {boardUsers: {[comment.modifiedBy]: {username: 'username_1', is_guest: true}}}})
+        const localStore = mockStateStore([], {
+            users: {
+                boardUsers: {
+                    [comment.modifiedBy]: {
+                        username: 'username_1', 
+                        is_guest: true
+                    }
+                }
+            },
+            teams: {
+                current: {id: 'team_id'},
+            },
+        })
         const {container} = render(wrapIntl(
             <ReduxProvider store={localStore}>
                 <Comment
@@ -133,7 +163,19 @@ describe('components/cardDetail/comment', () => {
     })
 
     test('return guest comment and delete comment', () => {
-        const localStore = mockStateStore([], {users: {boardUsers: {[comment.modifiedBy]: {username: 'username_1', is_guest: true}}}})
+        const localStore = mockStateStore([], {
+            users: {
+                boardUsers: {
+                    [comment.modifiedBy]: {
+                        username: 'username_1',
+                        is_guest: true
+                    }
+                }
+            },
+            teams: {
+                current: {id: 'team_id'},
+            },
+        })
         const {container} = render(wrapIntl(
             <ReduxProvider store={localStore}>
                 <Comment

diff --git a/webapp/src/components/cardDetail/comment.tsx b/webapp/src/components/cardDetail/comment.tsx
@@ -3,6 +3,10 @@
 import React, {FC} from 'react'
 import {useIntl} from 'react-intl'
 
+import {getChannelsNameMapInTeam} from 'mattermost-redux/selectors/entities/channels'
+
+import {Provider} from 'react-redux'
+
 import {Block} from '../../blocks/block'
 import mutator from '../../mutator'
 import {Utils} from '../../utils'
@@ -17,6 +21,9 @@ import Tooltip from '../../widgets/tooltip'
 import GuestBadge from '../../widgets/guestBadge'
 
 import './comment.scss'
+import {formatText, messageHtmlToComponent} from '../../webapp_globals'
+import {getCurrentTeam} from '../../store/teams'
+
 
 type Props = {
     comment: Block
@@ -28,10 +35,25 @@ type Props = {
 const Comment: FC<Props> = (props: Props) => {
     const {comment, userId, userImageUrl} = props
     const intl = useIntl()
-    const html = Utils.htmlFromMarkdown(comment.title)
     const user = useAppSelector(getUser(userId))
     const date = new Date(comment.createAt)
 
+    const selectedTeam = useAppSelector(getCurrentTeam)
+    const channelNamesMap =  getChannelsNameMapInTeam((window as any).store.getState(), selectedTeam!.id)
+
+    const formattedText = 
+    <Provider store={(window as any).store}>
+        {messageHtmlToComponent(formatText(comment.title, {
+            singleline: false,
+            atMentions: true,
+            mentionHighlight: false,
+            team: selectedTeam,
+            channelNamesMap,
+        }), {
+            fetchMissingUsers: true, 
+        })}
+    </Provider>
+
     return (
         <div
             key={comment.id}
@@ -65,10 +87,7 @@ const Comment: FC<Props> = (props: Props) => {
                     </MenuWrapper>
                 )}
             </div>
-            <div
-                className='comment-text'
-                dangerouslySetInnerHTML={{__html: html}}
-            />
+            {formattedText}
         </div>
     )
 }