SONAR-9403 Display more information messages when adding new metrics to a custom graph

server/sonar-web/src/main/js/apps/projectActivity/components/forms/AddGraphMetric.js

@@ -19,8 +19,10 @@
  */
 // @flow
 import React from 'react';
+import classNames from 'classnames';
 import Modal from 'react-modal';
 import Select from 'react-select';
+import Tooltip from '../../../../components/controls/Tooltip';
 import { isDiffMetric } from '../../../../helpers/measures';
 import { translate, translateWithParameters } from '../../../../helpers/l10n';
 import type { Metric } from '../../types';
@@ -120,13 +122,14 @@ export default class AddGraphMetric extends React.PureComponent {
                 searchable={true}
                 value={this.state.selectedMetric}
               />
-              {metricType != null &&
-                <span className="note">
-                  {translateWithParameters(
-                    'project_activity.graphs.custom.type_x_message',
-                    translate('metric.type', metricType)
-                  )}
-                </span>}
+              <span className="alert alert-info">
+                {metricType != null
+                  ? translateWithParameters(
+                      'project_activity.graphs.custom.type_x_message',
+                      translate('metric.type', metricType)
+                    )
+                  : translate('project_activity.graphs.custom.add_metric_info')}
+              </span>
             </div>
           </div>
           <footer className="modal-foot">
@@ -145,11 +148,22 @@ export default class AddGraphMetric extends React.PureComponent {
   }
 
   render() {
+    if (this.props.selectedMetrics.length >= 3) {
+      // Use the class .disabled instead of the property to prevent a bug from
+      // rc-tooltip : https://github.com/react-component/tooltip/issues/18
+      return (
+        <Tooltip
+          placement="right"
+          overlay={translate('project_activity.graphs.custom.add_metric_info')}>
+          <button className={classNames('disabled', this.props.className)}>
+            {translate('project_activity.graphs.custom.add')}
+          </button>
+        </Tooltip>
+      );
+    }
+
     return (
-      <button
-        className={this.props.className}
-        onClick={this.openForm}
-        disabled={this.props.selectedMetrics.length >= 3}>
+      <button className={this.props.className} onClick={this.openForm}>
         {translate('project_activity.graphs.custom.add')}
         {this.state.open && this.renderModal()}
       </button>

server/sonar-web/src/main/less/init/forms.less

@@ -121,6 +121,7 @@ input[type=button] {
     box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   }
 
+  &.disabled,
   &:disabled,
   &:disabled:hover,
   &:disabled:active,
@@ -129,6 +130,7 @@ input[type=button] {
     border-color: #ddd;
     background: #ebebeb;
     cursor: not-allowed;
+    box-shadow: none;
   }
 }
 

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -1291,6 +1291,7 @@ project_activity.graphs.duplications=Duplications
 project_activity.graphs.custom=Custom
 project_activity.graphs.custom.add=Add metric
 project_activity.graphs.custom.add_metric=Add a metric
+project_activity.graphs.custom.add_metric_info=Only 3 metrics of the same type can be displayed on the graph.
 project_activity.graphs.custom.no_history=There is no historical data to show, please add more metrics to your graph.
 project_activity.graphs.custom.search=Search for a metric by name
 project_activity.graphs.custom.type_x_message=Only "{0}" metrics are available with your current selection.