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/Album/SelectAlbumModalContent.js

@@ -1,15 +1,62 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Button from 'Components/Link/Button';
+import { scrollDirections } from 'Helpers/Props';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalFooter from 'Components/Modal/ModalFooter';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import Scroller from 'Components/Scroller/Scroller';
+import TextInput from 'Components/Form/TextInput';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import SelectAlbumRow from './SelectAlbumRow';
+import styles from './SelectAlbumModalContent.css';
+
+const columns = [
+  {
+    name: 'title',
+    label: 'Album Title',
+    isVisible: true
+  },
+  {
+    name: 'albumType',
+    label: 'Album Type',
+    isVisible: true
+  },
+  {
+    name: 'releaseDate',
+    label: 'Release Date',
+    isVisible: true
+  },
+  {
+    name: 'status',
+    label: 'Album Status',
+    isVisible: true
+  }
+];
 
 class SelectAlbumModalContent extends Component {
 
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      filter: ''
+    };
+  }
+
+  //
+  // Listeners
+
+  onFilterChange = ({ value }) => {
+    this.setState({ filter: value.toLowerCase() });
+  }
+
   //
   // Render
 
@@ -18,33 +65,60 @@ class SelectAlbumModalContent extends Component {
       items,
       onAlbumSelect,
       onModalClose,
-      isFetching
+      isFetching,
+      ...otherProps
     } = this.props;
 
+    const filter = this.state.filter;
+
     return (
       <ModalContent onModalClose={onModalClose}>
         <ModalHeader>
           Manual Import - Select Album
         </ModalHeader>
 
-        <ModalBody>
+        <ModalBody
+          className={styles.modalBody}
+          scrollDirection={scrollDirections.NONE}
+        >
           {
             isFetching &&
               <LoadingIndicator />
           }
-          {
-            items.map((item) => {
-              return (
-                <SelectAlbumRow
-                  key={item.id}
-                  id={item.id}
-                  title={item.title}
-                  albumType={item.albumType}
-                  onAlbumSelect={onAlbumSelect}
-                />
-              );
-            })
-          }
+          <TextInput
+            className={styles.filterInput}
+            placeholder="Filter album"
+            name="filter"
+            value={filter}
+            autoFocus={true}
+            onChange={this.onFilterChange}
+          />
+
+          <Scroller className={styles.scroller}>
+            {
+              <Table
+                columns={columns}
+                {...otherProps}
+              >
+                <TableBody>
+                  {
+                    items.map((item) => {
+                      return item.title.toLowerCase().includes(filter) ?
+                        (
+                          <SelectAlbumRow
+                            key={item.id}
+                            columns={columns}
+                            onAlbumSelect={onAlbumSelect}
+                            {...item}
+                          />
+                        ) :
+                        null;
+                    })
+                  }
+                </TableBody>
+              </Table>
+            }
+          </Scroller>
         </ModalBody>
 
         <ModalFooter>