While in call link call show unknown contacts discretely

ts/components/CallManager.stories.tsx

@@ -7,7 +7,6 @@ import type { Meta } from '@storybook/react';
 import type { PropsType } from './CallManager';
 import { CallManager } from './CallManager';
 import {
-  type ActiveGroupCallType,
   CallEndedReason,
   CallMode,
   CallState,
@@ -15,6 +14,10 @@ import {
   GroupCallConnectionState,
   GroupCallJoinState,
 } from '../types/Calling';
+import type {
+  ActiveGroupCallType,
+  GroupCallRemoteParticipantType,
+} from '../types/Calling';
 import type {
   ConversationType,
   ConversationTypeType,
@@ -55,6 +58,20 @@ const getUnknownContact = (): ConversationType => ({
   serviceId: generateAci(),
 });
 
+const getUnknownParticipant = (): GroupCallRemoteParticipantType => ({
+  ...getPlaceholderContact(),
+  serviceId: generateAci(),
+  aci: generateAci(),
+  demuxId: Math.round(10000 * Math.random()),
+  hasRemoteAudio: true,
+  hasRemoteVideo: true,
+  isHandRaised: false,
+  mediaKeysReceived: false,
+  presenting: false,
+  sharingScreen: false,
+  videoAspectRatio: 1,
+});
+
 const getCommonActiveCallData = () => ({
   conversation: getConversation(),
   joinedAt: Date.now(),
@@ -420,6 +437,27 @@ export function CallLinkWithJoinRequestsMany(): JSX.Element {
   );
 }
 
+export function CallLinkWithJoinRequestUnknownContact(): JSX.Element {
+  return (
+    <CallManager
+      {...createProps({
+        activeCall: getActiveCallForCallLink({
+          connectionState: GroupCallConnectionState.Connected,
+          joinState: GroupCallJoinState.Joined,
+          peekedParticipants: [allRemoteParticipants[0]],
+          pendingParticipants: [
+            getUnknownContact(),
+            allRemoteParticipants[1],
+            allRemoteParticipants[2],
+          ],
+          showParticipantsList: false,
+        }),
+        callLink: FAKE_CALL_LINK_WITH_ADMIN_KEY,
+      })}
+    />
+  );
+}
+
 export function CallLinkWithJoinRequestsSystemContact(): JSX.Element {
   return (
     <CallManager
@@ -475,3 +513,22 @@ export function CallLinkWithJoinRequestsParticipantsOpen(): JSX.Element {
     />
   );
 }
+
+export function CallLinkWithUnknownContacts(): JSX.Element {
+  return (
+    <CallManager
+      {...createProps({
+        activeCall: getActiveCallForCallLink({
+          connectionState: GroupCallConnectionState.Connected,
+          joinState: GroupCallJoinState.Joined,
+          remoteParticipants: [
+            allRemoteParticipants[0],
+            getUnknownParticipant(),
+            getUnknownParticipant(),
+          ],
+        }),
+        callLink: FAKE_CALL_LINK_WITH_ADMIN_KEY,
+      })}
+    />
+  );
+}

ts/components/CallManager.tsx

@@ -396,6 +396,7 @@ function ActiveCallManager({
               callLink={callLink}
               i18n={i18n}
               isCallLinkAdmin={isCallLinkAdmin}
+              isUnknownContactDiscrete={false}
               ourServiceId={me.serviceId}
               participants={peekedParticipants}
               onClose={toggleParticipants}
@@ -495,6 +496,7 @@ function ActiveCallManager({
             callLink={callLink}
             i18n={i18n}
             isCallLinkAdmin={isCallLinkAdmin}
+            isUnknownContactDiscrete
             ourServiceId={me.serviceId}
             participants={groupCallParticipantsForParticipantsList}
             onClose={toggleParticipants}

ts/components/CallingAdhocCallInfo.stories.tsx

@@ -62,6 +62,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   callLink: getCallLink(overrideProps.callLink || {}),
   i18n,
   isCallLinkAdmin: overrideProps.isCallLinkAdmin || false,
+  isUnknownContactDiscrete: overrideProps.isUnknownContactDiscrete || false,
   ourServiceId: generateAci(),
   participants: overrideProps.participants || [],
   onClose: action('on-close'),

ts/components/CallingAdhocCallInfo.tsx

@@ -36,6 +36,7 @@ export type PropsType = {
   readonly callLink: CallLinkType;
   readonly i18n: LocalizerType;
   readonly isCallLinkAdmin: boolean;
+  readonly isUnknownContactDiscrete: boolean;
   readonly ourServiceId: ServiceIdString | undefined;
   readonly participants: Array<ParticipantType>;
   readonly onClose: () => void;
@@ -145,6 +146,7 @@ function UnknownContacts({
 export function CallingAdhocCallInfo({
   i18n,
   isCallLinkAdmin,
+  isUnknownContactDiscrete,
   ourServiceId,
   participants,
   blockClient,
@@ -170,18 +172,20 @@ export function CallingAdhocCallInfo({
     onShareCallLinkViaSignal();
   }, [onClose, onShareCallLinkViaSignal]);
 
-  const [knownParticipants, unknownParticipants] = React.useMemo<
+  const [visibleParticipants, unknownParticipants] = React.useMemo<
     [Array<ParticipantType>, Array<ParticipantType>]
   >(
     () =>
-      partition(participants, (participant: ParticipantType) =>
+      partition(
-        Boolean(participant.titleNoDefault)
+        participants,
+        (participant: ParticipantType) =>
+          isUnknownContactDiscrete || Boolean(participant.titleNoDefault)
       ),
-    [participants]
+    [isUnknownContactDiscrete, participants]
   );
   const sortedParticipants = React.useMemo<Array<ParticipantType>>(
-    () => sortByTitle(knownParticipants),
+    () => sortByTitle(visibleParticipants),
-    [knownParticipants]
+    [visibleParticipants]
   );
 
   const renderParticipant = React.useCallback(
@@ -377,7 +381,9 @@ export function CallingAdhocCallInfo({
             {unknownParticipants.length > 0 && (
               <UnknownContacts
                 i18n={i18n}
-                isInAdditionToKnownContacts={Boolean(knownParticipants.length)}
+                isInAdditionToKnownContacts={Boolean(
+                  visibleParticipants.length
+                )}
                 participants={unknownParticipants}
                 showUnknownContactDialog={() =>
                   setIsUnknownContactDialogVisible(true)