{
key: RuleDescriptionSections.HOW_TO_FIX,
content: 'This how to fix for spring',
- context: { displayName: 'Spring' }
+ context: { key: 'spring', displayName: 'Spring' }
},
{
key: RuleDescriptionSections.HOW_TO_FIX,
content: 'This how to fix for spring boot',
- context: { displayName: 'Spring boot' }
+ context: { key: 'spring_boot', displayName: 'Spring boot' }
},
{
key: RuleDescriptionSections.RESOURCES,
endLine: 25,
startOffset: 0,
endOffset: 1
- }
+ },
+ ruleDescriptionContextKey: 'spring'
}),
snippets: keyBy(
[
content: '<p> Context 1 content<p>',
key: RuleDescriptionSections.HOW_TO_FIX,
context: {
+ key: 'spring',
displayName: 'Spring'
}
},
content: '<p> Context 2 content<p>',
key: RuleDescriptionSections.HOW_TO_FIX,
context: {
+ key: 'context_2',
displayName: 'Context 2'
}
},
content: '<p> Context 3 content<p>',
key: RuleDescriptionSections.HOW_TO_FIX,
context: {
+ key: 'context_3',
displayName: 'Context 3'
}
},
computeState() {
const { ruleDetails } = this.props;
- const groupedDescriptions = groupBy(ruleDetails.descriptionSections, 'key');
+ const descriptionSectionsByKey = groupBy(
+ ruleDetails.descriptionSections,
+ section => section.key
+ );
const tabs = [
{
ruleDetails.type === 'SECURITY_HOTSPOT'
? translate('coding_rules.description_section.title.root_cause.SECURITY_HOTSPOT')
: translate('coding_rules.description_section.title.root_cause'),
- content: groupedDescriptions[RuleDescriptionSections.ROOT_CAUSE] && (
- <RuleDescription description={groupedDescriptions[RuleDescriptionSections.ROOT_CAUSE]} />
+ content: descriptionSectionsByKey[RuleDescriptionSections.ROOT_CAUSE] && (
+ <RuleDescription
+ sections={descriptionSectionsByKey[RuleDescriptionSections.ROOT_CAUSE]}
+ />
)
},
{
key: RuleTabKeys.AssessTheIssue,
label: translate('coding_rules.description_section.title', RuleTabKeys.AssessTheIssue),
- content: groupedDescriptions[RuleDescriptionSections.ASSESS_THE_PROBLEM] && (
+ content: descriptionSectionsByKey[RuleDescriptionSections.ASSESS_THE_PROBLEM] && (
<RuleDescription
- description={groupedDescriptions[RuleDescriptionSections.ASSESS_THE_PROBLEM]}
+ sections={descriptionSectionsByKey[RuleDescriptionSections.ASSESS_THE_PROBLEM]}
/>
)
},
{
key: RuleTabKeys.HowToFixIt,
label: translate('coding_rules.description_section.title', RuleTabKeys.HowToFixIt),
- content: groupedDescriptions[RuleDescriptionSections.HOW_TO_FIX] && (
- <RuleDescription description={groupedDescriptions[RuleDescriptionSections.HOW_TO_FIX]} />
+ content: descriptionSectionsByKey[RuleDescriptionSections.HOW_TO_FIX] && (
+ <RuleDescription
+ sections={descriptionSectionsByKey[RuleDescriptionSections.HOW_TO_FIX]}
+ />
)
},
{
key: RuleTabKeys.MoreInfo,
label: translate('coding_rules.description_section.title', RuleTabKeys.MoreInfo),
content: (ruleDetails.genericConcepts ||
- groupedDescriptions[RuleDescriptionSections.RESOURCES]) && (
+ descriptionSectionsByKey[RuleDescriptionSections.RESOURCES]) && (
<MoreInfoRuleDescription
genericConcepts={ruleDetails.genericConcepts}
- description={groupedDescriptions[RuleDescriptionSections.RESOURCES]}
+ sections={descriptionSectionsByKey[RuleDescriptionSections.RESOURCES]}
/>
)
}
}
export interface RuleDescriptionContext {
+ key: string;
displayName: string;
}
it('should open issue and navigate', async () => {
const user = userEvent.setup();
+
renderIssueApp();
+
+ // Select an issue with an advanced rule
expect(await screen.findByRole('region', { name: 'Fix that' })).toBeInTheDocument();
await user.click(screen.getByRole('region', { name: 'Fix that' }));
+
+ // Are rule headers present?
expect(screen.getByRole('heading', { level: 1, name: 'Fix that' })).toBeInTheDocument();
expect(screen.getByRole('link', { name: 'advancedRuleId' })).toBeInTheDocument();
- expect(screen.getByRole('button', { name: `issue.tabs.more_info` })).toBeInTheDocument();
- await user.click(screen.getByRole('button', { name: `issue.tabs.more_info` }));
- expect(screen.getByRole('heading', { name: 'Link' })).toBeInTheDocument();
+ // Select the "why is this an issue" tab and check its content
+ expect(screen.getByRole('button', { name: `issue.tabs.why` })).toBeInTheDocument();
+ await user.click(screen.getByRole('button', { name: `issue.tabs.why` }));
+ expect(screen.getByRole('heading', { name: 'Because' })).toBeInTheDocument();
+ // Select the "how to fix it" tab
expect(screen.getByRole('button', { name: `issue.tabs.how` })).toBeInTheDocument();
await user.click(screen.getByRole('button', { name: `issue.tabs.how` }));
+
+ // Is the context selector present with the expected values and default selection?
expect(screen.getByRole('radio', { name: 'Context 2' })).toBeInTheDocument();
expect(screen.getByRole('radio', { name: 'Context 3' })).toBeInTheDocument();
expect(screen.getByRole('radio', { name: 'Spring' })).toBeInTheDocument();
expect(
screen.getByRole('radio', { name: 'coding_rules.description_context_other' })
).toBeInTheDocument();
+ expect(screen.getByRole('radio', { name: 'Spring' })).toBeChecked();
+ // Select context 2 and check tab content
await user.click(screen.getByRole('radio', { name: 'Context 2' }));
expect(screen.getByText('Context 2 content')).toBeInTheDocument();
+ // Select the "other" context and check tab content
await user.click(screen.getByRole('radio', { name: 'coding_rules.description_context_other' }));
expect(screen.getByText('coding_rules.context.others.title')).toBeInTheDocument();
expect(screen.getByText('coding_rules.context.others.description.first')).toBeInTheDocument();
expect(screen.getByText('coding_rules.context.others.description.second')).toBeInTheDocument();
- expect(screen.getByRole('button', { name: `issue.tabs.why` })).toBeInTheDocument();
- await user.click(screen.getByRole('button', { name: `issue.tabs.why` }));
- expect(screen.getByRole('heading', { name: 'Because' })).toBeInTheDocument();
+ // Select the resources tab and check its content
+ expect(screen.getByRole('button', { name: `issue.tabs.more_info` })).toBeInTheDocument();
+ await user.click(screen.getByRole('button', { name: `issue.tabs.more_info` }));
+ expect(screen.getByRole('heading', { name: 'Link' })).toBeInTheDocument();
+ // Select the previous issue (with a simple rule) through keyboard shortcut
await user.keyboard('{ArrowUp}');
+ // Are rule headers present?
expect(screen.getByRole('heading', { level: 1, name: 'Fix this' })).toBeInTheDocument();
expect(screen.getByRole('link', { name: 'simpleRuleId' })).toBeInTheDocument();
+ // Select the "why is this an issue tab" and check its content
expect(screen.getByRole('button', { name: `issue.tabs.why` })).toBeInTheDocument();
await user.click(screen.getByRole('button', { name: `issue.tabs.why` }));
expect(screen.getByRole('heading', { name: 'Default' })).toBeInTheDocument();
+ // Select the previous issue (with a simple rule) through keyboard shortcut
await user.keyboard('{ArrowUp}');
+ // Are rule headers present?
expect(screen.getByRole('heading', { level: 1, name: 'Issue on file' })).toBeInTheDocument();
expect(screen.getByRole('link', { name: 'simpleRuleId' })).toBeInTheDocument();
+ // Select the "Where is the issue" tab and check its content
expect(screen.getByRole('button', { name: `issue.tabs.code` })).toBeInTheDocument();
await user.click(screen.getByRole('button', { name: `issue.tabs.code` }));
expect(screen.getByRole('region', { name: 'Issue on file' })).toBeInTheDocument();
};
computeTabs() {
- const { ruleDetails, codeTabContent } = this.props;
- const groupedDescriptions = groupBy(ruleDetails.descriptionSections, 'key');
+ const {
+ ruleDetails,
+ codeTabContent,
+ issue: { ruleDescriptionContextKey }
+ } = this.props;
+ const descriptionSectionsByKey = groupBy(
+ ruleDetails.descriptionSections,
+ section => section.key
+ );
if (ruleDetails.htmlNote) {
- if (groupedDescriptions[RuleDescriptionSections.RESOURCES] !== undefined) {
+ if (descriptionSectionsByKey[RuleDescriptionSections.RESOURCES] !== undefined) {
// We add the extended description (htmlNote) in the first context, in case there are contexts
// Extended description will get reworked in future
- groupedDescriptions[RuleDescriptionSections.RESOURCES][0].content +=
+ descriptionSectionsByKey[RuleDescriptionSections.RESOURCES][0].content +=
'<br/>' + ruleDetails.htmlNote;
} else {
- groupedDescriptions[RuleDescriptionSections.RESOURCES] = [
+ descriptionSectionsByKey[RuleDescriptionSections.RESOURCES] = [
{
key: RuleDescriptionSections.RESOURCES,
content: ruleDetails.htmlNote
}
}
- const rootCause =
- groupedDescriptions[RuleDescriptionSections.DEFAULT] ||
- groupedDescriptions[RuleDescriptionSections.ROOT_CAUSE];
+ const rootCauseDescriptionSections =
+ descriptionSectionsByKey[RuleDescriptionSections.DEFAULT] ||
+ descriptionSectionsByKey[RuleDescriptionSections.ROOT_CAUSE];
return [
{
{
key: IssueTabKeys.WhyIsThisAnIssue,
label: translate('issue.tabs', IssueTabKeys.WhyIsThisAnIssue),
- content: rootCause && (
+ content: rootCauseDescriptionSections && (
<RuleDescription
- description={rootCause}
- isDefault={groupedDescriptions[RuleDescriptionSections.DEFAULT] !== undefined}
+ sections={rootCauseDescriptionSections}
+ isDefault={descriptionSectionsByKey[RuleDescriptionSections.DEFAULT] !== undefined}
+ defaultContextKey={ruleDescriptionContextKey}
/>
)
},
{
key: IssueTabKeys.HowToFixIt,
label: translate('issue.tabs', IssueTabKeys.HowToFixIt),
- content: groupedDescriptions[RuleDescriptionSections.HOW_TO_FIX] && (
- <RuleDescription description={groupedDescriptions[RuleDescriptionSections.HOW_TO_FIX]} />
+ content: descriptionSectionsByKey[RuleDescriptionSections.HOW_TO_FIX] && (
+ <RuleDescription
+ sections={descriptionSectionsByKey[RuleDescriptionSections.HOW_TO_FIX]}
+ defaultContextKey={ruleDescriptionContextKey}
+ />
)
},
{
key: IssueTabKeys.MoreInfo,
label: translate('issue.tabs', IssueTabKeys.MoreInfo),
content: (ruleDetails.genericConcepts ||
- groupedDescriptions[RuleDescriptionSections.RESOURCES]) && (
+ descriptionSectionsByKey[RuleDescriptionSections.RESOURCES]) && (
<MoreInfoRuleDescription
genericConcepts={ruleDetails.genericConcepts}
- description={groupedDescriptions[RuleDescriptionSections.RESOURCES]}
+ sections={descriptionSectionsByKey[RuleDescriptionSections.RESOURCES]}
/>
)
}
computeTabs() {
const { ruleDescriptionSections, codeTabContent } = this.props;
- const groupedDescriptions = groupBy(ruleDescriptionSections, description => description.key);
- const rootCause =
- groupedDescriptions[RuleDescriptionSections.DEFAULT] ||
- groupedDescriptions[RuleDescriptionSections.ROOT_CAUSE];
+ const descriptionSectionsByKey = groupBy(ruleDescriptionSections, section => section.key);
+ const rootCauseDescriptionSections =
+ descriptionSectionsByKey[RuleDescriptionSections.DEFAULT] ||
+ descriptionSectionsByKey[RuleDescriptionSections.ROOT_CAUSE];
return [
{
{
key: TabKeys.RiskDescription,
label: translate('hotspots.tabs.risk_description'),
- content: rootCause && <RuleDescription description={rootCause} isDefault={true} />
+ content: rootCauseDescriptionSections && (
+ <RuleDescription sections={rootCauseDescriptionSections} isDefault={true} />
+ )
},
{
key: TabKeys.VulnerabilityDescription,
label: translate('hotspots.tabs.vulnerability_description'),
- content: groupedDescriptions[RuleDescriptionSections.ASSESS_THE_PROBLEM] && (
+ content: descriptionSectionsByKey[RuleDescriptionSections.ASSESS_THE_PROBLEM] && (
<RuleDescription
- description={groupedDescriptions[RuleDescriptionSections.ASSESS_THE_PROBLEM]}
+ sections={descriptionSectionsByKey[RuleDescriptionSections.ASSESS_THE_PROBLEM]}
isDefault={true}
/>
)
{
key: TabKeys.FixRecommendation,
label: translate('hotspots.tabs.fix_recommendations'),
- content: groupedDescriptions[RuleDescriptionSections.HOW_TO_FIX] && (
+ content: descriptionSectionsByKey[RuleDescriptionSections.HOW_TO_FIX] && (
<RuleDescription
- description={groupedDescriptions[RuleDescriptionSections.HOW_TO_FIX]}
+ sections={descriptionSectionsByKey[RuleDescriptionSections.HOW_TO_FIX]}
isDefault={true}
/>
)
},
Object {
"content": <RuleDescription
- description={
+ isDefault={true}
+ sections={
Array [
Object {
"content": "cause",
},
]
}
- isDefault={true}
/>,
"key": "risk",
"label": "hotspots.tabs.risk_description",
},
Object {
"content": <RuleDescription
- description={
+ isDefault={true}
+ sections={
Array [
Object {
"content": "assess",
},
]
}
- isDefault={true}
/>,
"key": "vulnerability",
"label": "hotspots.tabs.vulnerability_description",
},
Object {
"content": <RuleDescription
- description={
+ isDefault={true}
+ sections={
Array [
Object {
"content": "how",
},
]
}
- isDefault={true}
/>,
"key": "fix",
"label": "hotspots.tabs.fix_recommendations",
className="bordered huge-spacer-bottom"
>
<RuleDescription
- description={
+ isDefault={true}
+ sections={
Array [
Object {
"content": "how",
},
]
}
- isDefault={true}
/>
</div>
</Fragment>
},
Object {
"content": <RuleDescription
- description={
+ isDefault={true}
+ sections={
Array [
Object {
"content": "cause",
},
]
}
- isDefault={true}
/>,
"key": "risk",
"label": "hotspots.tabs.risk_description",
},
Object {
"content": <RuleDescription
- description={
+ isDefault={true}
+ sections={
Array [
Object {
"content": "assess",
},
]
}
- isDefault={true}
/>,
"key": "vulnerability",
"label": "hotspots.tabs.vulnerability_description",
},
Object {
"content": <RuleDescription
- description={
+ isDefault={true}
+ sections={
Array [
Object {
"content": "how",
},
]
}
- isDefault={true}
/>,
"key": "fix",
"label": "hotspots.tabs.fix_recommendations",
},
Object {
"content": <RuleDescription
- description={
+ isDefault={true}
+ sections={
Array [
Object {
"content": "cause",
},
]
}
- isDefault={true}
/>,
"key": "risk",
"label": "hotspots.tabs.risk_description",
},
Object {
"content": <RuleDescription
- description={
+ isDefault={true}
+ sections={
Array [
Object {
"content": "assess",
},
]
}
- isDefault={true}
/>,
"key": "vulnerability",
"label": "hotspots.tabs.vulnerability_description",
},
Object {
"content": <RuleDescription
- description={
+ isDefault={true}
+ sections={
Array [
Object {
"content": "how",
},
]
}
- isDefault={true}
/>,
"key": "fix",
"label": "hotspots.tabs.fix_recommendations",
className="bordered huge-spacer-bottom"
>
<RuleDescription
- description={
+ isDefault={true}
+ sections={
Array [
Object {
"content": "assess",
},
]
}
- isDefault={true}
/>
</div>
</Fragment>
},
Object {
"content": <RuleDescription
- description={
+ isDefault={true}
+ sections={
Array [
Object {
"content": "cause",
},
]
}
- isDefault={true}
/>,
"key": "risk",
"label": "hotspots.tabs.risk_description",
},
Object {
"content": <RuleDescription
- description={
+ isDefault={true}
+ sections={
Array [
Object {
"content": "assess",
},
]
}
- isDefault={true}
/>,
"key": "vulnerability",
"label": "hotspots.tabs.vulnerability_description",
},
Object {
"content": <RuleDescription
- description={
+ isDefault={true}
+ sections={
Array [
Object {
"content": "how",
},
]
}
- isDefault={true}
/>,
"key": "fix",
"label": "hotspots.tabs.fix_recommendations",
import './style.css';
interface Props {
- description?: RuleDescriptionSection[];
+ sections?: RuleDescriptionSection[];
genericConcepts?: string[];
}
least_trust_principle: LeastTrustPrinciple
};
-export default function MoreInfoRuleDescription({ description = [], genericConcepts = [] }: Props) {
+export default function MoreInfoRuleDescription({ sections = [], genericConcepts = [] }: Props) {
return (
<>
- {description.length > 0 && (
+ {sections.length > 0 && (
<>
<div className="big-padded-left big-padded-right big-padded-top rule-desc">
<h2 className="null-spacer-bottom">
{translate('coding_rules.more_info.resources.title')}
</h2>
</div>
- <RuleDescription key="more-info" description={description} />
+ <RuleDescription key="more-info" sections={sections} />
</>
)}
import classNames from 'classnames';
import * as React from 'react';
import { RuleDescriptionSection } from '../../apps/coding-rules/rule';
-import { translate } from '../../helpers/l10n';
+import { translate, translateWithParameters } from '../../helpers/l10n';
import { sanitizeString } from '../../helpers/sanitize';
import RadioToggle from '../controls/RadioToggle';
+import { Alert } from '../ui/Alert';
import OtherContextOption from './OtherContextOption';
const OTHERS_KEY = 'others';
interface Props {
isDefault?: boolean;
- description: RuleDescriptionSection[];
+ sections: RuleDescriptionSection[];
+ defaultContextKey?: string;
}
interface State {
contexts: RuleDescriptionContextDisplay[];
+ defaultContext?: RuleDescriptionContextDisplay;
selectedContext?: RuleDescriptionContextDisplay;
}
export default class RuleDescription extends React.PureComponent<Props, State> {
constructor(props: Props) {
super(props);
- this.state = this.computeState(props.description);
+ this.state = this.computeState();
}
componentDidUpdate(prevProps: Props) {
- if (prevProps.description !== this.props.description) {
- this.setState(this.computeState(this.props.description));
+ const { sections, defaultContextKey } = this.props;
+
+ if (prevProps.sections !== sections || prevProps.defaultContextKey !== defaultContextKey) {
+ this.setState(this.computeState());
}
}
- computeState = (descriptions: RuleDescriptionSection[]) => {
- const contexts = descriptions
- .map(sec => ({
- displayName: sec.context?.displayName || '',
- content: sec.content,
- key: sec.key.toString()
+ computeState = () => {
+ const { sections, defaultContextKey } = this.props;
+
+ const contexts = sections
+ .filter(
+ (
+ section
+ ): section is RuleDescriptionSection & Required<Pick<RuleDescriptionSection, 'context'>> =>
+ section.context != null
+ )
+ .map(section => ({
+ displayName: section.context.displayName || section.context.key,
+ content: section.content,
+ key: section.context.key
}))
- .filter(sec => sec.displayName !== '')
.sort((a, b) => a.displayName.localeCompare(b.displayName));
if (contexts.length > 0) {
});
}
+ let defaultContext: RuleDescriptionContextDisplay | undefined;
+
+ if (defaultContextKey) {
+ defaultContext = contexts.find(context => context.key === defaultContextKey);
+ }
+
return {
contexts,
- selectedContext: contexts[0]
+ defaultContext,
+ selectedContext: defaultContext ?? contexts[0]
};
};
};
render() {
- const { description, isDefault } = this.props;
- const { contexts } = this.state;
- const { selectedContext } = this.state;
+ const { sections, isDefault } = this.props;
+ const { contexts, defaultContext, selectedContext } = this.state;
const options = contexts.map(ctxt => ({
label: ctxt.displayName,
value: ctxt.displayName
}));
- if (!description[0].context && description.length === 1) {
+ if (contexts.length > 0 && selectedContext) {
return (
<div
className={classNames('big-padded', {
markdown: isDefault,
'rule-desc': !isDefault
- })}
- // eslint-disable-next-line react/no-danger
- dangerouslySetInnerHTML={{
- __html: sanitizeString(description[0].content)
- }}
- />
+ })}>
+ <div className="rules-context-description">
+ <h2 className="rule-contexts-title">
+ {translate('coding_rules.description_context_title')}
+ </h2>
+ {defaultContext && (
+ <Alert variant="info" display="inline" className="big-spacer-bottom">
+ {translateWithParameters(
+ 'coding_rules.description_context_default_information',
+ defaultContext.displayName
+ )}
+ </Alert>
+ )}
+ <div>
+ <RadioToggle
+ className="big-spacer-bottom"
+ name="filter"
+ onCheck={this.handleToggleContext}
+ options={options}
+ value={selectedContext.displayName}
+ />
+ </div>
+ {selectedContext.key === OTHERS_KEY ? (
+ <OtherContextOption />
+ ) : (
+ <div
+ /* eslint-disable-next-line react/no-danger */
+ dangerouslySetInnerHTML={{ __html: sanitizeString(selectedContext.content) }}
+ />
+ )}
+ </div>
+ </div>
);
}
- if (!selectedContext) {
- return null;
- }
+
return (
<div
className={classNames('big-padded', {
markdown: isDefault,
'rule-desc': !isDefault
- })}>
- <div className="rules-context-description">
- <h2 className="rule-contexts-title">
- {translate('coding_rules.description_context_title')}
- </h2>
- <RadioToggle
- className="big-spacer-bottom"
- name="filter"
- onCheck={this.handleToggleContext}
- options={options}
- value={selectedContext.displayName}
- />
- {selectedContext.key === OTHERS_KEY ? (
- <OtherContextOption />
- ) : (
- <div
- /* eslint-disable-next-line react/no-danger */
- dangerouslySetInnerHTML={{ __html: sanitizeString(selectedContext.content) }}
- />
- )}
- </div>
- </div>
+ })}
+ // eslint-disable-next-line react/no-danger
+ dangerouslySetInnerHTML={{
+ __html: sanitizeString(sections[0].content)
+ }}
+ />
);
}
}
status: string;
textRange?: TextRange;
type: IssueType;
+ ruleDescriptionContextKey?: string;
}
export interface IssueResponse {
pullRequest?: string;
resolution?: string;
rule: string;
+ ruleDescriptionContextKey?: string;
ruleName: string;
ruleStatus?: string;
secondaryLocations: FlowLocation[];
coding_rules.description_section.title.more_info=More Info
coding_rules.description_context_title=Which component or framework contains the issue?
+coding_rules.description_context_default_information={0} was detected as the most relevant component or framework for this issue.
coding_rules.description_context_other=Other
coding_rules.more_info.generic_concept.title=Security principles
projects / sonarqube.git / commitdiff