From a5c10797e35669c5372014f6a95c750c1f24372a Mon Sep 17 00:00:00 2001 From: =?utf8?q?Gr=C3=A9goire=20Aubert?= Date: Fri, 21 Jul 2017 14:16:38 +0200 Subject: [PATCH] Display tooltips on measures on top instead of bottom on the dashboard page --- .../overview/components/LeakPeriodLegend.js | 6 +- .../apps/overview/components/OverviewApp.js | 3 - .../main/js/apps/overview/events/Analysis.js | 29 ++++---- .../src/main/js/apps/overview/events/Event.js | 21 +++--- .../__snapshots__/Analysis-test.js.snap | 68 +++++++++---------- .../__snapshots__/Event-test.js.snap | 30 ++++---- .../main/js/apps/overview/main/CodeSmells.js | 12 ++-- .../src/main/js/apps/overview/main/enhance.js | 35 ++++++---- .../apps/overview/meta/MetaQualityProfiles.js | 34 ++++------ 9 files changed, 120 insertions(+), 118 deletions(-) diff --git a/server/sonar-web/src/main/js/apps/overview/components/LeakPeriodLegend.js b/server/sonar-web/src/main/js/apps/overview/components/LeakPeriodLegend.js index 4f3f98a9e5d..6d3f53657ef 100644 --- a/server/sonar-web/src/main/js/apps/overview/components/LeakPeriodLegend.js +++ b/server/sonar-web/src/main/js/apps/overview/components/LeakPeriodLegend.js @@ -81,11 +81,13 @@ export default function LeakPeriodLegend({ period }: { period: Period }) { : translateWithParameters('overview.started_on_x', momentDate.format('LL')); return ( - +
{translateWithParameters('overview.leak_period_x', leakPeriodLabel)}
- {note} + + {note} +
); diff --git a/server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js b/server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js index bbde489216a..ad498dbdaf5 100644 --- a/server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js +++ b/server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js @@ -32,7 +32,6 @@ import { getMeasuresAndMeta } from '../../../api/measures'; import { getAllTimeMachineData } from '../../../api/time-machine'; import { enhanceMeasuresWithMetrics } from '../../../helpers/measures'; import { getLeakPeriod } from '../../../helpers/periods'; -import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin'; import { getCustomGraph, getGraph } from '../../../helpers/storage'; import { METRICS, HISTORY_METRICS_LIST } from '../utils'; import { DEFAULT_GRAPH, getDisplayedHistoryMetrics } from '../../projectActivity/utils'; @@ -148,14 +147,12 @@ export default class OverviewApp extends React.PureComponent {
-
-
diff --git a/server/sonar-web/src/main/js/apps/overview/events/Analysis.js b/server/sonar-web/src/main/js/apps/overview/events/Analysis.js index 592c91de41b..ba7fc7715d1 100644 --- a/server/sonar-web/src/main/js/apps/overview/events/Analysis.js +++ b/server/sonar-web/src/main/js/apps/overview/events/Analysis.js @@ -22,7 +22,6 @@ import React from 'react'; import { sortBy } from 'lodash'; import Event from './Event'; import FormattedDate from '../../../components/ui/FormattedDate'; -import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin'; import { translate } from '../../../helpers/l10n'; import type { Analysis as AnalysisType, Event as EventType } from '../../projectActivity/types'; @@ -37,20 +36,20 @@ export default function Analysis(props: { analysis: AnalysisType }) { ); return ( - -
  • -
    - - - -
    +
  • +
    + + + +
    - {sortedEvents.length > 0 - ?
    - {sortedEvents.map(event => )} -
    - : {translate('project_activity.project_analyzed')}} -
    • -     + {sortedEvents.length > 0 + ?
    + {sortedEvents.map(event => )} +
    + : + {translate('project_activity.project_analyzed')} + } + ); } diff --git a/server/sonar-web/src/main/js/apps/overview/events/Event.js b/server/sonar-web/src/main/js/apps/overview/events/Event.js index 1d377ecd253..13dd7b0d23f 100644 --- a/server/sonar-web/src/main/js/apps/overview/events/Event.js +++ b/server/sonar-web/src/main/js/apps/overview/events/Event.js @@ -19,7 +19,7 @@ */ // @flow import React from 'react'; -import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin'; +import Tooltip from '../../../components/controls/Tooltip'; import type { Event as EventType } from '../../projectActivity/types'; import { translate } from '../../../helpers/l10n'; @@ -27,18 +27,21 @@ export default function Event(props: { event: EventType }) { const { event } = props; if (event.category === 'VERSION') { - return {props.event.name}; + return ( + + {props.event.name} + + ); } return (
    - - - {translate('event.category', event.category)}: - {' '} - {event.name} - - + {translate('event.category', event.category)}:{' '} + + + {event.name} + +
    ); } diff --git a/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Analysis-test.js.snap b/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Analysis-test.js.snap index d7a40d0bf71..e37d21f47d9 100644 --- a/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Analysis-test.js.snap +++ b/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Analysis-test.js.snap @@ -1,42 +1,40 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`should sort the events with version first 1`] = ` - -
  • +
    -
    - - - -
    -
    - + - +
    +
    + -
    -
    • -     + } + /> + +
    + `; diff --git a/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Event-test.js.snap b/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Event-test.js.snap index b04b1393fc8..6ff6f67c30d 100644 --- a/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Event-test.js.snap +++ b/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Event-test.js.snap @@ -12,21 +12,19 @@ exports[`should render an event correctly 1`] = `
    - - - - event.category.OTHER - : - - - - test - - - + + event.category.OTHER + : + + + + + test + +
    `; diff --git a/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js b/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js index 6ae5012f443..2c5a5e9289c 100644 --- a/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js +++ b/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js @@ -20,6 +20,7 @@ import moment from 'moment'; import React from 'react'; import { Link } from 'react-router'; +import Tooltip from '../../../components/controls/Tooltip'; import enhance from './enhance'; import { getMetricName } from '../helpers/metrics'; import { translate, translateWithParameters } from '../../../helpers/l10n'; @@ -46,11 +47,11 @@ class CodeSmells extends React.PureComponent { const tooltip = translateWithParameters('widget.as_calculated_on_x', formattedAnalysisDate); return ( - - + + {formatMeasure(value, 'SHORT_WORK_DUR')} - - + +     ); } @@ -114,7 +115,6 @@ class CodeSmells extends React.PureComponent { return (
    -
    @@ -123,7 +123,7 @@ class CodeSmells extends React.PureComponent {
    {getMetricName('effort')} - {this.props.renderHistoryLink('sqale_rating')} + {this.props.renderHistoryLink('sqale_index')}
    diff --git a/server/sonar-web/src/main/js/apps/overview/main/enhance.js b/server/sonar-web/src/main/js/apps/overview/main/enhance.js index 2bd0e72530b..7c465b46c27 100644 --- a/server/sonar-web/src/main/js/apps/overview/main/enhance.js +++ b/server/sonar-web/src/main/js/apps/overview/main/enhance.js @@ -24,6 +24,7 @@ import { DrilldownLink } from '../../../components/shared/drilldown-link'; import HistoryIcon from '../../../components/icons-components/HistoryIcon'; import Rating from './../../../components/ui/Rating'; import Timeline from '../components/Timeline'; +import Tooltip from '../../../components/controls/Tooltip'; import { formatMeasure, formatMeasureVariation, @@ -62,7 +63,9 @@ export default function enhance(ComposedComponent) { return (
    - {label} + + {label} +
    ); @@ -99,9 +102,10 @@ export default function enhance(ComposedComponent) { const { measures, leakPeriod } = this.props; const measure = measures.find(measure => measure.metric.key === metricKey); const periodValue = getPeriodValue(measure, leakPeriod.index); - const formatted = periodValue != null - ? formatMeasureVariation(periodValue, getShortType(measure.metric.type)) - : NO_VALUE; + const formatted = + periodValue != null + ? formatMeasureVariation(periodValue, getShortType(measure.metric.type)) + : NO_VALUE; return (
    @@ -123,11 +127,16 @@ export default function enhance(ComposedComponent) { const value = this.getValue(measure); const title = getRatingTooltip(metricKey, value); return ( -
    - - - -
    + +
    + + + +
    +     ); }; renderIssues = (metric, type) => { @@ -144,11 +153,11 @@ export default function enhance(ComposedComponent) { const formattedAnalysisDate = moment(component.analysisDate).format('LLL'); const tooltip = translateWithParameters('widget.as_calculated_on_x', formattedAnalysisDate); return ( - - + + {formatMeasure(value, 'SHORT_INT')} - - + + ); }; renderHistoryLink = metricKey => { diff --git a/server/sonar-web/src/main/js/apps/overview/meta/MetaQualityProfiles.js b/server/sonar-web/src/main/js/apps/overview/meta/MetaQualityProfiles.js index a6e95459670..d5762751007 100644 --- a/server/sonar-web/src/main/js/apps/overview/meta/MetaQualityProfiles.js +++ b/server/sonar-web/src/main/js/apps/overview/meta/MetaQualityProfiles.js @@ -21,7 +21,7 @@ import React from 'react'; import { connect } from 'react-redux'; import { Link } from 'react-router'; -import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin'; +import Tooltip from '../../../components/controls/Tooltip'; import { translate, translateWithParameters } from '../../../helpers/l10n'; import { getQualityProfileUrl } from '../../../helpers/urls'; import { searchRules } from '../../../api/rules'; @@ -105,13 +105,11 @@ class MetaQualityProfiles extends React.PureComponent { if (count > 0) { const tooltip = translateWithParameters('overview.deprecated_profile', count); return ( -
  • - {inner} -
    • + +
  • + {inner} +
    • +     ); } @@ -126,17 +124,15 @@ class MetaQualityProfiles extends React.PureComponent { const { profiles } = this.props; return ( - -
    -

    - {translate('overview.quality_profiles')} -

    - -
      - {profiles.map(profile => this.renderProfile(profile))} -
    -
    -     +
    +

    + {translate('overview.quality_profiles')} +

    + +
      + {profiles.map(profile => this.renderProfile(profile))} +
    +
    ); } } -- 2.39.5