SONAR-12719 Handle labels in actions

server/sonar-web/src/main/js/apps/securityHotspots/components/HotspotActionsFormRenderer.tsx

@@ -21,6 +21,7 @@ import * as classnames from 'classnames';
 import * as React from 'react';
 import { SubmitButton } from 'sonar-ui-common/components/controls/buttons';
 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 MarkdownTips from '../../../components/common/MarkdownTips';
 import {
@@ -50,7 +51,11 @@ export default function HotspotActionsFormRenderer(props: HotspotActionsFormRend
 
   return (
     <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">
         {renderOption({
           disabled: disableStatusChange,
@@ -140,7 +145,8 @@ function renderOption(params: {
   selectedOption: HotspotStatusOption;
 }) {
   const { disabled, onClick, option, selectedOption } = params;
-  return (
+
+  const optionRender = (
     <div className="big-spacer-top">
       <Radio
         checked={selectedOption === option}
@@ -156,4 +162,12 @@ function renderOption(params: {
       </div>
     </div>
   );
+
+  return disabled ? (
+    <Tooltip overlay={translate('hotspots.form.cannot_change_status')} placement="left">
+      {optionRender}
+    </Tooltip>
+  ) : (
+    optionRender
+  );
 }

server/sonar-web/src/main/js/apps/securityHotspots/components/__tests__/__snapshots__/HotspotActionsFormRenderer-test.tsx.snap

@@ -219,74 +219,89 @@ exports[`should render correctly: restricted access 1`] = `
   onSubmit={[MockFunction]}
 >
   <h2>
-    hotspots.form.title
+    hotspots.form.title.disabled
   </h2>
   <div
     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
-        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
-      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
-        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
-      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
-        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>
+    </Tooltip>
   </div>
   <div
     className="display-flex-column big-spacer-bottom"

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -690,11 +690,13 @@ hotspot.filters.show_all=Show all hotspots
 hotspots.review_hotspot=Review Hotspot
 
 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.select_user=Select a user...
 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.REVIEWED=Apply changes