[MM-69735] Improve DM call user experience

app/components/channel_actions/channel_actions.tsx

@@ -4,15 +4,15 @@
 import React, {useCallback} from 'react';
 import {StyleSheet, View} from 'react-native';
 
-import ChannelInfoStartButton from '@calls/components/channel_info_start';
+import ChannelInfoStartCallButton from '@calls/components/channel_info_start_call';
 import AddMembersBox from '@components/channel_actions/add_members_box';
 import CopyChannelLinkBox from '@components/channel_actions/copy_channel_link_box';
 import FavoriteBox from '@components/channel_actions/favorite_box';
 import MutedBox from '@components/channel_actions/mute_box';
 import SetHeaderBox from '@components/channel_actions/set_header_box';
 import {useServerUrl} from '@context/server';
 import {dismissBottomSheet} from '@screens/navigation';
-import {isTypeDMorGM} from '@utils/channel';
+import {isDMChannel, isTypeDMorGM} from '@utils/channel';
 
 type Props = {
     channelId: string;
@@ -55,7 +55,8 @@ const ChannelActions = ({
         }
     }, [inModal]);
 
-    const isDM = isTypeDMorGM(channelType);
+    const isDMOrGM = isTypeDMorGM(channelType);
+    const isDM = isDMChannel(channelType);
 
     return (
         <View style={styles.wrapper}>
@@ -71,7 +72,7 @@ const ChannelActions = ({
                 testID={testID}
             />
             <View style={styles.separator}/>
-            {isDM &&
+            {isDMOrGM &&
                 <SetHeaderBox
                     channelId={channelId}
                     inModal={inModal}
@@ -85,7 +86,7 @@ const ChannelActions = ({
                     testID={`${testID}.add_members.action`}
                 />
             }
-            {!isDM && !callsEnabled &&
+            {!isDMOrGM && !callsEnabled &&
                 <>
                     <View style={styles.separator}/>
                     <CopyChannelLinkBox
@@ -95,10 +96,10 @@ const ChannelActions = ({
                     />
                 </>
             }
-            {callsEnabled &&
+            {(!isDM && callsEnabled) &&
                 <>
                     <View style={styles.separator}/>
-                    <ChannelInfoStartButton
+                    <ChannelInfoStartCallButton
                         serverUrl={serverUrl}
                         channelId={channelId}
                         dismissChannelInfo={dismissChannelInfo}

app/components/navigation_button/index.tsx

@@ -5,17 +5,21 @@ import {useMemo} from 'react';
 import {Pressable, Text} from 'react-native';
 
 import CompassIcon, {type CompassIconName} from '@components/compass_icon';
+import Loading from '@components/loading';
 import {useTheme} from '@context/theme';
 import usePressableOpacityStyle from '@hooks/use_pressable_opacity';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
 
 export type NavigationButtonProps = {
+    id?: string;
+    accessibilityLabel?: string;
     borderless?: boolean;
     color?: string;
     disabled?: boolean;
     iconName?: CompassIconName;
     iconSize?: number;
+    isLoading?: boolean;
     text?: string;
     count?: number | string;
     onPress: () => void;
@@ -30,17 +34,21 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     enabled: {color: theme.sidebarHeaderTextColor},
     disabled: {color: theme.sidebarHeaderTextColor, opacity: 0.32},
     icon: {padding: 5},
+    loading: {padding: 5, alignItems: 'center', justifyContent: 'center'},
     title: typography('Body', 200),
     count: typography('Body', 200),
 }));
 
 function NavigationButton({
+    id,
+    accessibilityLabel,
     borderless = true,
     color,
     count,
     disabled,
     iconName,
     iconSize = 20,
+    isLoading = false,
     onPress,
     rippleRadius = 20,
     testID,
@@ -50,21 +58,34 @@ function NavigationButton({
     const styles = getStyleSheet(theme);
 
     const colorStyle = useMemo(() => ({color: disabled ? changeOpacity(color ?? theme.sidebarHeaderTextColor, 0.32) : (color ?? theme.sidebarHeaderTextColor)}), [color, disabled, theme.sidebarHeaderTextColor]);
+
+    // Reserve the icon's footprint so the header doesn't shift when swapping to the spinner.
+    const loadingStyle = useMemo(() => [styles.loading, {width: iconSize + 10, height: iconSize + 10}], [styles.loading, iconSize]);
     const ripple = useMemo(() => ({borderless, radius: rippleRadius}), [borderless, rippleRadius]);
     const pressableStyle = usePressableOpacityStyle(styles.container);
 
     return (
         <Pressable
+            id={id}
+            accessibilityLabel={accessibilityLabel}
             onPress={onPress}
-            disabled={disabled}
+            disabled={disabled || isLoading}
             hitSlop={hitSlop}
             testID={testID}
             android_ripple={ripple}
             style={pressableStyle}
         >
 
             {Boolean(text) && <Text style={[styles.title, colorStyle]}>{text}</Text>}
-            {Boolean(iconName) &&
+            {isLoading &&
+                <Loading
+                    containerStyle={loadingStyle}
+                    color={colorStyle.color}
+                    size='small'
+                    testID={testID ? `${testID}.loading` : undefined}
+                />
+            }
+            {!isLoading && Boolean(iconName) &&
                 <CompassIcon
                     name={iconName!}
                     size={iconSize}

app/components/navigation_header/header.test.tsx

@@ -1,13 +1,15 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {render, within} from '@testing-library/react-native';
+import {fireEvent, render, within} from '@testing-library/react-native';
 import React, {type ComponentProps} from 'react';
 
 import {Preferences} from '@constants';
 
 import Header from './header';
 
+import type {NavigationButtonProps} from '@components/navigation_button';
+
 describe('Header', () => {
     const getBaseProps = (): ComponentProps<typeof Header> => ({
         defaultHeight: 0,
@@ -17,10 +19,11 @@ describe('Header', () => {
         theme: Preferences.THEMES.denim,
     });
 
-    it('right buttons are rendered with count', () => {
+    it('should render right buttons with count', () => {
         const props = getBaseProps();
         props.rightButtons = [
             {
+                id: 'playbooks',
                 iconName: 'playlist-check',
                 count: 123,
                 onPress: jest.fn(),
@@ -34,6 +37,7 @@ describe('Header', () => {
 
         props.rightButtons = [
             {
+                id: 'playbooks',
                 iconName: 'playlist-check',
                 count: undefined,
                 onPress: jest.fn(),
@@ -47,5 +51,84 @@ describe('Header', () => {
         expect(button).not.toHaveTextContent('0');
         expect(button).not.toHaveTextContent('undefined');
     });
+
+    it('should show a spinner and ignore presses on right buttons while loading', () => {
+        const props = getBaseProps();
+        const onPress = jest.fn();
+        const callButton: NavigationButtonProps = {
+            id: 'calls',
+            accessibilityLabel: 'Start call',
+            iconName: 'phone',
+            isLoading: true,
+            onPress,
+            testID: 'test-button',
+        };
+        props.rightButtons = [callButton];
+        const {getByTestId, queryByTestId, rerender} = render(<Header {...props}/>);
+
+        const button = getByTestId('test-button');
+        expect(button.props.accessibilityLabel).toBe('Start call');
+        expect(getByTestId('test-button.loading')).toBeOnTheScreen();
+
+        fireEvent.press(button);
+        expect(onPress).not.toHaveBeenCalled();
+
+        props.rightButtons = [{...callButton, isLoading: false}];
+        rerender(<Header {...props}/>);
+
+        expect(queryByTestId('test-button.loading')).toBeNull();
+        fireEvent.press(getByTestId('test-button'));
+        expect(onPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not fire onPress on right buttons when disabled', () => {
+        const props = getBaseProps();
+        const onPress = jest.fn();
+        props.rightButtons = [
+            {
+                id: 'calls',
+                disabled: true,
+                iconName: 'phone',
+                onPress,
+                testID: 'test-button',
+            },
+        ];
+        const {getByTestId} = render(<Header {...props}/>);
+
+        fireEvent.press(getByTestId('test-button'));
+        expect(onPress).not.toHaveBeenCalled();
+    });
+
+    it('should keep the right button pressable when its icon changes', () => {
+        const props = getBaseProps();
+        const onPress = jest.fn();
+        const callButton: NavigationButtonProps = {
+            id: 'calls',
+            iconName: 'phone',
+            onPress,
+            testID: 'call-button',
+        };
+        props.rightButtons = [
+            callButton,
+            {
+                id: 'channel-quick-actions',
+                iconName: 'dots-horizontal',
+                onPress: jest.fn(),
+                testID: 'quick-actions-button',
+            },
+        ];
+        const {getByTestId, rerender} = render(<Header {...props}/>);
+
+        expect(getByTestId('call-button')).toBeOnTheScreen();
+        expect(getByTestId('quick-actions-button')).toBeOnTheScreen();
+
+        // A call starting swaps the icon; the button must stay usable so an in-flight press is not lost.
+        props.rightButtons = [{...callButton, iconName: 'phone-in-talk'}, props.rightButtons[1]];
+        rerender(<Header {...props}/>);
+
+        expect(getByTestId('quick-actions-button')).toBeOnTheScreen();
+        fireEvent.press(getByTestId('call-button'));
+        expect(onPress).toHaveBeenCalledTimes(1);
+    });
 });
 

app/components/navigation_header/header.tsx

@@ -246,9 +246,13 @@ const Header = ({
                 {Boolean(rightButtons?.length) &&
                 rightButtons?.map((r) => (
                     <NavigationButton
-                        key={r.iconName}
+                        id={r.id}
+                        key={r.id}
+                        accessibilityLabel={r.accessibilityLabel}
                         borderless={r.borderless}
+                        disabled={r.disabled}
                         iconName={r.iconName}
+                        isLoading={r.isLoading}
                         count={r.count}
                         onPress={r.onPress}
                         rippleRadius={r.rippleRadius}

app/constants/calls.ts

@@ -27,6 +27,10 @@ const CALL_QUALITY_RESET_MS = toMilliseconds({minutes: 1});
 const CAPTION_TIMEOUT = 5000;
 const RING_LENGTH = 30000;
 
+// How long the caller hears the outbound ringback tone before it auto-stops.
+// The same window the callee's phone rings for, so both ends give up together.
+const RINGBACK_TONE_TIMEOUT = RING_LENGTH;
+
 export enum Ringtone {
     Calm = 'Calm',
     Dynamic = 'Dynamic',
@@ -60,5 +64,6 @@ export default {
     JOB_TYPE_TRANSCRIBING,
     JOB_TYPE_CAPTIONING,
     RING_LENGTH,
+    RINGBACK_TONE_TIMEOUT,
     RINGTONE_DEFAULT,
 };

app/products/agents/screens/agent_chat/header.tsx

@@ -58,6 +58,7 @@ const AgentChatHeader = ({title, subtitle, showSubtitleCompanion, onHistoryPress
     }, [showSubtitleCompanion, theme.sidebarText]);
 
     const rightButtons = useMemo<NavigationButtonProps[]>(() => [{
+        id: 'history',
         iconName: 'clock-outline',
         onPress: onHistoryPress,
         testID: 'agent_chat.history_button',