From c4c9cfcf72eefef3170b51b7eadb251857edb6e6 Mon Sep 17 00:00:00 2001 From: Wouter Admiraal Date: Thu, 19 Dec 2019 10:38:12 +0100 Subject: [PATCH] SONAR-12632 Extract measure and history buttons from portfolio to shared components --- .../main/js/apps/portfolio/components/App.tsx | 6 +- .../apps/portfolio/components/MetricBox.tsx | 8 +- .../__tests__/__snapshots__/App-test.tsx.snap | 4 +- .../HistoryButtonLink-test.tsx.snap | 26 ----- .../__snapshots__/MetricBox-test.tsx.snap | 16 +-- .../src/main/js/apps/portfolio/styles.css | 10 -- .../common/ActivityLink.css} | 12 +- .../js/components/common/ActivityLink.tsx | 52 +++++++++ .../common/MeasuresLink.css} | 20 +--- .../common/MeasuresLink.tsx} | 16 ++- .../common/__tests__/ActivityLink-test.tsx | 35 ++++++ .../common/__tests__/MeasuresLink-test.tsx} | 8 +- .../__snapshots__/ActivityLink-test.tsx.snap | 103 ++++++++++++++++++ .../__snapshots__/MeasuresLink-test.tsx.snap} | 27 +++++ server/sonar-web/src/main/js/helpers/urls.ts | 5 +- 15 files changed, 264 insertions(+), 84 deletions(-) delete mode 100644 server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/HistoryButtonLink-test.tsx.snap rename server/sonar-web/src/main/js/{apps/portfolio/components/__tests__/HistoryButtonLink-test.tsx => components/common/ActivityLink.css} (77%) create mode 100644 server/sonar-web/src/main/js/components/common/ActivityLink.tsx rename server/sonar-web/src/main/js/{apps/portfolio/components/HistoryButtonLink.tsx => components/common/MeasuresLink.css} (58%) rename server/sonar-web/src/main/js/{apps/portfolio/components/MeasuresButtonLink.tsx => components/common/MeasuresLink.tsx} (69%) create mode 100644 server/sonar-web/src/main/js/components/common/__tests__/ActivityLink-test.tsx rename server/sonar-web/src/main/js/{apps/portfolio/components/__tests__/MeasuresButtonLink-test.tsx => components/common/__tests__/MeasuresLink-test.tsx} (74%) create mode 100644 server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ActivityLink-test.tsx.snap rename server/sonar-web/src/main/js/{apps/portfolio/components/__tests__/__snapshots__/MeasuresButtonLink-test.tsx.snap => components/common/__tests__/__snapshots__/MeasuresLink-test.tsx.snap} (62%) diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/App.tsx b/server/sonar-web/src/main/js/apps/portfolio/components/App.tsx index 0565f428924..3fb63f2f927 100644 --- a/server/sonar-web/src/main/js/apps/portfolio/components/App.tsx +++ b/server/sonar-web/src/main/js/apps/portfolio/components/App.tsx @@ -22,13 +22,13 @@ import { connect } from 'react-redux'; import { translate } from 'sonar-ui-common/helpers/l10n'; import { getChildren } from '../../../api/components'; import { getMeasures } from '../../../api/measures'; +import MeasuresLink from '../../../components/common/MeasuresLink'; import Measure from '../../../components/measure/Measure'; import { fetchMetrics } from '../../../store/rootActions'; import { getMetrics, Store } from '../../../store/rootReducer'; import '../styles.css'; import { SubComponent } from '../types'; import { convertMeasures, PORTFOLIO_METRICS, SUB_COMPONENTS_METRICS } from '../utils'; -import MeasuresButtonLink from './MeasuresButtonLink'; import MetricBox from './MetricBox'; import Report from './Report'; import WorstProjects from './WorstProjects'; @@ -183,7 +183,7 @@ export class App extends React.PureComponent {
- +
@@ -198,7 +198,7 @@ export class App extends React.PureComponent {
-
- +
- +
diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/App-test.tsx.snap b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/App-test.tsx.snap index 898a5bf3a71..97f174df1ea 100644 --- a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/App-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/App-test.tsx.snap @@ -101,7 +101,7 @@ exports[`renders 1`] = ` className="portfolio-breakdown-box-link" >
- @@ -129,7 +129,7 @@ exports[`renders 1`] = ` className="portfolio-breakdown-box-link" >
- - - - portfolio.activity_link - - -`; diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/MetricBox-test.tsx.snap b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/MetricBox-test.tsx.snap index 8da87d3a6ca..58b528b0d45 100644 --- a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/MetricBox-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/MetricBox-test.tsx.snap @@ -42,13 +42,13 @@ exports[`should render correctly 1`] = ` className="portfolio-box-links" >
-
- @@ -122,13 +122,13 @@ exports[`should render correctly for releasability 1`] = ` className="portfolio-box-links" >
-
- @@ -202,13 +202,13 @@ exports[`should render correctly for releasability 2`] = ` className="portfolio-box-links" >
-
- @@ -246,13 +246,13 @@ exports[`should render correctly when no effort 1`] = ` className="portfolio-box-links" >
-
- diff --git a/server/sonar-web/src/main/js/apps/portfolio/styles.css b/server/sonar-web/src/main/js/apps/portfolio/styles.css index 9519e0de151..afb3f2df0a8 100644 --- a/server/sonar-web/src/main/js/apps/portfolio/styles.css +++ b/server/sonar-web/src/main/js/apps/portfolio/styles.css @@ -145,21 +145,11 @@ border-right: 1px solid var(--barBorderColor); } -.portfolio-box-links a, -.portfolio-breakdown-box-link a { - border: none; -} - .portfolio-box-links svg, .portfolio-breakdown-box-link svg { vertical-align: middle; } -.portfolio-box-links a > span, -.portfolio-breakdown-box-link a > span { - border-bottom: 1px solid #cae3f2; -} - .portfolio-breakdown { display: flex; } diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/HistoryButtonLink-test.tsx b/server/sonar-web/src/main/js/components/common/ActivityLink.css similarity index 77% rename from server/sonar-web/src/main/js/apps/portfolio/components/__tests__/HistoryButtonLink-test.tsx rename to server/sonar-web/src/main/js/components/common/ActivityLink.css index 185d2bdc3f4..dbf4eca8a87 100644 --- a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/HistoryButtonLink-test.tsx +++ b/server/sonar-web/src/main/js/components/common/ActivityLink.css @@ -17,10 +17,10 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { shallow } from 'enzyme'; -import * as React from 'react'; -import HistoryButtonLink from '../HistoryButtonLink'; +a.activity-link { + border: none; +} -it('renders', () => { - expect(shallow()).toMatchSnapshot(); -}); +.activity-link > span { + border-bottom: 1px solid var(--lightBlue); +} diff --git a/server/sonar-web/src/main/js/components/common/ActivityLink.tsx b/server/sonar-web/src/main/js/components/common/ActivityLink.tsx new file mode 100644 index 00000000000..07dd3ebb003 --- /dev/null +++ b/server/sonar-web/src/main/js/components/common/ActivityLink.tsx @@ -0,0 +1,52 @@ +/* + * SonarQube + * Copyright (C) 2009-2020 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 { Link } from 'react-router'; +import HistoryIcon from 'sonar-ui-common/components/icons/HistoryIcon'; +import { translate } from 'sonar-ui-common/helpers/l10n'; +import { getActivityUrl, getMeasureHistoryUrl } from '../../helpers/urls'; +import { BranchLike } from '../../types/branch-like'; +import { GraphType } from '../../types/project-activity'; +import { isCustomGraph } from '../activity-graph/utils'; +import './ActivityLink.css'; + +export interface ActivityLinkProps { + branchLike?: BranchLike; + component: string; + graph?: GraphType; + label?: string; + metric?: string; +} + +export default function ActivityLink(props: ActivityLinkProps) { + const { branchLike, component, graph, label, metric } = props; + return ( + + + {label || translate('portfolio.activity_link')} + + ); +} diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/HistoryButtonLink.tsx b/server/sonar-web/src/main/js/components/common/MeasuresLink.css similarity index 58% rename from server/sonar-web/src/main/js/apps/portfolio/components/HistoryButtonLink.tsx rename to server/sonar-web/src/main/js/components/common/MeasuresLink.css index 07b485be51b..edb364ba58e 100644 --- a/server/sonar-web/src/main/js/apps/portfolio/components/HistoryButtonLink.tsx +++ b/server/sonar-web/src/main/js/components/common/MeasuresLink.css @@ -17,22 +17,10 @@ * 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 { Link } from 'react-router'; -import HistoryIcon from 'sonar-ui-common/components/icons/HistoryIcon'; -import { translate } from 'sonar-ui-common/helpers/l10n'; -import { getMeasureHistoryUrl } from '../../../helpers/urls'; - -interface Props { - component: string; - metric: string; +.measures-link { + border: none; } -export default function HistoryButtonLink({ component, metric }: Props) { - return ( - - - {translate('portfolio.activity_link')} - - ); +.measures-link > span { + border-bottom: 1px solid var(--lightBlue); } diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/MeasuresButtonLink.tsx b/server/sonar-web/src/main/js/components/common/MeasuresLink.tsx similarity index 69% rename from server/sonar-web/src/main/js/apps/portfolio/components/MeasuresButtonLink.tsx rename to server/sonar-web/src/main/js/components/common/MeasuresLink.tsx index cd875e0d5b4..c1b8e14601a 100644 --- a/server/sonar-web/src/main/js/apps/portfolio/components/MeasuresButtonLink.tsx +++ b/server/sonar-web/src/main/js/components/common/MeasuresLink.tsx @@ -17,21 +17,29 @@ * 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 classNames from 'classnames'; import * as React from 'react'; import { Link } from 'react-router'; import MeasuresIcon from 'sonar-ui-common/components/icons/MeasuresIcon'; import { translate } from 'sonar-ui-common/helpers/l10n'; -import { getComponentDrilldownUrl } from '../../../helpers/urls'; +import { getComponentDrilldownUrl } from '../../helpers/urls'; +import { BranchLike } from '../../types/branch-like'; +import './MeasuresLink.css'; -interface Props { +export interface MeasuresLinkProps { + branchLike?: BranchLike; + className?: string; component: string; label?: string; metric: string; } -export default function MeasuresButtonLink({ component, label, metric }: Props) { +export default function MeasuresLink(props: MeasuresLinkProps) { + const { branchLike, className, component, label, metric } = props; return ( - + {label || translate('portfolio.measures_link')} diff --git a/server/sonar-web/src/main/js/components/common/__tests__/ActivityLink-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/ActivityLink-test.tsx new file mode 100644 index 00000000000..063f04b2842 --- /dev/null +++ b/server/sonar-web/src/main/js/components/common/__tests__/ActivityLink-test.tsx @@ -0,0 +1,35 @@ +/* + * SonarQube + * Copyright (C) 2009-2020 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 { shallow } from 'enzyme'; +import * as React from 'react'; +import { mockBranch } from '../../../helpers/mocks/branch-like'; +import { GraphType } from '../../../types/project-activity'; +import ActivityLink, { ActivityLinkProps } from '../ActivityLink'; + +it('renders correctly', () => { + expect(shallowRender()).toMatchSnapshot(); + expect(shallowRender({ label: 'Foo', branchLike: mockBranch() })).toMatchSnapshot(); + expect(shallowRender({ graph: GraphType.coverage })).toMatchSnapshot(); + expect(shallowRender({ graph: GraphType.custom, metric: 'new_bugs,bugs' })).toMatchSnapshot(); +}); + +function shallowRender(props: Partial = {}) { + return shallow(); +} diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/MeasuresButtonLink-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/MeasuresLink-test.tsx similarity index 74% rename from server/sonar-web/src/main/js/apps/portfolio/components/__tests__/MeasuresButtonLink-test.tsx rename to server/sonar-web/src/main/js/components/common/__tests__/MeasuresLink-test.tsx index 8e2552a9cc6..f4b7daaefc7 100644 --- a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/MeasuresButtonLink-test.tsx +++ b/server/sonar-web/src/main/js/components/common/__tests__/MeasuresLink-test.tsx @@ -19,13 +19,15 @@ */ import { shallow } from 'enzyme'; import * as React from 'react'; -import MeasuresButtonLink from '../MeasuresButtonLink'; +import { mockMainBranch } from '../../../helpers/mocks/branch-like'; +import MeasuresLink, { MeasuresLinkProps } from '../MeasuresLink'; it('renders', () => { expect(shallowRender()).toMatchSnapshot(); expect(shallowRender({ label: 'Foo' })).toMatchSnapshot(); + expect(shallowRender({ branchLike: mockMainBranch() })).toMatchSnapshot(); }); -function shallowRender(props = {}) { - return shallow(); +function shallowRender(props: Partial = {}) { + return shallow(); } diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ActivityLink-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ActivityLink-test.tsx.snap new file mode 100644 index 00000000000..e61f19c53df --- /dev/null +++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/ActivityLink-test.tsx.snap @@ -0,0 +1,103 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` + + + + portfolio.activity_link + + +`; + +exports[`renders correctly 2`] = ` + + + + Foo + + +`; + +exports[`renders correctly 3`] = ` + + + + portfolio.activity_link + + +`; + +exports[`renders correctly 4`] = ` + + + + portfolio.activity_link + + +`; diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/MeasuresButtonLink-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/MeasuresLink-test.tsx.snap similarity index 62% rename from server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/MeasuresButtonLink-test.tsx.snap rename to server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/MeasuresLink-test.tsx.snap index 4c62daa9f2d..e874481330c 100644 --- a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/MeasuresButtonLink-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/MeasuresLink-test.tsx.snap @@ -2,6 +2,7 @@ exports[`renders 1`] = ` `; + +exports[`renders 3`] = ` + + + + portfolio.measures_link + + +`; diff --git a/server/sonar-web/src/main/js/helpers/urls.ts b/server/sonar-web/src/main/js/helpers/urls.ts index 5daea42ff6e..21cac8461c2 100644 --- a/server/sonar-web/src/main/js/helpers/urls.ts +++ b/server/sonar-web/src/main/js/helpers/urls.ts @@ -20,6 +20,7 @@ import { getBaseUrl, Location } from 'sonar-ui-common/helpers/urls'; import { getProfilePath } from '../apps/quality-profiles/utils'; import { BranchLike } from '../types/branch-like'; +import { GraphType } from '../types/project-activity'; import { getBranchLikeQuery, isBranch, isMainBranch, isPullRequest } from './branch-like'; type Query = Location['query']; @@ -118,10 +119,10 @@ export function getMeasureTreemapUrl(componentKey: string, metric: string) { return getComponentDrilldownUrl({ componentKey, metric, treemapView: true }); } -export function getActivityUrl(component: string, branchLike?: BranchLike) { +export function getActivityUrl(component: string, branchLike?: BranchLike, graph?: GraphType) { return { pathname: '/project/activity', - query: { id: component, ...getBranchLikeQuery(branchLike) } + query: { id: component, graph, ...getBranchLikeQuery(branchLike) } }; } -- 2.39.5