MM-13953 Channel Info screen transition (#3812)

* MM-13953 Channel Info screen transition

* Fix unit test

app/components/no_results.js

@@ -12,7 +12,7 @@ export default class NoResults extends PureComponent {
     static propTypes = {
         description: PropTypes.string,
         iconName: PropTypes.string,
-        image: PropTypes.object,
+        image: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
         theme: PropTypes.object.isRequired,
         title: PropTypes.string.isRequired,
     };

app/screens/channel/channel_base.js

@@ -26,7 +26,7 @@ import EphemeralStore from 'app/store/ephemeral_store';
 import tracker from 'app/utils/time_tracker';
 import telemetry from 'app/telemetry';
 import {
-    goToScreen,
+    showModal,
     showModalOverCurrentContext,
 } from 'app/actions/navigation';
 
@@ -69,6 +69,10 @@ export default class ChannelBase extends PureComponent {
         this.postTextbox = React.createRef();
         this.keyboardTracker = React.createRef();
 
+        MaterialIcon.getImageSource('close', 20, props.theme.sidebarHeaderTextColor).then((source) => {
+            this.closeButton = source;
+        });
+
         setNavigatorStyles(props.componentId, props.theme);
 
         if (LocalConfig.EnableMobileClientUpgrade && !ClientUpgradeListener) {
@@ -198,11 +202,19 @@ export default class ChannelBase extends PureComponent {
         const {intl} = this.context;
         const screen = 'ChannelInfo';
         const title = intl.formatMessage({id: 'mobile.routes.channelInfo', defaultMessage: 'Info'});
+        const options = {
+            topBar: {
+                leftButtons: [{
+                    id: 'close-info',
+                    icon: this.closeButton,
+                }],
+            },
+        };
 
         Keyboard.dismiss();
 
         requestAnimationFrame(() => {
-            goToScreen(screen, title);
+            showModal(screen, title, null, options);
         });
     });
 

app/screens/channel/channel_base.test.js

@@ -12,6 +12,9 @@ import * as NavigationActions from 'app/actions/navigation';
 import ChannelBase from './channel_base';
 
 jest.mock('react-intl');
+jest.mock('react-native-vector-icons/MaterialIcons', () => ({
+    getImageSource: jest.fn().mockResolvedValue(null),
+}));
 
 describe('ChannelBase', () => {
     const channelBaseComponentId = 'component-0';

app/screens/channel_info/channel_info.js

@@ -9,6 +9,7 @@ import {
     ScrollView,
     View,
 } from 'react-native';
+import {Navigation} from 'react-native-navigation';
 
 import {General, Users} from 'mattermost-redux/constants';
 
@@ -17,7 +18,7 @@ import {preventDoubleTap} from 'app/utils/tap';
 import {alertErrorWithFallback} from 'app/utils/general';
 import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
 import {t} from 'app/utils/i18n';
-import {goToScreen, popTopScreen, showModalOverCurrentContext} from 'app/actions/navigation';
+import {dismissModal, goToScreen, popTopScreen, showModalOverCurrentContext} from 'app/actions/navigation';
 
 import pinIcon from 'assets/images/channel_info/pin.png';
 
@@ -102,10 +103,17 @@ export default class ChannelInfo extends PureComponent {
     }
 
     componentDidMount() {
+        this.navigationEventListener = Navigation.events().bindComponent(this);
         this.props.actions.getChannelStats(this.props.currentChannel.id);
         this.props.actions.getCustomEmojisInText(this.props.currentChannel.header);
     }
 
+    navigationButtonPressed({buttonId}) {
+        if (buttonId === 'close-info') {
+            dismissModal();
+        }
+    }
+
     componentDidUpdate(prevProps) {
         if (prevProps.theme !== this.props.theme) {
             setNavigatorStyles(prevProps.componentId, this.props.theme);

package-lock.json

@@ -5510,8 +5510,7 @@
     "intl": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/intl/-/intl-1.2.5.tgz",
-      "integrity": "sha1-giRKIZDE5Bn4Nx9ao02qNCDiq94=",
-      "dev": true
+      "integrity": "sha1-giRKIZDE5Bn4Nx9ao02qNCDiq94="
     },
     "intl-format-cache": {
       "version": "2.2.9",