rework some modals (#2113)

3 files changed, 201 insertions, 33 deletions

diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.js b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.js
index 86ed0974c5c..2e2659d7125 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.js
+++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.js
@@ -23,10 +23,12 @@ import GlobalNavBranding from './GlobalNavBranding';
 import GlobalNavMenu from './GlobalNavMenu';
 import GlobalNavUserContainer from './GlobalNavUserContainer';
 import Search from '../../search/Search';
-import ShortcutsHelpView from './ShortcutsHelpView';
+import ShortcutsHelp from './ShortcutsHelp';
 import { getCurrentUser, getAppState } from '../../../../store/rootReducer';
 
 class GlobalNav extends React.PureComponent {
+  state = { helpOpen: false };
+
   componentDidMount() {
     window.addEventListener('keypress', this.onKeyPress);
   }
@@ -46,13 +48,15 @@ class GlobalNav extends React.PureComponent {
     }
   };
 
-  openHelp = e => {
-    if (e) {
-      e.preventDefault();
-    }
-    new ShortcutsHelpView().render();
+  handleHelpClick = event => {
+    event.preventDefault();
+    this.openHelp();
   };
 
+  openHelp = () => this.setState({ helpOpen: true });
+
+  closeHelp = () => this.setState({ helpOpen: false });
+
   render() {
     /* eslint-disable max-len */
     return (
@@ -65,7 +69,7 @@ class GlobalNav extends React.PureComponent {
           <ul className="nav navbar-nav navbar-right">
             <Search {...this.props} />
             <li>
-              <a className="navbar-help" onClick={this.openHelp} href="#">
+              <a className="navbar-help" onClick={this.handleHelpClick} href="#">
                 <svg width="16" height="16">
                   <g transform="matrix(0.0364583,0,0,0.0364583,1,-0.166667)">
                     <path
@@ -79,6 +83,8 @@ class GlobalNav extends React.PureComponent {
             <GlobalNavUserContainer {...this.props} />
           </ul>
         </div>
+
+        {this.state.helpOpen && <ShortcutsHelp onClose={this.closeHelp} />}
       </nav>
     );
   }
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/ShortcutsHelp.js b/server/sonar-web/src/main/js/app/components/nav/global/ShortcutsHelp.js
new file mode 100644
index 00000000000..273b370f17a
--- /dev/null
+++ b/server/sonar-web/src/main/js/app/components/nav/global/ShortcutsHelp.js
@@ -0,0 +1,188 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+// @flow
+import React from 'react';
+import Modal from 'react-modal';
+import { Link } from 'react-router';
+import { translate } from '../../../../helpers/l10n';
+
+type Props = {
+  onClose: () => void
+};
+
+export default class ShortcutsHelp extends React.PureComponent {
+  props: Props;
+
+  handleCloseClick = (event: Event) => {
+    event.preventDefault();
+    this.props.onClose();
+  };
+
+  render() {
+    return (
+      <Modal
+        isOpen={true}
+        contentLabel="shortcuts help"
+        className="modal modal-large"
+        overlayClassName="modal-overlay"
+        onRequestClose={this.props.onClose}>
+
+        <div className="modal-head">
+          <h2>{translate('help')}</h2>
+        </div>
+
+        <div className="modal-body modal-container">
+          <div className="spacer-bottom">
+            <a href="http://www.sonarqube.org">{translate('footer.community')}</a>{' - '}
+            <a href="https://redirect.sonarsource.com/doc/home.html">
+              {translate('footer.documentation')}
+            </a>
+            {' - '}
+            <a href="https://redirect.sonarsource.com/doc/community.html">
+              {translate('footer.support')}
+            </a>
+            {' - '}
+            <a href="https://redirect.sonarsource.com/doc/plugin-library.html">
+              {translate('footer.plugins')}
+            </a>
+            {' - '}
+            <Link to="/web_api" onClick={this.props.onClose}>{translate('footer.web_api')}</Link>
+            {' - '}
+            <Link to="/about" onClick={this.props.onClose}>{translate('footer.about')}</Link>
+          </div>
+
+          <h2 className="spacer-top spacer-bottom">{translate('shortcuts.modal_title')}</h2>
+
+          <div className="columns">
+            <div className="column-half">
+              <div className="spacer-bottom">
+                <h3 className="shortcuts-section-title">{translate('shortcuts.section.global')}</h3>
+                <ul className="shortcuts-list">
+                  <li>
+                    <span className="shortcut-button spacer-right">s</span>
+                    {translate('shortcuts.section.global.search')}
+                  </li>
+                  <li>
+                    <span className="shortcut-button spacer-right">?</span>
+                    {translate('shortcuts.section.global.shortcuts')}
+                  </li>
+                </ul>
+              </div>
+
+              <h3 className="shortcuts-section-title">{translate('shortcuts.section.rules')}</h3>
+              <ul className="shortcuts-list">
+                <li>
+                  <span className="shortcut-button little-spacer-right">↑</span>
+                  <span className="shortcut-button spacer-right">↓</span>
+                  {translate('shortcuts.section.rules.navigate_between_rules')}
+                </li>
+                <li>
+                  <span className="shortcut-button spacer-right">→</span>
+                  {translate('shortcuts.section.rules.open_details')}
+                </li>
+                <li>
+                  <span className="shortcut-button spacer-right">←</span>
+                  {translate('shortcuts.section.rules.return_to_list')}
+                </li>
+                <li>
+                  <span className="shortcut-button spacer-right">a</span>
+                  {translate('shortcuts.section.rules.activate')}
+                </li>
+                <li>
+                  <span className="shortcut-button spacer-right">d</span>
+                  {translate('shortcuts.section.rules.deactivate')}
+                </li>
+              </ul>
+            </div>
+
+            <div className="column-half">
+              <h3 className="shortcuts-section-title">{translate('shortcuts.section.issues')}</h3>
+              <ul className="shortcuts-list">
+                <li>
+                  <span className="shortcut-button little-spacer-right">↑</span>
+                  <span className="shortcut-button spacer-right">↓</span>
+                  {translate('shortcuts.section.issues.navigate_between_issues')}
+                </li>
+                <li>
+                  <span className="shortcut-button spacer-right">→</span>
+                  {translate('shortcuts.section.issues.open_details')}
+                </li>
+                <li>
+                  <span className="shortcut-button spacer-right">←</span>
+                  {translate('shortcuts.section.issues.return_to_list')}
+                </li>
+                <li>
+                  <span className="shortcut-button little-spacer-right">alt</span>
+                  <span className="little-spacer-right">+</span>
+                  <span className="shortcut-button little-spacer-right">↑</span>
+                  <span className="shortcut-button spacer-right">↓</span>
+                  {translate('issues.to_navigate_issue_locations')}
+                </li>
+                <li>
+                  <span className="shortcut-button little-spacer-right">alt</span>
+                  <span className="little-spacer-right">+</span>
+                  <span className="shortcut-button little-spacer-right">←</span>
+                  <span className="shortcut-button spacer-right">→</span>
+                  {translate('issues.to_switch_flows')}
+                </li>
+                <li>
+                  <span className="shortcut-button spacer-right">f</span>
+                  {translate('shortcuts.section.issue.do_transition')}
+                </li>
+                <li>
+                  <span className="shortcut-button spacer-right">a</span>
+                  {translate('shortcuts.section.issue.assign')}
+                </li>
+                <li>
+                  <span className="shortcut-button spacer-right">m</span>
+                  {translate('shortcuts.section.issue.assign_to_me')}
+                </li>
+                <li>
+                  <span className="shortcut-button spacer-right">i</span>
+                  {translate('shortcuts.section.issue.change_severity')}
+                </li>
+                <li>
+                  <span className="shortcut-button spacer-right">c</span>
+                  {translate('shortcuts.section.issue.comment')}
+                </li>
+                <li>
+                  <span className="shortcut-button little-spacer-right">ctrl</span>
+                  <span className="shortcut-button spacer-right">enter</span>
+                  {translate('shortcuts.section.issue.submit_comment')}
+                </li>
+                <li>
+                  <span className="shortcut-button spacer-right">t</span>
+                  {translate('shortcuts.section.issue.change_tags')}
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <div className="modal-foot">
+          <a className="js-modal-close" href="#" onClick={this.handleCloseClick}>
+            {translate('close')}
+          </a>
+        </div>
+
+      </Modal>
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/ShortcutsHelpView.js b/server/sonar-web/src/main/js/app/components/nav/global/ShortcutsHelpView.js
deleted file mode 100644
index 893e4930ad6..00000000000
--- a/server/sonar-web/src/main/js/app/components/nav/global/ShortcutsHelpView.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2017 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import ModalView from '../../../../components/common/modals';
-import ShortcutsHelpTemplate from '../templates/nav-shortcuts-help.hbs';
-
-export default ModalView.extend({
-  className: 'modal modal-large',
-  template: ShortcutsHelpTemplate
-});