SONAR-9850 Remove scrollbar from the "Similar Issues" filter popup

3 files changed, 29 insertions, 14 deletions

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 b235e9abec9..ca3a6d1545b 100644
--- a/server/sonar-web/src/main/js/components/common/SelectList.js
+++ b/server/sonar-web/src/main/js/components/common/SelectList.js
@@ -21,11 +21,13 @@
 import React from 'react';
 import key from 'keymaster';
 import { uniqueId } from 'lodash';
+import classNames from 'classnames';
 import SelectListItem from './SelectListItem';
 
 /*::
 type Props = {
   children?: SelectListItem,
+  className?: string,
   items: Array<string>,
   currentItem: string,
   onSelect: string => void
@@ -131,22 +133,27 @@ export default class SelectList extends React.PureComponent {
     return { active: props.items[idx - 1] };
   };
 
+  renderChild = (child /*: Object */) => {
+    if (child == null) {
+      return null;
+    }
+    // do not pass extra props to children like `<li className="divider" />`
+    if (child.type !== SelectListItem) {
+      return child;
+    }
+    return React.cloneElement(child, {
+      active: this.state.active,
+      onHover: this.handleHover,
+      onSelect: this.handleSelect
+    });
+  };
+
   render() {
     const { children } = this.props;
     const hasChildren = React.Children.count(children) > 0;
     return (
-      <ul className="menu">
-        {hasChildren &&
-          React.Children.map(
-            children,
-            child =>
-              child != null &&
-              React.cloneElement(child, {
-                active: this.state.active,
-                onHover: this.handleHover,
-                onSelect: this.handleSelect
-              })
-          )}
+      <ul className={classNames('menu', this.props.className)}>
+        {hasChildren && React.Children.map(children, this.renderChild)}
         {!hasChildren &&
           this.props.items.map(item => (
             <SelectListItem
diff --git a/server/sonar-web/src/main/js/components/issue/popups/SimilarIssuesPopup.js b/server/sonar-web/src/main/js/components/issue/popups/SimilarIssuesPopup.js
index ca556766fc9..fa66812411b 100644
--- a/server/sonar-web/src/main/js/components/issue/popups/SimilarIssuesPopup.js
+++ b/server/sonar-web/src/main/js/components/issue/popups/SimilarIssuesPopup.js
@@ -71,7 +71,11 @@ export default class SimilarIssuesPopup extends React.PureComponent {
           <h6>{translate('issue.filter_similar_issues')}</h6>
         </header>
 
-        <SelectList currentItem={items[0]} items={items} onSelect={this.handleSelect}>
+        <SelectList
+          className="issues-similar-issues-menu"
+          currentItem={items[0]}
+          items={items}
+          onSelect={this.handleSelect}>
           <SelectListItem item="type">
             <IssueTypeIcon className="little-spacer-right" query={issue.type} />
             {translate('issue.type', issue.type)}
@@ -110,6 +114,8 @@ export default class SimilarIssuesPopup extends React.PureComponent {
             )}
           </SelectListItem>
 
+          <li className="divider" />
+
           <SelectListItem item="rule">{limitComponentName(issue.ruleName)}</SelectListItem>
 
           {issue.tags != null &&
@@ -120,6 +126,8 @@ export default class SimilarIssuesPopup extends React.PureComponent {
               </SelectListItem>
             ))}
 
+          <li className="divider" />
+
           <SelectListItem item="project">
             <QualifierIcon className="little-spacer-right" qualifier="TRK" />
             {issue.projectName}
diff --git a/server/sonar-web/src/main/less/components/issues.less b/server/sonar-web/src/main/less/components/issues.less
index 35b17d019c2..b64de507c9b 100644
--- a/server/sonar-web/src/main/less/components/issues.less
+++ b/server/sonar-web/src/main/less/components/issues.less
@@ -382,7 +382,7 @@ input.issue-action-options-search {
   background-color: #ccc;
 }
 
-.issue .menu {
+.issue .menu:not(.issues-similar-issues-menu) {
   max-height: 120px;
   overflow: auto;
 }