New: Search library by MusicBrainz ID

(cherry picked from commit 377e5f7fc7bb070a2f6e55a6bc8f2bdad733c308)

Closes #3813

frontend/src/Components/Page/Header/ArtistSearchInputConnector.js

@@ -25,6 +25,7 @@ function createCleanArtistSelector() {
           sortName,
           foreignArtistId,
           images,
+          firstCharacter: artistName.charAt(0).toLowerCase(),
           tags: tags.reduce((acc, id) => {
             const matchingTag = allTags.find((tag) => tag.id === id);
 

frontend/src/Components/Page/Header/ArtistSearchResult.js

@@ -10,6 +10,7 @@ function ArtistSearchResult(props) {
     match,
     artistName,
     images,
+    foreignArtistId,
     tags
   } = props;
 
@@ -34,6 +35,14 @@ function ArtistSearchResult(props) {
           {artistName}
         </div>
 
+        {
+          match.key === 'foreignArtistId' && foreignArtistId ?
+            <div className={styles.alternateTitle}>
+              MbId: {foreignArtistId}
+            </div> :
+            null
+        }
+
         {
           tag ?
             <div className={styles.tagContainer}>
@@ -54,6 +63,7 @@ function ArtistSearchResult(props) {
 ArtistSearchResult.propTypes = {
   artistName: PropTypes.string.isRequired,
   images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  foreignArtistId: PropTypes.string.isRequired,
   tags: PropTypes.arrayOf(PropTypes.object).isRequired,
   match: PropTypes.object.isRequired
 };

frontend/src/Components/Page/Header/fuse.worker.js

@@ -9,6 +9,7 @@ const fuseOptions = {
   minMatchCharLength: 1,
   keys: [
     'artistName',
+    'foreignArtistId',
     'tags.label'
   ]
 };