Prevent deletion of active call links and style join button

ts/components/CallLinkDetails.tsx

@@ -1,6 +1,7 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 import React, { useState } from 'react';
+import classNames from 'classnames';
 import type { CallHistoryGroup } from '../types/CallDisposition';
 import type { LocalizerType } from '../types/I18N';
 import { CallHistoryGroupPanelSection } from './conversation/conversation-details/CallHistoryGroupPanelSection';
@@ -21,6 +22,8 @@ import { isCallLinkAdmin } from '../types/CallLink';
 import { CallLinkRestrictionsSelect } from './CallLinkRestrictionsSelect';
 import { ConfirmationDialog } from './ConfirmationDialog';
 import { InAnotherCallTooltip } from './conversation/InAnotherCallTooltip';
+import { offsetDistanceModifier } from '../util/popperUtil';
+import { Tooltip, TooltipPlacement } from './Tooltip';
 
 function toUrlWithoutProtocol(url: URL): string {
   return `${url.hostname}${url.pathname}${url.search}${url.hash}`;
@@ -29,7 +32,9 @@ function toUrlWithoutProtocol(url: URL): string {
 export type CallLinkDetailsProps = Readonly<{
   callHistoryGroup: CallHistoryGroup;
   callLink: CallLinkType;
-  hasActiveCall: boolean;
+  isAnybodyInCall: boolean;
+  isInCall: boolean;
+  isInAnotherCall: boolean;
   i18n: LocalizerType;
   onDeleteCallLink: () => void;
   onOpenCallLinkAddNameModal: () => void;
@@ -42,7 +47,9 @@ export function CallLinkDetails({
   callHistoryGroup,
   callLink,
   i18n,
-  hasActiveCall,
+  isAnybodyInCall,
+  isInCall,
+  isInAnotherCall,
   onDeleteCallLink,
   onOpenCallLinkAddNameModal,
   onStartCallLinkLobby,
@@ -56,15 +63,32 @@ export function CallLinkDetails({
   });
   const joinButton = (
     <Button
-      className="CallLinkDetails__HeaderButton"
-      variant={ButtonVariant.SecondaryAffirmative}
-      discouraged={hasActiveCall}
+      className={classNames({
+        CallLinkDetails__HeaderButton: true,
+        'CallLinkDetails__HeaderButton--active-call': isAnybodyInCall,
+      })}
+      variant={
+        isAnybodyInCall
+          ? ButtonVariant.Calling
+          : ButtonVariant.SecondaryAffirmative
+      }
+      discouraged={isInAnotherCall}
       size={ButtonSize.Small}
       onClick={onStartCallLinkLobby}
     >
-      {i18n('icu:CallLinkDetails__Join')}
+      {isInCall
+        ? i18n('icu:CallsNewCallButton--return')
+        : i18n('icu:CallLinkDetails__Join')}
     </Button>
   );
+  const callLinkRestrictionsSelect = (
+    <CallLinkRestrictionsSelect
+      disabled={isAnybodyInCall}
+      i18n={i18n}
+      value={callLink.restrictions}
+      onChange={onUpdateCallLinkRestrictions}
+    />
+  );
 
   return (
     <div className="CallLinkDetails__Container">
@@ -92,7 +116,7 @@ export function CallLinkDetails({
           </p>
         </div>
         <div className="CallLinkDetails__HeaderActions">
-          {hasActiveCall ? (
+          {isInAnotherCall ? (
             <InAnotherCallTooltip i18n={i18n}>
               {joinButton}
             </InAnotherCallTooltip>
@@ -130,11 +154,20 @@ export function CallLinkDetails({
             }
             label={i18n('icu:CallLinkDetails__ApproveAllMembersLabel')}
             right={
-              <CallLinkRestrictionsSelect
-                i18n={i18n}
-                value={callLink.restrictions}
-                onChange={onUpdateCallLinkRestrictions}
-              />
+              isAnybodyInCall ? (
+                <Tooltip
+                  className="CallLinkDetails__ApproveAllMembersDisabledTooltip"
+                  content={i18n(
+                    'icu:CallLinkDetails__SettingTooltip--disabled-for-active-call'
+                  )}
+                  direction={TooltipPlacement.Top}
+                  popperModifiers={[offsetDistanceModifier(5)]}
+                >
+                  {callLinkRestrictionsSelect}
+                </Tooltip>
+              ) : (
+                callLinkRestrictionsSelect
+              )
             }
           />
         </PanelSection>
@@ -166,14 +199,34 @@ export function CallLinkDetails({
       {isCallLinkAdmin(callLink) && (
         <PanelSection>
           <PanelRow
-            className="CallLinkDetails__DeleteLink"
+            className={classNames({
+              CallLinkDetails__DeleteLink: true,
+              'CallLinkDetails__DeleteLink--disabled-for-active-call':
+                isAnybodyInCall,
+            })}
+            disabled={isAnybodyInCall}
             icon={
               <ConversationDetailsIcon
                 ariaLabel={i18n('icu:CallLinkDetails__DeleteLink')}
                 icon={IconType.trash}
               />
             }
-            label={i18n('icu:CallLinkDetails__DeleteLink')}
+            label={
+              isAnybodyInCall ? (
+                <Tooltip
+                  className="CallLinkDetails__DeleteLinkTooltip"
+                  content={i18n(
+                    'icu:CallLinkDetails__DeleteLinkTooltip--disabled-for-active-call'
+                  )}
+                  direction={TooltipPlacement.Top}
+                  popperModifiers={[offsetDistanceModifier(5)]}
+                >
+                  {i18n('icu:CallLinkDetails__DeleteLink')}
+                </Tooltip>
+              ) : (
+                i18n('icu:CallLinkDetails__DeleteLink')
+              )
+            }
             onClick={() => {
               setIsDeleteCallLinkModalOpen(true);
             }}