Block users from joining call links

ts/components/CallManager.stories.tsx

@@ -100,6 +100,7 @@ const createProps = (storyProps: Partial<PropsType> = {}): PropsType => ({
   openSystemPreferencesAction: action('open-system-preferences-action'),
   playRingtone: action('play-ringtone'),
   removeClient: action('remove-client'),
+  blockClient: action('block-client'),
   renderDeviceSelection: () => <div />,
   renderEmojiPicker: () => <>EmojiPicker</>,
   renderReactionPicker: () => <div />,

ts/components/CallManager.tsx

@@ -117,6 +117,7 @@ export type PropsType = {
   openSystemPreferencesAction: () => unknown;
   playRingtone: () => unknown;
   removeClient: (payload: RemoveClientType) => void;
+  blockClient: (payload: RemoveClientType) => void;
   sendGroupCallRaiseHand: (payload: SendGroupCallRaiseHandType) => void;
   sendGroupCallReaction: (payload: SendGroupCallReactionType) => void;
   setGroupCallVideoRequest: (_: SetGroupCallVideoRequestType) => void;
@@ -163,6 +164,7 @@ function ActiveCallManager({
   activeCall,
   approveUser,
   availableCameras,
+  blockClient,
   callLink,
   cancelCall,
   changeCallView,
@@ -397,6 +399,7 @@ function ActiveCallManager({
               onCopyCallLink={onCopyCallLink}
               onShareCallLinkViaSignal={handleShareCallLinkViaSignal}
               removeClient={removeClient}
+              blockClient={blockClient}
               showContactModal={showContactModal}
             />
           ) : (
@@ -494,6 +497,7 @@ function ActiveCallManager({
             onCopyCallLink={onCopyCallLink}
             onShareCallLinkViaSignal={handleShareCallLinkViaSignal}
             removeClient={removeClient}
+            blockClient={blockClient}
             showContactModal={showContactModal}
           />
         ) : (
@@ -515,6 +519,7 @@ export function CallManager({
   activeCall,
   approveUser,
   availableCameras,
+  blockClient,
   bounceAppIconStart,
   bounceAppIconStop,
   callLink,
@@ -613,6 +618,7 @@ export function CallManager({
           activeCall={activeCall}
           availableCameras={availableCameras}
           approveUser={approveUser}
+          blockClient={blockClient}
           callLink={callLink}
           cancelCall={cancelCall}
           changeCallView={changeCallView}

ts/components/CallingAdhocCallInfo.stories.tsx

@@ -68,6 +68,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   onCopyCallLink: action('on-copy-call-link'),
   onShareCallLinkViaSignal: action('on-share-call-link-via-signal'),
   removeClient: overrideProps.removeClient || action('remove-client'),
+  blockClient: overrideProps.blockClient || action('block-client'),
   showContactModal: action('show-contact-modal'),
 });
 
@@ -140,3 +141,35 @@ export function Overflow(): JSX.Element {
   });
   return <CallingAdhocCallInfo {...props} />;
 }
+
+export function AsAdmin(): JSX.Element {
+  const props = createProps({
+    participants: [
+      createParticipant({
+        title: 'Son Goku',
+      }),
+      createParticipant({
+        hasRemoteAudio: true,
+        hasRemoteVideo: true,
+        presenting: true,
+        name: 'Rage Trunks',
+        title: 'Rage Trunks',
+      }),
+      createParticipant({
+        hasRemoteAudio: true,
+        title: 'Prince Vegeta',
+      }),
+      createParticipant({
+        hasRemoteAudio: true,
+        hasRemoteVideo: true,
+        name: 'Goku',
+        title: 'Goku',
+      }),
+      createParticipant({
+        title: 'Someone With A Really Long Name',
+      }),
+    ],
+    isCallLinkAdmin: true,
+  });
+  return <CallingAdhocCallInfo {...props} />;
+}

ts/components/CallingAdhocCallInfo.tsx

@@ -20,6 +20,7 @@ import { AVATAR_COLOR_COUNT, AvatarColors } from '../types/Colors';
 import { Button } from './Button';
 import { Modal } from './Modal';
 import { Theme } from '../util/theme';
+import { ConfirmationDialog } from './ConfirmationDialog';
 
 const MAX_UNKNOWN_AVATARS_COUNT = 3;
 
@@ -40,7 +41,8 @@ export type PropsType = {
   readonly onClose: () => void;
   readonly onCopyCallLink: () => void;
   readonly onShareCallLinkViaSignal: () => void;
-  readonly removeClient: ((payload: RemoveClientType) => void) | null;
+  readonly removeClient: (payload: RemoveClientType) => void;
+  readonly blockClient: (payload: RemoveClientType) => void;
   readonly showContactModal: (
     contactId: string,
     conversationId?: string
@@ -145,6 +147,7 @@ export function CallingAdhocCallInfo({
   isCallLinkAdmin,
   ourServiceId,
   participants,
+  blockClient,
   onClose,
   onCopyCallLink,
   onShareCallLinkViaSignal,
@@ -153,6 +156,11 @@ export function CallingAdhocCallInfo({
 }: PropsType): JSX.Element | null {
   const [isUnknownContactDialogVisible, setIsUnknownContactDialogVisible] =
     React.useState(false);
+  const [removeClientDialogState, setRemoveClientDialogState] = React.useState<{
+    demuxId: number;
+    name: string;
+  } | null>(null);
+
   const hideUnknownContactDialog = React.useCallback(
     () => setIsUnknownContactDialogVisible(false),
     [setIsUnknownContactDialogVisible]
@@ -256,7 +264,6 @@ export function CallingAdhocCallInfo({
           )}
         />
         {isCallLinkAdmin &&
-        removeClient &&
         participant.demuxId &&
         !(ourServiceId && participant.serviceId === ourServiceId) ? (
           <button
@@ -273,7 +280,10 @@ export function CallingAdhocCallInfo({
 
               event.stopPropagation();
               event.preventDefault();
-              removeClient({ demuxId: participant.demuxId });
+              setRemoveClientDialogState({
+                demuxId: participant.demuxId,
+                name: participant.title,
+              });
             }}
             type="button"
           />
@@ -285,13 +295,45 @@ export function CallingAdhocCallInfo({
       isCallLinkAdmin,
       onClose,
       ourServiceId,
-      removeClient,
+      setRemoveClientDialogState,
       showContactModal,
     ]
   );
 
   return (
     <>
+      {removeClientDialogState != null ? (
+        <ConfirmationDialog
+          dialogName="CallingAdhocCallInfo.removeClientDialog"
+          moduleClassName="CallingAdhocCallInfo__RemoveClientDialog"
+          actions={[
+            {
+              action: () =>
+                blockClient({ demuxId: removeClientDialogState.demuxId }),
+              style: 'negative',
+              text: i18n(
+                'icu:CallingAdhocCallInfo__RemoveClientDialogButton--block'
+              ),
+            },
+            {
+              action: () =>
+                removeClient({ demuxId: removeClientDialogState.demuxId }),
+              style: 'negative',
+              text: i18n(
+                'icu:CallingAdhocCallInfo__RemoveClientDialogButton--remove'
+              ),
+            },
+          ]}
+          cancelText={i18n('icu:cancel')}
+          i18n={i18n}
+          theme={Theme.Dark}
+          onClose={() => setRemoveClientDialogState(null)}
+        >
+          {i18n('icu:CallingAdhocCallInfo__RemoveClientDialogBody', {
+            name: removeClientDialogState.name,
+          })}
+        </ConfirmationDialog>
+      ) : null}
       {isUnknownContactDialogVisible ? (
         <Modal
           modalName="CallingAdhocCallInfo.UnknownContactInfo"