From 700fdd18ebbc64f1c6dac50569c4a640238fed9a Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Wed, 11 Sep 2019 22:50:40 -0400
Subject: [PATCH] New: Add MB Link to add new artist search result

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
---
 .../AddNewArtist/AddNewArtistSearchResult.css  | 17 +++++++++++++++++
 .../AddNewArtist/AddNewArtistSearchResult.js   | 18 +++++++++++++++++-
 frontend/src/Styles/Variables/colors.js        |  1 +
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/frontend/src/AddArtist/AddNewArtist/AddNewArtistSearchResult.css b/frontend/src/AddArtist/AddNewArtist/AddNewArtistSearchResult.css
index c56765538..2ff15135c 100644
--- a/frontend/src/AddArtist/AddNewArtist/AddNewArtistSearchResult.css
+++ b/frontend/src/AddArtist/AddNewArtist/AddNewArtistSearchResult.css
@@ -20,7 +20,12 @@
   height: 250px;
 }
 
+.content {
+  flex: 0 1 100%;
+}
+
 .name {
+  display: flex;
   font-weight: 300;
   font-size: 36px;
 }
@@ -30,6 +35,18 @@
   color: $disabledColor;
 }
 
+.mbLink {
+  composes: link from '~Components/Link/Link.css';
+
+  margin-top: -4px;
+  margin-left: auto;
+  color: $textColor;
+}
+
+.mbLinkIcon {
+  margin-left: 10px;
+}
+
 .alreadyExistsIcon {
   margin-left: 10px;
   color: #37bc9b;
diff --git a/frontend/src/AddArtist/AddNewArtist/AddNewArtistSearchResult.js b/frontend/src/AddArtist/AddNewArtist/AddNewArtistSearchResult.js
index 8c5e54cbc..c74ba8afd 100644
--- a/frontend/src/AddArtist/AddNewArtist/AddNewArtistSearchResult.js
+++ b/frontend/src/AddArtist/AddNewArtist/AddNewArtistSearchResult.js
@@ -59,6 +59,10 @@ class AddNewArtistSearchResult extends Component {
     this.setState({ isNewAddArtistModalOpen: false });
   }
 
+  onMBLinkPress = (event) => {
+    event.stopPropagation();
+  }
+
   //
   // Render
 
@@ -104,7 +108,7 @@ class AddNewArtistSearchResult extends Component {
               />
           }
 
-          <div>
+          <div className={styles.content}>
             <div className={styles.name}>
               {artistName}
 
@@ -131,6 +135,18 @@ class AddNewArtistSearchResult extends Component {
                   /> :
                   null
               }
+
+              <Link
+                className={styles.mbLink}
+                to={`https://musicbrainz.org/artist/${foreignArtistId}`}
+                onPress={this.onMBLinkPress}
+              >
+                <Icon
+                  className={styles.mbLinkIcon}
+                  name={icons.EXTERNAL_LINK}
+                  size={28}
+                />
+              </Link>
             </div>
 
             <div>
diff --git a/frontend/src/Styles/Variables/colors.js b/frontend/src/Styles/Variables/colors.js
index b9741a69a..b16d7b00f 100644
--- a/frontend/src/Styles/Variables/colors.js
+++ b/frontend/src/Styles/Variables/colors.js
@@ -1,6 +1,7 @@
 const lidarrGreen = '#00A65B';
 
 module.exports = {
+  textColor: '#515253',
   defaultColor: '#333',
   disabledColor: '#999',
   dimColor: '#555',