refactor: system message (#15642)

* refactor: system message component not aware of any type

* test: update tests

* refactor: inline export

* test: add case for extra info via children prop

* refactor: render message based on type inside system message omponent

* refactor: shorten import

* test: update tests

src/script/components/MessagesList/Message/SystemMessage.test.tsx → src/script/components/MessagesList/Message/SystemMessage/SystemMessage.test.tsx

@@ -18,13 +18,10 @@
  */
 
 import {render, screen} from '@testing-library/react';
-import ko from 'knockout';
 
-import {DeleteConversationMessage} from 'src/script/entity/message/DeleteConversationMessage';
 import {MessageTimerUpdateMessage} from 'src/script/entity/message/MessageTimerUpdateMessage';
 import {ReceiptModeUpdateMessage} from 'src/script/entity/message/ReceiptModeUpdateMessage';
 import {RenameMessage} from 'src/script/entity/message/RenameMessage';
-import {SystemMessageType} from 'src/script/message/SystemMessageType';
 
 import {SystemMessage} from './SystemMessage';
 
@@ -43,27 +40,9 @@ jest.mock('Components/Icon', () => ({
   __esModule: true,
 }));
 
-type SystemMessageUnion =
-  | DeleteConversationMessage
-  | MessageTimerUpdateMessage
-  | ReceiptModeUpdateMessage
-  | RenameMessage;
-
-const createSystemMessage = (partialSystemMessage: Partial<SystemMessageUnion>) => {
-  const systemMessage: Partial<SystemMessageUnion> = {
-    caption: ko.pureComputed(() => '') as any,
-    timestamp: ko.observable(Date.now()),
-    unsafeSenderName: ko.pureComputed(() => ''),
-    ...partialSystemMessage,
-  };
-  return systemMessage as SystemMessageUnion;
-};
-
 describe('SystemMessage', () => {
   it('shows edit icon for RenameMessage', async () => {
-    const message = createSystemMessage({
-      system_message_type: SystemMessageType.CONVERSATION_RENAME,
-    });
+    const message = new RenameMessage();
 
     render(<SystemMessage message={message} />);
 
@@ -72,9 +51,7 @@ describe('SystemMessage', () => {
   });
 
   it('shows timer icon for MessageTimerUpdateMessage', async () => {
-    const message = createSystemMessage({
-      system_message_type: SystemMessageType.CONVERSATION_MESSAGE_TIMER_UPDATE,
-    });
+    const message = new MessageTimerUpdateMessage(0);
 
     render(<SystemMessage message={message} />);
 
@@ -83,9 +60,7 @@ describe('SystemMessage', () => {
   });
 
   it('shows read icon for ReceiptModeUpdateMessage', async () => {
-    const message = createSystemMessage({
-      system_message_type: SystemMessageType.CONVERSATION_RECEIPT_MODE_UPDATE,
-    });
+    const message = new ReceiptModeUpdateMessage(true);
 
     render(<SystemMessage message={message} />);
 

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

@@ -0,0 +1,53 @@
+/*
+ * Wire
+ * Copyright (C) 2021 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import React from 'react';
+
+import {Icon} from 'Components/Icon';
+import {MessageTimerUpdateMessage} from 'src/script/entity/message/MessageTimerUpdateMessage';
+import {ReceiptModeUpdateMessage} from 'src/script/entity/message/ReceiptModeUpdateMessage';
+import {RenameMessage} from 'src/script/entity/message/RenameMessage';
+import {SystemMessage as SystemMessageEntity} from 'src/script/entity/message/SystemMessage';
+
+import {SystemMessageBase} from './SystemMessageBase';
+
+export interface SystemMessageProps {
+  message: SystemMessageEntity;
+}
+
+export const SystemMessage: React.FC<SystemMessageProps> = ({message}) => {
+  if (message instanceof RenameMessage) {
+    return (
+      <>
+        <SystemMessageBase message={message} isSenderNameVisible icon={<Icon.Edit />} />
+        <div className="message-body font-weight-bold">{message.name}</div>
+      </>
+    );
+  }
+
+  if (message instanceof MessageTimerUpdateMessage) {
+    return <SystemMessageBase message={message} isSenderNameVisible icon={<Icon.Timer />} />;
+  }
+
+  if (message instanceof ReceiptModeUpdateMessage) {
+    return <SystemMessageBase message={message} isSenderNameVisible icon={<Icon.Read />} />;
+  }
+
+  return <SystemMessageBase message={message} />;
+};

src/script/components/MessagesList/Message/SystemMessage/SystemMessageBase.tsx

@@ -0,0 +1,54 @@
+/*
+ * Wire
+ * Copyright (C) 2023 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import React, {ReactNode} from 'react';
+
+import {SystemMessage as SystemMessageEntity} from 'src/script/entity/message/SystemMessage';
+import {useKoSubscribableChildren} from 'Util/ComponentUtil';
+
+import {MessageTime} from '../MessageTime';
+
+export interface SystemMessageProps {
+  message: SystemMessageEntity;
+  isSenderNameVisible?: boolean;
+  icon?: ReactNode;
+}
+
+export const SystemMessageBase: React.FC<SystemMessageProps> = ({message, isSenderNameVisible = false, icon}) => {
+  const {unsafeSenderName, timestamp, caption} = useKoSubscribableChildren(message, [
+    'unsafeSenderName',
+    'timestamp',
+    'caption',
+  ]);
+
+  return (
+    <div className="message-header" data-uie-name="element-message-system">
+      {icon && <div className="message-header-icon message-header-icon--svg text-foreground">{icon}</div>}
+      <p className="message-header-label">
+        <span className="message-header-label__multiline">
+          {isSenderNameVisible && <span className="message-header-sender-name">{unsafeSenderName}</span>}
+          <span className="ellipsis">{caption}</span>
+        </span>
+      </p>
+      <div className="message-body-actions">
+        <MessageTime timestamp={timestamp} data-uie-uid={message.id} data-uie-name="item-message-call-timestamp" />
+      </div>
+    </div>
+  );
+};

src/script/components/MessagesList/Message/SystemMessage/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Wire
+ * Copyright (C) 2023 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+export * from './SystemMessage';

src/script/entity/message/RenameMessage.ts

@@ -36,7 +36,6 @@ export class RenameMessage extends SystemMessage {
     this.type = CONVERSATION_EVENT.RENAME;
     this.system_message_type = SystemMessageType.CONVERSATION_RENAME;
     this.name = '';
-
     this.caption = ko.pureComputed(() => (this.user().isMe ? t('conversationRenameYou') : t('conversationRename')));
   }
 }