SONAR-9935 Fix display style of the plugins list

9 files changed, 50 insertions, 32 deletions

diff --git a/server/sonar-web/src/main/js/apps/marketplace/PluginsList.tsx b/server/sonar-web/src/main/js/apps/marketplace/PluginsList.tsx
index 79498c13948..48924aba04e 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/PluginsList.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/PluginsList.tsx
@@ -83,7 +83,7 @@ export default class PluginsList extends React.PureComponent<Props> {
         <ul>
           {this.props.plugins.map(plugin => (
             <li key={plugin.key} className="panel panel-vertical">
-              <table className="width-100">
+              <table className="marketplace-plugin-table">
                 <tbody>{this.renderPlugin(plugin)}</tbody>
               </table>
             </li>
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginAvailable.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginAvailable.tsx
index 86935c1406d..aabb86e0f6d 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginAvailable.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginAvailable.tsx
@@ -70,7 +70,7 @@ export default function PluginAvailable({
         </ul>
       </td>
 
-      <td className="text-top width-20 big-spacer-right">
+      <td className="text-top width-20">
         <ul>
           <PluginUrls plugin={plugin} />
           <PluginLicense license={plugin.license} />
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginDescription.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginDescription.tsx
index 9ee5b5d53b7..c8a61a2ff20 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginDescription.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginDescription.tsx
@@ -35,7 +35,7 @@ export default class PluginDescription extends React.PureComponent<Props> {
   render() {
     const { plugin } = this.props;
     return (
-      <td className="text-top width-20 big-spacer-right">
+      <td className="text-top width-25 big-spacer-right">
         <div>
           <strong className="js-plugin-name">{plugin.name}</strong>
           {plugin.category && (
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginInstalled.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginInstalled.tsx
index df35603ab15..4d878b65da2 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginInstalled.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginInstalled.tsx
@@ -58,7 +58,7 @@ export default function PluginInstalled({
         </ul>
       </td>
 
-      <td className="text-top width-20 big-spacer-right">
+      <td className="text-top width-20">
         <ul>
           <PluginUrls plugin={plugin} />
           <PluginLicense license={plugin.license} />
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginLicense.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginLicense.tsx
index 0ee76f8637d..e114858747d 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginLicense.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginLicense.tsx
@@ -19,6 +19,7 @@
  */
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
+import Tooltip from '../../../components/controls/Tooltip';
 import { translate } from '../../../helpers/l10n';
 
 interface Props {
@@ -30,14 +31,16 @@ export default function PluginLicense({ license }: Props) {
     return null;
   }
   return (
-    <li className="little-spacer-bottom text-limited" title={license}>
-      <FormattedMessage
-        defaultMessage={translate('marketplace.licensed_under_x')}
-        id="marketplace.licensed_under_x"
-        values={{
-          license: <span className="js-plugin-license">{license}</span>
-        }}
-      />
-    </li>
+    <Tooltip overlay={license}>
+      <li className="little-spacer-bottom marketplace-plugin-license">
+        <FormattedMessage
+          defaultMessage={translate('marketplace.licensed_under_x')}
+          id="marketplace.licensed_under_x"
+          values={{
+            license: <span className="js-plugin-license">{license}</span>
+          }}
+        />
+      </li>
+    </Tooltip>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginStatus.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginStatus.tsx
index 50716b726e9..f3f41898ffa 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginStatus.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginStatus.tsx
@@ -30,7 +30,7 @@ interface Props {
 
 export default function PluginStatus({ plugin, refreshPending, status }: Props) {
   return (
-    <td className="text-top text-right width-20">
+    <td className="text-top text-right width-20 little-spacer-left">
       {status === 'installing' && (
         <p className="text-success">{translate('marketplace.install_pending')}</p>
       )}
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/PluginDescription-test.tsx.snap b/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/PluginDescription-test.tsx.snap
index 6120da38dc8..f9aeacd79ff 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/PluginDescription-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/PluginDescription-test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`should display the description and category 1`] = `
 <td
-  className="text-top width-20 big-spacer-right"
+  className="text-top width-25 big-spacer-right"
 >
   <div>
     <strong
@@ -28,7 +28,7 @@ exports[`should display the description and category 1`] = `
 
 exports[`should not display any category 1`] = `
 <td
-  className="text-top width-20 big-spacer-right"
+  className="text-top width-25 big-spacer-right"
 >
   <div>
     <strong
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/PluginLicense-test.tsx.snap b/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/PluginLicense-test.tsx.snap
index f37ffec7f02..5c6e0ab7138 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/PluginLicense-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/__tests__/__snapshots__/PluginLicense-test.tsx.snap
@@ -1,24 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should display the license field 1`] = `
-<li
-  className="little-spacer-bottom text-limited"
-  title="SonarSource license"
+<Tooltip
+  overlay="SonarSource license"
+  placement="bottom"
 >
-  <FormattedMessage
-    defaultMessage="marketplace.licensed_under_x"
-    id="marketplace.licensed_under_x"
-    values={
-      Object {
-        "license": <span
-          className="js-plugin-license"
-      >
-          SonarSource license
-      </span>,
+  <li
+    className="little-spacer-bottom marketplace-plugin-license"
+  >
+    <FormattedMessage
+      defaultMessage="marketplace.licensed_under_x"
+      id="marketplace.licensed_under_x"
+      values={
+        Object {
+          "license": <span
+            className="js-plugin-license"
+        >
+            SonarSource license
+        </span>,
+        }
       }
-    }
-  />
-</li>
+    />
+  </li>
+</Tooltip>
 `;
 
 exports[`should not display anything 1`] = `null`;
diff --git a/server/sonar-web/src/main/js/apps/marketplace/style.css b/server/sonar-web/src/main/js/apps/marketplace/style.css
index 037a0c133d9..b435f1c3367 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/style.css
+++ b/server/sonar-web/src/main/js/apps/marketplace/style.css
@@ -30,3 +30,14 @@
   align-items: baseline;
   justify-content: space-between;
 }
+
+.marketplace-plugin-table {
+  table-layout: fixed;
+  width: 100%;
+}
+
+.marketplace-plugin-license {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}