From 43c94130123ad78f7629423fb69a285af0545052 Mon Sep 17 00:00:00 2001 From: Revanshu Paliwal Date: Thu, 22 Jun 2023 15:58:49 +0200 Subject: [PATCH] SONAR-19604 Layout correction for miui activity page --- .../src/components/DeferredSpinner.tsx | 5 +- .../js/app/components/GlobalContainer.tsx | 1 + .../src/main/js/apps/overview/styles.css | 7 +- .../ProjectActivityAnalysesList.tsx | 11 +- .../components/ProjectActivityAppRenderer.tsx | 96 ++++++----- .../components/ProjectActivityGraphs.tsx | 4 +- .../__tests__/ProjectActivityApp-it.tsx | 1 - .../components/projectActivity.css | 150 ------------------ .../activity-graph/DataTableModal.tsx | 82 +++++++--- .../activity-graph/GraphHistory.tsx | 23 ++- .../activity-graph/GraphsHeader.tsx | 1 - .../activity-graph/GraphsHistory.tsx | 34 ++-- .../activity-graph/GraphsLegendCustom.tsx | 2 +- .../activity-graph/GraphsLegendStatic.tsx | 2 +- .../activity-graph/GraphsTooltips.tsx | 6 +- .../activity-graph/GraphsTooltipsContent.tsx | 4 +- .../GraphsTooltipsContentCoverage.tsx | 10 +- .../GraphsTooltipsContentDuplication.tsx | 6 +- .../GraphsTooltipsContentEvents.tsx | 6 +- .../RichQualityGateEventInner.tsx | 2 +- .../__tests__/ActivityGraph-it.tsx | 2 +- .../js/components/activity-graph/styles.css | 65 -------- 22 files changed, 166 insertions(+), 354 deletions(-) delete mode 100644 server/sonar-web/src/main/js/components/activity-graph/styles.css diff --git a/server/sonar-web/design-system/src/components/DeferredSpinner.tsx b/server/sonar-web/design-system/src/components/DeferredSpinner.tsx index 09c432d6873..b5fcd1067f1 100644 --- a/server/sonar-web/design-system/src/components/DeferredSpinner.tsx +++ b/server/sonar-web/design-system/src/components/DeferredSpinner.tsx @@ -25,6 +25,7 @@ import { translate } from '../helpers/l10n'; import { themeColor } from '../helpers/theme'; interface Props { + ariaLabel?: string; children?: React.ReactNode; className?: string; customSpinner?: JSX.Element; @@ -77,12 +78,12 @@ export class DeferredSpinner extends React.PureComponent { render() { const { showSpinner } = this.state; - const { customSpinner, className, children, placeholder } = this.props; + const { customSpinner, className, children, placeholder, ariaLabel } = this.props; if (showSpinner) { if (customSpinner) { return customSpinner; } - return ; + return ; } if (children) { return children; diff --git a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx index 4a425746158..2a3d7ec742b 100644 --- a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx +++ b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx @@ -43,6 +43,7 @@ const TEMP_PAGELIST_WITH_NEW_BACKGROUND = [ '/security_hotspots', '/component_measures', '/project/issues', + '/project/activity', '/code', ]; diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css index 5c2e5194326..554983b0a0c 100644 --- a/server/sonar-web/src/main/js/apps/overview/styles.css +++ b/server/sonar-web/src/main/js/apps/overview/styles.css @@ -142,7 +142,7 @@ */ .overview-panel .activity-graph-legends { - justify-content: right; + justify-content: right !important; margin-top: -38px; } @@ -176,8 +176,3 @@ .overview-analysis-event + .overview-analysis-event { margin-top: 4px; } - -.activity-graph-container { - height: 300px; - padding-bottom: 0; -} diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.tsx index c88c67e0dbb..7d043a09ea0 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.tsx +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.tsx @@ -20,7 +20,7 @@ import styled from '@emotion/styled'; import classNames from 'classnames'; import { isEqual } from 'date-fns'; -import { Badge, DeferredSpinner, themeColor } from 'design-system'; +import { Badge, DeferredSpinner, LightLabel, themeColor } from 'design-system'; import * as React from 'react'; import Tooltip from '../../../components/controls/Tooltip'; import DateFormatter from '../../../components/intl/DateFormatter'; @@ -108,7 +108,9 @@ export default class ProjectActivityAnalysesList extends React.PureComponent ) : ( -
{translate('no_results')}
+
+ {translate('no_results')} +
)} ); @@ -116,9 +118,10 @@ export default class ProjectActivityAnalysesList extends React.PureComponent (this.scrollContainer = element)} style={{ + height: 'calc(100vh - 250px)', marginTop: this.props.project.qualifier === ComponentQualifier.Project ? LIST_MARGIN_TOP @@ -136,7 +139,7 @@ export default class ProjectActivityAnalysesList extends React.PureComponent +
+ + - - -
-
- -
-
- +
+ + + + + +
-
+
); } + +const StyledWrapper = styled.div` + border: ${themeBorder('default', 'filterbarBorder')}; + background-color: ${themeColor('backgroundSecondary')}; +`; diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityGraphs.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityGraphs.tsx index 3acdcfb0e13..9a424a2365f 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityGraphs.tsx +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityGraphs.tsx @@ -203,10 +203,10 @@ export default class ProjectActivityGraphs extends React.PureComponent +
+ {translate('project_activity.graphs.data_table.no_data_warning')} - + ); } @@ -93,21 +92,21 @@ export default function DataTableModal(props: DataTableModalProps) { MAX_DATA_TABLE_ROWS ).map(({ date, ...values }) => ( - + -
+
{metrics.map((metric) => ( - + {values[metric] ?? '-'} ))}
    {getAnalysisEventsForDate(analyses, date).map((event) => ( -
  • +
    • ))} @@ -131,7 +130,7 @@ export default function DataTableModal(props: DataTableModalProps) { } return renderModal( props, - + - + ); } @@ -147,19 +146,19 @@ export default function DataTableModal(props: DataTableModalProps) { props, <> {rowCount === MAX_DATA_TABLE_ROWS && ( - + {translateWithParameters( 'project_activity.graphs.data_table.max_lines_warning', MAX_DATA_TABLE_ROWS )} - + )} - + {series.map((serie) => ( - ))} @@ -167,7 +166,7 @@ export default function DataTableModal(props: DataTableModalProps) { {rows} -
    {translate('date')} + {serie.translatedName}
    + ); } @@ -175,14 +174,47 @@ export default function DataTableModal(props: DataTableModalProps) { function renderModal(props: DataTableModalProps, children: React.ReactNode) { const heading = translate('project_activity.graphs.data_table.title'); return ( - -
    -

    {heading}

    -
    -
    {children}
    -
    - -
    -     + ); } + +const StyledTable = styled.table` + width: 100%; + & > thead > tr > th { + position: relative; + vertical-align: top; + line-height: 18px; + padding: 8px 10px; + border-bottom: 1px solid var(--barBorderColor); + font-weight: 600; + } + + & > thead > tr > th > .small { + display: block; + line-height: 1.4; + font-weight: 400; + } + + & > tfoot > tr > td { + font-size: 93%; + color: var(--secondFontColor); + padding: 5px; + } + + & > tbody > tr > td { + position: relative; + padding: 8px 10px; + line-height: 16px; + } + + & > tbody > tr > td.text-middle { + vertical-align: middle; + } +`; diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphHistory.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphHistory.tsx index eee04c2270d..7f5c8b1c5f4 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/GraphHistory.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/GraphHistory.tsx @@ -17,7 +17,8 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ - +import styled from '@emotion/styled'; +import { ButtonSecondary } from 'design-system'; import * as React from 'react'; import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer'; import { AdvancedTimeline } from '../../components/charts/AdvancedTimeline'; @@ -25,7 +26,6 @@ import { translate } from '../../helpers/l10n'; import { formatMeasure, getShortType } from '../../helpers/measures'; import { MeasureHistory, ParsedAnalysis, Serie } from '../../types/project-activity'; import ModalButton from '../controls/ModalButton'; -import { Button } from '../controls/buttons'; import DataTableModal from './DataTableModal'; import GraphsLegendCustom from './GraphsLegendCustom'; import GraphsLegendStatic from './GraphsLegendStatic'; @@ -104,19 +104,14 @@ export default class GraphHistory extends React.PureComponent { const events = getAnalysisEventsForDate(analyses, selectedDate); return ( -
    + {isCustom && this.props.removeCustomMetric ? ( ) : ( )} -
    +
    {({ height, width }) => (
    @@ -158,13 +153,17 @@ export default class GraphHistory extends React.PureComponent { {canShowDataAsTable && ( {({ onClick }) => ( - + )} )} -
    + ); } } + +const StyledGraphContainer = styled.div` + height: 300px; +`; diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx index e2165221004..fb4f216d370 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx @@ -32,7 +32,6 @@ import { translate } from '../../helpers/l10n'; import { GraphType } from '../../types/project-activity'; import { Metric } from '../../types/types'; import AddGraphMetric from './AddGraphMetric'; -import './styles.css'; import { getGraphTypes, isCustomGraph } from './utils'; interface Props { diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsHistory.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsHistory.tsx index b9790af566d..fe17ca2251c 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/GraphsHistory.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsHistory.tsx @@ -17,14 +17,12 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { DeferredSpinner, LightLabel } from 'design-system'; import { isEqual, uniqBy } from 'lodash'; import * as React from 'react'; -import DeferredSpinner from '../../components/ui/DeferredSpinner'; import { translate, translateWithParameters } from '../../helpers/l10n'; -import { getBaseUrl } from '../../helpers/system'; import { GraphType, MeasureHistory, ParsedAnalysis, Serie } from '../../types/project-activity'; import GraphHistory from './GraphHistory'; -import './styles.css'; import { getSeriesMetricType, hasHistoryData, isCustomGraph } from './utils'; interface Props { @@ -73,8 +71,8 @@ export default class GraphsHistory extends React.PureComponent { if (loading) { return ( -
    -
    +
    +
    @@ -83,28 +81,20 @@ export default class GraphsHistory extends React.PureComponent { if (!hasHistoryData(series)) { return ( -
    -
    - -
    - {translate( - isCustom - ? 'project_activity.graphs.custom.no_history' - : 'component_measures.no_history' - )} -
    -
    +
    + + {translate( + isCustom + ? 'project_activity.graphs.custom.no_history' + : 'component_measures.no_history' + )} +
    ); } const showAreas = [GraphType.coverage, GraphType.duplications].includes(graph); return ( -
    +
    {this.props.graphs.map((graphSeries, idx) => { return ( +
      {series.map((serie, idx) => { const hasData = hasDataValues(serie); diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendStatic.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendStatic.tsx index 9f62fbcb55b..ca4af98ba1f 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendStatic.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendStatic.tsx @@ -30,7 +30,7 @@ export interface GraphsLegendStaticProps { export default function GraphsLegendStatic({ series }: GraphsLegendStaticProps) { return ( -
        +
          {series.map((serie, idx) => (
        • { return ( -
          +
          { {addSeparator && ( - +
          diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContent.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContent.tsx index 345c16d7bf6..27237b22a91 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContent.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContent.tsx @@ -30,11 +30,11 @@ interface Props { export default function GraphsTooltipsContent({ name, index, translatedName, value }: Props) { return ( - + - {value} + {value} {translatedName} ); diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentCoverage.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentCoverage.tsx index 2212f49e4e0..153b0ddae3f 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentCoverage.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentCoverage.tsx @@ -42,22 +42,22 @@ export default function GraphsTooltipsContentCoverage(props: GraphsTooltipsConte <> {addSeparator && ( - +
          )} {uncoveredValue && ( - - + + {formatMeasure(uncoveredValue, MetricType.ShortInteger)} {translate('metric.uncovered_lines.name')} )} {coverageValue && ( - - + + {formatMeasure(coverageValue, MetricType.Percent)} {translate('metric.coverage.name')} diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentDuplication.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentDuplication.tsx index 55677538a5a..e590e2775ac 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentDuplication.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentDuplication.tsx @@ -47,13 +47,13 @@ export default function GraphsTooltipsContentDuplication( <> {addSeparator && ( - +
          )} - - + + {formatMeasure(duplicationDensityValue, MetricType.Percent)} {translate('metric.duplicated_lines_density.name')} diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentEvents.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentEvents.tsx index b05222c4a92..c867a5fdb9e 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentEvents.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentEvents.tsx @@ -29,10 +29,10 @@ interface Props { export default function GraphsTooltipsContentEvents({ addSeparator, events }: Props) { return ( <> - + {events.map((event) => ( -
          +
          ))} @@ -40,7 +40,7 @@ export default function GraphsTooltipsContentEvents({ addSeparator, events }: Pr {addSeparator && ( - +
          diff --git a/server/sonar-web/src/main/js/components/activity-graph/RichQualityGateEventInner.tsx b/server/sonar-web/src/main/js/components/activity-graph/RichQualityGateEventInner.tsx index dd00000e8c9..500a4bd9faa 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/RichQualityGateEventInner.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/RichQualityGateEventInner.tsx @@ -97,7 +97,7 @@ export class RichQualityGateEventInner extends React.PureComponent
          -
          +
          diff --git a/server/sonar-web/src/main/js/components/activity-graph/__tests__/ActivityGraph-it.tsx b/server/sonar-web/src/main/js/components/activity-graph/__tests__/ActivityGraph-it.tsx index 7292dba8360..79cdb85ca3b 100644 --- a/server/sonar-web/src/main/js/components/activity-graph/__tests__/ActivityGraph-it.tsx +++ b/server/sonar-web/src/main/js/components/activity-graph/__tests__/ActivityGraph-it.tsx @@ -42,7 +42,7 @@ const START_DATE = '2016-01-01T00:00:00+0200'; describe('rendering', () => { it('should render correctly when loading', async () => { renderActivityGraph({ loading: true }); - expect(await screen.findByText('loading')).toBeInTheDocument(); + expect(await screen.findByLabelText('loading')).toBeInTheDocument(); }); it('should show the correct legend items', async () => { diff --git a/server/sonar-web/src/main/js/components/activity-graph/styles.css b/server/sonar-web/src/main/js/components/activity-graph/styles.css deleted file mode 100644 index 2ce69827b13..00000000000 --- a/server/sonar-web/src/main/js/components/activity-graph/styles.css +++ /dev/null @@ -1,65 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2023 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. - */ - -.activity-graph-container { - padding: 10px 0; -} - -.activity-graph-tooltip { - padding: var(--gridSize); -} - -.activity-graph-tooltip-line { - height: 20px; -} - -.activity-graph-tooltip-line + .activity-graph-tooltip-line { - padding-top: calc(var(--gridSize) / 2); -} - -.activity-graph-tooltip-separator { - padding-left: calc(2 * var(--gridSize)); - padding-right: calc(2 * var(--gridSize)); -} - -.activity-graph-tooltip-separator hr { - margin-top: var(--gridSize); - margin-bottom: var(--gridSize); -} - -.activity-graph-tooltip-value { - font-weight: bold; -} - -.activity-graph-legends { - align-items: center; - display: flex; - justify-content: center; - padding-bottom: calc(2 * var(--gridSize)); -} - -.activity-graph-legend-actionable { - display: inline-block; - padding: calc(var(--gridSize) / 2) var(--gridSize) calc(var(--gridSize) / 2) - calc(1.5 * var(--gridSize)); - border-width: 1px; - border-style: solid; - border-radius: calc(1.5 * var(--gridSize)); -} -- 2.39.5