From e3b130eaea4bf194e203d000500cf5dfbdb54c66 Mon Sep 17 00:00:00 2001
From: Amir Ghezelbash <thisisamir98@gmail.com>
Date: Tue, 26 Sep 2023 12:31:56 +0300
Subject: [PATCH] fix: Add pending icon to outgoing connection request
 (WPB-4849) (#15894)

* Fix: Add pending icon to outgoing connection request (WPB-4849)

* remove extra deps

* move isRequest logic to conversation
---
 .../components/list/ConversationListCell.tsx  |  79 +-----------
 .../list/ConversationListCellStatusIcon.tsx   | 119 ++++++++++++++++++
 src/script/entity/Conversation.ts             |   4 +-
 3 files changed, 125 insertions(+), 77 deletions(-)
 create mode 100644 src/script/components/list/ConversationListCellStatusIcon.tsx

diff --git a/src/script/components/list/ConversationListCell.tsx b/src/script/components/list/ConversationListCell.tsx
index 8049b22166c..0ff7519368c 100644
--- a/src/script/components/list/ConversationListCell.tsx
+++ b/src/script/components/list/ConversationListCell.tsx
@@ -33,14 +33,14 @@ import {Availability} from '@wireapp/protocol-messaging';
 
 import {AvailabilityState} from 'Components/AvailabilityState';
 import {Avatar, AVATAR_SIZE, GroupAvatar} from 'Components/Avatar';
-import {Icon} from 'Components/Icon';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 import {isKey, isOneOfKeys, KEY} from 'Util/KeyboardUtil';
 import {t} from 'Util/LocalizerUtil';
 import {noop, setContextMenuPosition} from 'Util/util';
 
+import {ConversationListCellStatusIcon} from './ConversationListCellStatusIcon';
+
 import {generateCellState} from '../../conversation/ConversationCellState';
-import {ConversationStatusIcon} from '../../conversation/ConversationStatusIcon';
 import type {Conversation} from '../../entity/Conversation';
 import {MediaType} from '../../media/MediaType';
 
@@ -252,80 +252,7 @@ const ConversationListCell = ({
             onKeyDown={handleContextKeyDown}
           />
 
-          {!showJoinButton && (
-            <>
-              {cellState.icon === ConversationStatusIcon.PENDING_CONNECTION && (
-                <span
-                  className="conversation-list-cell-badge cell-badge-light"
-                  data-uie-name="status-pending"
-                  title={t('accessibility.conversationStatusPending')}
-                >
-                  <Icon.Pending className="svg-icon" />
-                </span>
-              )}
-
-              {cellState.icon === ConversationStatusIcon.UNREAD_MENTION && (
-                <span
-                  className="conversation-list-cell-badge cell-badge-dark"
-                  data-uie-name="status-mention"
-                  title={t('accessibility.conversationStatusUnreadMention')}
-                >
-                  <Icon.Mention className="svg-icon" />
-                </span>
-              )}
-
-              {cellState.icon === ConversationStatusIcon.UNREAD_REPLY && (
-                <span
-                  className="conversation-list-cell-badge cell-badge-dark"
-                  data-uie-name="status-reply"
-                  title={t('accessibility.conversationStatusUnreadReply')}
-                  aria-label={t('accessibility.conversationStatusUnreadReply')}
-                >
-                  <Icon.Reply className="svg-icon" />
-                </span>
-              )}
-
-              {cellState.icon === ConversationStatusIcon.UNREAD_PING && (
-                <span
-                  className="conversation-list-cell-badge cell-badge-dark"
-                  data-uie-name="status-ping"
-                  title={t('accessibility.conversationStatusUnreadPing')}
-                >
-                  <Icon.Ping className="svg-icon" />
-                </span>
-              )}
-
-              {cellState.icon === ConversationStatusIcon.MISSED_CALL && (
-                <span
-                  className="conversation-list-cell-badge cell-badge-dark"
-                  data-uie-name="status-missed-call"
-                  title={t('accessibility.callStatusMissed')}
-                >
-                  <Icon.Hangup className="svg-icon" />
-                </span>
-              )}
-
-              {cellState.icon === ConversationStatusIcon.MUTED && (
-                <span
-                  className="conversation-list-cell-badge cell-badge-light conversation-muted"
-                  data-uie-name="status-silence"
-                  title={t('accessibility.conversationStatusMuted')}
-                >
-                  <Icon.Mute className="svg-icon" />
-                </span>
-              )}
-
-              {cellState.icon === ConversationStatusIcon.UNREAD_MESSAGES && unreadState.allMessages.length > 0 && (
-                <span
-                  className="conversation-list-cell-badge cell-badge-dark"
-                  data-uie-name="status-unread"
-                  title={t('accessibility.conversationStatusUnread')}
-                >
-                  {unreadState.allMessages.length}
-                </span>
-              )}
-            </>
-          )}
+          {!showJoinButton && <ConversationListCellStatusIcon conversation={conversation} />}
 
           {showJoinButton && (
             <button
diff --git a/src/script/components/list/ConversationListCellStatusIcon.tsx b/src/script/components/list/ConversationListCellStatusIcon.tsx
new file mode 100644
index 00000000000..dc14c02bfda
--- /dev/null
+++ b/src/script/components/list/ConversationListCellStatusIcon.tsx
@@ -0,0 +1,119 @@
+/*
+ * 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 {useMemo} from 'react';
+
+import {Icon} from 'Components/Icon';
+import {useKoSubscribableChildren} from 'Util/ComponentUtil';
+import {t} from 'Util/LocalizerUtil';
+
+import {generateCellState} from '../../conversation/ConversationCellState';
+import {ConversationStatusIcon} from '../../conversation/ConversationStatusIcon';
+import type {Conversation} from '../../entity/Conversation';
+
+export interface ConversationListCellStatusIconProps {
+  conversation: Conversation;
+}
+
+const ConversationListCellStatusIcon = ({conversation}: ConversationListCellStatusIconProps) => {
+  const {unreadState, mutedState, isRequest} = useKoSubscribableChildren(conversation, [
+    'unreadState',
+    'mutedState',
+    'isRequest',
+  ]);
+
+  const cellState = useMemo(() => generateCellState(conversation), [unreadState, mutedState, isRequest]);
+
+  return (
+    <>
+      {cellState.icon === ConversationStatusIcon.PENDING_CONNECTION && (
+        <span
+          className="conversation-list-cell-badge cell-badge-light"
+          data-uie-name="status-pending"
+          title={t('accessibility.conversationStatusPending')}
+        >
+          <Icon.Pending className="svg-icon" />
+        </span>
+      )}
+
+      {cellState.icon === ConversationStatusIcon.UNREAD_MENTION && (
+        <span
+          className="conversation-list-cell-badge cell-badge-dark"
+          data-uie-name="status-mention"
+          title={t('accessibility.conversationStatusUnreadMention')}
+        >
+          <Icon.Mention className="svg-icon" />
+        </span>
+      )}
+
+      {cellState.icon === ConversationStatusIcon.UNREAD_REPLY && (
+        <span
+          className="conversation-list-cell-badge cell-badge-dark"
+          data-uie-name="status-reply"
+          title={t('accessibility.conversationStatusUnreadReply')}
+          aria-label={t('accessibility.conversationStatusUnreadReply')}
+        >
+          <Icon.Reply className="svg-icon" />
+        </span>
+      )}
+
+      {cellState.icon === ConversationStatusIcon.UNREAD_PING && (
+        <span
+          className="conversation-list-cell-badge cell-badge-dark"
+          data-uie-name="status-ping"
+          title={t('accessibility.conversationStatusUnreadPing')}
+        >
+          <Icon.Ping className="svg-icon" />
+        </span>
+      )}
+
+      {cellState.icon === ConversationStatusIcon.MISSED_CALL && (
+        <span
+          className="conversation-list-cell-badge cell-badge-dark"
+          data-uie-name="status-missed-call"
+          title={t('accessibility.callStatusMissed')}
+        >
+          <Icon.Hangup className="svg-icon" />
+        </span>
+      )}
+
+      {cellState.icon === ConversationStatusIcon.MUTED && (
+        <span
+          className="conversation-list-cell-badge cell-badge-light conversation-muted"
+          data-uie-name="status-silence"
+          title={t('accessibility.conversationStatusMuted')}
+        >
+          <Icon.Mute className="svg-icon" />
+        </span>
+      )}
+
+      {cellState.icon === ConversationStatusIcon.UNREAD_MESSAGES && unreadState.allMessages.length > 0 && (
+        <span
+          className="conversation-list-cell-badge cell-badge-dark"
+          data-uie-name="status-unread"
+          title={t('accessibility.conversationStatusUnread')}
+        >
+          {unreadState.allMessages.length}
+        </span>
+      )}
+    </>
+  );
+};
+
+export {ConversationListCellStatusIcon};
diff --git a/src/script/entity/Conversation.ts b/src/script/entity/Conversation.ts
index b029547630a..c6a4ef4788f 100644
--- a/src/script/entity/Conversation.ts
+++ b/src/script/entity/Conversation.ts
@@ -252,7 +252,9 @@ export class Conversation {
       const is1to1Conversation = this.type() === CONVERSATION_TYPE.ONE_TO_ONE;
       return is1to1Conversation || this.isTeam1to1();
     });
-    this.isRequest = ko.pureComputed(() => this.type() === CONVERSATION_TYPE.CONNECT);
+    this.isRequest = ko.pureComputed(
+      () => this.type() === CONVERSATION_TYPE.CONNECT || this.participating_user_ets()[0]?.isRequest(),
+    );
     this.isSelf = ko.pureComputed(() => this.type() === CONVERSATION_TYPE.SELF);
 
     this.hasDirectGuest = ko.pureComputed(() => {