From d76ae43d085b37c97d6a7e90f422ac7d6a5e3eac Mon Sep 17 00:00:00 2001
From: Jeremy Davis <jeremy.davis@sonarsource.com>
Date: Wed, 27 Apr 2022 12:15:48 +0200
Subject: [PATCH] SONAR-12498 Handle long settings keys

---
 .../components/DefinitionRenderer.tsx         |  9 ++-
 .../DefinitionRenderer-test.tsx.snap          | 72 ++++++++++++-------
 .../src/main/js/apps/settings/styles.css      |  4 --
 3 files changed, 54 insertions(+), 31 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/settings/components/DefinitionRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/DefinitionRenderer.tsx
index a3397c4b613..66ae9a55dcf 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/DefinitionRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/DefinitionRenderer.tsx
@@ -19,6 +19,7 @@
  */
 import classNames from 'classnames';
 import * as React from 'react';
+import Tooltip from '../../../components/controls/Tooltip';
 import AlertErrorIcon from '../../../components/icons/AlertErrorIcon';
 import AlertSuccessIcon from '../../../components/icons/AlertSuccessIcon';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
@@ -80,9 +81,11 @@ export default function DefinitionRenderer(props: DefinitionRendererProps) {
           />
         )}
 
-        <div className="settings-definition-key note little-spacer-top">
-          {translateWithParameters('settings.key_x', definition.key)}
-        </div>
+        <Tooltip overlay={translateWithParameters('settings.key_x', definition.key)}>
+          <div className="settings-definition-key note little-spacer-top">
+            {translateWithParameters('settings.key_x', definition.key)}
+          </div>
+        </Tooltip>
       </div>
 
       <div className="settings-definition-right">
diff --git a/server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/DefinitionRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/DefinitionRenderer-test.tsx.snap
index 4dd0f528a50..70d8bc683b9 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/DefinitionRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/DefinitionRenderer-test.tsx.snap
@@ -22,11 +22,15 @@ exports[`should render correctly: changed value 1`] = `
         }
       }
     />
-    <div
-      className="settings-definition-key note little-spacer-top"
+    <Tooltip
+      overlay="settings.key_x.foo"
     >
-      settings.key_x.foo
-    </div>
+      <div
+        className="settings-definition-key note little-spacer-top"
+      >
+        settings.key_x.foo
+      </div>
+    </Tooltip>
   </div>
   <div
     className="settings-definition-right"
@@ -106,11 +110,15 @@ exports[`should render correctly: in error 1`] = `
         }
       }
     />
-    <div
-      className="settings-definition-key note little-spacer-top"
+    <Tooltip
+      overlay="settings.key_x.foo"
     >
-      settings.key_x.foo
-    </div>
+      <div
+        className="settings-definition-key note little-spacer-top"
+      >
+        settings.key_x.foo
+      </div>
+    </Tooltip>
   </div>
   <div
     className="settings-definition-right"
@@ -199,11 +207,15 @@ exports[`should render correctly: loading 1`] = `
         }
       }
     />
-    <div
-      className="settings-definition-key note little-spacer-top"
+    <Tooltip
+      overlay="settings.key_x.foo"
     >
-      settings.key_x.foo
-    </div>
+      <div
+        className="settings-definition-key note little-spacer-top"
+      >
+        settings.key_x.foo
+      </div>
+    </Tooltip>
   </div>
   <div
     className="settings-definition-right"
@@ -290,11 +302,15 @@ exports[`should render correctly: original value 1`] = `
         }
       }
     />
-    <div
-      className="settings-definition-key note little-spacer-top"
+    <Tooltip
+      overlay="settings.key_x.foo"
     >
-      settings.key_x.foo
-    </div>
+      <div
+        className="settings-definition-key note little-spacer-top"
+      >
+        settings.key_x.foo
+      </div>
+    </Tooltip>
   </div>
   <div
     className="settings-definition-right"
@@ -375,11 +391,15 @@ exports[`should render correctly: success 1`] = `
         }
       }
     />
-    <div
-      className="settings-definition-key note little-spacer-top"
+    <Tooltip
+      overlay="settings.key_x.foo"
     >
-      settings.key_x.foo
-    </div>
+      <div
+        className="settings-definition-key note little-spacer-top"
+      >
+        settings.key_x.foo
+      </div>
+    </Tooltip>
   </div>
   <div
     className="settings-definition-right"
@@ -466,11 +486,15 @@ exports[`should render correctly: with description 1`] = `
         }
       }
     />
-    <div
-      className="settings-definition-key note little-spacer-top"
+    <Tooltip
+      overlay="settings.key_x.foo"
     >
-      settings.key_x.foo
-    </div>
+      <div
+        className="settings-definition-key note little-spacer-top"
+      >
+        settings.key_x.foo
+      </div>
+    </Tooltip>
   </div>
   <div
     className="settings-definition-right"
diff --git a/server/sonar-web/src/main/js/apps/settings/styles.css b/server/sonar-web/src/main/js/apps/settings/styles.css
index d9190f4a1b1..443d919110b 100644
--- a/server/sonar-web/src/main/js/apps/settings/styles.css
+++ b/server/sonar-web/src/main/js/apps/settings/styles.css
@@ -102,10 +102,6 @@
   white-space: nowrap;
 }
 
-.settings-definition-key:hover {
-  overflow: visible;
-}
-
 .settings-definition-state {
   min-height: 32px;
   padding-bottom: 4px;
-- 
2.39.5