Prevent deletion of active call links and style join button

ts/components/CallLinkDetails.stories.tsx

@@ -23,7 +23,9 @@ export default {
     i18n,
     callHistoryGroup: getFakeCallLinkHistoryGroup(),
     callLink: FAKE_CALL_LINK_WITH_ADMIN_KEY,
-    hasActiveCall: false,
+    isAnybodyInCall: false,
+    isInCall: false,
+    isInAnotherCall: false,
     onDeleteCallLink: action('onDeleteCallLink'),
     onOpenCallLinkAddNameModal: action('onOpenCallLinkAddNameModal'),
     onStartCallLinkLobby: action('onStartCallLinkLobby'),
@@ -36,10 +38,39 @@ export function Admin(args: CallLinkDetailsProps): JSX.Element {
   return <CallLinkDetails {...args} />;
 }
 
+export function AdminAndCallActive(args: CallLinkDetailsProps): JSX.Element {
+  return <CallLinkDetails {...args} isAnybodyInCall />;
+}
+
+export function AdminAndInCall(args: CallLinkDetailsProps): JSX.Element {
+  return <CallLinkDetails {...args} isAnybodyInCall isInCall />;
+}
+
 export function NonAdmin(args: CallLinkDetailsProps): JSX.Element {
   return <CallLinkDetails {...args} callLink={FAKE_CALL_LINK} />;
 }
 
-export function InAnotherCall(args: CallLinkDetailsProps): JSX.Element {
-  return <CallLinkDetails {...args} callLink={FAKE_CALL_LINK} hasActiveCall />;
+export function NonAdminAndCallActive(args: CallLinkDetailsProps): JSX.Element {
+  return (
+    <CallLinkDetails {...args} callLink={FAKE_CALL_LINK} isAnybodyInCall />
+  );
+}
+
+export function InAnotherCall(args: CallLinkDetailsProps): JSX.Element {
+  return (
+    <CallLinkDetails {...args} callLink={FAKE_CALL_LINK} isInAnotherCall />
+  );
+}
+
+export function InAnotherCallAndCallActive(
+  args: CallLinkDetailsProps
+): JSX.Element {
+  return (
+    <CallLinkDetails
+      {...args}
+      callLink={FAKE_CALL_LINK}
+      isAnybodyInCall
+      isInAnotherCall
+    />
+  );
 }

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);
             }}

ts/components/CallLinkRestrictionsSelect.tsx

@@ -9,6 +9,7 @@ import type { LocalizerType } from '../types/I18N';
 import { Select } from './Select';
 
 export type CallLinkRestrictionsSelectProps = Readonly<{
+  disabled?: boolean;
   i18n: LocalizerType;
   id?: string;
   value: CallLinkRestrictions;
@@ -16,6 +17,7 @@ export type CallLinkRestrictionsSelectProps = Readonly<{
 }>;
 
 export function CallLinkRestrictionsSelect({
+  disabled,
   i18n,
   id,
   value,
@@ -23,6 +25,7 @@ export function CallLinkRestrictionsSelect({
 }: CallLinkRestrictionsSelectProps): JSX.Element {
   return (
     <Select
+      disabled={disabled}
       id={id}
       value={String(value)}
       moduleClassName="CallLinkRestrictionsSelect"