New: Release Profiles, Frontend updates (#580)

* New: Release Profiles - UI Updates

* New: Release Profiles - API Changes

* New: Release Profiles - Test Updates

* New: Release Profiles - Backend Updates

* New: Interactive Artist Search

* New: Change Montiored on Album Details Page

* New: Show Duration on Album Details Page

* Fixed: Manual Import not working if no albums are Missing

* Fixed: Sort search input by sortTitle

* Fixed: Queue columnLabel throwing JS error

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

@@ -91,8 +91,8 @@ class ArtistSearchInput extends Component {
   //
   // Listeners
 
-  onChange = (event, { newValue }) => {
-    if (!newValue) {
+  onChange = (event, { newValue, method }) => {
+    if (method === 'up' || method === 'down') {
       return;
     }
 
@@ -117,6 +117,7 @@ class ArtistSearchInput extends Component {
     if (!suggestions.length || highlightedSectionIndex && (event.key !== 'ArrowDown' || event.key !== 'ArrowUp')) {
       this.props.onGoToAddNewArtist(value);
       this._autosuggest.input.blur();
+      this.reset();
 
       return;
     }
@@ -129,6 +130,9 @@ class ArtistSearchInput extends Component {
     } else {
       this.goToArtist(suggestions[highlightedSuggestionIndex]);
     }
+
+    this._autosuggest.input.blur();
+    this.reset();
   }
 
   onBlur = () => {
@@ -142,9 +146,15 @@ class ArtistSearchInput extends Component {
       // Check the title first and if there isn't a match fallback to
       // the alternate titles and finally the tags.
 
+      if (value.length === 1) {
+        return (
+          artist.cleanName.startsWith(lowerCaseValue) ||
+          artist.tags.some((tag) => tag.cleanLabel.startsWith(lowerCaseValue))
+        );
+      }
+
       return (
         artist.cleanName.contains(lowerCaseValue) ||
-        // artist.alternateTitles.some((alternateTitle) => alternateTitle.cleanTitle.contains(lowerCaseValue)) ||
         artist.tags.some((tag) => tag.cleanLabel.contains(lowerCaseValue))
       );
     });
@@ -153,7 +163,9 @@ class ArtistSearchInput extends Component {
   }
 
   onSuggestionsClearRequested = () => {
-    this.reset();
+    this.setState({
+      suggestions: []
+    });
   }
 
   onSuggestionSelected = (event, { suggestion }) => {

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

@@ -58,10 +58,10 @@ function createCleanArtistSelector() {
           })
         };
       }).sort((a, b) => {
-        if (a.cleanName < b.cleanName) {
+        if (a.sortName < b.sortName) {
           return -1;
         }
-        if (a.cleanName > b.cleanName) {
+        if (a.sortName > b.sortName) {
           return 1;
         }
 

frontend/src/Components/Page/Header/PageHeader.css

@@ -4,14 +4,19 @@
   align-items: center;
   flex: 0 0 auto;
   height: $headerHeight;
-  background-color: #00a65b;
+  background-color: $themeAlternateBlue;
   color: $white;
 }
 
 .logoContainer {
   display: flex;
-  justify-content: center;
+  align-items: center;
   flex: 0 0 $sidebarWidth;
+  padding-left: 20px;
+}
+
+.logoLink {
+  line-height: 0;
 }
 
 .logo {

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

@@ -51,7 +51,10 @@ class PageHeader extends Component {
     return (
       <div className={styles.header}>
         <div className={styles.logoContainer}>
-          <Link to={`${window.Lidarr.urlBase}/`}>
+          <Link
+            className={styles.logoLink}
+            to={`${window.Lidarr.urlBase}/`}
+          >
             <img
               className={styles.logo}
               src={`${window.Lidarr.urlBase}/Content/Images/logo.svg`}