[MM-12526] removed from channel alert (#4633)

* GH-13222: Shows an alert when you are removed from the channel that you are currently viewing

* GH-13222: Removed channel alert improved text

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>

app/actions/websocket/users.ts

@@ -152,6 +152,7 @@ export function handleUserRemovedEvent(msg: WebSocketMessage) {
 
             dispatch(batchActions(actions, 'BATCH_WS_USER_REMOVED'));
             if (redirectToDefaultChannel) {
+                EventEmitter.emit(General.REMOVED_FROM_CHANNEL, channel.display_name);
                 EventEmitter.emit(General.SWITCH_TO_DEFAULT_CHANNEL, currentTeamId);
             }
         } catch {

app/mm-redux/constants/general.ts

@@ -44,6 +44,7 @@ export default {
     RESTRICT_DIRECT_MESSAGE_ANY: 'any',
     RESTRICT_DIRECT_MESSAGE_TEAM: 'team',
     SWITCH_TO_DEFAULT_CHANNEL: 'switch_to_default_channel',
+    REMOVED_FROM_CHANNEL: 'removed_from_channel',
     DEFAULT_CHANNEL: 'town-square',
     DM_CHANNEL: 'D',
     OPEN_CHANNEL: 'O',

app/screens/channel/channel_base.js

@@ -4,8 +4,9 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {intlShape} from 'react-intl';
-import {Animated, Keyboard, StyleSheet} from 'react-native';
+import {Alert, Animated, Keyboard, StyleSheet} from 'react-native';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
+import {General} from '@mm-redux/constants';
 
 import {showModal, showModalOverCurrentContext} from '@actions/navigation';
 import LocalConfig from '@assets/config';
@@ -81,6 +82,7 @@ export default class ChannelBase extends PureComponent {
 
         EventEmitter.on('leave_team', this.handleLeaveTeam);
         EventEmitter.on(TYPING_VISIBLE, this.runTypingAnimations);
+        EventEmitter.on(General.REMOVED_FROM_CHANNEL, this.handleRemovedFromChannel);
 
         if (currentTeamId) {
             this.loadChannels(currentTeamId);
@@ -151,6 +153,7 @@ export default class ChannelBase extends PureComponent {
     componentWillUnmount() {
         EventEmitter.off('leave_team', this.handleLeaveTeam);
         EventEmitter.off(TYPING_VISIBLE, this.runTypingAnimations);
+        EventEmitter.off(General.REMOVED_FROM_CHANNEL, this.handleRemovedFromChannel);
     }
 
     registerTypingAnimation = (animation) => {
@@ -194,6 +197,21 @@ export default class ChannelBase extends PureComponent {
         this.props.actions.selectDefaultTeam();
     };
 
+    handleRemovedFromChannel = (channelName) => {
+        const {formatMessage} = this.context.intl;
+
+        Alert.alert(
+            formatMessage({
+                id: 'mobile.user_removed.title',
+                defaultMessage: 'Removed from {channelName}',
+            }, {channelName}),
+            formatMessage({
+                id: 'mobile.user_removed.message',
+                defaultMessage: 'You were removed from the channel.',
+            }),
+        );
+    };
+
     loadChannels = (teamId) => {
         const {loadChannelsForTeam, selectInitialChannel} = this.props.actions;
         if (EphemeralStore.getStartFromNotification()) {

app/screens/channel/channel_base.test.js

@@ -2,7 +2,10 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
+import {Alert} from 'react-native';
 import {shallow} from 'enzyme';
+import EventEmitter from '@mm-redux/utils/event_emitter';
+import {General} from '@mm-redux/constants';
 
 import Preferences from '@mm-redux/constants/preferences';
 
@@ -95,4 +98,15 @@ describe('ChannelBase', () => {
         removeAnimation();
         expect(instance.typingAnimations).toStrictEqual([]);
     });
+
+    test('should display an alert when the user is removed from the current channel', () => {
+        const alert = jest.spyOn(Alert, 'alert');
+        shallow(
+            <ChannelBase {...baseProps}/>,
+            {context: {intl: {formatMessage: jest.fn()}}},
+        );
+
+        EventEmitter.emit(General.REMOVED_FROM_CHANNEL);
+        expect(alert).toHaveBeenCalled();
+    });
 });

assets/base/i18n/en.json

@@ -506,6 +506,8 @@
   "mobile.unsupported_server.ok": "OK",
   "mobile.unsupported_server.title": "Unsupported server version",
   "mobile.user_list.deactivated": "Deactivated",
+  "mobile.user_removed.message": "You were removed from the channel.",
+  "mobile.user_removed.title": "Removed from {channelName}",
   "mobile.user.settings.notifications.email.fifteenMinutes": "Every 15 minutes",
   "mobile.video_playback.failed_description": "An error occurred while trying to play the video.\n",
   "mobile.video_playback.failed_title": "Video playback failed",