Fix UI in PendingInvites

ts/components/conversation/conversation-details/PendingInvites.tsx

@@ -15,6 +15,7 @@ import { PanelSection } from './PanelSection';
 import { PanelRow } from './PanelRow';
 import { ConversationDetailsIcon, IconType } from './ConversationDetailsIcon';
 import { isAccessControlEnabled } from '../../../groups/util';
+import { assertDev } from '../../../util/assert';
 
 export type PropsType = {
   readonly conversation?: ConversationType;
@@ -291,7 +292,7 @@ function getConfirmationMessage({
   }
 
   const inviter = members.find(
-    ({ id }) => id === firstPendingMembership.metadata.addedByUserId
+    ({ uuid }) => uuid === firstPendingMembership.metadata.addedByUserId
   );
 
   if (inviter === undefined) {
@@ -413,12 +414,15 @@ function MembersPendingProfileKey({
     groupedPendingMemberships;
 
   const otherPendingMemberships = Object.keys(otherPendingMembershipGroups)
-    .map(id => members.find(member => member.id === id))
+    .map(id => members.find(member => member.uuid === id))
     .filter((member): member is ConversationType => member !== undefined)
-    .map(member => ({
-      member,
-      pendingMemberships: otherPendingMembershipGroups[member.id],
-    }));
+    .map(member => {
+      assertDev(member.uuid, 'We just verified that member has uuid above');
+      return {
+        member,
+        pendingMemberships: otherPendingMembershipGroups[member.uuid],
+      };
+    });
 
   return (
     <PanelSection>

ts/models/conversations.ts

@@ -1824,6 +1824,7 @@ export class ConversationModel extends window.Backbone
     return {
       id: this.id,
       uuid: this.get('uuid'),
+      pni: this.get('pni'),
       e164: this.get('e164'),
 
       // We had previously stored `null` instead of `undefined` in some cases. We should

ts/state/ducks/conversations.ts

@@ -111,6 +111,7 @@ export type ConversationTypeType = typeof ConversationTypes[number];
 export type ConversationType = {
   id: string;
   uuid?: UUIDStringType;
+  pni?: UUIDStringType;
   e164?: string;
   name?: string;
   familyName?: string;
@@ -2173,6 +2174,9 @@ export function updateConversationLookups(
   if (removed && removed.uuid) {
     result.conversationsByUuid = omit(result.conversationsByUuid, removed.uuid);
   }
+  if (removed && removed.pni) {
+    result.conversationsByUuid = omit(result.conversationsByUuid, removed.pni);
+  }
   if (removed && removed.groupId) {
     result.conversationsByGroupId = omit(
       result.conversationsByGroupId,
@@ -2198,6 +2202,12 @@ export function updateConversationLookups(
       [added.uuid]: added,
     };
   }
+  if (added && added.pni) {
+    result.conversationsByUuid = {
+      ...result.conversationsByUuid,
+      [added.pni]: added,
+    };
+  }
   if (added && added.groupId) {
     result.conversationsByGroupId = {
       ...result.conversationsByGroupId,

ts/state/getInitialState.ts

@@ -84,10 +84,10 @@ export function getInitialState({
         formattedConversations,
         'e164'
       ),
-      conversationsByUuid: window.Signal.Util.makeLookup(
-        formattedConversations,
-        'uuid'
-      ),
+      conversationsByUuid: {
+        ...window.Signal.Util.makeLookup(formattedConversations, 'uuid'),
+        ...window.Signal.Util.makeLookup(formattedConversations, 'pni'),
+      },
       conversationsByGroupId: window.Signal.Util.makeLookup(
         formattedConversations,
         'groupId'

ts/test-mock/pnp/accept_gv2_invite_test.ts

@@ -209,6 +209,26 @@ describe('pnp/accept gv2 invite', function needsName() {
     assert(!group.getMemberByUUID(desktop.pni));
     assert(!group.getPendingMemberByUUID(desktop.uuid));
     assert(group.getPendingMemberByUUID(desktop.pni));
+
+    debug('Verifying invite list');
+    await conversationStack
+      .locator('.module-ConversationHeader__header__info__title')
+      .click();
+    await conversationStack
+      .locator(
+        '.ConversationDetails-panel-row__root--button >> ' +
+          'text=Requests & Invites'
+      )
+      .click();
+    await conversationStack
+      .locator('.ConversationDetails__tab >> text=Invites (1)')
+      .click();
+    await conversationStack
+      .locator(
+        '.ConversationDetails-panel-row__root >> ' +
+          `text=/${first.profileName}.*Invited 1/i`
+      )
+      .waitFor();
   });
 
   it('should decline ACI invite with extra PNI on the invite list', async () => {