feat(client): restore keyboard shortcuts overlay

Closes #1040

client/src/app/App.js

@@ -1056,10 +1056,7 @@ export class App extends PureComponent {
     return Promise.reject(new Error('no last tab'));
   }
 
-  showShortcuts = () => {
-    // TODO(nikku): implement
-    console.error('NOT IMPLEMENTED');
-  }
+  showShortcuts = () => this.openModal('KEYBOARD_SHORTCUTS');
 
   updateMenu = (options) => {
     const { onMenuUpdate } = this.props;
@@ -1482,6 +1479,7 @@ export class App extends PureComponent {
         <ModalConductor
           currentModal={ this.state.currentModal }
           endpoints={ this.state.endpoints }
+          isMac={ this.props.globals.isMac }
           onClose={ this.closeModal }
           onDeploy={ this.handleDeploy }
           onDeployError={ this.handleDeployError }

client/src/app/modals/ModalConductor.js

@@ -1,15 +1,19 @@
 import React from 'react';
 
 import { DeployDiagramModal } from './deploy-diagram';
+import { KeyboardShortcutsModal } from './keyboard-shortcuts';
 
 
 const DEPLOY_DIAGRAM = 'DEPLOY_DIAGRAM';
+const KEYBOARD_SHORTCUTS = 'KEYBOARD_SHORTCUTS';
 
 
 const ModalConductor = props => {
   switch (props.currentModal) {
   case DEPLOY_DIAGRAM:
     return <DeployDiagramModal { ...props } />;
+  case KEYBOARD_SHORTCUTS:
+    return <KeyboardShortcutsModal { ...props } />;
   default:
     return null;
   }

client/src/app/modals/keyboard-shortcuts/KeyboardShortcutsModal.js

@@ -0,0 +1,34 @@
+import React, { PureComponent } from 'react';
+
+import View from './View';
+
+import getShortcuts from './getShortcuts';
+
+class KeyboardShortcutsModal extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {};
+  }
+
+  render() {
+
+    const {
+      isMac,
+      onClose,
+    } = this.props;
+
+    let modifierKey = 'Control';
+
+    if (isMac) {
+      modifierKey = 'Command';
+    }
+
+    return <View
+      shortcuts={ getShortcuts(modifierKey) }
+      onClose={ onClose }
+    />;
+  }
+}
+
+export default KeyboardShortcutsModal;

client/src/app/modals/keyboard-shortcuts/View.js

@@ -0,0 +1,51 @@
+import React, { PureComponent } from 'react';
+
+import {
+  ModalWrapper
+} from '../../primitives';
+
+import css from './View.less';
+
+
+class View extends PureComponent {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {};
+  }
+
+  render() {
+    const {
+      shortcuts,
+      onClose
+    } = this.props;
+
+    return (
+      <ModalWrapper className={ css.View } onClose={ onClose }>
+        <h2>Keyboard Shortcuts</h2>
+        <p>
+          The following special shortcuts can be used on opened diagrams.
+        </p>
+        <table>
+          <tbody className="keyboard-shortcuts">
+            {
+              (shortcuts || []).map(s => {
+                return <tr key={ s.id }>
+                  <td>{ s.label }</td>
+                  <td className="binding"><code>{ s.binding }</code></td>
+                </tr>;
+              })
+            }
+          </tbody>
+        </table>
+        <p>
+          Find additional shortcuts on individual items in the application menu.
+        </p>
+      </ModalWrapper>
+    );
+  }
+
+}
+
+export default View;

client/src/app/modals/keyboard-shortcuts/View.less

@@ -0,0 +1,10 @@
+:local(.View) {
+  user-select: none;
+
+  font-size: 1.2em;
+
+  .binding {
+    padding: 5px 10px;
+    font-family: monospace;
+  }
+}

client/src/app/modals/keyboard-shortcuts/__tests__/KeyboardShortcutsModalSpec.js

