slight modifications to keyboards dialog and also fix error with non-Mac (#7367)

6 files changed, 306 insertions, 17 deletions

diff --git a/webapp/components/needs_team/needs_team.jsx b/webapp/components/needs_team/needs_team.jsx
index 387710c9d..349b9ae67 100644
--- a/webapp/components/needs_team/needs_team.jsx
+++ b/webapp/components/needs_team/needs_team.jsx
@@ -234,7 +234,7 @@ export default class NeedsTeam extends React.Component {
                     <RemovedFromChannelModal/>
                     <ResetStatusModal/>
                     <LeavePrivateChannelModal/>
-                    <ShortcutsModal/>
+                    <ShortcutsModal isMac={Utils.isMac()}/>
                 </div>
             </div>
         );
diff --git a/webapp/components/shortcuts_modal.jsx b/webapp/components/shortcuts_modal.jsx
index 32a3f9c4b..2d6f2499a 100644
--- a/webapp/components/shortcuts_modal.jsx
+++ b/webapp/components/shortcuts_modal.jsx
@@ -2,18 +2,24 @@
 // See License.txt for license information.
 
 import Constants from 'utils/constants.jsx';
-import * as Utils from 'utils/utils.jsx';
 
 import ModalStore from 'stores/modal_store.jsx';
 
 import {intlShape, injectIntl, defineMessages} from 'react-intl';
 import {Modal} from 'react-bootstrap';
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const allShortcuts = defineMessages({
     mainHeader: {
-        id: 'shortcuts.header',
-        defaultMessage: 'Keyboard Shortcuts'
+        default: {
+            id: 'shortcuts.header',
+            defaultMessage: 'Keyboard Shortcuts\tCtrl|/'
+        },
+        mac: {
+            id: 'shortcuts.header.mac',
+            defaultMessage: 'Keyboard Shortcuts\t⌘|/'
+        }
     },
     navHeader: {
         id: 'shortcuts.nav.header',
@@ -103,10 +109,6 @@ const allShortcuts = defineMessages({
         id: 'shortcuts.msgs.header',
         defaultMessage: 'Messages'
     },
-    msgMarkAsRead: {
-        id: 'shortcuts.msgs.mark_as_read',
-        defaultMessage: 'Mark current channel as read:\tEsc'
-    },
     msgInputHeader: {
         id: 'shortcuts.msgs.input.header',
         defaultMessage: 'Works inside an empty input field'
@@ -237,7 +239,8 @@ const allShortcuts = defineMessages({
 
 class ShortcutsModal extends React.PureComponent {
     static propTypes = {
-        intl: intlShape.isRequired
+        intl: intlShape.isRequired,
+        isMac: PropTypes.bool.isRequired
     }
 
     constructor(props) {
@@ -266,7 +269,8 @@ class ShortcutsModal extends React.PureComponent {
         this.setState({show: false});
     }
 
-    getShortcuts(isMac) {
+    getShortcuts() {
+        const {isMac} = this.props;
         const shortcuts = {};
         Object.keys(allShortcuts).forEach((s) => {
             if (isMac && allShortcuts[s].mac) {
@@ -282,8 +286,7 @@ class ShortcutsModal extends React.PureComponent {
     }
 
     render() {
-        const shortcuts = this.getShortcuts(Utils.isMac());
-
+        const shortcuts = this.getShortcuts();
         const {formatMessage} = this.props.intl;
 
         return (
@@ -296,7 +299,7 @@ class ShortcutsModal extends React.PureComponent {
                 <div className='shortcuts-content'>
                     <Modal.Header closeButton={true}>
                         <Modal.Title>
-                            <strong>{formatMessage(shortcuts.mainHeader)}</strong>
+                            <strong>{renderShortcut(formatMessage(shortcuts.mainHeader))}</strong>
                         </Modal.Title>
                     </Modal.Header>
                     <Modal.Body ref='modalBody'>
@@ -320,7 +323,6 @@ class ShortcutsModal extends React.PureComponent {
                                 <div className='section'>
                                     <div>
                                         <h4 className='section-title'><strong>{formatMessage(shortcuts.msgHeader)}</strong></h4>
-                                        {renderShortcut(formatMessage(shortcuts.msgMarkAsRead))}
                                         <span><strong>{formatMessage(shortcuts.msgInputHeader)}</strong></span>
                                         <div className='subsection'>
                                             {renderShortcut(formatMessage(shortcuts.msgEdit))}
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 87da9c943..4bb9542ef 100755
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -2156,7 +2156,8 @@
   "shortcuts.files.header": "Files",
   "shortcuts.files.upload": "Upload files:\tCtrl|U",
   "shortcuts.files.upload.mac": "Upload files:\t⌘|U",
-  "shortcuts.header": "Keyboard Shortcuts",
+  "shortcuts.header": "Keyboard Shortcuts\tCtrl|/",
+  "shortcuts.header.mac": "Keyboard Shortcuts\t⌘|/",
   "shortcuts.info": "Begin a message with / for a list of all the commands at your disposal.",
   "shortcuts.msgs.comp.channel": "Channel:\t~|[a-z]|Tab",
   "shortcuts.msgs.comp.emoji": "Emoji:\t:|[a-z]|Tab",
@@ -2165,7 +2166,6 @@
   "shortcuts.msgs.edit": "Edit last message in channel:\tUp",
   "shortcuts.msgs.header": "Messages",
   "shortcuts.msgs.input.header": "Works inside an empty input field",
-  "shortcuts.msgs.mark_as_read": "Mark current channel as read:\tEsc",
   "shortcuts.msgs.reply": "Reply to last message in channel:\tShift|Up",
   "shortcuts.msgs.reprint_next": "Reprint next message:\tCtrl|Down",
   "shortcuts.msgs.reprint_next.mac": "Reprint next message:\t⌘|Down",
diff --git a/webapp/sass/routes/_shortcuts-modal.scss b/webapp/sass/routes/_shortcuts-modal.scss
index 817239f2f..854340b2c 100644
--- a/webapp/sass/routes/_shortcuts-modal.scss
+++ b/webapp/sass/routes/_shortcuts-modal.scss
@@ -11,18 +11,43 @@
                     background: transparent;
                     border: none;
                     color: inherit;
-                    padding: 40px 40px 20px;
+                    padding: 20px 40px 20px;
 
                     .close {
                         color: inherit;
                         font-size: 28px;
                         font-weight: normal;
                         right: 35px;
+                        top: 35px;
                     }
 
                     .modal-title {
                         color: inherit;
                         font-size: 20px;
+
+                        > div {
+                            &:first-child {
+                                margin-bottom: 2.5em;
+                            }
+                        }
+
+                        .shortcut-line {
+                            margin: 17px 0;
+
+                            span {
+                                &:first-child {
+                                    margin-right: 5px;
+                                }
+                            }
+
+                            .shortcut-key {
+                                border-radius: 3px;
+                                font-size: .9em;
+                                font-weight: 500;
+                                margin: 5px 0 5px 5px;
+                                padding: 1px 5px;
+                            }
+                        }
                     }
                 }
             }
diff --git a/webapp/tests/components/__snapshots__/shortcuts_modal.test.jsx.snap b/webapp/tests/components/__snapshots__/shortcuts_modal.test.jsx.snap
new file mode 100644
index 000000000..cfe719ba4
--- /dev/null
+++ b/webapp/tests/components/__snapshots__/shortcuts_modal.test.jsx.snap
@@ -0,0 +1,237 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/ShortcutsModal should match snapshot modal for Mac 1`] = `
+<InjectIntl(ShortcutsModal)
+  intl={
+    Object {
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "formatDate": [Function],
+      "formatHTMLMessage": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatPlural": [Function],
+      "formatRelative": [Function],
+      "formatTime": [Function],
+      "formats": Object {},
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralFormat": [Function],
+        "getRelativeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": Object {},
+      "now": [Function],
+      "textComponent": "span",
+    }
+  }
+  isMac={true}
+>
+  <ShortcutsModal
+    intl={
+      Object {
+        "defaultFormats": Object {},
+        "defaultLocale": "en",
+        "formatDate": [Function],
+        "formatHTMLMessage": [Function],
+        "formatMessage": [Function],
+        "formatNumber": [Function],
+        "formatPlural": [Function],
+        "formatRelative": [Function],
+        "formatTime": [Function],
+        "formats": Object {},
+        "formatters": Object {
+          "getDateTimeFormat": [Function],
+          "getMessageFormat": [Function],
+          "getNumberFormat": [Function],
+          "getPluralFormat": [Function],
+          "getRelativeFormat": [Function],
+        },
+        "locale": "en",
+        "messages": Object {},
+        "now": [Function],
+        "textComponent": "span",
+      }
+    }
+    isMac={true}
+  >
+    <Modal
+      animation={true}
+      autoFocus={true}
+      backdrop={true}
+      bsClass="modal"
+      dialogClassName="shortcuts-modal"
+      dialogComponentClass={[Function]}
+      enforceFocus={true}
+      keyboard={true}
+      manager={
+        ModalManager {
+          "add": [Function],
+          "containers": Array [],
+          "data": Array [],
+          "handleContainerOverflow": true,
+          "hideSiblingNodes": true,
+          "isTopModal": [Function],
+          "modals": Array [],
+          "remove": [Function],
+        }
+      }
+      onExited={[Function]}
+      onHide={[Function]}
+      renderBackdrop={[Function]}
+      restoreFocus={true}
+      show={false}
+    >
+      <Modal
+        autoFocus={true}
+        backdrop={true}
+        backdropClassName="modal-backdrop"
+        backdropTransitionTimeout={150}
+        containerClassName="modal-open"
+        dialogTransitionTimeout={300}
+        enforceFocus={true}
+        keyboard={true}
+        manager={
+          ModalManager {
+            "add": [Function],
+            "containers": Array [],
+            "data": Array [],
+            "handleContainerOverflow": true,
+            "hideSiblingNodes": true,
+            "isTopModal": [Function],
+            "modals": Array [],
+            "remove": [Function],
+          }
+        }
+        onEntering={[Function]}
+        onExited={[Function]}
+        onHide={[Function]}
+        renderBackdrop={[Function]}
+        restoreFocus={true}
+        show={false}
+        transition={[Function]}
+      />
+    </Modal>
+  </ShortcutsModal>
+</InjectIntl(ShortcutsModal)>
+`;
+
+exports[`components/ShortcutsModal should match snapshot modal for non-Mac like Windows/Linux 1`] = `
+<InjectIntl(ShortcutsModal)
+  intl={
+    Object {
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "formatDate": [Function],
+      "formatHTMLMessage": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatPlural": [Function],
+      "formatRelative": [Function],
+      "formatTime": [Function],
+      "formats": Object {},
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralFormat": [Function],
+        "getRelativeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": Object {},
+      "now": [Function],
+      "textComponent": "span",
+    }
+  }
+  isMac={false}
+>
+  <ShortcutsModal
+    intl={
+      Object {
+        "defaultFormats": Object {},
+        "defaultLocale": "en",
+        "formatDate": [Function],
+        "formatHTMLMessage": [Function],
+        "formatMessage": [Function],
+        "formatNumber": [Function],
+        "formatPlural": [Function],
+        "formatRelative": [Function],
+        "formatTime": [Function],
+        "formats": Object {},
+        "formatters": Object {
+          "getDateTimeFormat": [Function],
+          "getMessageFormat": [Function],
+          "getNumberFormat": [Function],
+          "getPluralFormat": [Function],
+          "getRelativeFormat": [Function],
+        },
+        "locale": "en",
+        "messages": Object {},
+        "now": [Function],
+        "textComponent": "span",
+      }
+    }
+    isMac={false}
+  >
+    <Modal
+      animation={true}
+      autoFocus={true}
+      backdrop={true}
+      bsClass="modal"
+      dialogClassName="shortcuts-modal"
+      dialogComponentClass={[Function]}
+      enforceFocus={true}
+      keyboard={true}
+      manager={
+        ModalManager {
+          "add": [Function],
+          "containers": Array [],
+          "data": Array [],
+          "handleContainerOverflow": true,
+          "hideSiblingNodes": true,
+          "isTopModal": [Function],
+          "modals": Array [],
+          "remove": [Function],
+        }
+      }
+      onExited={[Function]}
+      onHide={[Function]}
+      renderBackdrop={[Function]}
+      restoreFocus={true}
+      show={false}
+    >
+      <Modal
+        autoFocus={true}
+        backdrop={true}
+        backdropClassName="modal-backdrop"
+        backdropTransitionTimeout={150}
+        containerClassName="modal-open"
+        dialogTransitionTimeout={300}
+        enforceFocus={true}
+        keyboard={true}
+        manager={
+          ModalManager {
+            "add": [Function],
+            "containers": Array [],
+            "data": Array [],
+            "handleContainerOverflow": true,
+            "hideSiblingNodes": true,
+            "isTopModal": [Function],
+            "modals": Array [],
+            "remove": [Function],
+          }
+        }
+        onEntering={[Function]}
+        onExited={[Function]}
+        onHide={[Function]}
+        renderBackdrop={[Function]}
+        restoreFocus={true}
+        show={false}
+        transition={[Function]}
+      />
+    </Modal>
+  </ShortcutsModal>
+</InjectIntl(ShortcutsModal)>
+`;
diff --git a/webapp/tests/components/shortcuts_modal.test.jsx b/webapp/tests/components/shortcuts_modal.test.jsx
new file mode 100644
index 000000000..04fa51a76
--- /dev/null
+++ b/webapp/tests/components/shortcuts_modal.test.jsx
@@ -0,0 +1,25 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import {mountWithIntl} from 'tests/helpers/intl-test-helper.jsx';
+import ShortcutsModal from 'components/shortcuts_modal.jsx';
+
+describe('components/ShortcutsModal', () => {
+    test('should match snapshot modal for Mac', () => {
+        const wrapper = mountWithIntl(
+            <ShortcutsModal isMac={true}/>
+        );
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should match snapshot modal for non-Mac like Windows/Linux', () => {
+        const wrapper = mountWithIntl(
+            <ShortcutsModal isMac={false}/>
+        );
+
+        expect(wrapper).toMatchSnapshot();
+    });
+});