add branches help popups (#2420)

4 files changed, 49 insertions, 68 deletions

diff --git a/server/sonar-web/src/main/js/components/common/BubblePopup.js b/server/sonar-web/src/main/js/components/common/BubblePopup.tsx
index c77167ee53b..ff2c3b12ee4 100644
--- a/server/sonar-web/src/main/js/components/common/BubblePopup.js
+++ b/server/sonar-web/src/main/js/components/common/BubblePopup.tsx
@@ -17,30 +17,23 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import * as React from 'react';
+import * as classNames from 'classnames';
 
-export default class BubblePopup extends React.PureComponent {
-  static propsType = {
-    children: PropTypes.object.isRequired,
-    position: PropTypes.object.isRequired,
-    customClass: PropTypes.string
-  };
-
-  static defaultProps = {
-    customClass: ''
-  };
+interface Props {
+  customClass?: string;
+  children: React.ReactNode;
+  position: { top: number; right: number };
+}
 
-  render() {
-    const popupClass = classNames('bubble-popup', this.props.customClass);
-    const popupStyle = { ...this.props.position };
+export default function BubblePopup(props: Props) {
+  const popupClass = classNames('bubble-popup', props.customClass);
+  const popupStyle = { ...props.position };
 
-    return (
-      <div className={popupClass} style={popupStyle}>
-        {this.props.children}
-        <div className="bubble-popup-arrow" />
-      </div>
-    );
-  }
+  return (
+    <div className={popupClass} style={popupStyle}>
+      {props.children}
+      <div className="bubble-popup-arrow" />
+    </div>
+  );
 }
diff --git a/server/sonar-web/src/main/js/components/common/BubblePopupHelper.js b/server/sonar-web/src/main/js/components/common/BubblePopupHelper.tsx
index 48fa517be01..f24365adf57 100644
--- a/server/sonar-web/src/main/js/components/common/BubblePopupHelper.js
+++ b/server/sonar-web/src/main/js/components/common/BubblePopupHelper.tsx
@@ -17,44 +17,35 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import React from 'react';
-import classNames from 'classnames';
+import * as React from 'react';
+import * as classNames from 'classnames';
 
-/*::
-type Props = {
-  className?: string,
-  children?: React.Element<*>,
-  isOpen: boolean,
-  offset?: {
-    vertical: number,
-    horizontal: number
-  },
-  popup: Object,
-  position: 'bottomleft' | 'bottomright',
-  togglePopup: (?boolean) => void
-};
-*/
+interface Props {
+  className?: string;
+  children?: React.ReactNode;
+  isOpen: boolean;
+  offset?: { vertical: number; horizontal: number };
+  popup: React.ReactElement<any>;
+  position: 'bottomleft' | 'bottomright';
+  togglePopup: (show: boolean) => void;
+}
 
-/*::
-type State = {
-  position: { top: number, right: number }
-};
-*/
+interface State {
+  position: { top: number; left?: number; right?: number };
+}
 
-export default class BubblePopupHelper extends React.PureComponent {
-  /*:: props: Props; */
-  state /*: State */ = {
-    position: {
-      top: 0,
-      right: 0
-    }
+export default class BubblePopupHelper extends React.PureComponent<Props, State> {
+  container: HTMLElement;
+  popupContainer: HTMLElement | null;
+  state: State = {
+    position: { top: 0, right: 0 }
   };
 
   componentDidMount() {
     this.setState({ position: this.getPosition(this.props) });
   }
 
-  componentWillReceiveProps(nextProps /*: Props */) {
+  componentWillReceiveProps(nextProps: Props) {
     if (!this.props.isOpen && nextProps.isOpen) {
       window.addEventListener('keydown', this.handleKey, false);
       window.addEventListener('click', this.handleOutsideClick, false);
@@ -64,30 +55,31 @@ export default class BubblePopupHelper extends React.PureComponent {
     }
   }
 
-  handleKey = (evt /*: KeyboardEvent */) => {
+  handleKey = (event: KeyboardEvent) => {
     // Escape key
-    if (evt.keyCode === 27) {
+    if (event.keyCode === 27) {
       this.props.togglePopup(false);
     }
   };
 
-  handleOutsideClick = (evt /*: SyntheticInputEvent */) => {
-    if (!this.popupContainer || !this.popupContainer.contains(evt.target)) {
+  handleOutsideClick = (event: MouseEvent) => {
+    if (!this.popupContainer || !this.popupContainer.contains(event.target as Node)) {
       this.props.togglePopup(false);
     }
   };
 
-  handleClick(evt /*: SyntheticInputEvent */) {
-    evt.stopPropagation();
+  handleClick(event: React.SyntheticEvent<HTMLElement>) {
+    event.stopPropagation();
   }
 
-  getPosition(props /*: Props */) {
+  getPosition(props: Props) {
     const containerPos = this.container.getBoundingClientRect();
     const { position } = props;
     const offset = props.offset || { vertical: 0, horizontal: 0 };
     if (position === 'bottomleft') {
       return { top: containerPos.height + offset.vertical, left: offset.horizontal };
-    } else if (position === 'bottomright') {
+    } else {
+      // if (position === 'bottomright')
       return { top: containerPos.height + offset.vertical, right: offset.horizontal };
     }
   }
@@ -96,7 +88,7 @@ export default class BubblePopupHelper extends React.PureComponent {
     return (
       <div
         className={classNames(this.props.className, 'bubble-popup-helper')}
-        ref={container => (this.container = container)}
+        ref={container => (this.container = container as HTMLElement)}
         onClick={this.handleClick}
         tabIndex={0}
         role="tooltip">
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/BubblePopupHelper-test.js.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/BubblePopupHelper-test.js.snap
index 3c3b06134cb..9234d2e1550 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/BubblePopupHelper-test.js.snap
+++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/BubblePopupHelper-test.js.snap
@@ -29,7 +29,6 @@ exports[`should correctly handle clicks on the button 2`] = `
   </button>
   <div>
     <BubblePopup
-      customClass=""
       popupPosition={
         Object {
           "right": 0,
@@ -47,7 +46,6 @@ exports[`should correctly handle clicks on the button 2`] = `
 
 exports[`should render an open popup on the left 1`] = `
 <BubblePopup
-  customClass=""
   popupPosition={
     Object {
       "left": 2,
@@ -83,7 +81,6 @@ exports[`should render an open popup on the right 1`] = `
   </button>
   <div>
     <BubblePopup
-      customClass=""
       popupPosition={
         Object {
           "right": 0,
@@ -116,7 +113,6 @@ exports[`should render the popup helper with a closed popup 1`] = `
 
 exports[`should render the popup with offset 1`] = `
 <BubblePopup
-  customClass=""
   popupPosition={
     Object {
       "right": 2,
diff --git a/server/sonar-web/src/main/js/components/icons-components/HelpIcon.js b/server/sonar-web/src/main/js/components/icons-components/HelpIcon.js
index 6a50ee17f88..a0aed559a65 100644
--- a/server/sonar-web/src/main/js/components/icons-components/HelpIcon.js
+++ b/server/sonar-web/src/main/js/components/icons-components/HelpIcon.js
@@ -21,16 +21,16 @@
 import React from 'react';
 
 /*::
-type Props = { className?: string, size?: number };
+type Props = { className?: string, fill?: string, size?: number };
 */
 
-export default function HelpIcon({ className, size = 16 } /*: Props */) {
+export default function HelpIcon({ className, fill = 'currentColor', size = 16 } /*: Props */) {
   /* eslint-disable max-len */
   return (
     <svg className={className} viewBox="0 0 16 16" width={size} height={size}>
       <g transform="matrix(0.0364583,0,0,0.0364583,1,-0.166667)">
         <path
-          fill="currentColor"
+          fill={fill}
           d="M224,344L224,296C224,293.667 223.25,291.75 221.75,290.25C220.25,288.75 218.333,288 216,288L168,288C165.667,288 163.75,288.75 162.25,290.25C160.75,291.75 160,293.667 160,296L160,344C160,346.333 160.75,348.25 162.25,349.75C163.75,351.25 165.667,352 168,352L216,352C218.333,352 220.25,351.25 221.75,349.75C223.25,348.25 224,346.333 224,344ZM288,176C288,161.333 283.375,147.75 274.125,135.25C264.875,122.75 253.333,113.083 239.5,106.25C225.667,99.417 211.5,96 197,96C156.5,96 125.583,113.75 104.25,149.25C101.75,153.25 102.417,156.75 106.25,159.75L139.25,184.75C140.417,185.75 142,186.25 144,186.25C146.667,186.25 148.75,185.25 150.25,183.25C159.083,171.917 166.25,164.25 171.75,160.25C177.417,156.25 184.583,154.25 193.25,154.25C201.25,154.25 208.375,156.417 214.625,160.75C220.875,165.083 224,170 224,175.5C224,181.833 222.333,186.917 219,190.75C215.667,194.583 210,198.333 202,202C191.5,206.667 181.875,213.875 173.125,223.625C164.375,233.375 160,243.833 160,255L160,264C160,266.333 160.75,268.25 162.25,269.75C163.75,271.25 165.667,272 168,272L216,272C218.333,272 220.25,271.25 221.75,269.75C223.25,268.25 224,266.333 224,264C224,260.833 225.792,256.708 229.375,251.625C232.958,246.542 237.5,242.417 243,239.25C248.333,236.25 252.417,233.875 255.25,232.125C258.083,230.375 261.917,227.458 266.75,223.375C271.583,219.292 275.292,215.292 277.875,211.375C280.458,207.458 282.792,202.417 284.875,196.25C286.958,190.083 288,183.333 288,176ZM384,224C384,258.833 375.417,290.958 358.25,320.375C341.083,349.792 317.792,373.083 288.375,390.25C258.958,407.417 226.833,416 192,416C157.167,416 125.042,407.417 95.625,390.25C66.208,373.083 42.917,349.792 25.75,320.375C8.583,290.958 0,258.833 0,224C0,189.167 8.583,157.042 25.75,127.625C42.917,98.208 66.208,74.917 95.625,57.75C125.042,40.583 157.167,32 192,32C226.833,32 258.958,40.583 288.375,57.75C317.792,74.917 341.083,98.208 358.25,127.625C375.417,157.042 384,189.167 384,224Z"
         />
       </g>