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/Status/About/About.css

@@ -0,0 +1,5 @@
+.descriptionList {
+  composes: descriptionList from 'Components/DescriptionList/DescriptionList.css';
+
+  margin-bottom: 10px;
+}

frontend/src/System/Status/About/About.js

@@ -4,6 +4,7 @@ import titleCase from 'Utilities/String/titleCase';
 import FieldSet from 'Components/FieldSet';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import styles from './About.css';
 
 class About extends Component {
 
@@ -22,10 +23,8 @@ class About extends Component {
     } = this.props;
 
     return (
-      <FieldSet
-        legend="About"
-      >
-        <DescriptionList>
+      <FieldSet legend="About">
+        <DescriptionList className={styles.descriptionList}>
           <DescriptionListItem
             title="Version"
             data={version}

frontend/src/System/Status/DiskSpace/DiskSpace.js

@@ -45,9 +45,7 @@ class DiskSpace extends Component {
     } = this.props;
 
     return (
-      <FieldSet
-        legend="Disk Space"
-      >
+      <FieldSet legend="Disk Space">
         {
           isFetching &&
             <LoadingIndicator />

frontend/src/System/Status/MoreInfo/MoreInfo.js

@@ -12,9 +12,7 @@ class MoreInfo extends Component {
 
   render() {
     return (
-      <FieldSet
-        legend="More Info"
-      >
+      <FieldSet legend="More Info">
         <DescriptionList>
           <DescriptionListItemTitle>Home page</DescriptionListItemTitle>
           <DescriptionListItemDescription>

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,