Merge branch 'clearnet' into theming_hotfixes

Author: yougotwill

_locales/en/messages.json

@@ -72,7 +72,7 @@
   "noSearchResults": "No results found for \"$searchTerm$\"",
   "conversationsHeader": "Contacts and Groups",
   "contactsHeader": "Contacts",
-  "messagesHeader": "Messages",
+  "messagesHeader": "Conversations",
   "settingsHeader": "Settings",
   "typingAlt": "Typing animation for this conversation",
   "contactAvatarAlt": "Avatar for contact $name$",

package.json

@@ -2,7 +2,7 @@
   "name": "session-desktop",
   "productName": "Session",
   "description": "Private messaging from your desktop",
-  "version": "1.10.2",
+  "version": "1.10.4",
   "license": "GPL-3.0",
   "author": {
     "name": "Oxen Labs",
@@ -306,7 +306,8 @@
         "libnss3",
         "libasound2",
         "libxss1"
-      ]
+      ],
+      "packageCategory": "net"
     },
     "files": [
       "package.json",

ts/components/SessionScrollButton.tsx

@@ -13,6 +13,7 @@ const SessionScrollButtonDiv = styled.div`
 
   .session-icon-button {
     background-color: var(--message-bubbles-received-background-color);
+    box-shadow: var(--scroll-button-shadow);
   }
 `;
 

ts/components/dialog/SessionPasswordDialog.tsx

@@ -42,12 +42,18 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
   }
 
   public componentDidMount() {
+    document.addEventListener('keyup', this.onEnterPressed);
+
     setTimeout(() => {
       // tslint:disable-next-line: no-unused-expression
       this.passportInput && this.passportInput.focus();
     }, 1);
   }
 
+  public componentWillUnmount() {
+    document.removeEventListener('keyup', this.onEnterPressed);
+  }
+
   public render() {
     const { passwordAction } = this.props;
     let placeholders: Array<string> = [];
@@ -93,15 +99,17 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
               this.passportInput = input;
             }}
             placeholder={placeholders[0]}
-            onKeyUp={this.onPasswordInput}
+            onChange={this.onPasswordInput}
+            onPaste={this.onPasswordInput}
             data-testid="password-input"
           />
           {passwordAction !== 'enter' && passwordAction !== 'remove' && (
             <input
               type="password"
               id="password-modal-input-confirm"
               placeholder={placeholders[1]}
-              onKeyUp={this.onPasswordConfirmInput}
+              onChange={this.onPasswordConfirmInput}
+              onPaste={this.onPasswordConfirmInput}
               data-testid="password-input-confirm"
             />
           )}
@@ -110,7 +118,8 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
               type="password"
               id="password-modal-input-reconfirm"
               placeholder={placeholders[2]}
-              onKeyUp={this.onPasswordRetypeInput}
+              onPaste={this.onPasswordRetypeInput}
+              onChange={this.onPasswordRetypeInput}
               data-testid="password-input-reconfirm"
             />
           )}
@@ -258,6 +267,13 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
     this.closeDialog();
   }
 
