SONAR-12498 Handle long settings keys

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 a3397c4b613f3712c5425296162f95d515cf5cdc..66ae9a55dcf91a7b54bbb748f3871a9ab9069717 100644 (file)
--- 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 4dd0f528a50531c13c9fb849481b763bbea35e52..70d8bc683b9aa23d20ea3b8fd20dae635af55163 100644 (file)
--- 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 d9190f4a1b15c232abd963e71e6dec34e61fbc5a..443d919110b32af1478573671d8bb7d76f6f1ccf 100644 (file)
--- 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;