Add a + next to direct message on sidebar to open 'Direct Messages' modal (#7159)

* Add a + next to direct message on sidebar to open 'Direct Messages' modal

* Change + cick to display direct message modal without group message.

1 files changed, 30 insertions, 0 deletions

diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx
index 31d6825c8..ff889fd6b 100644
--- a/webapp/components/sidebar.jsx
+++ b/webapp/components/sidebar.jsx
@@ -700,6 +700,18 @@ export default class Sidebar extends React.Component {
             </Tooltip>
         );
 
+        const createDirectMessageTooltip = (
+            <Tooltip
+                id='new-group-tooltip'
+                className='hidden-xs'
+            >
+                <FormattedMessage
+                    id='sidebar.createDirectMessage'
+                    defaultMessage='Create new direct message'
+                />
+            </Tooltip>
+        );
+
         const above = (
             <FormattedMessage
                 id='sidebar.unreads'
@@ -757,6 +769,23 @@ export default class Sidebar extends React.Component {
             createPublicChannelIcon = null;
         }
 
+        const createDirectMessageIcon = (
+            <OverlayTrigger
+                className='hidden-xs'
+                delayShow={500}
+                placement='top'
+                overlay={createDirectMessageTooltip}
+            >
+                <a
+                    className='add-channel-btn'
+                    href='#'
+                    onClick={this.handleOpenMoreDirectChannelsModal}
+                >
+                    {'+'}
+                </a>
+            </OverlayTrigger>
+        );
+
         if (!ChannelUtils.showCreateOption(Constants.PRIVATE_CHANNEL, isTeamAdmin, isSystemAdmin)) {
             createPrivateChannelIcon = null;
         }
@@ -894,6 +923,7 @@ export default class Sidebar extends React.Component {
                                     id='sidebar.direct'
                                     defaultMessage='DIRECT MESSAGES'
                                 />
+                                {createDirectMessageIcon}
                             </h4>
                         </li>
                         {directMessageItems}