+  private async onEnterPressed(event: any) {
+    if (event.key === 'Enter') {
+      event.stopPropagation();
+      return this.setPassword();
+    }
+  }
+
   private async handleActionEnter(enteredPassword: string) {
     // be sure the password is valid
     if (!this.validatePassword(enteredPassword)) {
@@ -321,30 +337,18 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
     window.inboxStore?.dispatch(sessionPassword(null));
   }
 
-  private async onPasswordInput(event: any) {
-    if (event.key === 'Enter') {
-      return this.setPassword();
-    }
+  private onPasswordInput(event: any) {
     const currentPasswordEntered = event.target.value;
-
     this.setState({ currentPasswordEntered });
   }
 
-  private async onPasswordConfirmInput(event: any) {
-    if (event.key === 'Enter') {
-      return this.setPassword();
-    }
+  private onPasswordConfirmInput(event: any) {
     const currentPasswordConfirmEntered = event.target.value;
-
     this.setState({ currentPasswordConfirmEntered });
   }
 
-  private async onPasswordRetypeInput(event: any) {
-    if (event.key === 'Enter') {
-      return this.setPassword();
-    }
+  private onPasswordRetypeInput(event: any) {
     const currentPasswordRetypeEntered = event.target.value;
-
     this.setState({ currentPasswordRetypeEntered });
   }
 }

ts/components/icon/SessionNotificationCount.tsx

@@ -7,12 +7,10 @@ type Props = {
 
 const StyledCountContainer = styled.div<{ shouldRender: boolean }>`
   position: absolute;
-  width: 24px;
-  height: 12px;
   font-size: 18px;
   top: 27px;
   right: 8px;
-  padding: 3px;
+  padding: 0 6px;
   opacity: 1;
   display: flex;
   align-items: center;
@@ -29,19 +27,19 @@ const StyledCountContainer = styled.div<{ shouldRender: boolean }>`
 
 const StyledCount = styled.div`
   position: relative;
-  font-size: 0.6em;
+  font-size: 0.6rem;
 `;
 
 export const SessionNotificationCount = (props: Props) => {
   const { count } = props;
-  const overflow = Boolean(count && count > 9);
+  const overflow = Boolean(count && count > 99);
   const shouldRender = Boolean(count && count > 0);
 
   if (overflow) {
     return (
       <StyledCountContainer shouldRender={shouldRender}>
         <StyledCount>
-          {9}
+          {99}
           <span>+</span>
         </StyledCount>
       </StyledCountContainer>

ts/components/leftpane/ActionsPanel.tsx

@@ -117,7 +117,6 @@ const Section = (props: { type: SectionType }) => {
           iconSize="medium"
           dataTestId="settings-section"
           iconType={'gear'}
-          notificationCount={unreadToShow}
           onClick={handleClick}
           isSelected={isSelected}
         />
@@ -138,7 +137,6 @@ const Section = (props: { type: SectionType }) => {
           iconSize="medium"
           iconType={isDarkMode ? 'moon' : 'sun'}
           dataTestId="theme-section"
-          notificationCount={unreadToShow}
           onClick={handleClick}
           isSelected={isSelected}
         />

ts/components/settings/section/CategoryPrivacy.tsx

@@ -97,6 +97,7 @@ export const SettingsCategoryPrivacy = (props: {
               displayPasswordModal('change', props.onPasswordUpdated);
             }}
             buttonText={window.i18n('changePassword')}
+            dataTestId="change-password-settings-button"
           />
         )}
         {props.hasPassword && (
@@ -108,6 +109,7 @@ export const SettingsCategoryPrivacy = (props: {
             }}
             buttonColor={SessionButtonColor.Danger}
             buttonText={window.i18n('removePassword')}
+            dataTestId="remove-password-settings-button"
           />
         )}
       </>

ts/data/data.ts

@@ -493,9 +493,17 @@ async function getUnreadByConversation(conversationId: string): Promise<MessageC
 }
 
 async function markAllAsReadByConversationNoExpiration(
-  conversationId: string
+  conversationId: string,
+  returnMessagesUpdated: boolean // for performance reason we do not return them because usually they are not needed
 ): Promise<Array<number>> {
-  const messagesIds = await channels.markAllAsReadByConversationNoExpiration(conversationId);
+  // tslint:disable-next-line: no-console
+  console.time('markAllAsReadByConversationNoExpiration');
+  const messagesIds = await channels.markAllAsReadByConversationNoExpiration(
+    conversationId,
+    returnMessagesUpdated
+  );
+  // tslint:disable-next-line: no-console
+  console.timeEnd('markAllAsReadByConversationNoExpiration');
   return messagesIds;
 }
 

ts/interactions/conversationInteractions.ts

@@ -254,11 +254,6 @@ export function showLeaveGroupByConvoId(conversationId: string) {
 export function showInviteContactByConvoId(conversationId: string) {
   window.inboxStore?.dispatch(updateInviteContactModal({ conversationId }));
 }
-export async function onMarkAllReadByConvoId(conversationId: string) {
-  const conversation = getConversationController().get(conversationId);
-
-  await conversation.markReadBouncy(Date.now());
-}
 
 export function showAddModeratorsByConvoId(conversationId: string) {
   window.inboxStore?.dispatch(updateAddModeratorsModal({ conversationId }));

ts/models/conversation.ts

@@ -32,6 +32,7 @@ import {
   actions as conversationActions,
   conversationChanged,
   conversationsChanged,
+  markConversationFullyRead,
   MessageModelPropsWithoutConvoProps,
   ReduxConversationType,
 } from '../state/ducks/conversations';
@@ -1231,27 +1232,38 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
    * Send read receipt if needed.
    */
   public async markAllAsRead() {
-    if (this.isOpenGroupV2()) {
+    /**
+     *  when marking all as read, there is a bunch of things we need to do.
+     *   - we need to update all the messages in the DB not read yet for that conversation
+     *   - we need to send the read receipts if there is one needed for those messages
+     *   - we need to trigger a change on the redux store, so those messages are read AND mark the whole convo as read.
+     *   - we need to remove any notifications related to this conversation ID.
+     *
+     *
+     * (if there is an expireTimer, we do it the slow way, handling each message separately)
+     */
+    const expireTimerSet = !!this.get('expireTimer');
+    if (this.isOpenGroupV2() || !expireTimerSet) {
       // for opengroups, we batch everything as there is no expiration timer to take care (and potentially a lot of messages)
 
-      await Data.markAllAsReadByConversationNoExpiration(this.id);
+      const isOpenGroup = this.isOpenGroupV2();
+      // if this is an opengroup there is no need to send read receipt, and so no need to fetch messages updated.
+      const allReadMessages = await Data.markAllAsReadByConversationNoExpiration(
+        this.id,
+        !isOpenGroup
+      );
       this.set({ mentionedUs: false, unreadCount: 0 });
 
       await this.commit();
-      return;
-    }
-
-    // if the conversation has no expiration timer, we can also batch everything, but we also need to send read receipts potentially
-    // so we grab them from the db
-    if (!this.get('expireTimer')) {
-      const allReadMessages = await Data.markAllAsReadByConversationNoExpiration(this.id);
-      this.set({ mentionedUs: false, unreadCount: 0 });
-      await this.commit();
-      if (allReadMessages.length) {
+      if (!this.isOpenGroupV2() && allReadMessages.length) {
         await this.sendReadReceiptsIfNeeded(uniq(allReadMessages));
       }
+      Notifications.clearByConversationID(this.id);
+      window.inboxStore?.dispatch(markConversationFullyRead(this.id));
+
       return;
     }
+    // otherwise, do it the slow way
     await this.markReadBouncy(Date.now());
   }