Remove depricated registerPostDropdownMenuComponent (#599)

* Remove depricated registerPostDropdownMenuComponent

* Updated the component

* update filter function

* removed unused comments

* use store to dispatch action

* removed unused dependency

Author: abbas-dependable-naqvi

webapp/src/components/post_options/attach_comment_to_issue.tsx

@@ -1,60 +1,16 @@
 // Copyright (c) 2019-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {MouseEvent} from 'react';
-import PropTypes from 'prop-types';
-import {useDispatch, useSelector} from 'react-redux';
-import {getPost} from 'mattermost-redux/selectors/entities/posts';
-import {isSystemMessage} from 'mattermost-redux/utils/post_utils';
+import React from 'react';
 
 import GitLabIcon from 'src/images/icons/gitlab';
-import {openAttachCommentToIssueModal} from 'src/actions';
-import {getConnected} from 'src/selectors';
-import {GlobalState} from 'src/types/store';
 
-interface PropTypes {
-    postId: string;
-}
-
-const AttachCommentToIssuePostMenuAction = ({postId}: PropTypes) => {
-    const {show} = useSelector((state: GlobalState) => {
-        const post = getPost(state, postId);
-        const isPostSystemMessage = Boolean(!post || isSystemMessage(post));
-
-        return {
-            show: getConnected(state) && !isPostSystemMessage,
-        };
-    });
-
-    const dispatch = useDispatch();
-
-    const handleClick = (e: MouseEvent<HTMLButtonElement> | Event) => {
-        e.preventDefault();
-        dispatch(openAttachCommentToIssueModal(postId));
-    };
-
-    if (!show) {
-        return null;
-    }
-
-    const content = (
-        <button
-            className='style--none'
-            role='presentation'
-            onClick={handleClick}
-        >
+const AttachCommentToIssuePostMenuAction = () => {
+    return (
+        <>
             <GitLabIcon type='menu'/>
             {'Attach to GitLab Issue'}
-        </button>
-    );
-
-    return (
-        <li
-            className='MenuItem'
-            role='menuitem'
-        >
-            {content}
-        </li>
+        </>
     );
 };
 

webapp/src/components/post_options/create_issue.tsx

@@ -1,60 +1,15 @@
 // Copyright (c) 2019-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {MouseEvent} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
-import {getPost} from 'mattermost-redux/selectors/entities/posts';
-import {isSystemMessage} from 'mattermost-redux/utils/post_utils';
+import React from 'react';
 
 import GitLabIcon from 'src/images/icons/gitlab';
-import {openCreateIssueModal} from 'src/actions';
-import {getConnected} from 'src/selectors';
-import {GlobalState} from 'src/types/store';
 
-type PropTypes = {
-    postId: string;
-}
-
-const CreateIssuePostMenuAction = ({postId}: PropTypes) => {
-    const {show} = useSelector((state: GlobalState) => {
-        const post = getPost(state, postId);
-        const isPostSystemMessage = Boolean(!post || isSystemMessage(post));
-
-        return {
-            show: getConnected(state) && !isPostSystemMessage,
-        };
-    });
-
-    const dispatch = useDispatch();
-
-    const handleClick = (e: MouseEvent<HTMLButtonElement> | Event) => {
-        e.preventDefault();
-        dispatch(openCreateIssueModal(postId));
-    };
-
-    if (!show) {
-        return null;
-    }
-
-    const content = (
-        <button
-            className='style--none'
-            role='presentation'
-            onClick={handleClick}
-        >
+export default function CreateIssuePostMenuAction(): JSX.Element {
+    return (
+        <>
             <GitLabIcon type='menu'/>
             {'Create GitLab Issue'}
-        </button>
-    );
-
-    return (
-        <li
-            className='MenuItem'
-            role='menuitem'
-        >
-            {content}
-        </li>
+        </>
     );
-};
-
-export default CreateIssuePostMenuAction;
+}

webapp/src/index.ts

@@ -4,6 +4,10 @@
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {Store, Action} from 'redux';
 
+import {getPost} from 'mattermost-redux/selectors/entities/posts';
+import {isSystemMessage} from 'mattermost-redux/utils/post_utils';
+
+import {getConnected as getConnectedState, getPluginServerRoute} from './selectors';
 import SidebarHeader from './components/sidebar_header';
 import TeamSidebar from './components/team_sidebar';
 import RHSSidebar from './components/rhs_sidebar';
@@ -18,7 +22,7 @@ import LinkTooltip from './components/link_tooltip';
 import {GlobalState} from './types/store';
 
 import Reducer from './reducers';
-import {getConnected, setShowRHSAction} from './actions';
+import {getConnected, openAttachCommentToIssueModal, openCreateIssueModal, setShowRHSAction} from './actions';
 import {
     handleConnect,
     handleDisconnect,
@@ -29,7 +33,6 @@ import {
 } from './websocket';
 import manifest from './manifest';
 import Client from './client';
-import {getPluginServerRoute} from './selectors';
 import Hooks from './hooks';
 
 import {FormatTextOptions, MessageHtmlToComponentOptions, PluginRegistry} from './types/mattermost-webapp';
@@ -52,9 +55,33 @@ class PluginClass {
         registry.registerBottomTeamSidebarComponent(TeamSidebar);
         registry.registerPopoverUserAttributesComponent(UserAttribute);
         registry.registerRootComponent(CreateIssueModal);
-        registry.registerPostDropdownMenuComponent(CreateIssuePostMenuAction);
+        registry.registerPostDropdownMenuAction({
+            text: CreateIssuePostMenuAction,
+            action: (postId: string) => {
+                store.dispatch(openCreateIssueModal(postId));
+            },
+            filter: (postId: string): boolean => {
+                const state: GlobalState = store.getState();
+                const post = getPost(state, postId);
+                const isPostSystemMessage = Boolean(!post || isSystemMessage(post));
+
+                return getConnectedState(state) && !isPostSystemMessage;
+            },
+        });
+        registry.registerPostDropdownMenuAction({
+            text: AttachCommentToIssuePostMenuAction,
+            action: (postId: string) => {
+                store.dispatch(openAttachCommentToIssueModal(postId));
+            },
+            filter: (postId: string): boolean => {
+                const state: GlobalState = store.getState();
+                const post = getPost(state, postId);
+                const isPostSystemMessage = Boolean(!post || isSystemMessage(post));
+
+                return getConnectedState(state) && !isPostSystemMessage;
+            },
+        });
         registry.registerRootComponent(AttachCommentToIssueModal);
-        registry.registerPostDropdownMenuComponent(AttachCommentToIssuePostMenuAction);
         registry.registerLinkTooltipComponent(LinkTooltip);
 
         const hooks = new Hooks(store);

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

@@ -27,6 +27,7 @@ export interface PluginRegistry {
     registerLinkTooltipComponent(component: React.ReactNode)
     registerReconnectHandler(handler: any)
     registerPostDropdownMenuComponent(component: React.ReactNode)
+    registerPostDropdownMenuAction(action: any)
     registerRootComponent(component: React.ElementType)
 
     // Add more if needed from https://developers.mattermost.com/extend/plugins/webapp/reference