SONAR-9935 Fix display style of the plugins list

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 79498c13948c45ce75f7845167411f653b0918fa..48924aba04ee59f9a204771b09b20a81a05ecfa1 100644 (file)
--- 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 86935c1406da5e2c2e25159c16ac3ac6df291229..aabb86e0f6d43272fb1305d8682c9146703a3f5c 100644 (file)
--- 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 9ee5b5d53b7746320ecd275b15d0705b5c9e5a7a..c8a61a2ff20d414f043f12b0d56b798ccaf335b7 100644 (file)
--- 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 df35603ab1545742d46665c934417a85d2848f75..4d878b65da2437fd762afa9ed8413153a64a535b 100644 (file)
--- 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 0ee76f8637df53f30492051c66b42e55a3b083f5..e114858747d5983d335ba67708d75bbce5d955f5 100644 (file)
--- 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 50716b726e9a93fb725725dc97a4a74e9b696ee1..f3f41898ffa35149c014fdb0d605f0d3d9ec0938 100644 (file)
--- 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 6120da38dc8eb6fc75ab8c022f0a56f2f7f3be36..f9aeacd79ffbd9598ca939effead66b828b5693c 100644 (file)
--- 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 f37ffec7f0261e3fa4968cee190e74ae0bb8b52c..5c6e0ab7138409441b0b00e2c43fda23e31e8481 100644 (file)
--- 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 037a0c133d99409cc9e2c7875cd1b84972dd33ae..b435f1c3367a3cdb55581ba82f981d9dde5ddc16 100644 (file)
--- 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;
+}