From 10be8db1b6dfb2883370bc4e0ac54fc9cf99af69 Mon Sep 17 00:00:00 2001 From: 7PH Date: Mon, 4 Dec 2023 16:53:12 +0100 Subject: [PATCH] SONAR-21170 Rework issue detail page layout header and styling --- .../components/RuleDetailsMeta.tsx | 2 +- .../js/apps/issues/components/IssueHeader.tsx | 65 ++++++------- .../issues/components/IssueHeaderMeta.tsx | 97 ++++++++----------- .../issues/components/IssueHeaderSide.tsx | 76 +++++++++++++++ .../issue/components/IssueActionsBar.tsx | 35 ++++--- .../issue/components/IssueSeverity.tsx | 4 +- .../components/issue/components/IssueTags.tsx | 2 +- .../components/issue/components/IssueType.tsx | 4 +- .../components/issue/components/IssueView.tsx | 1 - .../resources/org/sonar/l10n/core.properties | 12 ++- 10 files changed, 175 insertions(+), 123 deletions(-) create mode 100644 server/sonar-web/src/main/js/apps/issues/components/IssueHeaderSide.tsx diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx index 98efdce6df3..d2a1062966e 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx @@ -289,7 +289,7 @@ export default class RuleDetailsMeta extends React.PureComponent {
{!!ruleDetails.impacts.length && (
- {translate('issue.software_qualities.label')} + {translate('coding_rules.software_qualities.label')} { return (
-
- +
+
+
+ + + + +
-
- - - - -
-
- {this.renderRuleDescription()} -
-
- {translate('issue.software_qualities.label')} -
- +
+ {this.renderRuleDescription()}
- + + + + +
- + void; - tagsPopupOpen?: boolean; - togglePopup: (popup: string, show?: boolean) => void; } -export default function IssueHeaderMeta(props: Props) { - const { issue, canSetTags, tagsPopupOpen } = props; - - const separator = ; - +export default function IssueHeaderMeta({ issue }: Readonly) { return ( - - - - - {separator} - + {!!issue.codeVariants?.length && ( <> - - - {issue.codeVariants.join(', ')} +
+ {translate('issue.code_variants')} + + + {issue.codeVariants?.join(', ')} + - - {separator} +
+ )} - {issue.effort && ( + {typeof issue.line === 'number' && ( <> - {issue.effort} - {separator} +
+ {translate('issue.line_affected')} + L{issue.line} +
+ )} - - - - - ); -} + {issue.effort && ( + <> +
+ {translate('issue.effort')} + {issue.effort} +
+ + + )} -interface IssueHeaderMetaItemProps { - children: React.ReactNode; - title: string; - className?: string; -} +
+ {translate('issue.introduced')} + + + + + +
+ -function HotspotHeaderInfo({ children, title, className }: IssueHeaderMetaItemProps) { - return ( -
- - {title} - - {children} -
+ + + + ); } - -const StyledSection = styled.div` - border-left: ${themeBorder('default', 'pageBlockBorder')}; -`; diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssueHeaderSide.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssueHeaderSide.tsx new file mode 100644 index 00000000000..1617fd00eaa --- /dev/null +++ b/server/sonar-web/src/main/js/apps/issues/components/IssueHeaderSide.tsx @@ -0,0 +1,76 @@ +/* + * 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. + */ +import styled from '@emotion/styled'; +import { LightLabel, themeBorder } from 'design-system'; +import React from 'react'; +import { CleanCodeAttributePill } from '../../../components/shared/CleanCodeAttributePill'; +import SoftwareImpactPillList from '../../../components/shared/SoftwareImpactPillList'; +import { translate } from '../../../helpers/l10n'; +import { Issue } from '../../../types/types'; + +interface Props { + issue: Issue; +} + +export default function IssueHeaderSide({ issue }: Readonly) { + return ( + + + + + + + + + + ); +} + +interface IssueHeaderMetaItemProps extends React.HTMLAttributes { + children: React.ReactNode; + title: string; + className?: string; +} + +function IssueHeaderInfo({ + children, + title, + className, + ...props +}: Readonly) { + return ( +
+ + {title} + + {children} +
+ ); +} + +const StyledSection = styled.div` + border-left: ${themeBorder('default', 'pageBlockBorder')}; +`; diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.tsx index 28509e4fd79..e03b4723437 100644 --- a/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.tsx +++ b/server/sonar-web/src/main/js/components/issue/components/IssueActionsBar.tsx @@ -22,13 +22,11 @@ import { HighlightRing } from 'design-system'; import * as React from 'react'; import { IssueActions } from '../../../types/issues'; import { Issue } from '../../../types/types'; -import SoftwareImpactPillList from '../../shared/SoftwareImpactPillList'; import IssueAssign from './IssueAssign'; import { SonarLintBadge } from './IssueBadges'; import IssueCommentAction from './IssueCommentAction'; -import IssueSeverity from './IssueSeverity'; +import IssueTags from './IssueTags'; import IssueTransition from './IssueTransition'; -import IssueType from './IssueType'; interface Props { issue: Issue; @@ -36,19 +34,21 @@ interface Props { onAssign: (login: string) => void; onChange: (issue: Issue) => void; togglePopup: (popup: string, show?: boolean) => void; - showIssueImpact?: boolean; showSonarLintBadge?: boolean; + showTags?: boolean; + canSetTags?: boolean; } -export default function IssueActionsBar(props: Props) { +export default function IssueActionsBar(props: Readonly) { const { issue, currentPopup, onAssign, onChange, togglePopup, - showIssueImpact, showSonarLintBadge, + showTags, + canSetTags, } = props; const [commentPlaceholder, setCommentPlaceholder] = React.useState(''); @@ -61,6 +61,7 @@ export default function IssueActionsBar(props: Props) { const canAssign = issue.actions.includes(IssueActions.Assign); const canComment = issue.actions.includes(IssueActions.Comment); + const tagsPopupOpen = currentPopup === 'edit-tags' && canSetTags; return (
@@ -88,9 +89,16 @@ export default function IssueActionsBar(props: Props) { /> - {showIssueImpact && ( -
  • - + {showTags && ( +
  • +
    • )} @@ -100,15 +108,6 @@ export default function IssueActionsBar(props: Props) { )} -
      -
    • - -
      • - -
    • - -
      • -
    {canComment && ( ; } -export default function IssueSeverity({ issue }: Props) { +export default function IssueSeverity({ issue }: Readonly) { return ( } @@ -42,7 +42,7 @@ export default function IssueSeverity({ issue }: Props) { }, ]} > - + ; onChange: (issue: Issue) => void; open?: boolean; diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueType.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueType.tsx index 789ea2e61ac..360225bd253 100644 --- a/server/sonar-web/src/main/js/components/issue/components/IssueType.tsx +++ b/server/sonar-web/src/main/js/components/issue/components/IssueType.tsx @@ -30,7 +30,7 @@ interface Props { issue: Pick; } -export default function IssueType({ issue }: Props) { +export default function IssueType({ issue }: Readonly) { return ( } @@ -41,7 +41,7 @@ export default function IssueType({ issue }: Props) { }, ]} > - + {translate('issue.type', issue.type)} diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueView.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueView.tsx index e3329901c95..7d7f6364ca4 100644 --- a/server/sonar-web/src/main/js/components/issue/components/IssueView.tsx +++ b/server/sonar-web/src/main/js/components/issue/components/IssueView.tsx @@ -122,7 +122,6 @@ export default class IssueView extends React.PureComponent { onAssign={this.props.onAssign} onChange={this.props.onChange} togglePopup={this.props.togglePopup} - showIssueImpact />
    diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties index 4ec36c40a48..0cf4fc63f0b 100644 --- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties +++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties @@ -989,7 +989,8 @@ issue.severity.deprecation.filter_by=You can now filter issues by: issue.severity.deprecation.documentation=Documentation issue.severity.new=The new severities -issue.software_qualities.label=Software qualities impacted: +issue.cct_attribute.label=Clean code attribute +issue.software_qualities.label=Software qualities impacted issue.impact.severity.tooltip=This issue has a {severity} impact on the {quality} of your software. issue.clean_code_attribute_category.CONSISTENT=Consistency @@ -1079,11 +1080,11 @@ issue.resolution.REMOVED.description=Either the rule or the resource was changed issue.unresolved.description=Unresolved issues have not been addressed in any way. issue.action.permalink=Get permalink -issue.line_affected=Line affected -issue.introduced=Introduced -issue.code_variants=Code variant +issue.line_affected=Line affected: +issue.introduced=Introduced: +issue.code_variants=Code variant: issue.rule_status=Rule status -issue.effort=Effort +issue.effort=Effort: issue.x_effort={0} effort issue.ncloc_x.short=L{0} issue.1_code_variant=1 variant @@ -2361,6 +2362,7 @@ coding_rules.rule_template.title=This rule can be used as a template to create c coding_rules._rules=rules coding_rules.show_template=Show Template coding_rules.skip_to_filters=Skip to rules filters +coding_rules.software_qualities.label=Software qualities impacted: coding_rules.to_select_rules=Select rules coding_rules.to_navigate=Navigate to rule coding_rules.type.deprecation.title=Types of detection rules are deprecated. -- 2.39.5