SONAR-12719 Handle labels in actions

2 files changed, 83 insertions, 54 deletions

diff --git a/server/sonar-web/src/main/js/apps/securityHotspots/components/HotspotActionsFormRenderer.tsx b/server/sonar-web/src/main/js/apps/securityHotspots/components/HotspotActionsFormRenderer.tsx
index 829df46d1a0..e6a382828db 100644
--- a/server/sonar-web/src/main/js/apps/securityHotspots/components/HotspotActionsFormRenderer.tsx
+++ b/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
+  );
 }
diff --git a/server/sonar-web/src/main/js/apps/securityHotspots/components/__tests__/__snapshots__/HotspotActionsFormRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/securityHotspots/components/__tests__/__snapshots__/HotspotActionsFormRenderer-test.tsx.snap
index 25f5ec0e7a5..3aec0f39980 100644
--- a/server/sonar-web/src/main/js/apps/securityHotspots/components/__tests__/__snapshots__/HotspotActionsFormRenderer-test.tsx.snap
+++ b/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"