SONAR-9064 Rework facets sidebar on the issues page

8 files changed, 94 insertions, 41 deletions

diff --git a/server/sonar-web/src/main/js/components/common/EmptySearch.js b/server/sonar-web/src/main/js/components/common/EmptySearch.js
new file mode 100644
index 00000000000..904a6b2cbad
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/common/EmptySearch.js
@@ -0,0 +1,39 @@
+/*
+ * 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 { css } from 'glamor';
+import { translate } from '../../helpers/l10n';
+
+const EmptySearch = () => (
+  <div
+    className={css({
+      padding: '60px 0',
+      border: '1px solid #e6e6e6',
+      borderRadius: 2,
+      textAlign: 'center',
+      color: '#777'
+    })}>
+    <h3>{translate('no_results_search')}</h3>
+    <p className="big-spacer-top">{translate('no_results_search.2')}</p>
+  </div>
+);
+
+export default EmptySearch;
diff --git a/server/sonar-web/src/main/js/components/common/MarkdownTips.js b/server/sonar-web/src/main/js/components/common/MarkdownTips.js
index 2d83b6aeb24..8c5db3a8fe1 100644
--- a/server/sonar-web/src/main/js/components/common/MarkdownTips.js
+++ b/server/sonar-web/src/main/js/components/common/MarkdownTips.js
@@ -25,7 +25,7 @@ import { translate } from '../../helpers/l10n';
 export default class MarkdownTips extends React.PureComponent {
   handleClick(evt: MouseEvent) {
     evt.preventDefault();
-    window.open(getMarkdownHelpUrl(), 'height=300,width=600,scrollbars=1,resizable=1');
+    window.open(getMarkdownHelpUrl(), 'Markdown', 'height=300,width=600,scrollbars=1,resizable=1');
   }
 
   render() {
diff --git a/server/sonar-web/src/main/js/components/common/SelectList.js b/server/sonar-web/src/main/js/components/common/SelectList.js
index ba2f82b34b7..bec5c2e6712 100644
--- a/server/sonar-web/src/main/js/components/common/SelectList.js
+++ b/server/sonar-web/src/main/js/components/common/SelectList.js
@@ -19,6 +19,8 @@
  */
 // @flow
 import React from 'react';
