New: UI Updates, Tag manager, More custom filters (#437)

* New: UI Updates, Tag manager, More custom filters

* fixup! Fix ScanFixture Unit Tests

* Fixed: Sentry Errors from UI don't have release, branch, environment

* Changed: Bump Mobile Detect for New Device Detection

* Fixed: Build on changes to package.json

* fixup! Add MetadataProfile filter option

* fixup! Tag Note, Blacklist, Manual Import

* fixup: Remove connectSection

* fixup: root folder comment

frontend/src/System/Updates/Updates.css

@@ -1,3 +1,7 @@
+.updateAvailable {
+  display: flex;
+}
+
 .upToDate {
   display: flex;
   margin-bottom: 20px;
@@ -14,6 +18,13 @@
   line-height: 30px;
 }
 
+.loading {
+  composes: loading from 'Components/Loading/LoadingIndicator.css';
+
+  margin-top: 5px;
+  margin-left: auto;
+}
+
 .update {
   margin-top: 20px;
 }

frontend/src/System/Updates/Updates.js

@@ -19,6 +19,7 @@ class Updates extends Component {
 
   render() {
     const {
+      isFetching,
       isPopulated,
       error,
       items,
@@ -36,7 +37,7 @@ class Updates extends Component {
       <PageContent title="Updates">
         <PageContentBodyConnector>
           {
-            !isPopulated &&
+            !isPopulated && !error &&
               <LoadingIndicator />
           }
 
@@ -47,14 +48,24 @@ class Updates extends Component {
 
           {
             hasUpdateToInstall &&
+            <div className={styles.updateAvailable}>
               <SpinnerButton
-                kind={kinds.PRIMARY}
                 className={styles.updateAvailable}
+                kind={kinds.PRIMARY}
                 isSpinning={isInstallingUpdate}
                 onPress={onInstallLatestPress}
               >
                 Install Latest
               </SpinnerButton>
+
+              {
+                isFetching &&
+                  <LoadingIndicator
+                    className={styles.loading}
+                    size={20}
+                  />
+              }
+            </div>
           }
 
           {
@@ -68,6 +79,14 @@ class Updates extends Component {
                 <div className={styles.upToDateMessage}>
                   The latest version of Lidarr is already installed
                 </div>
+
+                {
+                  isFetching &&
+                    <LoadingIndicator
+                      className={styles.loading}
+                      size={20}
+                    />
+                }
               </div>
           }
 
@@ -126,7 +145,7 @@ class Updates extends Component {
 
           {
             !!error &&
-              <div className={styles.upToDateMessage}>
+              <div>
                 Failed to fetch updates
               </div>
           }
@@ -138,6 +157,7 @@ class Updates extends Component {
 }
 
 Updates.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
   isPopulated: PropTypes.bool.isRequired,
   error: PropTypes.object,
   items: PropTypes.array.isRequired,

frontend/src/System/Updates/UpdatesConnector.js

@@ -16,12 +16,14 @@ function createMapStateToProps() {
     createCommandExecutingSelector(commandNames.APPLICATION_UPDATE),
     (updates, uiSettings, isInstallingUpdate) => {
       const {
+        isFetching,
         isPopulated,
         error,
         items
       } = updates;
 
       return {
+        isFetching,
         isPopulated,
         error,
         items,