[MM-402] Remove react-markdown package and use functions exposed by m…

…attermost webapp (#491)

* [MM-402] Remove react-markdown package and use functions exposed by mattermost webapp

* [MM-402] Update activityFunc function type

* [MM-402] Fix type error

* [MM-402] Remove as to assign type and add if condition

webapp/package.json

@@ -26,7 +26,6 @@
         "react-bootstrap": "1.3.0",
         "react-custom-scrollbars": "4.2.1",
         "react-dom": "16.13.1",
-        "react-markdown": "^4.3.1",
         "react-redux": "7.2.1",
         "redux": "4.0.5",
         "reselect": "4.1.6"

webapp/src/components/link_tooltip/index.tsx

@@ -1,5 +1,4 @@
 import React, {useEffect, useState} from 'react';
-import ReactMarkdown from 'react-markdown';
 import {useDispatch, useSelector} from 'react-redux';
 
 import {logError} from 'mattermost-redux/actions/errors';
@@ -122,6 +121,7 @@ const LinkTooltip = ({href, show}: Props) => {
     };
 
     const date = new Date(data.created_at).toDateString();
+    const {formatText, messageHtmlToComponent} = window.PostUtils;
 
     return (
         <div className='gitlab-tooltip'>
@@ -148,11 +148,7 @@ const LinkTooltip = ({href, show}: Props) => {
                             <span className='mr-number'>{`#${data.iid}`}</span>
                         </a>
                         <div className='markdown-text mt-1 mb-1'>
-                            <ReactMarkdown
-                                source={data.description}
-                                disallowedTypes={['heading']}
-                                linkTarget='_blank'
-                            />
+                            {messageHtmlToComponent(formatText(data.description), false)}
                         </div>
 
                         {data.type === LINK_TYPES.MERGE_REQUESTS && (

webapp/src/hooks/index.ts

@@ -7,8 +7,7 @@ import {isDesktopApp} from 'src/utils/user_agent';
 import {connectUsingBrowserMessage} from 'src/constants';
 
 import {sendEphemeralPost} from '../actions';
-
-type ContextArgs = {channel_id: string};
+import {ContextArgs} from '../types/mattermost-webapp';
 
 const connectCommand = '/gitlab connect';
 

webapp/src/index.js → webapp/src/index.ts

@@ -3,6 +3,10 @@
 
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 
+import {GlobalState} from 'mattermost-redux/types/store';
+
+import {Store, Action} from 'redux';
+
 import SidebarHeader from './components/sidebar_header';
 import TeamSidebar from './components/team_sidebar';
 import RHSSidebar from './components/rhs_sidebar';
@@ -24,19 +28,21 @@ import Client from './client';
 import {getPluginServerRoute} from './selectors';
 import Hooks from './hooks';
 
-let activityFunc;
+import {FormatTextOptions, MessageHtmlToComponentOptions, PluginRegistry} from './types/mattermost-webapp';
+
+let activityFunc: (() => void) | undefined;
 let lastActivityTime = Number.MAX_SAFE_INTEGER;
 const activityTimeout = 60 * 60 * 1000; // 1 hour
 const {id} = manifest;
 
 class PluginClass {
-    async initialize(registry, store) {
+    async initialize(registry: PluginRegistry, store: Store<GlobalState, Action<any>>) {
         registry.registerReducer(Reducer);
 
         // This needs to be called before any API calls below
         Client.setServerRoute(getPluginServerRoute(store.getState()));
 
-        await getConnected(true)(store.dispatch, store.getState);
+        await getConnected(true)(store.dispatch);
 
         registry.registerLeftSidebarHeaderComponent(SidebarHeader);
         registry.registerBottomTeamSidebarComponent(TeamSidebar);
@@ -91,8 +97,20 @@ class PluginClass {
     }
 
     deinitialize() {
-        document.removeEventListener('click', activityFunc);
+        if (activityFunc) {
+            document.removeEventListener('click', activityFunc);
+        }
+    }
+}
+
+declare global {
+    interface Window {
+        registerPlugin(pluginId: string, plugin: PluginClass): void
+        PostUtils: {
+            formatText(text: string, options?: FormatTextOptions): string,
+            messageHtmlToComponent(html: string, isRHS: boolean, option?: MessageHtmlToComponentOptions): React.ReactNode,
+        }
     }
 }
 
-global.window.registerPlugin(id, new PluginClass());
+window.registerPlugin(manifest.id, new PluginClass());

webapp/src/types/mattermost-webapp/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export type ContextArgs = {channel_id: string};
+
+type FormatTextOptions = {
+    atMentions?: boolean;
+    markdown?: boolean;
+}
+
+type MessageHtmlToComponentOptions = {
+    mentionHighlight: boolean;
+}
+
+export interface PluginRegistry {
+    registerReducer(reducer)
+    registerPostTypeComponent(typeName: string, component: React.ElementType)
+    registerRightHandSidebarComponent(component: React.ReactNode, title: string | JSX.Element)
+    registerSlashCommandWillBePostedHook(hook: (rawMessage: string, contextArgs: ContextArgs) => Promise<{}>)
+    registerWebSocketEventHandler(event: string, handler: (msg: any) => void)
+    registerAppBarComponent(iconUrl: string, action: () => void, tooltipText: string)
+    registerLeftSidebarHeaderComponent(component: React.ReactNode)
+    registerBottomTeamSidebarComponent(component: React.ReactNode)
+    registerPopoverUserAttributesComponent(component: React.ReactNode)
+    registerLinkTooltipComponent(component: React.ReactNode)
+    registerReconnectHandler(handler: any)
+
+    // Add more if needed from https://developers.mattermost.com/extend/plugins/webapp/reference
+}

webapp/webpack.config.js

@@ -2,7 +2,7 @@ var path = require('path');
 
 module.exports = {
     entry: [
-        './src/index.js',
+        './src/index.ts',
     ],
     resolve: {
         modules: [