Cleanup message request (#2063)

* close incoming call dialog if endCall from seame sender

* disable message request toggle if featureFlag is OFF

* cleanup UI of message requests

* mark all existing conversations as approved in a migration

* fix regex with conversationID for opengroups

app/sql.js

@@ -834,6 +834,7 @@ const LOKI_SCHEMA_VERSIONS = [
   updateToLokiSchemaVersion14,
   updateToLokiSchemaVersion15,
   updateToLokiSchemaVersion16,
+  updateToLokiSchemaVersion17,
 ];
 
 function updateToLokiSchemaVersion1(currentVersion, db) {
@@ -1227,6 +1228,24 @@ function updateToLokiSchemaVersion16(currentVersion, db) {
   console.log(`updateToLokiSchemaVersion${targetVersion}: success!`);
 }
 
+function updateToLokiSchemaVersion17(currentVersion, db) {
+  const targetVersion = 17;
+  if (currentVersion >= targetVersion) {
+    return;
+  }
+  console.log(`updateToLokiSchemaVersion${targetVersion}: starting...`);
+
+  db.transaction(() => {
+    db.exec(`
+      UPDATE ${CONVERSATIONS_TABLE} SET
+      json = json_set(json, '$.isApproved', 1)
+    `);
+
+    writeLokiSchemaVersion(targetVersion, db);
+  })();
+  console.log(`updateToLokiSchemaVersion${targetVersion}: success!`);
+}
+
 function writeLokiSchemaVersion(newVersion, db) {
   db.prepare(
     `INSERT INTO loki_schema(

stylesheets/_session_left_pane.scss

@@ -249,14 +249,6 @@ $session-compose-margin: 20px;
       margin-bottom: 3rem;
       flex-shrink: 0;
     }
-
-    .message-request-list__container {
-      width: 100%;
-
-      .session-button {
-        margin: $session-margin-xs $session-margin-xs $session-margin-xs 0;
-      }
-    }
   }
 }
 .module-search-results {

ts/components/Avatar.tsx

@@ -113,6 +113,7 @@ const AvatarInner = (props: Props) => {
       )}
       onClick={e => {
         e.stopPropagation();
+        e.preventDefault();
         props.onAvatarClick?.();
       }}
       role="button"

ts/components/ConversationListItem.tsx

@@ -25,7 +25,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import { SectionType } from '../state/ducks/section';
 import { getFocusedSection } from '../state/selectors/section';
 import { ConversationNotificationSettingType } from '../models/conversation';
-import { Flex } from './basic/Flex';
 import { forceSyncConfigurationNowIfNeeded } from '../session/utils/syncUtils';
 import { updateUserDetailsModal } from '../state/ducks/modalDialog';
 import { approveConversation, blockConvoById } from '../interactions/conversationInteractions';
@@ -170,6 +169,8 @@ const MessageItem = (props: {
   lastMessage?: LastMessageType;
   isTyping: boolean;
   unreadCount: number;
+  isMessageRequest: boolean;
+  conversationId: string;
 }) => {
   const { lastMessage, isTyping, unreadCount } = props;
 
@@ -196,7 +197,11 @@ const MessageItem = (props: {
           <MessageBody isGroup={true} text={text} disableJumbomoji={true} disableLinks={true} />
         )}
       </div>
-      {lastMessage && lastMessage.status ? (
+      <MessageRequestButtons
+        conversationId={props.conversationId}
+        isMessageRequest={props.isMessageRequest}
+      />
+      {lastMessage && lastMessage.status && !props.isMessageRequest ? (
         <OutgoingMessageStatus status={lastMessage.status} />
       ) : null}
     </div>
@@ -230,6 +235,64 @@ const AvatarItem = (props: { conversationId: string; isPrivate: boolean }) => {
   );
 };
 
+const RejectMessageRequestButton = ({ conversationId }: { conversationId: string }) => {
+  /**
+   * Removes conversation from requests list,
+   * adds ID to block list, syncs the block with linked devices.
+   */
+  const handleConversationBlock = async () => {
+    await blockConvoById(conversationId);
+    await forceSyncConfigurationNowIfNeeded();
+  };
+  return (
+    <SessionIconButton
+      iconType="exit"
+      iconSize="large"
+      onClick={handleConversationBlock}
+      backgroundColor="var(--color-destructive)"
+      iconColor="var(--color-foreground-primary)"
+      iconPadding="var(--margins-xs)"
+      borderRadius="2px"
+      margin="0 5px 0 0"
+    />
+  );
+};
+
+const ApproveMessageRequestButton = ({ conversationId }: { conversationId: string }) => {
+  return (
+    <SessionIconButton
+      iconType="check"
+      iconSize="large"
+      onClick={async () => {
+        await approveConversation(conversationId);
+      }}
+      backgroundColor="var(--color-accent)"
+      iconColor="var(--color-foreground-primary)"
+      iconPadding="var(--margins-xs)"
+      borderRadius="2px"
+    />
+  );
+};
+
+const MessageRequestButtons = ({
+  conversationId,
+  isMessageRequest,
+}: {
+  conversationId: string;
+  isMessageRequest: boolean;
+}) => {
+  if (!isMessageRequest) {
+    return null;
+  }
+
+  return (
+    <>
+      <RejectMessageRequestButton conversationId={conversationId} />
+      <ApproveMessageRequestButton conversationId={conversationId} />
+    </>
+  );
+};
+
 // tslint:disable: max-func-body-length
 const ConversationListItem = (props: Props) => {
   const {
@@ -267,15 +330,6 @@ const ConversationListItem = (props: Props) => {
     [conversationId]
   );
 
-  /**
-   * Removes conversation from requests list,
-   * adds ID to block list, syncs the block with linked devices.
-   */
-  const handleConversationBlock = async () => {
-    await blockConvoById(conversationId);
-    await forceSyncConfigurationNowIfNeeded();
-  };
-
   return (
     <div key={key}>
       <div
@@ -316,36 +370,9 @@ const ConversationListItem = (props: Props) => {
             isTyping={!!isTyping}
             unreadCount={unreadCount || 0}
             lastMessage={lastMessage}
+            isMessageRequest={Boolean(isMessageRequest)}
+            conversationId={conversationId}
           />
-          {isMessageRequest ? (
-            <Flex
-              className="module-conversation-list-item__button-container"
-              container={true}
-              flexDirection="row"
-              justifyContent="flex-end"
-            >
-              <SessionIconButton
-                iconType="exit"
-                iconSize="large"
-                onClick={handleConversationBlock}
-                backgroundColor="var(--color-destructive)"
-                iconColor="var(--color-foreground-primary)"
-                iconPadding="var(--margins-xs)"
-                borderRadius="2px"
-              />
-              <SessionIconButton
-                iconType="check"
-                iconSize="large"
-                onClick={async () => {
-                  await approveConversation(conversationId);
-                }}
-                backgroundColor="var(--color-accent)"
-                iconColor="var(--color-foreground-primary)"
-                iconPadding="var(--margins-xs)"
-                borderRadius="2px"
-              />
-            </Flex>
-          ) : null}
         </div>
       </div>
       <Portal>

ts/components/session/SessionClosableOverlay.tsx

@@ -12,6 +12,7 @@ import { SpacerLG, SpacerMD } from '../basic/Text';
 import { useSelector } from 'react-redux';
 import { getConversationRequests } from '../../state/selectors/conversations';
 import { MemoConversationListItemWithDetails } from '../ConversationListItem';
+import styled from 'styled-components';
 
 export enum SessionClosableOverlayType {
   Message = 'message',
@@ -287,6 +288,12 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
   }
 }
 
+const MessageRequestListContainer = styled.div`
+  width: 100%;
+  overflow-y: auto;
+  border: var(--border-session);
+`;
+
 /**
  * A request needs to be be unapproved and not blocked to be valid.
  * @returns List of message request items
@@ -294,7 +301,7 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
 const MessageRequestList = () => {
   const conversationRequests = useSelector(getConversationRequests);
   return (
-    <div className="message-request-list__container">
+    <MessageRequestListContainer>
       {conversationRequests.map(conversation => {
         return (
           <MemoConversationListItemWithDetails
@@ -304,6 +311,6 @@ const MessageRequestList = () => {
           />
         );
       })}
-    </div>
+    </MessageRequestListContainer>
   );
 };

ts/opengroup/utils/OpenGroupUtils.ts

@@ -40,7 +40,7 @@ export const openGroupPrefix = 'publicChat:';
 export const openGroupPrefixRegex = new RegExp(`^${openGroupPrefix}`);
 
 export const openGroupV2ConversationIdRegex = new RegExp(
-  `${openGroupPrefix}${roomIdV2Regex}@${protocolRegex.source}${hostnameRegex.source}${portRegex}`
+  `${openGroupPrefix}${roomIdV2Regex}@${openGroupV2ServerUrlRegex.source}`
 );
 
 /**

ts/session/conversations/ConversationController.ts

@@ -1,9 +1,4 @@
-import {
-  getAllConversations,
-  getAllGroupsInvolvingId,
-  removeConversation,
-  saveConversation,
-} from '../../data/data';
+import { getAllConversations, removeConversation, saveConversation } from '../../data/data';
 import {
   ConversationAttributes,
   ConversationCollection,
@@ -181,11 +176,6 @@ export class ConversationController {
     });
   }
 
-  public async getAllGroupsInvolvingId(id: string) {
-    const groups = await getAllGroupsInvolvingId(id);
-    return groups.map((group: any) => this.conversations.add(group));
-  }
-
   public async deleteContact(id: string) {
     if (!this._initialFetchComplete) {
       throw new Error('getConversationController().get() needs complete initial fetch');