Don't allow starting calls with deactivated user (#645)

webapp/i18n/en.json

@@ -86,6 +86,7 @@
   "Thxdph": "This call is at its maximum capacity of {count, plural, =1 {# participant} other {# participants}}.",
   "TyskrG": "Welcome to your Mattermost Enterprise trial! It expires on {trialExpirationDate}. You now have access to <recordingsDocsLink>Call recordings</recordingsDocsLink>,<rtcdDocsLink>RTCD services</rtcdDocsLink>, <guestAccountsLink>guest accounts</guestAccountsLink>, <autoComplianceReportsLink>automated compliance reports</autoComplianceReportsLink>, and <mobileSecureNotificationsLink>mobile secure-ID push notifications</mobileSecureNotificationsLink>, among many other features. View all features in our <documentationLink>documentation</documentationLink>.",
   "UcFeI7": "Show participants list",
+  "Ug/N7H": "Calls are not available in a DM with a deactivated user.",
   "UxatAw": "{count, plural, =1 {# participant} other {# participants}}",
   "Uys4Mj": "Close reactions",
   "W9355R": "Unmute",

webapp/src/components/channel_header_button/component.tsx

@@ -15,6 +15,7 @@ interface Props {
     isLimitRestricted: boolean,
     maxParticipants: number,
     isChannelArchived: boolean,
+    isDeactivatedDM: boolean,
 }
 
 const ChannelHeaderButton = ({
@@ -27,21 +28,23 @@ const ChannelHeaderButton = ({
     isLimitRestricted,
     maxParticipants,
     isChannelArchived,
+    isDeactivatedDM,
 }: Props) => {
     const {formatMessage} = useIntl();
 
     if (!show) {
         return null;
     }
 
-    const restricted = isLimitRestricted || isChannelArchived;
+    const restricted = isLimitRestricted || isChannelArchived || isDeactivatedDM;
     const withUpsellIcon = (isLimitRestricted && isCloudStarter && !inCall);
 
     const button = (
         <CallButton
             id='calls-join-button'
             className={'style--none call-button ' + (inCall || restricted ? 'disabled' : '')}
             restricted={restricted}
+            disabled={isChannelArchived || isDeactivatedDM}
             isCloudPaid={isCloudPaid}
         >
             <CompassIcon icon='phone-outline'/>
@@ -74,6 +77,24 @@ const ChannelHeaderButton = ({
         );
     }
 
+    if (isDeactivatedDM) {
+        return (
+            <OverlayTrigger
+                placement='bottom'
+                rootClose={true}
+                overlay={
+                    <Tooltip id='tooltip-limit-header'>
+                        {formatMessage({defaultMessage: 'Calls are not available in a DM with a deactivated user.'})}
+                    </Tooltip>
+                }
+            >
+                <Wrapper>
+                    {button}
+                </Wrapper>
+            </OverlayTrigger>
+        );
+    }
+
     if (withUpsellIcon) {
         return (
             <OverlayTrigger

webapp/src/components/channel_header_button/index.ts

@@ -1,6 +1,6 @@
 import {GlobalState} from '@mattermost/types/store';
 import {getCurrentChannel} from 'mattermost-redux/selectors/entities/channels';
-import {isCurrentUserSystemAdmin} from 'mattermost-redux/selectors/entities/users';
+import {getCurrentUserId, getUser, isCurrentUserSystemAdmin} from 'mattermost-redux/selectors/entities/users';
 import {connect} from 'react-redux';
 import {
     callsShowButton,
@@ -11,11 +11,19 @@ import {
     maxParticipants,
     profilesInCallInCurrentChannel,
 } from 'src/selectors';
+import {getUserIdFromDM, isDMChannel} from 'src/utils';
 
 import ChannelHeaderButton from './component';
 
 const mapStateToProps = (state: GlobalState) => {
     const channel = getCurrentChannel(state);
+
+    let isDeactivatedDM = false;
+    if (channel && isDMChannel(channel)) {
+        const otherUser = getUser(state, getUserIdFromDM(channel.name, getCurrentUserId(state)));
+        isDeactivatedDM = otherUser?.delete_at > 0;
+    }
+
     return {
         show: callsShowButton(state, channel?.id),
         inCall: Boolean(channelIDForCurrentCall(state) && channelIDForCurrentCall(state) === channel?.id),
@@ -26,6 +34,7 @@ const mapStateToProps = (state: GlobalState) => {
         isLimitRestricted: isLimitRestricted(state),
         maxParticipants: maxParticipants(state),
         isChannelArchived: channel?.delete_at > 0,
+        isDeactivatedDM,
     };
 };