From a1b9bc1ced0bb2dd67e60583254f836cb477ed42 Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Thu, 31 Aug 2017 12:03:24 +0200 Subject: SONAR-9375 Infinite loading of a project on the projects page --- .../src/main/js/app/styles/boxed-group.css | 75 ---------------------- .../apps/projects/components/ProjectCardLeak.tsx | 56 ++++++---------- .../components/ProjectCardLeakMeasures.tsx | 6 +- .../projects/components/ProjectCardOverall.tsx | 22 ++----- .../components/ProjectCardOverallMeasures.tsx | 2 +- .../components/__tests__/ProjectCardLeak-test.tsx | 9 --- .../__tests__/ProjectCardOverall-test.tsx | 13 ---- .../src/main/js/components/measure/Measure.tsx | 2 +- .../components/measure/__tests__/Measure-test.tsx | 5 ++ .../__tests__/__snapshots__/Measure-test.tsx.snap | 6 ++ .../sonar-web/src/main/js/components/ui/Rating.tsx | 5 +- .../main/js/components/ui/__tests__/Rating-test.js | 32 --------- .../js/components/ui/__tests__/Rating-test.tsx | 34 ++++++++++ .../__tests__/__snapshots__/Rating-test.tsx.snap | 23 +++++++ 14 files changed, 98 insertions(+), 192 deletions(-) delete mode 100644 server/sonar-web/src/main/js/components/ui/__tests__/Rating-test.js create mode 100644 server/sonar-web/src/main/js/components/ui/__tests__/Rating-test.tsx create mode 100644 server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Rating-test.tsx.snap (limited to 'server/sonar-web/src/main/js') diff --git a/server/sonar-web/src/main/js/app/styles/boxed-group.css b/server/sonar-web/src/main/js/app/styles/boxed-group.css index 56c69e066ec..14c5f9753b2 100644 --- a/server/sonar-web/src/main/js/app/styles/boxed-group.css +++ b/server/sonar-web/src/main/js/app/styles/boxed-group.css @@ -59,78 +59,3 @@ margin-right: -20px; padding: 8px 20px; } - -.boxed-group-loading { - position: relative; - transition: border-color 0.25s; -} - -.boxed-group-loading:before, -.boxed-group-loading:after { - position: absolute; - z-index: 1; - border: 2px solid transparent; - box-sizing: border-box; - content: ''; -} - -.boxed-group-loading:before { - width: 100%; - height: 100%; - top: 0; - left: 0; - border-top-color: #4b9fd5; - border-right-color: #4b9fd5; - animation: 3s top-left-border 0s infinite; -} - -.boxed-group-loading:after { - width: 0; - height: 0; - bottom: 0; - right: 0; - border-bottom-color: #4b9fd5; - border-left-color: #4b9fd5; - animation: 3s border-bottom-border 0s infinite; -} - -@keyframes top-left-border { - 0% { - width: 0; - height: 0; - } - - 25% { - width: 100%; - height: 0; - } - - 50%, - 100% { - width: 100%; - height: 100%; - } -} - -@keyframes border-bottom-border { - 0%, - 50% { - width: 0; - height: 0; - border-width: 0; - } - - 51% { - border-width: 2px; - } - - 75% { - width: 100%; - height: 0; - } - - 100% { - width: 100%; - height: 100%; - } -} diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeak.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeak.tsx index f0e8fca7d54..89e6dd61c78 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeak.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeak.tsx @@ -18,7 +18,6 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import * as classNames from 'classnames'; import { Link } from 'react-router'; import DateFromNow from '../../../components/intl/DateFromNow'; import DateTimeFormatter from '../../../components/intl/DateTimeFormatter'; @@ -39,22 +38,11 @@ interface Props { export default function ProjectCardLeak({ organization, project }: Props) { const { measures } = project; - const isProjectAnalyzed = project.analysisDate != null; const isPrivate = project.visibility === 'private'; - const hasLeakPeriodStart = project.leakPeriodDate != undefined; const hasTags = project.tags.length > 0; - // check for particular measures because only some measures can be loaded - // if coming from visualizations tab - const areProjectMeasuresLoaded = measures != undefined && measures['new_bugs']; - - const displayQualityGate = areProjectMeasuresLoaded && isProjectAnalyzed; - const className = classNames('boxed-group', 'project-card', { - 'boxed-group-loading': isProjectAnalyzed && hasLeakPeriodStart && !areProjectMeasuresLoaded - }); - return ( -
+
{project.isFavorite != null && ( } {project.name} - {displayQualityGate && } + {project.analysisDate && }
{isPrivate && } {hasTags && }
- {isProjectAnalyzed && - hasLeakPeriodStart && ( + {project.analysisDate && + project.leakPeriodDate && (
- {hasLeakPeriodStart && ( - - {fromNow => ( - - {translateWithParameters('projects.leak_period_x', fromNow)} - - )} - - )} - {isProjectAnalyzed && ( - - {formattedDate => ( - - {translateWithParameters('projects.last_analysis_on_x', formattedDate)} - - )} - - )} + + {fromNow => ( + + {translateWithParameters('projects.leak_period_x', fromNow)} + + )} + + + {formattedDate => ( + {translateWithParameters('projects.last_analysis_on_x', formattedDate)} + )} +
)}
- {isProjectAnalyzed && hasLeakPeriodStart ? ( + {project.analysisDate && project.leakPeriodDate ? (
- {areProjectMeasuresLoaded && } +
) : (
- {isProjectAnalyzed ? ( + {project.analysisDate ? ( translate('projects.no_leak_period') ) : ( translate('projects.not_analyzed') diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.tsx index 353a0d6ccc9..570ddbe075f 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.tsx @@ -26,14 +26,10 @@ import VulnerabilityIcon from '../../../components/icons-components/Vulnerabilit import { translate } from '../../../helpers/l10n'; interface Props { - measures?: { [key: string]: string }; + measures: { [key: string]: string }; } export default function ProjectCardLeakMeasures({ measures }: Props) { - if (measures == undefined) { - return null; - } - return (
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverall.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverall.tsx index 75f0f8375d0..135f71c3e35 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverall.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverall.tsx @@ -18,7 +18,6 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import * as classNames from 'classnames'; import { Link } from 'react-router'; import DateTimeFormatter from '../../../components/intl/DateTimeFormatter'; import ProjectCardQualityGate from './ProjectCardQualityGate'; @@ -38,24 +37,11 @@ interface Props { export default function ProjectCardOverall({ organization, project }: Props) { const { measures } = project; - const isProjectAnalyzed = project.analysisDate != undefined; const isPrivate = project.visibility === 'private'; const hasTags = project.tags.length > 0; - // check for particular measures because only some measures can be loaded - // if coming from visualizations tab - const areProjectMeasuresLoaded = - measures != undefined && - measures['reliability_rating'] != undefined && - measures['sqale_rating'] != undefined; - - const displayQualityGate = areProjectMeasuresLoaded && isProjectAnalyzed; - const className = classNames('boxed-group', 'project-card', { - 'boxed-group-loading': isProjectAnalyzed && !areProjectMeasuresLoaded - }); - return ( -
+
{project.isFavorite != undefined && ( } {project.name} - {displayQualityGate && } + {project.analysisDate && }
{isPrivate && } {hasTags && } @@ -86,9 +72,9 @@ export default function ProjectCardOverall({ organization, project }: Props) { )}
- {isProjectAnalyzed ? ( + {project.analysisDate ? (
- {areProjectMeasuresLoaded && } + {}
) : (
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverallMeasures.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverallMeasures.tsx index 15c2565cc31..29b76358034 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverallMeasures.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverallMeasures.tsx @@ -27,7 +27,7 @@ import SizeRating from '../../../components/ui/SizeRating'; import { translate } from '../../../helpers/l10n'; interface Props { - measures?: { [key: string]: string }; + measures: { [key: string]: string | undefined }; } export default function ProjectCardOverallMeasures({ measures }: Props) { diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardLeak-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardLeak-test.tsx index 8a9a75cf1cd..12899cfb047 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardLeak-test.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardLeak-test.tsx @@ -52,15 +52,6 @@ it('should not display analysis date or leak start date', () => { expect(card.find('.project-card-dates').exists()).toBeFalsy(); }); -it('should display loading', () => { - const measures = { alert_status: 'OK', reliability_rating: '1.0', sqale_rating: '1.0' }; - expect( - shallow() - .find('.boxed-group') - .hasClass('boxed-group-loading') - ).toBeTruthy(); -}); - it('should display tags', () => { const project = { ...PROJECT, tags: ['foo', 'bar'] }; expect( diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardOverall-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardOverall-test.tsx index 7a3e3bb3baf..7410fcb3711 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardOverall-test.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardOverall-test.tsx @@ -51,19 +51,6 @@ it('should display analysis date (and not leak period) when defined', () => { ).toBeFalsy(); }); -it('should display loading', () => { - expect( - shallow() - .find('.boxed-group') - .hasClass('boxed-group-loading') - ).toBeTruthy(); - expect( - shallow() - .find('.boxed-group') - .hasClass('boxed-group-loading') - ).toBeTruthy(); -}); - it('should not display the quality gate', () => { const project = { ...PROJECT, analysisDate: undefined }; expect( diff --git a/server/sonar-web/src/main/js/components/measure/Measure.tsx b/server/sonar-web/src/main/js/components/measure/Measure.tsx index 35177b49b95..d345aff6cb5 100644 --- a/server/sonar-web/src/main/js/components/measure/Measure.tsx +++ b/server/sonar-web/src/main/js/components/measure/Measure.tsx @@ -35,7 +35,7 @@ export default function Measure({ className, decimals, measure }: Props) { const value = isDiffMetric(metric.key) ? measure.leak : measure.value; if (value == undefined) { - return null; + return {'–'}; } if (metric.type === 'LEVEL') { diff --git a/server/sonar-web/src/main/js/components/measure/__tests__/Measure-test.tsx b/server/sonar-web/src/main/js/components/measure/__tests__/Measure-test.tsx index 8929a8bc1c5..5eb0a6efa3e 100644 --- a/server/sonar-web/src/main/js/components/measure/__tests__/Measure-test.tsx +++ b/server/sonar-web/src/main/js/components/measure/__tests__/Measure-test.tsx @@ -63,3 +63,8 @@ it('renders unknown RATING', () => { }; expect(shallow()).toMatchSnapshot(); }); + +it('renders undefined measure', () => { + const measure = { metric: { key: 'foo', name: 'Foo', type: 'PERCENT' } }; + expect(shallow()).toMatchSnapshot(); +}); diff --git a/server/sonar-web/src/main/js/components/measure/__tests__/__snapshots__/Measure-test.tsx.snap b/server/sonar-web/src/main/js/components/measure/__tests__/__snapshots__/Measure-test.tsx.snap index 2988d9210e8..c9ca3a03a7a 100644 --- a/server/sonar-web/src/main/js/components/measure/__tests__/__snapshots__/Measure-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/measure/__tests__/__snapshots__/Measure-test.tsx.snap @@ -31,6 +31,12 @@ exports[`renders trivial measure 1`] = ` `; +exports[`renders undefined measure 1`] = ` + + – + +`; + exports[`renders unknown RATING 1`] = ` {'–'}; + } const formatted = formatMeasure(value, 'RATING'); return ( { - const rating = shallow(); - expect(rating.is('.rating-B')).toBe(true); -}); - -it('should render with string value', () => { - const rating = shallow(); - expect(rating.is('.rating-B')).toBe(true); -}); diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/Rating-test.tsx b/server/sonar-web/src/main/js/components/ui/__tests__/Rating-test.tsx new file mode 100644 index 00000000000..05121774a65 --- /dev/null +++ b/server/sonar-web/src/main/js/components/ui/__tests__/Rating-test.tsx @@ -0,0 +1,34 @@ +/* + * 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. + */ +import * as React from 'react'; +import { shallow } from 'enzyme'; +import Rating from '../Rating'; + +it('renders numeric value', () => { + expect(shallow()).toMatchSnapshot(); +}); + +it('renders string value', () => { + expect(shallow()).toMatchSnapshot(); +}); + +it('renders undefined value', () => { + expect(shallow()).toMatchSnapshot(); +}); diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Rating-test.tsx.snap b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Rating-test.tsx.snap new file mode 100644 index 00000000000..94922c0bf43 --- /dev/null +++ b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Rating-test.tsx.snap @@ -0,0 +1,23 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders numeric value 1`] = ` + + B + +`; + +exports[`renders string value 1`] = ` + + B + +`; + +exports[`renders undefined value 1`] = ` + + – + +`; -- cgit v1.2.3