diff options
Diffstat (limited to 'server')
3 files changed, 215 insertions, 196 deletions
diff --git a/server/sonar-web/src/main/js/components/issue/Issue.css b/server/sonar-web/src/main/js/components/issue/Issue.css index c80e5e125c5..672ec17f500 100644 --- a/server/sonar-web/src/main/js/components/issue/Issue.css +++ b/server/sonar-web/src/main/js/components/issue/Issue.css @@ -47,16 +47,17 @@ .issue-row { display: flex; margin-bottom: 5px; + align-items: flex-start; } .issue-row-meta { - flex-grow: 0; padding-right: 5px; white-space: nowrap; + margin-top: 2px; } .issue-message { - flex-grow: 1; + flex: 1; padding-left: var(--gridSize); padding-right: var(--gridSize); line-height: 18px; @@ -81,6 +82,7 @@ .issue-meta { line-height: 16px; font-size: var(--smallFontSize); + display: flex; } .issue-meta + .issue-meta { @@ -100,6 +102,7 @@ .issue-see-rule { border-bottom: none; font-size: var(--smallFontSize); + margin-top: 5px; } .issue-changelog { diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx index ab6b244b800..dde2b281789 100644 --- a/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx +++ b/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx @@ -51,30 +51,59 @@ export default function IssueMessage(props: IssueMessageProps) { const ruleEngine = engineName ? engineName : engine; return ( - <div className="display-inline-flex-center issue-message break-word"> - <span className="spacer-right">{message}</span> - {quickFixAvailable && ( - <Tooltip - overlay={ - <FormattedMessage - id="issue.quick_fix_available_with_sonarlint" - defaultMessage={translate('issue.quick_fix_available_with_sonarlint')} - values={{ - link: ( - <a - href="https://www.sonarqube.org/sonarlint/?referrer=sonarqube-quick-fix" - rel="noopener noreferrer" - target="_blank"> - SonarLint - </a> - ) - }} - /> - } - mouseLeaveDelay={0.5}> - <SonarLintIcon className="it__issues-sonarlint-quick-fix spacer-right" size={15} /> - </Tooltip> - )} + <> + <div className="display-inline-flex-center issue-message break-word"> + <span className="spacer-right">{message}</span> + {quickFixAvailable && ( + <Tooltip + overlay={ + <FormattedMessage + id="issue.quick_fix_available_with_sonarlint" + defaultMessage={translate('issue.quick_fix_available_with_sonarlint')} + values={{ + link: ( + <a + href="https://www.sonarqube.org/sonarlint/?referrer=sonarqube-quick-fix" + rel="noopener noreferrer" + target="_blank"> + SonarLint + </a> + ) + }} + /> + } + mouseLeaveDelay={0.5}> + <SonarLintIcon className="it__issues-sonarlint-quick-fix spacer-right" size={15} /> + </Tooltip> + )} + {ruleStatus && (ruleStatus === RuleStatus.Deprecated || ruleStatus === RuleStatus.Removed) && ( + <DocumentationTooltip + className="spacer-left" + content={translate('rules.status', ruleStatus, 'help')} + links={[ + { + href: '/documentation/user-guide/rules/', + label: translateWithParameters('see_x', translate('rules')) + } + ]}> + <span className="spacer-right badge badge-error"> + {translate('rules.status', ruleStatus)} + </span> + </DocumentationTooltip> + )} + {ruleEngine && ( + <Tooltip overlay={translateWithParameters('issue.from_external_rule_engine', ruleEngine)}> + <div className="badge spacer-right text-baseline">{ruleEngine}</div> + </Tooltip> + )} + {manualVulnerability && ( + <Tooltip overlay={translate('issue.manual_vulnerability.description')}> + <div className="badge spacer-right text-baseline"> + {translate('issue.manual_vulnerability')} + </div> + </Tooltip> + )} + </div> <ButtonLink aria-label={translate('issue.why_this_issue.long')} className="issue-see-rule spacer-right text-baseline" @@ -85,33 +114,6 @@ export default function IssueMessage(props: IssueMessageProps) { }> {translate('issue.why_this_issue')} </ButtonLink> - {ruleStatus && (ruleStatus === RuleStatus.Deprecated || ruleStatus === RuleStatus.Removed) && ( - <DocumentationTooltip - className="spacer-left" - content={translate('rules.status', ruleStatus, 'help')} - links={[ - { - href: '/documentation/user-guide/rules/', - label: translateWithParameters('see_x', translate('rules')) - } - ]}> - <span className="spacer-right badge badge-error"> - {translate('rules.status', ruleStatus)} - </span> - </DocumentationTooltip> - )} - {ruleEngine && ( - <Tooltip overlay={translateWithParameters('issue.from_external_rule_engine', ruleEngine)}> - <div className="badge spacer-right text-baseline">{ruleEngine}</div> - </Tooltip> - )} - {manualVulnerability && ( - <Tooltip overlay={translate('issue.manual_vulnerability.description')}> - <div className="badge spacer-right text-baseline"> - {translate('issue.manual_vulnerability')} - </div> - </Tooltip> - )} - </div> + </> ); } diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap index 47dd644ce43..dae61ae1c46 100644 --- a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap @@ -1,14 +1,16 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`should render correctly: default 1`] = ` -<div - className="display-inline-flex-center issue-message break-word" -> - <span - className="spacer-right" +<Fragment> + <div + className="display-inline-flex-center issue-message break-word" > - Reduce the number of conditional operators (4) used in the expression - </span> + <span + className="spacer-right" + > + Reduce the number of conditional operators (4) used in the expression + </span> + </div> <ButtonLink aria-label="issue.why_this_issue.long" className="issue-see-rule spacer-right text-baseline" @@ -16,18 +18,38 @@ exports[`should render correctly: default 1`] = ` > issue.why_this_issue </ButtonLink> -</div> +</Fragment> `; exports[`should render correctly: is deprecated rule 1`] = ` -<div - className="display-inline-flex-center issue-message break-word" -> - <span - className="spacer-right" +<Fragment> + <div + className="display-inline-flex-center issue-message break-word" > - Reduce the number of conditional operators (4) used in the expression - </span> + <span + className="spacer-right" + > + Reduce the number of conditional operators (4) used in the expression + </span> + <DocumentationTooltip + className="spacer-left" + content="rules.status.DEPRECATED.help" + links={ + Array [ + Object { + "href": "/documentation/user-guide/rules/", + "label": "see_x.rules", + }, + ] + } + > + <span + className="spacer-right badge badge-error" + > + rules.status.DEPRECATED + </span> + </DocumentationTooltip> + </div> <ButtonLink aria-label="issue.why_this_issue.long" className="issue-see-rule spacer-right text-baseline" @@ -35,36 +57,29 @@ exports[`should render correctly: is deprecated rule 1`] = ` > issue.why_this_issue </ButtonLink> - <DocumentationTooltip - className="spacer-left" - content="rules.status.DEPRECATED.help" - links={ - Array [ - Object { - "href": "/documentation/user-guide/rules/", - "label": "see_x.rules", - }, - ] - } - > - <span - className="spacer-right badge badge-error" - > - rules.status.DEPRECATED - </span> - </DocumentationTooltip> -</div> +</Fragment> `; exports[`should render correctly: is manual vulnerability 1`] = ` -<div - className="display-inline-flex-center issue-message break-word" -> - <span - className="spacer-right" +<Fragment> + <div + className="display-inline-flex-center issue-message break-word" > - Reduce the number of conditional operators (4) used in the expression - </span> + <span + className="spacer-right" + > + Reduce the number of conditional operators (4) used in the expression + </span> + <Tooltip + overlay="issue.manual_vulnerability.description" + > + <div + className="badge spacer-right text-baseline" + > + issue.manual_vulnerability + </div> + </Tooltip> + </div> <ButtonLink aria-label="issue.why_this_issue.long" className="issue-see-rule spacer-right text-baseline" @@ -72,27 +87,38 @@ exports[`should render correctly: is manual vulnerability 1`] = ` > issue.why_this_issue </ButtonLink> - <Tooltip - overlay="issue.manual_vulnerability.description" - > - <div - className="badge spacer-right text-baseline" - > - issue.manual_vulnerability - </div> - </Tooltip> -</div> +</Fragment> `; exports[`should render correctly: is removed rule 1`] = ` -<div - className="display-inline-flex-center issue-message break-word" -> - <span - className="spacer-right" +<Fragment> + <div + className="display-inline-flex-center issue-message break-word" > - Reduce the number of conditional operators (4) used in the expression - </span> + <span + className="spacer-right" + > + Reduce the number of conditional operators (4) used in the expression + </span> + <DocumentationTooltip + className="spacer-left" + content="rules.status.REMOVED.help" + links={ + Array [ + Object { + "href": "/documentation/user-guide/rules/", + "label": "see_x.rules", + }, + ] + } + > + <span + className="spacer-right badge badge-error" + > + rules.status.REMOVED + </span> + </DocumentationTooltip> + </div> <ButtonLink aria-label="issue.why_this_issue.long" className="issue-see-rule spacer-right text-baseline" @@ -100,36 +126,29 @@ exports[`should render correctly: is removed rule 1`] = ` > issue.why_this_issue </ButtonLink> - <DocumentationTooltip - className="spacer-left" - content="rules.status.REMOVED.help" - links={ - Array [ - Object { - "href": "/documentation/user-guide/rules/", - "label": "see_x.rules", - }, - ] - } - > - <span - className="spacer-right badge badge-error" - > - rules.status.REMOVED - </span> - </DocumentationTooltip> -</div> +</Fragment> `; exports[`should render correctly: with engine info 1`] = ` -<div - className="display-inline-flex-center issue-message break-word" -> - <span - className="spacer-right" +<Fragment> + <div + className="display-inline-flex-center issue-message break-word" > - Reduce the number of conditional operators (4) used in the expression - </span> + <span + className="spacer-right" + > + Reduce the number of conditional operators (4) used in the expression + </span> + <Tooltip + overlay="issue.from_external_rule_engine.js" + > + <div + className="badge spacer-right text-baseline" + > + js + </div> + </Tooltip> + </div> <ButtonLink aria-label="issue.why_this_issue.long" className="issue-see-rule spacer-right text-baseline" @@ -137,27 +156,29 @@ exports[`should render correctly: with engine info 1`] = ` > issue.why_this_issue </ButtonLink> - <Tooltip - overlay="issue.from_external_rule_engine.js" - > - <div - className="badge spacer-right text-baseline" - > - js - </div> - </Tooltip> -</div> +</Fragment> `; exports[`should render correctly: with engine name 1`] = ` -<div - className="display-inline-flex-center issue-message break-word" -> - <span - className="spacer-right" +<Fragment> + <div + className="display-inline-flex-center issue-message break-word" > - Reduce the number of conditional operators (4) used in the expression - </span> + <span + className="spacer-right" + > + Reduce the number of conditional operators (4) used in the expression + </span> + <Tooltip + overlay="issue.from_external_rule_engine.JS" + > + <div + className="badge spacer-right text-baseline" + > + JS + </div> + </Tooltip> + </div> <ButtonLink aria-label="issue.why_this_issue.long" className="issue-see-rule spacer-right text-baseline" @@ -165,52 +186,45 @@ exports[`should render correctly: with engine name 1`] = ` > issue.why_this_issue </ButtonLink> - <Tooltip - overlay="issue.from_external_rule_engine.JS" - > - <div - className="badge spacer-right text-baseline" - > - JS - </div> - </Tooltip> -</div> +</Fragment> `; exports[`should render correctly: with quick fix 1`] = ` -<div - className="display-inline-flex-center issue-message break-word" -> - <span - className="spacer-right" +<Fragment> + <div + className="display-inline-flex-center issue-message break-word" > - Reduce the number of conditional operators (4) used in the expression - </span> - <Tooltip - mouseLeaveDelay={0.5} - overlay={ - <FormattedMessage - defaultMessage="issue.quick_fix_available_with_sonarlint" - id="issue.quick_fix_available_with_sonarlint" - values={ - Object { - "link": <a - href="https://www.sonarqube.org/sonarlint/?referrer=sonarqube-quick-fix" - rel="noopener noreferrer" - target="_blank" - > - SonarLint - </a>, + <span + className="spacer-right" + > + Reduce the number of conditional operators (4) used in the expression + </span> + <Tooltip + mouseLeaveDelay={0.5} + overlay={ + <FormattedMessage + defaultMessage="issue.quick_fix_available_with_sonarlint" + id="issue.quick_fix_available_with_sonarlint" + values={ + Object { + "link": <a + href="https://www.sonarqube.org/sonarlint/?referrer=sonarqube-quick-fix" + rel="noopener noreferrer" + target="_blank" + > + SonarLint + </a>, + } } - } + /> + } + > + <SonarLintIcon + className="it__issues-sonarlint-quick-fix spacer-right" + size={15} /> - } - > - <SonarLintIcon - className="it__issues-sonarlint-quick-fix spacer-right" - size={15} - /> - </Tooltip> + </Tooltip> + </div> <ButtonLink aria-label="issue.why_this_issue.long" className="issue-see-rule spacer-right text-baseline" @@ -218,5 +232,5 @@ exports[`should render correctly: with quick fix 1`] = ` > issue.why_this_issue </ButtonLink> -</div> +</Fragment> `; |