@@ -0,0 +1,97 @@
+import React from 'react';
+
+import {
+  mount,
+  shallow
+} from 'enzyme';
+
+import { KeyboardShortcutsModal } from '..';
+import View from '../View';
+import getShortcuts from '../getShortcuts';
+
+describe('<KeyboardShortcutsModal>', function() {
+
+  it('should render', function() {
+    shallow(<KeyboardShortcutsModal />);
+  });
+
+  describe('keyboard shortcuts', function() {
+
+    const macModifierKey = 'Command',
+          otherModifierKey = 'Control';
+
+    it('should render shortcuts', function() {
+
+      // given
+      const isMac = true;
+
+      // when
+      const wrapper = mount(<KeyboardShortcutsModal
+        isMac={ isMac }
+      />);
+
+      const shortcuts = getShortcuts(macModifierKey);
+
+      const keyboardShortcuts = wrapper.find('.keyboard-shortcuts').first();
+
+      // then
+      expect(keyboardShortcuts).to.exist;
+      expect(keyboardShortcuts.children()).to.have.lengthOf(shortcuts.length);
+
+      wrapper.unmount();
+
+    });
+
+
+    it('should render with mac modifier key', function() {
+
+      // given
+      const isMac = true;
+
+      // when
+      const wrapper = mount(<KeyboardShortcutsModal
+        isMac={ isMac }
+      />);
+
+      const keyboardShortcuts = wrapper.find('.keyboard-shortcuts').first();
+
+      // then
+      expect(keyboardShortcuts.text()).to.contain(macModifierKey);
+      expect(keyboardShortcuts.text()).not.to.contain(otherModifierKey);
+
+      wrapper.unmount();
+    });
+
+
+
+    it('should NOT render with mac modifier key', function() {
+
+      // given
+      const isMac = false;
+
+      // when
+      const wrapper = mount(<KeyboardShortcutsModal
+        isMac={ isMac }
+      />);
+
+      const keyboardShortcuts = wrapper.find('.keyboard-shortcuts').first();
+
+      // then
+      expect(keyboardShortcuts.text()).not.to.contain(macModifierKey);
+      expect(keyboardShortcuts.text()).to.contain(otherModifierKey);
+
+      wrapper.unmount();
+
+    });
+  });
+
+
+  describe('<View>', function() {
+
+    it('should render', function() {
+      shallow(<View />);
+    });
+
+  });
+
+});

client/src/app/modals/keyboard-shortcuts/getShortcuts.js

@@ -0,0 +1,39 @@
+const keyboardBinding = (binding, modifierKey) => {
+  if (modifierKey) {
+    binding = `${modifierKey} + ${binding}`;
+  }
+
+  return binding;
+};
+
+export default function(modifierKey) {
+
+  return [
+    {
+      id: 'addLineFeed',
+      label: 'Add Line Feed (in text box)',
+      binding: keyboardBinding('Shift + Enter')
+    },
+    {
+      id: 'scrollVertical',
+      label: 'Scrolling (Vertical)',
+      binding: keyboardBinding('Mouse Wheel')
+    },
+    {
+      id: 'scrollHorizontal',
+      label: 'Scrolling (Horizontal)',
+      binding: keyboardBinding('Shift + Mouse Wheel')
+    },
+    {
+      id: 'addElementToSelection',
+      label: 'Add element to selection',
+      binding: keyboardBinding('Mouse Click', modifierKey)
+    },
+    {
+      id: 'selectMultipleElements',
+      label: 'Select multiple elements (Lasso Tool)',
+      binding: keyboardBinding('Shift + Mouse Drag')
+    }
+  ];
+
+}

client/src/app/modals/keyboard-shortcuts/index.js

@@ -0,0 +1 @@
+export { default as KeyboardShortcutsModal } from './KeyboardShortcutsModal';

client/src/index.js

@@ -32,6 +32,7 @@ const globals = {
   config,
   dialog,
   fileSystem,
+  isMac,
   workspace
 };