Add to group by username

ts/components/leftPane/LeftPaneChooseGroupMembersHelper.tsx

@@ -18,10 +18,14 @@ import {
 } from '../AddGroupMemberErrorDialog';
 import { Button } from '../Button';
 import type { LocalizerType } from '../../types/Util';
+import { getUsernameFromSearch } from '../../types/Username';
 import type { ParsedE164Type } from '../../util/libphonenumberInstance';
 import { parseAndFormatPhoneNumber } from '../../util/libphonenumberInstance';
 import type { UUIDFetchStateType } from '../../util/uuidFetchState';
-import { isFetchingByE164 } from '../../util/uuidFetchState';
+import {
+  isFetchingByUsername,
+  isFetchingByE164,
+} from '../../util/uuidFetchState';
 import {
   getGroupSizeRecommendedLimit,
   getGroupSizeHardLimit,
@@ -32,6 +36,7 @@ export type LeftPaneChooseGroupMembersPropsType = {
   candidateContacts: ReadonlyArray<ConversationType>;
   isShowingRecommendedGroupSizeModal: boolean;
   isShowingMaximumGroupSizeModal: boolean;
+  isUsernamesEnabled: boolean;
   searchTerm: string;
   regionCode: string | undefined;
   selectedContacts: Array<ConversationType>;
@@ -42,6 +47,8 @@ export class LeftPaneChooseGroupMembersHelper extends LeftPaneHelper<LeftPaneCho
 
   private readonly isPhoneNumberChecked: boolean;
 
+  private readonly isUsernameChecked: boolean;
+
   private readonly isShowingMaximumGroupSizeModal: boolean;
 
   private readonly isShowingRecommendedGroupSizeModal: boolean;
@@ -50,6 +57,8 @@ export class LeftPaneChooseGroupMembersHelper extends LeftPaneHelper<LeftPaneCho
 
   private readonly phoneNumber: ParsedE164Type | undefined;
 
+  private readonly username: string | undefined;
+
   private readonly selectedContacts: Array<ConversationType>;
 
   private readonly selectedConversationIdsSet: Set<string>;
@@ -60,6 +69,7 @@ export class LeftPaneChooseGroupMembersHelper extends LeftPaneHelper<LeftPaneCho
     candidateContacts,
     isShowingMaximumGroupSizeModal,
     isShowingRecommendedGroupSizeModal,
+    isUsernamesEnabled,
     searchTerm,
     regionCode,
     selectedContacts,
@@ -90,6 +100,22 @@ export class LeftPaneChooseGroupMembersHelper extends LeftPaneHelper<LeftPaneCho
     } else {
       this.isPhoneNumberChecked = false;
     }
+    if (!this.phoneNumber && isUsernamesEnabled) {
+      const username = getUsernameFromSearch(searchTerm);
+      const isVisible = this.candidateContacts.every(
+        contact => contact.username !== username
+      );
+
+      if (isVisible) {
+        this.username = username;
+      }
+
+      this.isUsernameChecked = selectedContacts.some(
+        contact => contact.username === this.username
+      );
+    } else {
+      this.isUsernameChecked = false;
+    }
     this.selectedContacts = selectedContacts;
 
     this.selectedConversationIdsSet = new Set(
@@ -246,6 +272,11 @@ export class LeftPaneChooseGroupMembersHelper extends LeftPaneHelper<LeftPaneCho
       rowCount += 2;
     }
 
+    // Header + Username
+    if (this.username) {
+      rowCount += 2;
+    }
+
     // Header + Contacts
     if (this.candidateContacts.length) {
       rowCount += 1 + this.candidateContacts.length;
@@ -260,7 +291,7 @@ export class LeftPaneChooseGroupMembersHelper extends LeftPaneHelper<LeftPaneCho
   }
 
   getRow(actualRowIndex: number): undefined | Row {
-    if (!this.candidateContacts.length && !this.phoneNumber) {
+    if (!this.candidateContacts.length && !this.phoneNumber && !this.username) {
       return undefined;
     }
 
@@ -322,6 +353,24 @@ export class LeftPaneChooseGroupMembersHelper extends LeftPaneHelper<LeftPaneCho
       virtualRowIndex -= 2;
     }
 
+    if (this.username) {
+      if (virtualRowIndex === 0) {
+        return {
+          type: RowType.Header,
+          i18nKey: 'findByUsernameHeader',
+        };
+      }
+      if (virtualRowIndex === 1) {
+        return {
+          type: RowType.UsernameCheckbox,
+          isChecked: this.isUsernameChecked,
+          isFetching: isFetchingByUsername(this.uuidFetchState, this.username),
+          username: this.username,
+        };
+      }
+      virtualRowIndex -= 2;
+    }
+
     return undefined;
   }
 

ts/components/leftPane/LeftPaneComposeHelper.tsx

@@ -43,14 +43,16 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<LeftPaneComposePropsTy
 
   private readonly uuidFetchState: UUIDFetchStateType;
 
-  private readonly isUsernamesEnabled: boolean;
-
   private readonly searchTerm: string;
 
   private readonly phoneNumber: ParsedE164Type | undefined;
 
   private readonly isPhoneNumberVisible: boolean;
 
+  private readonly username: string | undefined;
+
+  private readonly isUsernameVisible: boolean;
+
   constructor({
     composeContacts,
     composeGroups,
@@ -74,7 +76,18 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<LeftPaneComposePropsTy
       this.isPhoneNumberVisible = false;
     }
     this.uuidFetchState = uuidFetchState;
-    this.isUsernamesEnabled = isUsernamesEnabled;
+
+    if (isUsernamesEnabled && !this.phoneNumber) {
+      this.username = getUsernameFromSearch(this.searchTerm);
+      this.isUsernameVisible =
+        isUsernamesEnabled &&
+        Boolean(this.username) &&
+        this.composeContacts.every(
+          contact => contact.username !== this.username
+        );
+    } else {
+      this.isUsernameVisible = false;
+    }
   }
 
   override getHeaderContents({
@@ -148,7 +161,7 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<LeftPaneComposePropsTy
     if (this.hasGroupsHeader()) {
       result += 1;
     }
-    if (this.getUsernameFromSearch()) {
+    if (this.isUsernameVisible) {
       result += 2;
     }
     if (this.isPhoneNumberVisible) {
@@ -218,8 +231,7 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<LeftPaneComposePropsTy
       virtualRowIndex -= this.composeGroups.length;
     }
 
-    const username = this.getUsernameFromSearch();
-    if (username) {
+    if (this.username && this.isUsernameVisible) {
       if (virtualRowIndex === 0) {
         return {
           type: RowType.Header,
@@ -232,10 +244,10 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<LeftPaneComposePropsTy
       if (virtualRowIndex === 0) {
         return {
           type: RowType.UsernameSearchResult,
-          username,
+          username: this.username,
           isFetchingUsername: isFetchingByUsername(
             this.uuidFetchState,
-            username
+            this.username
           ),
         };
 
@@ -295,7 +307,8 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<LeftPaneComposePropsTy
       currHeaderIndices.top !== prevHeaderIndices.top ||
       currHeaderIndices.contact !== prevHeaderIndices.contact ||
       currHeaderIndices.group !== prevHeaderIndices.group ||
-      currHeaderIndices.username !== prevHeaderIndices.username
+      currHeaderIndices.username !== prevHeaderIndices.username ||
+      currHeaderIndices.phoneNumber !== prevHeaderIndices.phoneNumber
     );
   }
 
@@ -318,31 +331,17 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<LeftPaneComposePropsTy
     return Boolean(this.composeGroups.length);
   }
 
-  private getUsernameFromSearch(): string | undefined {
-    if (!this.isUsernamesEnabled) {
-      return undefined;
-    }
-
-    if (this.phoneNumber) {
-      return undefined;
-    }
-
-    if (this.searchTerm) {
-      return getUsernameFromSearch(this.searchTerm);
-    }
-
-    return undefined;
-  }
-
   private getHeaderIndices(): {
     top?: number;
     contact?: number;
     group?: number;
+    phoneNumber?: number;
     username?: number;
   } {
     let top: number | undefined;
     let contact: number | undefined;
     let group: number | undefined;
+    let phoneNumber: number | undefined;
     let username: number | undefined;
 
     let rowCount = 0;
@@ -359,7 +358,10 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<LeftPaneComposePropsTy
       group = rowCount;
       rowCount += this.composeContacts.length;
     }
-    if (this.getUsernameFromSearch()) {
+    if (this.phoneNumber) {
+      phoneNumber = rowCount;
+    }
+    if (this.username) {
       username = rowCount;
     }
 
@@ -367,6 +369,7 @@ export class LeftPaneComposeHelper extends LeftPaneHelper<LeftPaneComposePropsTy
       top,
       contact,
       group,
+      phoneNumber,
       username,
     };
   }