From 3aa54a3070eb85529bf818bf7507893fba5cdb41 Mon Sep 17 00:00:00 2001
From: automated-signal <37887102+automated-signal@users.noreply.github.com>
Date: Fri, 18 Oct 2024 11:24:53 -0500
Subject: [PATCH] Fix spacing of your own icons in call link participant list

Co-authored-by: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>
---
 .../CallingAdhocCallInfo.stories.tsx          | 21 ++++++--
 ts/components/CallingAdhocCallInfo.tsx        | 48 ++++++++++---------
 2 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/ts/components/CallingAdhocCallInfo.stories.tsx b/ts/components/CallingAdhocCallInfo.stories.tsx
index 38a58beb8e77..48c0b8c59d74 100644
--- a/ts/components/CallingAdhocCallInfo.stories.tsx
+++ b/ts/components/CallingAdhocCallInfo.stories.tsx
@@ -11,7 +11,7 @@ import { CallingAdhocCallInfo } from './CallingAdhocCallInfo';
 import { AvatarColors } from '../types/Colors';
 import type { GroupCallRemoteParticipantType } from '../types/Calling';
 import { generateAci } from '../types/ServiceId';
-import { getDefaultConversationWithServiceId } from '../test-both/helpers/getDefaultConversation';
+import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
 import type { CallLinkType } from '../types/CallLink';
@@ -19,11 +19,15 @@ import { CallLinkRestrictions } from '../types/CallLink';
 
 const i18n = setupI18n('en', enMessages);
 
+const OUR_ACI = generateAci();
+
 function createParticipant(
   participantProps: Partial<GroupCallRemoteParticipantType>
 ): GroupCallRemoteParticipantType {
+  const aci = participantProps.aci ?? generateAci();
+
   return {
-    aci: generateAci(),
+    aci,
     demuxId: 2,
     hasRemoteAudio: Boolean(participantProps.hasRemoteAudio),
     hasRemoteVideo: Boolean(participantProps.hasRemoteVideo),
@@ -32,13 +36,14 @@ function createParticipant(
     presenting: Boolean(participantProps.presenting),
     sharingScreen: Boolean(participantProps.sharingScreen),
     videoAspectRatio: 1.3,
-    ...getDefaultConversationWithServiceId({
+    ...getDefaultConversation({
       avatarUrl: participantProps.avatarUrl,
       color: sample(AvatarColors),
       isBlocked: Boolean(participantProps.isBlocked),
       name: participantProps.name,
       profileName: participantProps.title,
       title: String(participantProps.title),
+      serviceId: aci,
     }),
   };
 }
@@ -64,7 +69,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   i18n,
   isCallLinkAdmin: overrideProps.isCallLinkAdmin || false,
   isUnknownContactDiscrete: overrideProps.isUnknownContactDiscrete || false,
-  ourServiceId: generateAci(),
+  ourServiceId: OUR_ACI,
   participants: overrideProps.participants || [],
   onClose: action('on-close'),
   onCopyCallLink: action('on-copy-call-link'),
@@ -130,6 +135,10 @@ export function ManyParticipants(): JSX.Element {
       createParticipant({
         title: 'Someone With A Really Long Name',
       }),
+      createParticipant({
+        title: 'My Name',
+        aci: OUR_ACI,
+      }),
     ],
   });
   return <CallingAdhocCallInfo {...props} />;
@@ -170,6 +179,10 @@ export function AsAdmin(): JSX.Element {
       createParticipant({
         title: 'Someone With A Really Long Name',
       }),
+      createParticipant({
+        title: 'My Name',
+        aci: OUR_ACI,
+      }),
     ],
     isCallLinkAdmin: true,
   });
diff --git a/ts/components/CallingAdhocCallInfo.tsx b/ts/components/CallingAdhocCallInfo.tsx
index a8dda16c834f..6db1cc9cfd9b 100644
--- a/ts/components/CallingAdhocCallInfo.tsx
+++ b/ts/components/CallingAdhocCallInfo.tsx
@@ -268,30 +268,32 @@ export function CallingAdhocCallInfo({
           )}
         />
         {isCallLinkAdmin &&
-        participant.demuxId &&
-        !(ourServiceId && participant.serviceId === ourServiceId) ? (
-          <button
-            aria-label={i18n('icu:CallingAdhocCallInfo__RemoveClient')}
-            className={classNames(
-              'CallingAdhocCallInfo__RemoveClient',
-              'module-calling-participants-list__status-icon',
-              'module-calling-participants-list__remove'
-            )}
-            onClick={event => {
-              if (!participant.demuxId) {
-                return;
-              }
+          (participant.demuxId &&
+          !(ourServiceId && participant.serviceId === ourServiceId) ? (
+            <button
+              aria-label={i18n('icu:CallingAdhocCallInfo__RemoveClient')}
+              className={classNames(
+                'CallingAdhocCallInfo__RemoveClient',
+                'module-calling-participants-list__status-icon',
+                'module-calling-participants-list__remove'
+              )}
+              onClick={event => {
+                if (!participant.demuxId) {
+                  return;
+                }
 
-              event.stopPropagation();
-              event.preventDefault();
-              setRemoveClientDialogState({
-                demuxId: participant.demuxId,
-                name: participant.title,
-              });
-            }}
-            type="button"
-          />
-        ) : null}
+                event.stopPropagation();
+                event.preventDefault();
+                setRemoveClientDialogState({
+                  demuxId: participant.demuxId,
+                  name: participant.title,
+                });
+              }}
+              type="button"
+            />
+          ) : (
+            <span className="module-calling-participants-list__status-icon" />
+          ))}
       </button>
     ),
     [