From 50ba3a3998f109b8540cd9485cbc19b160e85d59 Mon Sep 17 00:00:00 2001 From: Revanshu Paliwal Date: Fri, 14 Jun 2024 17:06:14 +0200 Subject: [PATCH] SONAR-22390 Refactor PR summary to similar to overview --- .../CurrentBranchLikeMergeInformation.tsx | 2 +- .../overview/branches/BranchSummaryStyles.tsx | 15 ++ .../overview/branches/FailedConditions.tsx | 16 +- .../overview/branches/QualityGatePanel.tsx | 8 +- .../branches/QualityGatePanelSection.tsx | 8 +- .../pullRequests/IssueMeasuresCard.tsx | 173 -------------- .../pullRequests/MeasuresCardPanel.tsx | 220 +++++++++++++++--- .../pullRequests/PullRequestOverview.tsx | 5 +- 8 files changed, 223 insertions(+), 224 deletions(-) delete mode 100644 server/sonar-web/src/main/js/apps/overview/pullRequests/IssueMeasuresCard.tsx diff --git a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/CurrentBranchLikeMergeInformation.tsx b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/CurrentBranchLikeMergeInformation.tsx index d8d7c24da37..def592a6601 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/branch-like/CurrentBranchLikeMergeInformation.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/branch-like/CurrentBranchLikeMergeInformation.tsx @@ -31,7 +31,7 @@ export function CurrentBranchLikeMergeInformation({ }: Readonly) { return ( ; + failedConditions: QualityGateStatusConditionEnhanced[]; isApplication?: boolean; isNewCode: boolean; - qgStatus: QualityGateStatus; qualityGate?: QualityGate; } @@ -38,9 +41,10 @@ export default function FailedConditions({ isApplication, isNewCode, qualityGate, - qgStatus, + failedConditions, + component, + branchLike, }: FailedConditionsProps) { - const { failedConditions, branchLike } = qgStatus; const [newCodeFailedConditions, overallFailedConditions] = _.partition( failedConditions, (condition) => isDiffMetric(condition.metric), @@ -70,7 +74,7 @@ export default function FailedConditions({ )} @@ -75,7 +77,9 @@ export function QualityGatePanelSection(props: QualityGatePanelSectionProps) { isNewCode={isNewCode} isApplication={isApplication} qualityGate={qualityGate} - qgStatus={qgStatus} + failedConditions={qgStatus.failedConditions} + branchLike={qgStatus.branchLike} + component={qgStatus} /> )} diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/IssueMeasuresCard.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/IssueMeasuresCard.tsx deleted file mode 100644 index 7f77a7d81a1..00000000000 --- a/server/sonar-web/src/main/js/apps/overview/pullRequests/IssueMeasuresCard.tsx +++ /dev/null @@ -1,173 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2024 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 styled from '@emotion/styled'; -import { - HelperHintIcon, - LightGreyCard, - LightLabel, - SnoozeCircleIcon, - TextError, - TextSubdued, - TrendDownCircleIcon, - TrendUpCircleIcon, - themeColor, -} from 'design-system'; -import * as React from 'react'; -import { useIntl } from 'react-intl'; -import { getBranchLikeQuery } from '~sonar-aligned/helpers/branch-like'; -import { formatMeasure } from '~sonar-aligned/helpers/measures'; -import { getComponentIssuesUrl } from '~sonar-aligned/helpers/urls'; -import { MetricKey, MetricType } from '~sonar-aligned/types/metrics'; -import Tooltip from '../../../components/controls/Tooltip'; -import { getLeakValue } from '../../../components/measure/utils'; -import { DEFAULT_ISSUES_QUERY } from '../../../components/shared/utils'; -import { findMeasure } from '../../../helpers/measures'; -import { PullRequest } from '../../../types/branch-like'; -import { QualityGateStatusConditionEnhanced } from '../../../types/quality-gates'; -import { Component, MeasureEnhanced } from '../../../types/types'; -import { IssueMeasuresCardInner } from '../components/IssueMeasuresCardInner'; -import { Status, getConditionRequiredLabel } from '../utils'; - -interface Props { - component: Component; - conditions: QualityGateStatusConditionEnhanced[]; - measures: MeasureEnhanced[]; - pullRequest: PullRequest; -} - -export default function IssueMeasuresCard( - props: React.PropsWithChildren>, -) { - const { measures, conditions, component, pullRequest, ...rest } = props; - - const intl = useIntl(); - - const issuesCount = getLeakValue(findMeasure(measures, MetricKey.new_violations)); - const issuesCondition = conditions.find((c) => c.metric === MetricKey.new_violations); - const issuesConditionFailed = issuesCondition?.level === Status.ERROR; - const fixedCount = findMeasure(measures, MetricKey.pull_request_fixed_issues)?.value; - const acceptedCount = getLeakValue(findMeasure(measures, MetricKey.new_accepted_issues)); - - const issuesUrl = getComponentIssuesUrl(component.key, { - ...getBranchLikeQuery(pullRequest), - ...DEFAULT_ISSUES_QUERY, - }); - const fixedUrl = getComponentIssuesUrl(component.key, { - fixedInPullRequest: pullRequest.key, - }); - const acceptedUrl = getComponentIssuesUrl(component.key, { - ...getBranchLikeQuery(pullRequest), - ...DEFAULT_ISSUES_QUERY, - issueStatuses: 'ACCEPTED', - }); - - return ( - - } - footer={ - issuesCondition && - (issuesConditionFailed ? ( - - ) : ( - - {getConditionRequiredLabel(issuesCondition, intl)} - - )) - } - /> - - - ) - } - footer={ - - {intl.formatMessage({ id: 'overview.accepted_issues.help' })} - - } - /> - - - {intl.formatMessage({ id: 'overview.pull_request.fixed_issues' })} - - - {intl.formatMessage({ id: 'overview.pull_request.fixed_issues.disclaimer' })} - - - {intl.formatMessage({ - id: 'overview.pull_request.fixed_issues.disclaimer.2', - })} - - - } - side="top" - > - - - - } - data-testid={`overview__measures-${MetricKey.pull_request_fixed_issues}`} - metric={MetricKey.pull_request_fixed_issues} - value={formatMeasure(fixedCount, MetricType.ShortInteger)} - disabled={component.needIssueSync} - url={fixedUrl} - icon={fixedCount && fixedCount !== '0' && } - footer={ - - {intl.formatMessage({ id: 'overview.pull_request.fixed_issues.help' })} - - } - /> - - ); -} - -const StyledCardSeparator = styled.div` - width: 1px; - background-color: ${themeColor('projectCardBorder')}; -`; diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardPanel.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardPanel.tsx index fc313e846e2..14bb087b4e5 100644 --- a/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardPanel.tsx +++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/MeasuresCardPanel.tsx @@ -18,22 +18,51 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import classNames from 'classnames'; +import { + Card, + HelperHintIcon, + LightLabel, + SnoozeCircleIcon, + TextError, + TextSubdued, + TrendDownCircleIcon, + TrendUpCircleIcon, +} from 'design-system/lib'; import * as React from 'react'; -import { getComponentSecurityHotspotsUrl } from '~sonar-aligned/helpers/urls'; -import { MetricKey } from '~sonar-aligned/types/metrics'; +import { useIntl } from 'react-intl'; +import { + getComponentIssuesUrl, + getComponentSecurityHotspotsUrl, +} from '~sonar-aligned/helpers/urls'; +import { MetricKey, MetricType } from '~sonar-aligned/types/metrics'; +import Tooltip from '../../../components/controls/Tooltip'; import { getLeakValue } from '../../../components/measure/utils'; +import { DEFAULT_ISSUES_QUERY } from '../../../components/shared/utils'; import { findMeasure } from '../../../helpers/measures'; import { getComponentDrilldownUrl } from '../../../helpers/urls'; +import { getBranchLikeQuery } from '../../../sonar-aligned/helpers/branch-like'; +import { formatMeasure } from '../../../sonar-aligned/helpers/measures'; import { PullRequest } from '../../../types/branch-like'; import { QualityGateStatusConditionEnhanced } from '../../../types/quality-gates'; import { Component, MeasureEnhanced } from '../../../types/types'; +import { + GridContainer, + StyleMeasuresCard, + StyleMeasuresCardRightBorder, + StyledConditionsCard, +} from '../branches/BranchSummaryStyles'; +import FailedConditions from '../branches/FailedConditions'; +import { IssueMeasuresCardInner } from '../components/IssueMeasuresCardInner'; import MeasuresCardNumber from '../components/MeasuresCardNumber'; import MeasuresCardPercent from '../components/MeasuresCardPercent'; -import { MeasurementType, getMeasurementMetricKey } from '../utils'; -import IssueMeasuresCard from './IssueMeasuresCard'; +import { + MeasurementType, + Status, + getConditionRequiredLabel, + getMeasurementMetricKey, +} from '../utils'; interface Props { - className?: string; component: Component; conditions: QualityGateStatusConditionEnhanced[]; measures: MeasureEnhanced[]; @@ -41,23 +70,144 @@ interface Props { } export default function MeasuresCardPanel(props: React.PropsWithChildren) { - const { pullRequest, component, measures, conditions, className } = props; + const { pullRequest, component, measures, conditions } = props; const newSecurityHotspots = getLeakValue( findMeasure(measures, MetricKey.new_security_hotspots), ) as string; - return ( - <> - + const intl = useIntl(); + + const issuesCount = getLeakValue(findMeasure(measures, MetricKey.new_violations)); + const issuesCondition = conditions.find((c) => c.metric === MetricKey.new_violations); + const isIssuesConditionFailed = issuesCondition?.level === Status.ERROR; + const fixedCount = findMeasure(measures, MetricKey.pull_request_fixed_issues)?.value; + const acceptedCount = getLeakValue(findMeasure(measures, MetricKey.new_accepted_issues)); + + const issuesUrl = getComponentIssuesUrl(component.key, { + ...getBranchLikeQuery(pullRequest), + ...DEFAULT_ISSUES_QUERY, + }); + const fixedUrl = getComponentIssuesUrl(component.key, { + fixedInPullRequest: pullRequest.key, + }); + const acceptedUrl = getComponentIssuesUrl(component.key, { + ...getBranchLikeQuery(pullRequest), + ...DEFAULT_ISSUES_QUERY, + issueStatuses: 'ACCEPTED', + }); -
-
+ const totalFailedConditions = conditions.filter((condition) => condition.level === Status.ERROR); + + return ( + + 0, + })} + > + {totalFailedConditions.length > 0 && ( + + + + )} + + } + footer={ + issuesCondition && + (isIssuesConditionFailed ? ( + + ) : ( + + {getConditionRequiredLabel(issuesCondition, intl)} + + )) + } + /> + + + + ) + } + footer={ + + {intl.formatMessage({ id: 'overview.accepted_issues.help' })} + + } + /> + + + + {intl.formatMessage({ id: 'overview.pull_request.fixed_issues' })} + + + {intl.formatMessage({ + id: 'overview.pull_request.fixed_issues.disclaimer', + })} + + + {intl.formatMessage({ + id: 'overview.pull_request.fixed_issues.disclaimer.2', + })} + +
+ } + side="top" + > + + + + } + data-testid={`overview__measures-${MetricKey.pull_request_fixed_issues}`} + metric={MetricKey.pull_request_fixed_issues} + value={formatMeasure(fixedCount, MetricType.ShortInteger)} + disabled={component.needIssueSync} + url={fixedUrl} + icon={fixedCount && fixedCount !== '0' && } + footer={ + + {intl.formatMessage({ id: 'overview.pull_request.fixed_issues.help' })} + + } + /> + + ) showRequired useDiffMetric /> - - -
- -
+ + ) useDiffMetric showRequired /> + +
+
-
- + + ); } diff --git a/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestOverview.tsx b/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestOverview.tsx index dc1954991d0..e5778e1bd48 100644 --- a/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestOverview.tsx +++ b/server/sonar-web/src/main/js/apps/overview/pullRequests/PullRequestOverview.tsx @@ -98,8 +98,6 @@ export default function PullRequestOverview(props: Readonly>) { - - {ignoredConditions && }
@@ -107,8 +105,9 @@ export default function PullRequestOverview(props: Readonly>) {
+ +