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/InteractiveImport/Folder/InteractiveImportSelectFolderModalContent.js

@@ -21,6 +21,10 @@ const recentFoldersColumns = [
   {
     name: 'lastUsed',
     label: 'Last Used'
+  },
+  {
+    name: 'actions',
+    label: ''
   }
 ];
 
@@ -62,6 +66,7 @@ class InteractiveImportSelectFolderModalContent extends Component {
   render() {
     const {
       recentFolders,
+      onRemoveRecentFolderPress,
       onModalClose
     } = this.props;
 
@@ -95,6 +100,7 @@ class InteractiveImportSelectFolderModalContent extends Component {
                             folder={recentFolder.folder}
                             lastUsed={recentFolder.lastUsed}
                             onPress={this.onRecentPathPress}
+                            onRemoveRecentFolderPress={onRemoveRecentFolderPress}
                           />
                         );
                       })
@@ -155,6 +161,7 @@ InteractiveImportSelectFolderModalContent.propTypes = {
   recentFolders: PropTypes.arrayOf(PropTypes.object).isRequired,
   onQuickImportPress: PropTypes.func.isRequired,
   onInteractiveImportPress: PropTypes.func.isRequired,
+  onRemoveRecentFolderPress: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
 

frontend/src/InteractiveImport/Folder/InteractiveImportSelectFolderModalContentConnector.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { addRecentFolder } from 'Store/Actions/interactiveImportActions';
+import { addRecentFolder, removeRecentFolder } from 'Store/Actions/interactiveImportActions';
 import { executeCommand } from 'Store/Actions/commandActions';
 import * as commandNames from 'Commands/commandNames';
 import InteractiveImportSelectFolderModalContent from './InteractiveImportSelectFolderModalContent';
@@ -20,6 +20,7 @@ function createMapStateToProps() {
 
 const mapDispatchToProps = {
   addRecentFolder,
+  removeRecentFolder,
   executeCommand
 };
 
@@ -44,6 +45,10 @@ class InteractiveImportSelectFolderModalContentConnector extends Component {
     this.props.onFolderSelect(folder);
   }
 
+  onRemoveRecentFolderPress = (folder) => {
+    this.props.removeRecentFolder({ folder });
+  }
+
   //
   // Render
 
@@ -57,6 +62,7 @@ class InteractiveImportSelectFolderModalContentConnector extends Component {
         {...this.props}
         onQuickImportPress={this.onQuickImportPress}
         onInteractiveImportPress={this.onInteractiveImportPress}
+        onRemoveRecentFolderPress={this.onRemoveRecentFolderPress}
       />
     );
   }
@@ -67,6 +73,7 @@ InteractiveImportSelectFolderModalContentConnector.propTypes = {
   onFolderSelect: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired,
   addRecentFolder: PropTypes.func.isRequired,
+  removeRecentFolder: PropTypes.func.isRequired,
   executeCommand: PropTypes.func.isRequired
 };
 

frontend/src/InteractiveImport/Folder/RecentFolderRow.css

@@ -0,0 +1,5 @@
+.actions {
+  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+
+  width: 40px;
+}

frontend/src/InteractiveImport/Folder/RecentFolderRow.js

@@ -1,8 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { icons } from 'Helpers/Props';
+import IconButton from 'Components/Link/IconButton';
 import TableRowButton from 'Components/Table/TableRowButton';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import styles from './RecentFolderRow.css';
 
 class RecentFolderRow extends Component {
 
@@ -13,6 +16,17 @@ class RecentFolderRow extends Component {
     this.props.onPress(this.props.folder);
   }
 
+  onRemovePress = (event) => {
+    event.stopPropagation();
+
+    const {
+      folder,
+      onRemoveRecentFolderPress
+    } = this.props;
+
+    onRemoveRecentFolderPress(folder);
+  }
+
   //
   // Render
 
@@ -27,6 +41,14 @@ class RecentFolderRow extends Component {
         <TableRowCell>{folder}</TableRowCell>
 
         <RelativeDateCellConnector date={lastUsed} />
+
+        <TableRowCell className={styles.actions}>
+          <IconButton
+            name={icons.REMOVE}
+            title="Remove"
+            onPress={this.onRemovePress}
+          />
+        </TableRowCell>
       </TableRowButton>
     );
   }
@@ -35,7 +57,8 @@ class RecentFolderRow extends Component {
 RecentFolderRow.propTypes = {
   folder: PropTypes.string.isRequired,
   lastUsed: PropTypes.string.isRequired,
-  onPress: PropTypes.func.isRequired
+  onPress: PropTypes.func.isRequired,
+  onRemoveRecentFolderPress: PropTypes.func.isRequired
 };
 
 export default RecentFolderRow;