Allow adding to a group by phone number

ts/components/leftPane/LeftPaneChooseGroupMembersHelper.tsx

@@ -18,46 +18,78 @@ import {
 } from '../AddGroupMemberErrorDialog';
 import { Button } from '../Button';
 import type { LocalizerType } from '../../types/Util';
+import type { ParsedE164Type } from '../../util/libphonenumberInstance';
+import { parseAndFormatPhoneNumber } from '../../util/libphonenumberInstance';
+import type { UUIDFetchStateType } from '../../util/uuidFetchState';
+import { isFetchingByE164 } from '../../util/uuidFetchState';
 import {
   getGroupSizeRecommendedLimit,
   getGroupSizeHardLimit,
 } from '../../groups/limits';
 
 export type LeftPaneChooseGroupMembersPropsType = {
+  uuidFetchState: UUIDFetchStateType;
   candidateContacts: ReadonlyArray<ConversationType>;
   isShowingRecommendedGroupSizeModal: boolean;
   isShowingMaximumGroupSizeModal: boolean;
   searchTerm: string;
+  regionCode: string | undefined;
   selectedContacts: Array<ConversationType>;
 };
 
 export class LeftPaneChooseGroupMembersHelper extends LeftPaneHelper<LeftPaneChooseGroupMembersPropsType> {
   private readonly candidateContacts: ReadonlyArray<ConversationType>;
 
+  private readonly isPhoneNumberChecked: boolean;
+
   private readonly isShowingMaximumGroupSizeModal: boolean;
 
   private readonly isShowingRecommendedGroupSizeModal: boolean;
 
   private readonly searchTerm: string;
 
+  private readonly phoneNumber: ParsedE164Type | undefined;
+
   private readonly selectedContacts: Array<ConversationType>;
 
   private readonly selectedConversationIdsSet: Set<string>;
 
+  private readonly uuidFetchState: UUIDFetchStateType;
+
   constructor({
     candidateContacts,
     isShowingMaximumGroupSizeModal,
     isShowingRecommendedGroupSizeModal,
     searchTerm,
+    regionCode,
     selectedContacts,
+    uuidFetchState,
   }: Readonly<LeftPaneChooseGroupMembersPropsType>) {
     super();
 
+    this.uuidFetchState = uuidFetchState;
+
     this.candidateContacts = candidateContacts;
     this.isShowingMaximumGroupSizeModal = isShowingMaximumGroupSizeModal;
     this.isShowingRecommendedGroupSizeModal =
       isShowingRecommendedGroupSizeModal;
     this.searchTerm = searchTerm;
+
+    const phoneNumber = parseAndFormatPhoneNumber(searchTerm, regionCode);
+    if (phoneNumber) {
+      this.isPhoneNumberChecked =
+        phoneNumber.isValid &&
+        selectedContacts.some(contact => contact.e164 === phoneNumber.e164);
+
+      const isVisible = this.candidateContacts.every(
+        contact => contact.e164 !== phoneNumber.e164
+      );
+      if (isVisible) {
+        this.phoneNumber = phoneNumber;
+      }
+    } else {
+      this.isPhoneNumberChecked = false;
+    }
     this.selectedContacts = selectedContacts;
 
     this.selectedConversationIdsSet = new Set(
@@ -207,46 +239,90 @@ export class LeftPaneChooseGroupMembersHelper extends LeftPaneHelper<LeftPaneCho
   }
 
   getRowCount(): number {
-    if (!this.candidateContacts.length) {
-      return 0;
+    let rowCount = 0;
+
+    // Header + Phone Number
+    if (this.phoneNumber) {
+      rowCount += 2;
     }
-    return this.candidateContacts.length + 2;
+
+    // Header + Contacts
+    if (this.candidateContacts.length) {
+      rowCount += 1 + this.candidateContacts.length;
+    }
+
+    // Footer
+    if (rowCount > 0) {
+      rowCount += 1;
+    }
+
+    return rowCount;
   }
 
-  getRow(rowIndex: number): undefined | Row {
-    if (!this.candidateContacts.length) {
+  getRow(actualRowIndex: number): undefined | Row {
+    if (!this.candidateContacts.length && !this.phoneNumber) {
       return undefined;
     }
 
-    if (rowIndex === 0) {
-      return {
-        type: RowType.Header,
-        i18nKey: 'contactsHeader',
-      };
-    }
+    const rowCount = this.getRowCount();
 
     // This puts a blank row for the footer.
-    if (rowIndex === this.candidateContacts.length + 1) {
+    if (actualRowIndex === rowCount - 1) {
       return { type: RowType.Blank };
     }
 
-    const contact = this.candidateContacts[rowIndex - 1];
-    if (!contact) {
-      return undefined;
+    let virtualRowIndex = actualRowIndex;
+
+    if (this.candidateContacts.length) {
+      if (virtualRowIndex === 0) {
+        return {
+          type: RowType.Header,
+          i18nKey: 'contactsHeader',
+        };
+      }
+
+      if (virtualRowIndex <= this.candidateContacts.length) {
+        const contact = this.candidateContacts[virtualRowIndex - 1];
+
+        const isChecked = this.selectedConversationIdsSet.has(contact.id);
+        const disabledReason =
+          !isChecked && this.hasSelectedMaximumNumberOfContacts()
+            ? ContactCheckboxDisabledReason.MaximumContactsSelected
+            : undefined;
+
+        return {
+          type: RowType.ContactCheckbox,
+          contact,
+          isChecked,
+          disabledReason,
+        };
+      }
+
+      virtualRowIndex -= 1 + this.candidateContacts.length;
     }
 
-    const isChecked = this.selectedConversationIdsSet.has(contact.id);
-    const disabledReason =
-      !isChecked && this.hasSelectedMaximumNumberOfContacts()
-        ? ContactCheckboxDisabledReason.MaximumContactsSelected
-        : undefined;
+    if (this.phoneNumber) {
+      if (virtualRowIndex === 0) {
+        return {
+          type: RowType.Header,
+          i18nKey: 'findByPhoneNumberHeader',
+        };
+      }
+      if (virtualRowIndex === 1) {
+        return {
+          type: RowType.PhoneNumberCheckbox,
+          isChecked: this.isPhoneNumberChecked,
+          isFetching: isFetchingByE164(
+            this.uuidFetchState,
+            this.phoneNumber.e164
+          ),
+          phoneNumber: this.phoneNumber,
+        };
+      }
+      virtualRowIndex -= 2;
+    }
 
-    return {
-      type: RowType.ContactCheckbox,
-      contact,
-      isChecked,
-      disabledReason,
-    };
+    return undefined;
   }
 
   // This is deliberately unimplemented because these keyboard shortcuts shouldn't work in