Fix UI bug with self-add by username in groups

ts/components/LeftPane.stories.tsx

@@ -938,6 +938,7 @@ export function ChooseGroupMembersPartialPhoneNumber(): JSX.Element {
           isShowingRecommendedGroupSizeModal: false,
           isShowingMaximumGroupSizeModal: false,
           isUsernamesEnabled: true,
+          ourUsername: undefined,
           searchTerm: '+1(212) 555',
           regionCode: 'US',
           selectedContacts: [],
@@ -960,6 +961,7 @@ export function ChooseGroupMembersValidPhoneNumber(): JSX.Element {
           isShowingRecommendedGroupSizeModal: false,
           isShowingMaximumGroupSizeModal: false,
           isUsernamesEnabled: true,
+          ourUsername: undefined,
           searchTerm: '+1(212) 555 5454',
           regionCode: 'US',
           selectedContacts: [],
@@ -982,6 +984,7 @@ export function ChooseGroupMembersUsername(): JSX.Element {
           isShowingRecommendedGroupSizeModal: false,
           isShowingMaximumGroupSizeModal: false,
           isUsernamesEnabled: true,
+          ourUsername: undefined,
           searchTerm: '@signal',
           regionCode: 'US',
           selectedContacts: [],

ts/components/conversation/conversation-details/AddGroupMembersModal.stories.tsx

@@ -64,6 +64,7 @@ const createProps = (
         )}
         regionCode="US"
         getPreferredBadge={() => undefined}
+        ourUsername={undefined}
         theme={ThemeType.light}
         i18n={i18n}
         lookupConversationWithoutServiceId={lookupConversationWithoutServiceId}

ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.tsx

@@ -55,6 +55,7 @@ export type StatePropsType = {
   i18n: LocalizerType;
   theme: ThemeType;
   maxGroupSize: number;
+  ourUsername: string | undefined;
   searchTerm: string;
   selectedContacts: ReadonlyArray<ConversationType>;
 
@@ -85,6 +86,7 @@ export function ChooseGroupMembersModal({
   i18n,
   maxGroupSize,
   onClose,
+  ourUsername,
   removeSelectedContact,
   searchTerm,
   selectedContacts,
@@ -110,6 +112,7 @@ export function ChooseGroupMembersModal({
 
     isUsernameVisible =
       Boolean(username) &&
+      username !== ourUsername &&
       candidateContacts.every(contact => contact.username !== username);
   }
 

ts/components/conversation/conversation-details/ConversationDetails.stories.tsx

@@ -122,6 +122,7 @@ const createProps = (
         theme={ThemeType.light}
         i18n={i18n}
         lookupConversationWithoutServiceId={makeFakeLookupConversationWithoutServiceId()}
+        ourUsername={undefined}
         showUserNotFoundModal={action('showUserNotFoundModal')}
         isUsernamesEnabled
       />

ts/components/leftPane/LeftPaneChooseGroupMembersHelper.tsx

@@ -35,6 +35,7 @@ export type LeftPaneChooseGroupMembersPropsType = {
   isShowingRecommendedGroupSizeModal: boolean;
   isShowingMaximumGroupSizeModal: boolean;
   isUsernamesEnabled: boolean;
+  ourUsername: string | undefined;
   searchTerm: string;
   regionCode: string | undefined;
   selectedContacts: Array<ConversationType>;
@@ -74,6 +75,7 @@ export class LeftPaneChooseGroupMembersHelper extends LeftPaneHelper<LeftPaneCho
     isUsernamesEnabled,
     groupSizeRecommendedLimit,
     groupSizeHardLimit,
+    ourUsername,
     searchTerm,
     regionCode,
     selectedContacts,
@@ -94,6 +96,7 @@ export class LeftPaneChooseGroupMembersHelper extends LeftPaneHelper<LeftPaneCho
     const username = getUsernameFromSearch(searchTerm);
     const isUsernameVisible =
       username !== undefined &&
+      username !== ourUsername &&
       this.candidateContacts.every(contact => contact.username !== username);
 
     if (isUsernamesEnabled) {
@@ -109,7 +112,11 @@ export class LeftPaneChooseGroupMembersHelper extends LeftPaneHelper<LeftPaneCho
     }
 
     const phoneNumber = parseAndFormatPhoneNumber(searchTerm, regionCode);
-    if (!isUsernameVisible && phoneNumber) {
+    if (
+      !isUsernameVisible &&
+      (ourUsername === undefined || username !== ourUsername) &&
+      phoneNumber
+    ) {
       this.isPhoneNumberChecked =
         phoneNumber.isValid &&
         selectedContacts.some(contact => contact.e164 === phoneNumber.e164);

ts/state/smart/ChooseGroupMembersModal.tsx

@@ -16,6 +16,7 @@ import { getUsernamesEnabled } from '../selectors/items';
 import {
   getCandidateContactsForNewGroup,
   getConversationByIdSelector,
+  getMe,
 } from '../selectors/conversations';
 import { getPreferredBadgeSelector } from '../selectors/badges';
 
@@ -54,6 +55,7 @@ const mapStateToProps = (
     getPreferredBadge: getPreferredBadgeSelector(state),
     i18n: getIntl(state),
     theme: getTheme(state),
+    ourUsername: getMe(state).username,
     selectedContacts,
     lookupConversationWithoutServiceId,
     isUsernamesEnabled: getUsernamesEnabled(state),

ts/state/smart/LeftPane.tsx

@@ -58,6 +58,7 @@ import {
   getFilteredComposeGroups,
   getLeftPaneLists,
   getMaximumGroupSizeModalState,
+  getMe,
   getRecommendedGroupSizeModalState,
   getSelectedConversationId,
   getTargetedMessage,
@@ -179,6 +180,7 @@ const getModeSpecificProps = (
           OneTimeModalState.Showing,
         isShowingMaximumGroupSizeModal:
           getMaximumGroupSizeModalState(state) === OneTimeModalState.Showing,
+        ourUsername: getMe(state).username,
         regionCode: getRegionCode(state),
         searchTerm: getComposerConversationSearchTerm(state),
         selectedContacts: getComposeSelectedContacts(state),

ts/test-node/components/leftPane/LeftPaneChooseGroupMembersHelper_test.ts

@@ -17,6 +17,7 @@ describe('LeftPaneChooseGroupMembersHelper', () => {
     isShowingRecommendedGroupSizeModal: false,
     isShowingMaximumGroupSizeModal: false,
     isUsernamesEnabled: true,
+    ourUsername: undefined,
     groupSizeRecommendedLimit: 22,
     groupSizeHardLimit: 33,
     searchTerm: '',