SONAR-7936 Links with same name are not displayed on project dashboard

3 files changed, 64 insertions, 25 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/meta/Meta.js b/server/sonar-web/src/main/js/apps/overview/meta/Meta.js
index 34fd17dc77a..13b830ad942 100644
--- a/server/sonar-web/src/main/js/apps/overview/meta/Meta.js
+++ b/server/sonar-web/src/main/js/apps/overview/meta/Meta.js
@@ -26,14 +26,13 @@ import MetaQualityProfiles from './MetaQualityProfiles';
 import EventsList from './../events/EventsList';
 
 const Meta = ({ component }) => {
-  const { qualifier, description, links, profiles, gate } = component;
+  const { qualifier, description, profiles, gate } = component;
 
   const isProject = qualifier === 'TRK';
   const isView = qualifier === 'VW' || qualifier === 'SVW';
   const isDeveloper = qualifier === 'DEV';
 
   const hasDescription = !!description;
-  const hasLinks = Array.isArray(links) && !!links.length;
   const hasQualityProfiles = Array.isArray(profiles) && profiles.length > 0;
   const hasQualityGate = !!gate;
 
@@ -51,9 +50,7 @@ const Meta = ({ component }) => {
               </div>
           )}
 
-          {hasLinks && (
-              <MetaLinks links={links}/>
-          )}
+          <MetaLinks component={component}/>
 
           <MetaKey component={component}/>
         </div>
diff --git a/server/sonar-web/src/main/js/apps/overview/meta/MetaLinks.js b/server/sonar-web/src/main/js/apps/overview/meta/MetaLinks.js
index 369846ccb28..1bc4b5ce256 100644
--- a/server/sonar-web/src/main/js/apps/overview/meta/MetaLinks.js
+++ b/server/sonar-web/src/main/js/apps/overview/meta/MetaLinks.js
@@ -18,24 +18,64 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
+import { getProjectLinks } from '../../../api/projectLinks';
+import { isProvided } from '../../project-admin/links/utils';
 
-const MetaLinks = ({ links }) => {
-  return (
-      <ul className="overview-meta-list big-spacer-bottom">
-        {links.map(link => (
-            <li key={link.type}>
-              <a
-                  className="link-with-icon"
-                  href={link.href}
-                  target="_blank">
-                <i className={`icon-color-link icon-${link.type}`}/>
-                &nbsp;
-                {link.name}
-              </a>
-            </li>
-        ))}
-      </ul>
-  );
-};
-
-export default MetaLinks;
+export default class MetaLinks extends React.Component {
+  static propTypes = {
+    component: React.PropTypes.object.isRequired
+  };
+
+  state = {};
+
+  componentDidMount () {
+    this.mounted = true;
+    this.loadLinks();
+  }
+
+  componentDidUpdate (prevProps) {
+    if (prevProps.component !== this.props.component) {
+      this.loadLinks();
+    }
+  }
+
+  componentWillUnmount () {
+    this.mounted = false;
+  }
+
+  loadLinks () {
+    getProjectLinks(this.props.component.key).then(links => {
+      if (this.mounted) {
+        this.setState({ links });
+      }
+    });
+  }
+
+  renderLinkIcon (link) {
+    return isProvided(link) ?
+        <i className={`icon-color-link icon-${link.type}`}/> :
+        <i className="icon-color-link icon-detach"/>;
+  }
+
+  render () {
+    const { links } = this.state;
+
+    if (links == null || links.length === 0) {
+      return null;
+    }
+
+    return (
+        <ul className="overview-meta-list big-spacer-bottom">
+          {links.map(link => (
+              <li key={link.id}>
+                <a className="link-with-icon" href={link.url} target="_blank">
+                  {this.renderLinkIcon(link)}
+                  &nbsp;
+                  {link.name}
+                </a>
+              </li>
+          ))}
+        </ul>
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css
index 2c920297fb1..8f5738cee77 100644
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/server/sonar-web/src/main/js/apps/overview/styles.css
@@ -248,6 +248,8 @@
 }
 
 .overview-meta-list > li {
+  /* 1px to not cut icons on the left */
+  padding-left: 1px;
   padding-bottom: 4px;
   overflow: hidden;
   text-overflow: ellipsis;