Add Support for Artist Links from Metadata

frontend/src/Artist/Details/ArtistDetails.js

@@ -159,6 +159,7 @@ class ArtistDetails extends Component {
       monitored,
       status,
       overview,
+      links,
       images,
       albums,
       alternateTitles,
@@ -416,6 +417,7 @@ class ArtistDetails extends Component {
                     tooltip={
                       <ArtistDetailsLinks
                         foreignArtistId={foreignArtistId}
+                        links={links}
                       />
                       }
                     kind={kinds.INVERSE}
@@ -541,6 +543,7 @@ ArtistDetails.propTypes = {
   monitored: PropTypes.bool.isRequired,
   status: PropTypes.string.isRequired,
   overview: PropTypes.string.isRequired,
+  links: PropTypes.arrayOf(PropTypes.object).isRequired,
   images: PropTypes.arrayOf(PropTypes.object).isRequired,
   albums: PropTypes.arrayOf(PropTypes.object).isRequired,
   alternateTitles: PropTypes.arrayOf(PropTypes.string).isRequired,

frontend/src/Artist/Details/ArtistDetailsLinks.js

@@ -7,11 +7,13 @@ import styles from './ArtistDetailsLinks.css';
 
 function ArtistDetailsLinks(props) {
   const {
-    foreignArtistId
+    foreignArtistId,
+    links
   } = props;
 
   return (
     <div className={styles.links}>
+
       <Link
         className={styles.link}
         to={`https://musicbrainz.org/artist/${foreignArtistId}`}
@@ -25,12 +27,37 @@ function ArtistDetailsLinks(props) {
         </Label>
       </Link>
 
+      {links.map((link, index) => {
+        return (
+          <span key={index}>
+            <Link className={styles.link}
+              to={link.url}
+              key={index}
+            >
+              <Label
+                className={styles.linkLabel}
+                kind={kinds.INFO}
+                size={sizes.LARGE}
+              >
+                {link.name}
+              </Label>
+            </Link>
+            {(index > 0 && index % 5 === 0) &&
+              <br></br>
+            }
+
+          </span>
+        );
+      })}
+
     </div>
+
   );
 }
 
 ArtistDetailsLinks.propTypes = {
-  foreignArtistId: PropTypes.string.isRequired
+  foreignArtistId: PropTypes.string.isRequired,
+  links: PropTypes.arrayOf(PropTypes.object).isRequired
 };
 
 export default ArtistDetailsLinks;