diff options
Diffstat (limited to 'server/sonar-web/src/main/js/apps/overview/branches')
5 files changed, 28 insertions, 27 deletions
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/MeasuresPanel.tsx b/server/sonar-web/src/main/js/apps/overview/branches/MeasuresPanel.tsx index 1f73d4099e0..6c6b6c541e0 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/MeasuresPanel.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/MeasuresPanel.tsx @@ -19,13 +19,14 @@ */ import { Card, CoverageIndicator, DuplicationsIndicator } from 'design-system'; import * as React from 'react'; +import { getTabPanelId } from '../../../components/controls/BoxedTabs'; import { duplicationRatingConverter } from '../../../components/measure/utils'; import { findMeasure } from '../../../helpers/measures'; import { Branch } from '../../../types/branch-like'; import { IssueType } from '../../../types/issues'; import { MetricKey } from '../../../types/metrics'; import { Component, MeasureEnhanced } from '../../../types/types'; -import { MeasurementType } from '../utils'; +import { MeasurementType, MeasuresTabs } from '../utils'; import MeasuresPanelIssueMeasure from './MeasuresPanelIssueMeasure'; import MeasuresPanelPercentMeasure from './MeasuresPanelPercentMeasure'; @@ -40,7 +41,10 @@ export function MeasuresPanel(props: MeasuresPanelProps) { const { branch, component, measures, isNewCode } = props; return ( - <div className="sw-grid sw-grid-cols-2 sw-gap-4 sw-mt-4"> + <div + className="sw-grid sw-grid-cols-2 sw-gap-4 sw-mt-6" + id={getTabPanelId(MeasuresTabs.Overall)} + > {[IssueType.Bug, IssueType.CodeSmell, IssueType.Vulnerability, IssueType.SecurityHotspot].map( (type: IssueType) => ( <Card key={type} className="sw-p-8"> diff --git a/server/sonar-web/src/main/js/apps/overview/branches/MeasuresPanelNoNewCode.tsx b/server/sonar-web/src/main/js/apps/overview/branches/MeasuresPanelNoNewCode.tsx index fad2a62c4d2..b2bea1237ad 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/MeasuresPanelNoNewCode.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/MeasuresPanelNoNewCode.tsx @@ -21,6 +21,7 @@ import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import DocLink from '../../../components/common/DocLink'; import Link from '../../../components/common/Link'; +import { getTabPanelId } from '../../../components/controls/BoxedTabs'; import { getBranchLikeQuery } from '../../../helpers/branch-like'; import { translate } from '../../../helpers/l10n'; import { getBaseUrl } from '../../../helpers/system'; @@ -29,6 +30,7 @@ import { Branch } from '../../../types/branch-like'; import { ComponentQualifier } from '../../../types/component'; import { NewCodeDefinitionType } from '../../../types/new-code-definition'; import { Component, Period } from '../../../types/types'; +import { MeasuresTabs } from '../utils'; export interface MeasuresPanelNoNewCodeProps { branch?: Branch; @@ -60,7 +62,11 @@ export default function MeasuresPanelNoNewCode(props: MeasuresPanelNoNewCodeProp const showSettingsLink = !!(component.configuration && component.configuration.showSettings); return ( - <div className="display-flex-center display-flex-justify-center" style={{ height: 500 }}> + <div + className="display-flex-center display-flex-justify-center" + id={getTabPanelId(MeasuresTabs.New)} + style={{ height: 500 }} + > <img alt="" /* Make screen readers ignore this image; it's purely eye candy. */ className="spacer-right" diff --git a/server/sonar-web/src/main/js/apps/overview/branches/NewCodeMeasuresPanel.tsx b/server/sonar-web/src/main/js/apps/overview/branches/NewCodeMeasuresPanel.tsx index a579166992b..f4eb31379e4 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/NewCodeMeasuresPanel.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/NewCodeMeasuresPanel.tsx @@ -29,6 +29,7 @@ import { } from 'design-system'; import React from 'react'; import { useIntl } from 'react-intl'; +import { getTabPanelId } from '../../../components/controls/BoxedTabs'; import { getLeakValue } from '../../../components/measure/utils'; import { DEFAULT_ISSUES_QUERY } from '../../../components/shared/utils'; import { getBranchLikeQuery } from '../../../helpers/branch-like'; @@ -49,6 +50,7 @@ import MeasuresCardNumber from '../components/MeasuresCardNumber'; import MeasuresCardPercent from '../components/MeasuresCardPercent'; import { MeasurementType, + MeasuresTabs, Status, getConditionRequiredLabel, getMeasurementMetricKey, @@ -91,7 +93,7 @@ export default function NewCodeMeasuresPanel(props: Readonly<Props>) { } return ( - <div className="sw-mt-6"> + <div className="sw-mt-6" id={getTabPanelId(MeasuresTabs.New)}> <LightGreyCard className="sw-flex sw-rounded-2 sw-gap-4"> <IssueMeasuresCardInner data-test="overview__measures-new_issues" diff --git a/server/sonar-web/src/main/js/apps/overview/branches/TabsPanel.tsx b/server/sonar-web/src/main/js/apps/overview/branches/TabsPanel.tsx index 8b000523a8d..5760185f04c 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/TabsPanel.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/TabsPanel.tsx @@ -25,10 +25,10 @@ import { LightLabel, PageTitle, Spinner, - ToggleButton, + Tabs, } from 'design-system'; import * as React from 'react'; -import { FormattedMessage, useIntl } from 'react-intl'; +import { FormattedMessage } from 'react-intl'; import DocLink from '../../../components/common/DocLink'; import { translate } from '../../../helpers/l10n'; import { isDiffMetric } from '../../../helpers/measures'; @@ -69,13 +69,11 @@ export function TabsPanel(props: React.PropsWithChildren<MeasuresPanelProps>) { branch, children, } = props; - const intl = useIntl(); const isApp = component.qualifier === ComponentQualifier.Application; const leakPeriod = isApp ? appLeak : period; const { failingConditionsOnNewCode, failingConditionsOnOverallCode } = countFailingConditions(qgStatuses); - const failingConditions = failingConditionsOnNewCode + failingConditionsOnOverallCode; const recentSqUpgradeEvent = React.useMemo(() => { if (!analyses || analyses.length === 0) { @@ -160,28 +158,19 @@ export function TabsPanel(props: React.PropsWithChildren<MeasuresPanelProps>) { </div> )} <div className="sw-flex sw-items-center"> - <ToggleButton + <Tabs onChange={props.onTabSelect} options={tabs} value={isNewCode ? MeasuresTabs.New : MeasuresTabs.Overall} - /> - {failingConditions > 0 && ( - <LightLabel className="sw-body-sm-highlight sw-ml-8"> - {intl.formatMessage( - { id: 'overview.X_conditions_failed' }, - { conditions: failingConditions }, - )} - </LightLabel> - )} + > + {isNewCode && leakPeriod && ( + <LightLabel className="sw-body-sm sw-flex sw-items-center"> + <span className="sw-mr-1">{translate('overview.new_code')}:</span> + <LeakPeriodInfo leakPeriod={leakPeriod} /> + </LightLabel> + )} + </Tabs> </div> - {isNewCode && leakPeriod ? ( - <LightLabel className="sw-body-sm sw-flex sw-items-center sw-mt-4"> - <span className="sw-mr-1">{translate('overview.new_code')}:</span> - <LeakPeriodInfo leakPeriod={leakPeriod} /> - </LightLabel> - ) : ( - <div className="sw-h-4 sw-pt-1 sw-mt-4" /> - )} {component.qualifier === ComponentQualifier.Application && component.needIssueSync && ( <FlagMessage className="sw-mt-4" variant="info"> diff --git a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/BranchOverview-it.tsx b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/BranchOverview-it.tsx index 22b3c562514..3f54500b1c0 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/BranchOverview-it.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/BranchOverview-it.tsx @@ -332,7 +332,7 @@ describe('project overview', () => { renderBranchOverview(); expect(await screen.findByText('metric.level.ERROR')).toBeInTheDocument(); - expect(screen.getAllByText(/overview.X_conditions_failed/)).toHaveLength(2); + expect(screen.getByText(/overview.X_conditions_failed/)).toBeInTheDocument(); expect(screen.getAllByText(/overview.quality_gate.required_x/)).toHaveLength(3); }); |