Connect: Highlight @ mentions to logged in user (#10216)

* Wrap with <mark> tags if mentioning current user

* Add test for @mention highlight

* Match @{username} mention

* Remove default param

app/javascript/chat/__tests__/message.test.jsx

@@ -11,12 +11,13 @@ const msg = {
   color: '#00FFFF',
 };
 
-const getMessage = (message) => (
+const getMessage = (message, props) => (
   <Message
     user={message.username}
     userID={message.user_id}
     message={message.message}
     color={message.color}
+    {...props}
   />
 );
 
@@ -38,4 +39,22 @@ describe('<Message />', () => {
 
     expect(profileLink.parentElement).toHaveStyle({ color: msg.color });
   });
+
+  it('should highlight @mentions to the logged in user', () => {
+    const testMessage = {
+      username: 'testUser',
+      user_id: 456,
+      message: "<p>hello <a href='testUser'>@testUser</a></p>",
+    };
+
+    const { getByText } = render(
+      getMessage(testMessage, { currentUserId: testMessage.user_id }),
+    );
+
+    const profileLink = getByText(`@${testMessage.username}`);
+
+    expect(profileLink.parentElement.innerHTML).toMatch(
+      new RegExp(`<mark>@${testMessage.username}</mark>`, 'i'),
+    );
+  });
 });

app/javascript/chat/message.jsx

@@ -27,13 +27,19 @@ const Message = ({
     return <ErrorMessage message={message} />;
   }
 
-  const messageArea = (
-    <span
-      className="chatmessagebody__message"
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{ __html: message }}
-    />
-  );
+  const MessageArea = () => {
+    if (userID === currentUserId) {
+      message = message.replace(`@${user}`, `<mark>@${user}</mark>`);
+    }
+
+    return (
+      <span
+        className="chatmessagebody__message"
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: message }}
+      />
+    );
+  };
 
   const dropdown = (
     <div className="message__actions">
@@ -115,7 +121,9 @@ const Message = ({
           </div>
           {userID === currentUserId ? dropdown : ' '}
         </div>
-        <div className="chatmessage__bodytext">{messageArea}</div>
+        <div className="chatmessage__bodytext">
+          <MessageArea />
+        </div>
       </div>
     </div>
   );