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/TrackFile/Editor/TrackFileEditorModalContent.js

@@ -135,6 +135,8 @@ class TrackFileEditorModalContent extends Component {
     const {
       isDeleting,
       isFetching,
+      isPopulated,
+      error,
       items,
       languages,
       qualities,
@@ -176,19 +178,27 @@ class TrackFileEditorModalContent extends Component {
 
         <ModalBody>
           {
-            isFetching &&
-              <LoadingIndicator />
+            isFetching && !isPopulated ?
+              <LoadingIndicator /> :
+              null
           }
 
           {
-            !isFetching && !items.length &&
+            !isFetching && error ?
+              <div>{error}</div> :
+              null
+          }
+
+          {
+            isPopulated && !items.length ?
               <div>
                 No track files to manage.
-              </div>
+              </div> :
+              null
           }
 
           {
-            !isFetching && !!items.length &&
+            isPopulated && items.length ?
               <Table
                 columns={columns}
                 selectAll={true}
@@ -210,7 +220,8 @@ class TrackFileEditorModalContent extends Component {
                     })
                   }
                 </TableBody>
-              </Table>
+              </Table> :
+              null
           }
         </ModalBody>
 
@@ -270,6 +281,8 @@ class TrackFileEditorModalContent extends Component {
 TrackFileEditorModalContent.propTypes = {
   isDeleting: PropTypes.bool.isRequired,
   isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   languages: PropTypes.arrayOf(PropTypes.object).isRequired,
   qualities: PropTypes.arrayOf(PropTypes.object).isRequired,

frontend/src/TrackFile/Editor/TrackFileEditorModalContentConnector.js

@@ -11,20 +11,45 @@ import { fetchTracks, clearTracks } from 'Store/Actions/trackActions';
 import { fetchLanguageProfileSchema, fetchQualityProfileSchema } from 'Store/Actions/settingsActions';
 import TrackFileEditorModalContent from './TrackFileEditorModalContent';
 
+function createSchemaSelector() {
+  return createSelector(
+    (state) => state.settings.languageProfiles,
+    (state) => state.settings.qualityProfiles,
+    (languageProfiles, qualityProfiles) => {
+      const languages = _.map(languageProfiles.schema.languages, 'language');
+      const qualities = getQualities(qualityProfiles.schema.items);
+
+      let error = null;
+
+      if (languageProfiles.schemaError) {
+        error = 'Unable to load languages';
+      } else if (qualityProfiles.schemaError) {
+        error = 'Unable to load qualities';
+      }
+
+      return {
+        isFetching: languageProfiles.isSchemaFetching || qualityProfiles.isSchemaFetching,
+        isPopulated: languageProfiles.isSchemaPopulated && qualityProfiles.isSchemaPopulated,
+        error,
+        languages,
+        qualities
+      };
+    }
+  );
+}
+
 function createMapStateToProps() {
   return createSelector(
     (state, { albumId }) => albumId,
     (state) => state.tracks,
     (state) => state.trackFiles,
-    (state) => state.settings.languageProfiles.schema,
-    (state) => state.settings.qualityProfiles.schema,
+    createSchemaSelector(),
     createArtistSelector(),
     (
       albumId,
       tracks,
       trackFiles,
-      languageProfilesSchema,
-      qualityProfileSchema,
+      schema,
       artist
     ) => {
       const filtered = _.filter(tracks.items, (track) => {
@@ -52,17 +77,12 @@ function createMapStateToProps() {
         };
       });
 
-      const languages = _.map(languageProfilesSchema.languages, 'language');
-      const qualities = getQualities(qualityProfileSchema.items);
-
       return {
+        ...schema,
         items,
         artistType: artist.artistType,
         isDeleting: trackFiles.isDeleting,
-        isFetching: tracks.isFetching || trackFiles.isFetching,
-        isSaving: trackFiles.isSaving,
-        languages,
-        qualities
+        isSaving: trackFiles.isSaving
       };
     }
   );
@@ -115,9 +135,6 @@ class TrackFileEditorModalContentConnector extends Component {
     this.props.dispatchClearTracks();
   }
 
-  //
-  // Render
-
   //
   // Listeners
 
@@ -139,6 +156,9 @@ class TrackFileEditorModalContentConnector extends Component {
     this.props.dispatchUpdateTrackFiles({ trackFileIds, quality });
   }
 
+  //
+  // Render
+
   render() {
     const {
       dispatchFetchLanguageProfileSchema,

frontend/src/TrackFile/TrackFileLanguageConnector.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createTrackFileSelector from 'Store/Selectors/createTrackFileSelector';
-import EpisodeLanguage from 'Album/EpisodeLanguage';
+import TrackLanguage from 'Album/TrackLanguage';
 
 function createMapStateToProps() {
   return createSelector(
@@ -14,4 +14,4 @@ function createMapStateToProps() {
   );
 }
 
-export default connect(createMapStateToProps)(EpisodeLanguage);
+export default connect(createMapStateToProps)(TrackLanguage);