+import key from 'keymaster';
+import { uniqueId } from 'lodash';
 import SelectListItem from './SelectListItem';
 
 type Props = {
@@ -33,7 +35,8 @@ type State = {
 };
 
 export default class SelectList extends React.PureComponent {
-  list: HTMLElement;
+  currentKeyScope: string;
+  previousKeyScope: string;
   props: Props;
   state: State;
 
@@ -45,7 +48,7 @@ export default class SelectList extends React.PureComponent {
   }
 
   componentDidMount() {
-    this.list.focus();
+    this.attachShortcuts();
   }
 
   componentWillReceiveProps(nextProps: Props) {
@@ -57,24 +60,36 @@ export default class SelectList extends React.PureComponent {
     }
   }
 
-  handleKeyboard = (evt: KeyboardEvent) => {
-    switch (evt.keyCode) {
-      case 40: // down
-        this.setState(this.selectNextElement);
-        break;
-      case 38: // up
-        this.setState(this.selectPreviousElement);
-        break;
-      case 13: // return
-        if (this.state.active) {
-          this.handleSelect(this.state.active);
-        }
-        break;
-      default:
-        return;
-    }
-    evt.preventDefault();
-    evt.stopPropagation();
+  componentWillUnmount() {
+    this.detachShortcuts();
+  }
+
+  attachShortcuts = () => {
+    this.previousKeyScope = key.getScope();
+    this.currentKeyScope = uniqueId('key-scope');
+    key.setScope(this.currentKeyScope);
+
+    key('down', this.currentKeyScope, () => {
+      this.setState(this.selectNextElement);
+      return false;
+    });
+
+    key('up', this.currentKeyScope, () => {
+      this.setState(this.selectPreviousElement);
+      return false;
+    });
+
+    key('return', this.currentKeyScope, () => {
+      if (this.state.active) {
+        this.handleSelect(this.state.active);
+      }
+      return false;
+    });
+  };
+
+  detachShortcuts = () => {
+    key.setScope(this.previousKeyScope);
+    key.deleteScope(this.currentKeyScope);
   };
 
   handleSelect = (item: string) => {
@@ -105,18 +120,18 @@ export default class SelectList extends React.PureComponent {
     const { children } = this.props;
     const hasChildren = React.Children.count(children) > 0;
     return (
-      <ul
-        className="menu"
-        onKeyDown={this.handleKeyboard}
-        ref={list => this.list = list}
-        tabIndex={0}>
+      <ul className="menu">
         {hasChildren &&
-          React.Children.map(children, child =>
-            React.cloneElement(child, {
-              active: this.state.active,
-              onHover: this.handleHover,
-              onSelect: this.handleSelect
-            }))}
+          React.Children.map(
+            children,
+            child =>
+              child != null &&
+              React.cloneElement(child, {
+                active: this.state.active,
+                onHover: this.handleHover,
+                onSelect: this.handleSelect
+              })
+          )}
         {!hasChildren &&
           this.props.items.map(item => (
             <SelectListItem
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/SelectList-test.js b/server/sonar-web/src/main/js/components/common/__tests__/SelectList-test.js
index 9c0e88e6aa3..58afbecad26 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/SelectList-test.js
+++ b/server/sonar-web/src/main/js/components/common/__tests__/SelectList-test.js
@@ -64,11 +64,11 @@ it('should correclty handle user actions', () => {
       ))}
     </SelectList>
   );
-  keydown(list.find('ul'), 40);
+  keydown(40);
   expect(list.state()).toMatchSnapshot();
-  keydown(list.find('ul'), 40);
+  keydown(40);
   expect(list.state()).toMatchSnapshot();
-  keydown(list.find('ul'), 38);
+  keydown(38);
   expect(list.state()).toMatchSnapshot();
   click(list.childAt(2).find('a'));
   expect(onSelect.mock.calls).toMatchSnapshot(); // eslint-disable-linelist
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/SelectList-test.js.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/SelectList-test.js.snap
index 4cf15f469cb..b2d9388c7ef 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/SelectList-test.js.snap
+++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/SelectList-test.js.snap
@@ -26,9 +26,7 @@ Array [
 
 exports[`test should render correctly with children 1`] = `
 <ul
-  className="menu"
-  onKeyDown={[Function]}
-  tabIndex={0}>
+  className="menu">
   <SelectListItem
     active="seconditem"
     item="item"
@@ -61,9 +59,7 @@ exports[`test should render correctly with children 1`] = `
 
 exports[`test should render correctly without children 1`] = `
 <ul
-  className="menu"
-  onKeyDown={[Function]}
-  tabIndex={0}>
+  className="menu">
   <SelectListItem
     active="seconditem"
     item="item"
diff --git a/server/sonar-web/src/main/js/components/common/action-options-view.js b/server/sonar-web/src/main/js/components/common/action-options-view.js
index 976f88eb081..a538e22b88e 100644
--- a/server/sonar-web/src/main/js/components/common/action-options-view.js
+++ b/server/sonar-web/src/main/js/components/common/action-options-view.js
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import $ from 'jquery';
+import key from 'keymaster';
 import PopupView from './popup';
 
 export default PopupView.extend({
diff --git a/server/sonar-web/src/main/js/components/common/modals.js b/server/sonar-web/src/main/js/components/common/modals.js
index 5a1343bd511..a86a262d40c 100644
--- a/server/sonar-web/src/main/js/components/common/modals.js
+++ b/server/sonar-web/src/main/js/components/common/modals.js
@@ -19,6 +19,7 @@
  */
 import $ from 'jquery';
 import Marionette from 'backbone.marionette';
+import key from 'keymaster';
 
 const EVENT_SCOPE = 'modal';
 
diff --git a/server/sonar-web/src/main/js/components/common/popup.js b/server/sonar-web/src/main/js/components/common/popup.js
index 532380f71b4..bce61b72938 100644
--- a/server/sonar-web/src/main/js/components/common/popup.js
+++ b/server/sonar-web/src/main/js/components/common/popup.js
@@ -19,6 +19,7 @@
  */
 import $ from 'jquery';
 import Marionette from 'backbone.marionette';
+import key from 'keymaster';
 
 export default Marionette.ItemView.extend({
   className: 'bubble-popup',