import * as React from 'react'; | import * as React from 'react'; | ||||
import { SubmitButton } from 'sonar-ui-common/components/controls/buttons'; | import { SubmitButton } from 'sonar-ui-common/components/controls/buttons'; | ||||
import Radio from 'sonar-ui-common/components/controls/Radio'; | import Radio from 'sonar-ui-common/components/controls/Radio'; | ||||
import Tooltip from 'sonar-ui-common/components/controls/Tooltip'; | |||||
import { translate } from 'sonar-ui-common/helpers/l10n'; | import { translate } from 'sonar-ui-common/helpers/l10n'; | ||||
import MarkdownTips from '../../../components/common/MarkdownTips'; | import MarkdownTips from '../../../components/common/MarkdownTips'; | ||||
import { | import { | ||||
return ( | return ( | ||||
<form className="abs-width-400 padded" onSubmit={props.onSubmit}> | <form className="abs-width-400 padded" onSubmit={props.onSubmit}> | ||||
<h2>{translate('hotspots.form.title')}</h2> | |||||
<h2> | |||||
{disableStatusChange | |||||
? translate('hotspots.form.title.disabled') | |||||
: translate('hotspots.form.title')} | |||||
</h2> | |||||
<div className="display-flex-column big-spacer-bottom"> | <div className="display-flex-column big-spacer-bottom"> | ||||
{renderOption({ | {renderOption({ | ||||
disabled: disableStatusChange, | disabled: disableStatusChange, | ||||
selectedOption: HotspotStatusOption; | selectedOption: HotspotStatusOption; | ||||
}) { | }) { | ||||
const { disabled, onClick, option, selectedOption } = params; | const { disabled, onClick, option, selectedOption } = params; | ||||
return ( | |||||
const optionRender = ( | |||||
<div className="big-spacer-top"> | <div className="big-spacer-top"> | ||||
<Radio | <Radio | ||||
checked={selectedOption === option} | checked={selectedOption === option} | ||||
</div> | </div> | ||||
</div> | </div> | ||||
); | ); | ||||
return disabled ? ( | |||||
<Tooltip overlay={translate('hotspots.form.cannot_change_status')} placement="left"> | |||||
{optionRender} | |||||
</Tooltip> | |||||
) : ( | |||||
optionRender | |||||
); | |||||
} | } |
onSubmit={[MockFunction]} | onSubmit={[MockFunction]} | ||||
> | > | ||||
<h2> | <h2> | ||||
hotspots.form.title | |||||
hotspots.form.title.disabled | |||||
</h2> | </h2> | ||||
<div | <div | ||||
className="display-flex-column big-spacer-bottom" | className="display-flex-column big-spacer-bottom" | ||||
> | > | ||||
<div | |||||
className="big-spacer-top" | |||||
<Tooltip | |||||
overlay="hotspots.form.cannot_change_status" | |||||
placement="left" | |||||
> | > | ||||
<Radio | |||||
checked={true} | |||||
className="disabled" | |||||
onCheck={[Function]} | |||||
value="FIXED" | |||||
> | |||||
<h3 | |||||
className="text-muted" | |||||
> | |||||
hotspots.status_option.FIXED | |||||
</h3> | |||||
</Radio> | |||||
<div | <div | ||||
className="radio-button-description text-muted" | |||||
className="big-spacer-top" | |||||
> | > | ||||
hotspots.status_option.FIXED.description | |||||
<Radio | |||||
checked={true} | |||||
className="disabled" | |||||
onCheck={[Function]} | |||||
value="FIXED" | |||||
> | |||||
<h3 | |||||
className="text-muted" | |||||
> | |||||
hotspots.status_option.FIXED | |||||
</h3> | |||||
</Radio> | |||||
<div | |||||
className="radio-button-description text-muted" | |||||
> | |||||
hotspots.status_option.FIXED.description | |||||
</div> | |||||
</div> | </div> | ||||
</div> | |||||
<div | |||||
className="big-spacer-top" | |||||
</Tooltip> | |||||
<Tooltip | |||||
overlay="hotspots.form.cannot_change_status" | |||||
placement="left" | |||||
> | > | ||||
<Radio | |||||
checked={false} | |||||
className="disabled" | |||||
onCheck={[Function]} | |||||
value="SAFE" | |||||
> | |||||
<h3 | |||||
className="text-muted" | |||||
> | |||||
hotspots.status_option.SAFE | |||||
</h3> | |||||
</Radio> | |||||
<div | <div | ||||
className="radio-button-description text-muted" | |||||
className="big-spacer-top" | |||||
> | > | ||||
hotspots.status_option.SAFE.description | |||||
<Radio | |||||
checked={false} | |||||
className="disabled" | |||||
onCheck={[Function]} | |||||
value="SAFE" | |||||
> | |||||
<h3 | |||||
className="text-muted" | |||||
> | |||||
hotspots.status_option.SAFE | |||||
</h3> | |||||
</Radio> | |||||
<div | |||||
className="radio-button-description text-muted" | |||||
> | |||||
hotspots.status_option.SAFE.description | |||||
</div> | |||||
</div> | </div> | ||||
</div> | |||||
<div | |||||
className="big-spacer-top" | |||||
</Tooltip> | |||||
<Tooltip | |||||
overlay="hotspots.form.cannot_change_status" | |||||
placement="left" | |||||
> | > | ||||
<Radio | |||||
checked={false} | |||||
className="disabled" | |||||
onCheck={[Function]} | |||||
value="ADDITIONAL_REVIEW" | |||||
> | |||||
<h3 | |||||
className="text-muted" | |||||
> | |||||
hotspots.status_option.ADDITIONAL_REVIEW | |||||
</h3> | |||||
</Radio> | |||||
<div | <div | ||||
className="radio-button-description text-muted" | |||||
className="big-spacer-top" | |||||
> | > | ||||
hotspots.status_option.ADDITIONAL_REVIEW.description | |||||
<Radio | |||||
checked={false} | |||||
className="disabled" | |||||
onCheck={[Function]} | |||||
value="ADDITIONAL_REVIEW" | |||||
> | |||||
<h3 | |||||
className="text-muted" | |||||
> | |||||
hotspots.status_option.ADDITIONAL_REVIEW | |||||
</h3> | |||||
</Radio> | |||||
<div | |||||
className="radio-button-description text-muted" | |||||
> | |||||
hotspots.status_option.ADDITIONAL_REVIEW.description | |||||
</div> | |||||
</div> | </div> | ||||
</div> | |||||
</Tooltip> | |||||
</div> | </div> | ||||
<div | <div | ||||
className="display-flex-column big-spacer-bottom" | className="display-flex-column big-spacer-bottom" |
hotspots.review_hotspot=Review Hotspot | hotspots.review_hotspot=Review Hotspot | ||||
hotspots.form.title=Mark Security Hotspot as: | hotspots.form.title=Mark Security Hotspot as: | ||||
hotspots.form.title.disabled=Security Hotspot is marked as: | |||||
hotspots.form.cannot_change_status=Changing a hotspot's status requires permission. | |||||
hotspots.form.assign_to=Assign to: | hotspots.form.assign_to=Assign to: | ||||
hotspots.form.select_user=Select a user... | hotspots.form.select_user=Select a user... | ||||
hotspots.form.comment=Comment: | hotspots.form.comment=Comment: | ||||
hotspots.form.comment.placeholder=This status requires justification | |||||
hotspots.form.comment.placeholder=For tracking purposes, we highly recommend explaining why the code is safe. | |||||
hotspots.form.submit.TO_REVIEW=Submit Review | hotspots.form.submit.TO_REVIEW=Submit Review | ||||
hotspots.form.submit.REVIEWED=Apply changes | hotspots.form.submit.REVIEWED=Apply changes | ||||