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/Artist/Index/Table/ArtistIndexHeader.css

@@ -20,7 +20,8 @@
 
 .nextAlbum,
 .lastAlbum,
-.added {
+.added,
+.genres {
   composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 0 180px;
@@ -58,6 +59,12 @@
   flex: 0 0 120px;
 }
 
+.ratings {
+  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 80px;
+}
+
 .tags {
   composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
 

frontend/src/Artist/Index/Table/ArtistIndexRow.css

@@ -20,7 +20,8 @@
 
 .nextAlbum,
 .lastAlbum,
-.added {
+.added,
+.genres {
   composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
 
   flex: 0 0 180px;
@@ -60,6 +61,12 @@
   flex: 0 0 120px;
 }
 
+.ratings {
+  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+
+  flex: 0 0 80px;
+}
+
 .tags {
   composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
 

frontend/src/Artist/Index/Table/ArtistIndexRow.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import getProgressBarKind from 'Utilities/Artist/getProgressBarKind';
 import formatBytes from 'Utilities/Number/formatBytes';
 import { icons } from 'Helpers/Props';
+import HeartRating from 'Components/HeartRating';
 import IconButton from 'Components/Link/IconButton';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import ProgressBar from 'Components/ProgressBar';
@@ -75,6 +76,8 @@ class ArtistIndexRow extends Component {
       lastAlbum,
       added,
       statistics,
+      genres,
+      ratings,
       path,
       tags,
       columns,
@@ -303,6 +306,34 @@ class ArtistIndexRow extends Component {
               );
             }
 
+            if (name === 'genres') {
+              const joinedGenres = genres.join(', ');
+
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  <span title={joinedGenres}>
+                    {joinedGenres}
+                  </span>
+                </VirtualTableRowCell>
+              );
+            }
+
+            if (name === 'ratings') {
+              return (
+                <VirtualTableRowCell
+                  key={name}
+                  className={styles[name]}
+                >
+                  <HeartRating
+                    rating={ratings.value}
+                  />
+                </VirtualTableRowCell>
+              );
+            }
+
             if (name === 'tags') {
               return (
                 <VirtualTableRowCell
@@ -376,6 +407,8 @@ ArtistIndexRow.propTypes = {
   statistics: PropTypes.object.isRequired,
   latestAlbum: PropTypes.object,
   path: PropTypes.string.isRequired,
+  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
+  ratings: PropTypes.object.isRequired,
   tags: PropTypes.arrayOf(PropTypes.number).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   isRefreshingArtist: PropTypes.bool.isRequired,

frontend/src/Artist/Index/Table/ArtistIndexTableConnector.js

@@ -1,5 +1,5 @@
+import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import connectSection from 'Store/connectSection';
 import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
 import { setArtistSort } from 'Store/Actions/artistIndexActions';
 import ArtistIndexTable from './ArtistIndexTable';
@@ -7,7 +7,7 @@ import ArtistIndexTable from './ArtistIndexTable';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.app.dimensions,
-    createClientSideCollectionSelector(),
+    createClientSideCollectionSelector('artist', 'artistIndex'),
     (dimensions, artist) => {
       return {
         isSmallScreen: dimensions.isSmallScreen,
@@ -25,10 +25,4 @@ function createMapDispatchToProps(dispatch, props) {
   };
 }
 
-export default connectSection(
-  createMapStateToProps,
-  createMapDispatchToProps,
-  undefined,
-  undefined,
-  { section: 'artist', uiSection: 'artistIndex' }
-)(ArtistIndexTable);
+export default connect(createMapStateToProps, createMapDispatchToProps)(ArtistIndexTable);