refactor: Move hightlighted user computation to UI layer (#15984)

src/script/components/MessagesList/Message/MemberMessage.tsx

@@ -55,17 +55,10 @@ export const MemberMessage: React.FC<MemberMessageProps> = ({
   classifiedDomains,
   conversationName,
 }) => {
-  const {otherUser, timestamp, user, htmlGroupCreationHeader, highlightedUsers, showNamedCreation, hasUsers} =
-    useKoSubscribableChildren(message, [
-      'otherUser',
-      'timestamp',
-      'user',
-      'name',
-      'htmlGroupCreationHeader',
-      'highlightedUsers',
-      'showNamedCreation',
-      'hasUsers',
-    ]);
+  const {otherUser, timestamp, user, htmlGroupCreationHeader, showNamedCreation, hasUsers} = useKoSubscribableChildren(
+    message,
+    ['otherUser', 'timestamp', 'user', 'htmlGroupCreationHeader', 'showNamedCreation', 'hasUsers'],
+  );
 
   const isGroupCreation = message.isGroupCreation();
   const isMemberRemoval = message.isMemberRemoval();
@@ -109,10 +102,8 @@ export const MemberMessage: React.FC<MemberMessageProps> = ({
             {isMemberRemoval && <span className="icon-minus" />}
             {isMemberJoin && <span className="icon-plus" />}
           </div>
-          {/* event is being triggered only when clicked on <a> tag with specified class (keyboard accessible by default) */}
-          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
           <div className="message-header-label">
-            <MessageContent onClickAction={() => onClickParticipants(highlightedUsers)} message={message} />
+            <MessageContent onClickParticipants={onClickParticipants} message={message} />
           </div>
           {isMemberChange && (
             <div className="message-body-actions">

src/script/components/MessagesList/Message/MemberMessage/MessageContent.tsx

@@ -65,7 +65,7 @@ function getContent(message: MemberMessageEntity) {
   }
 
   /** the users that are impacted by the member event */
-  const targetedUsers = message.userEntities().filter(userEntity => !matchQualifiedIds(message.user(), userEntity));
+  const targetedUsers = message.targetedUsers();
   /** the user that triggered the action */
   const actor = message.user();
 
@@ -191,15 +191,21 @@ function getContent(message: MemberMessageEntity) {
   return '';
 }
 
-export function MessageContent({message, onClickAction}: {message: MemberMessageEntity; onClickAction: () => void}) {
+export function MessageContent({
+  message,
+  onClickParticipants,
+}: {
+  message: MemberMessageEntity;
+  onClickParticipants: (participants: User[]) => void;
+}) {
   const htmlCaption = getContent(message);
   const content = replaceReactComponents(htmlCaption, [
     {start: '<strong>', end: '</strong>', render: text => <strong key={text}>{text}</strong>},
     {
       start: '[showmore]',
       end: '[/showmore]',
       render: text => (
-        <ShowMoreButton key={text} onClick={onClickAction}>
+        <ShowMoreButton key={text} onClick={() => onClickParticipants(message.targetedUsers())}>
           {text}
         </ShowMoreButton>
       ),

src/script/entity/message/MemberMessage.ts

@@ -36,17 +36,17 @@ import {User} from '../User';
 export class MemberMessage extends SystemMessage {
   public allTeamMembers: User[];
   public readonly hasUsers: ko.PureComputed<boolean>;
-  private readonly joinedUserEntities: ko.PureComputed<User[]>;
+  public readonly userIds: ko.ObservableArray<QualifiedId>;
+  public readonly userEntities: ko.ObservableArray<User>;
+  /** Users that are affected by the event */
+  public readonly targetedUsers: ko.PureComputed<User[]>;
   public readonly name: ko.Observable<string>;
   public readonly otherUser: ko.PureComputed<User>;
   public readonly senderName: ko.PureComputed<string>;
   public readonly showNamedCreation: ko.PureComputed<boolean>;
-  public readonly highlightedUsers: ko.PureComputed<User[]>;
   public readonly htmlGroupCreationHeader: ko.PureComputed<string>;
   public readonly remoteUserEntities: ko.PureComputed<User[]>;
   public showServicesWarning: boolean;
-  public readonly userEntities: ko.ObservableArray<User>;
-  public readonly userIds: ko.ObservableArray<QualifiedId>;
   public memberMessageType: SystemMessageType;
   public reason: MemberLeaveReason;
   /** this can be used to check uniqueness of the message. It's computed using the timestamp + users involved in the event */
@@ -62,21 +62,16 @@ export class MemberMessage extends SystemMessage {
     this.userIds = ko.observableArray();
     this.name = ko.observable('');
 
-    this.highlightedUsers = ko.pureComputed(() => {
-      return this.type === CONVERSATION_EVENT.MEMBER_JOIN ? this.joinedUserEntities() : [];
-    });
-
     this.hasUsers = ko.pureComputed(() => !!this.userEntities().length);
     this.allTeamMembers = undefined;
     this.showServicesWarning = false;
 
     this.hash = ko.pureComputed(() => {
       const users = this.userIds().map(({id}) => id);
-      return `${this.timestamp}${users.join('')}`;
+      return `${this.timestamp()}${users.join('')}`;
     });
 
-    // Users joined the conversation without sender
-    this.joinedUserEntities = ko.pureComputed(() => {
+    this.targetedUsers = ko.pureComputed(() => {
       return this.userEntities().filter(userEntity => !matchQualifiedIds(this.user(), userEntity));
     });
 
@@ -162,8 +157,4 @@ export class MemberMessage extends SystemMessage {
   isUserAffected(userId: QualifiedId): boolean {
     return !!this.userIds().find(user => matchQualifiedIds(user, userId));
   }
-
-  guestCount(): number {
-    return this.joinedUserEntities().filter(user => user.isGuest()).length;
-  }
 }