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/Activity/Blacklist/BlacklistRow.css

@@ -11,8 +11,8 @@
   width: 80px;
 }
 
-.details {
+.actions {
   composes: cell from 'Components/Table/Cells/TableRowCell.css';
 
-  width: 30px;
+  width: 70px;
 }

frontend/src/Activity/Blacklist/BlacklistRow.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { icons } from 'Helpers/Props';
+import { icons, kinds } from 'Helpers/Props';
 import IconButton from 'Components/Link/IconButton';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import TableRow from 'Components/Table/TableRow';
@@ -48,7 +48,8 @@ class BlacklistRow extends Component {
       protocol,
       indexer,
       message,
-      columns
+      columns,
+      onRemovePress
     } = this.props;
 
     return (
@@ -129,16 +130,21 @@ class BlacklistRow extends Component {
               );
             }
 
-            if (name === 'details') {
+            if (name === 'actions') {
               return (
                 <TableRowCell
                   key={name}
-                  className={styles.details}
+                  className={styles.actions}
                 >
                   <IconButton
                     name={icons.INFO}
                     onPress={this.onDetailsPress}
                   />
+                  <IconButton
+                    name={icons.REMOVE}
+                    kind={kinds.DANGER}
+                    onPress={onRemovePress}
+                  />
                 </TableRowCell>
               );
             }
@@ -171,7 +177,8 @@ BlacklistRow.propTypes = {
   protocol: PropTypes.string.isRequired,
   indexer: PropTypes.string,
   message: PropTypes.string,
-  columns: PropTypes.arrayOf(PropTypes.object).isRequired
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onRemovePress: PropTypes.func.isRequired
 };
 
 export default BlacklistRow;

frontend/src/Activity/Blacklist/BlacklistRowConnector.js

@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createArtistSelector from 'Store/Selectors/createArtistSelector';
+import { removeFromBlacklist } from 'Store/Actions/blacklistActions';
 import BlacklistRow from './BlacklistRow';
 
 function createMapStateToProps() {
@@ -14,4 +15,12 @@ function createMapStateToProps() {
   );
 }
 
-export default connect(createMapStateToProps)(BlacklistRow);
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onRemovePress() {
+      dispatch(removeFromBlacklist({ id: props.id }));
+    }
+  };
+}
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(BlacklistRow);