New: Release Profiles, Frontend updates (#580)

* New: Release Profiles - UI Updates

* New: Release Profiles - API Changes

* New: Release Profiles - Test Updates

* New: Release Profiles - Backend Updates

* New: Interactive Artist Search

* New: Change Montiored on Album Details Page

* New: Show Duration on Album Details Page

* Fixed: Manual Import not working if no albums are Missing

* Fixed: Sort search input by sortTitle

* Fixed: Queue columnLabel throwing JS error

frontend/src/Components/Table/Cells/TableSelectCell.js

@@ -1,4 +1,3 @@
-/* eslint max-params: 0 */
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import CheckInput from 'Components/Form/CheckInput';

frontend/src/Components/Table/Table.js

@@ -1,10 +1,10 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React from 'react';
 import { icons, scrollDirections } from 'Helpers/Props';
 import IconButton from 'Components/Link/IconButton';
 import Scroller from 'Components/Scroller/Scroller';
-import TableOptionsModal from 'Components/Table/TableOptions/TableOptionsModal';
+import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TableHeader from './TableHeader';
 import TableHeaderCell from './TableHeaderCell';
 import TableSelectAllHeaderCell from './TableSelectAllHeaderCell';
@@ -25,123 +25,95 @@ function getTableHeaderCellProps(props) {
   }, {});
 }
 
-class Table extends Component {
+function Table(props) {
+  const {
+    className,
+    selectAll,
+    columns,
+    optionsComponent,
+    pageSize,
+    canModifyColumns,
+    children,
+    onSortPress,
+    onTableOptionChange,
+    ...otherProps
+  } = props;
 
-  //
-  // Lifecycle
+  return (
+    <Scroller
+      className={styles.tableContainer}
+      scrollDirection={scrollDirections.HORIZONTAL}
+    >
+      <table className={className}>
+        <TableHeader>
+          {
+            selectAll &&
+              <TableSelectAllHeaderCell {...otherProps} />
+          }
 
-  constructor(props, context) {
-    super(props, context);
+          {
+            columns.map((column) => {
+              const {
+                name,
+                isVisible
+              } = column;
 
-    this.state = {
-      isTableOptionsModalOpen: false
-    };
-  }
+              if (!isVisible) {
+                return null;
+              }
 
-  //
-  // Listeners
-
-  onTableOptionsPress = () => {
-    this.setState({ isTableOptionsModalOpen: true });
-  }
-
-  onTableOptionsModalClose = () => {
-    this.setState({ isTableOptionsModalOpen: false });
-  }
-
-  //
-  // Render
-
-  render() {
-    const {
-      className,
-      selectAll,
-      columns,
-      pageSize,
-      canModifyColumns,
-      children,
-      onSortPress,
-      onTableOptionChange,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <Scroller
-        className={styles.tableContainer}
-        scrollDirection={scrollDirections.HORIZONTAL}
-      >
-        <table className={className}>
-          <TableHeader>
-            {
-              selectAll &&
-                <TableSelectAllHeaderCell {...otherProps} />
-            }
-
-            {
-              columns.map((column) => {
-                const {
-                  name,
-                  isVisible
-                } = column;
-
-                if (!isVisible) {
-                  return null;
-                }
-
-                if ((name === 'actions' || name === 'details') && onTableOptionChange) {
-                  return (
-                    <TableHeaderCell
-                      key={name}
-                      className={styles[name]}
-                      name={name}
-                      isSortable={false}
-                      {...otherProps}
+              if (
+                (name === 'actions' || name === 'details') &&
+                onTableOptionChange
+              ) {
+                return (
+                  <TableHeaderCell
+                    key={name}
+                    className={styles[name]}
+                    name={name}
+                    isSortable={false}
+                    {...otherProps}
+                  >
+                    <TableOptionsModalWrapper
+                      columns={columns}
+                      optionsComponent={optionsComponent}
+                      pageSize={pageSize}
+                      canModifyColumns={canModifyColumns}
+                      onTableOptionChange={onTableOptionChange}
                     >
                       <IconButton
                         name={icons.ADVANCED_SETTINGS}
-                        onPress={this.onTableOptionsPress}
                       />
-                    </TableHeaderCell>
-                  );
-                }
-
-                return (
-                  <TableHeaderCell
-                    key={column.name}
-                    onSortPress={onSortPress}
-                    {...getTableHeaderCellProps(otherProps)}
-                    {...column}
-                  >
-                    {column.label}
+                    </TableOptionsModalWrapper>
                   </TableHeaderCell>
                 );
-              })
-            }
+              }
 
-            {
-              !!onTableOptionChange &&
-                <TableOptionsModal
-                  isOpen={this.state.isTableOptionsModalOpen}
-                  columns={columns}
-                  pageSize={pageSize}
-                  canModifyColumns={canModifyColumns}
-                  onTableOptionChange={onTableOptionChange}
-                  onModalClose={this.onTableOptionsModalClose}
-                />
-            }
+              return (
+                <TableHeaderCell
+                  key={column.name}
+                  onSortPress={onSortPress}
+                  {...getTableHeaderCellProps(otherProps)}
+                  {...column}
+                >
+                  {column.label}
+                </TableHeaderCell>
+              );
+            })
+          }
 
-          </TableHeader>
-          {children}
-        </table>
-      </Scroller>
-    );
-  }
+        </TableHeader>
+        {children}
+      </table>
+    </Scroller>
+  );
 }
 
 Table.propTypes = {
   className: PropTypes.string,
   selectAll: PropTypes.bool.isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  optionsComponent: PropTypes.func,
   pageSize: PropTypes.number,
   canModifyColumns: PropTypes.bool,
   children: PropTypes.node,

frontend/src/Components/Table/TableHeaderCell.js

@@ -30,6 +30,7 @@ class TableHeaderCell extends Component {
     const {
       className,
       name,
+      columnLabel,
       isSortable,
       isVisible,
       isModifiable,
@@ -49,10 +50,11 @@ class TableHeaderCell extends Component {
     return (
       isSortable ?
         <Link
+          {...otherProps}
           component="th"
           className={className}
+          title={columnLabel}
           onPress={this.onPress}
-          {...otherProps}
         >
           {children}
 
@@ -75,7 +77,7 @@ class TableHeaderCell extends Component {
 TableHeaderCell.propTypes = {
   className: PropTypes.string,
   name: PropTypes.string.isRequired,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  columnLabel: PropTypes.string,
   isSortable: PropTypes.bool,
   isVisible: PropTypes.bool,
   isModifiable: PropTypes.bool,

frontend/src/Components/Table/TableOptions/TableOptionsColumnDragPreview.js

@@ -75,6 +75,4 @@ TableOptionsColumnDragPreview.propTypes = {
   })
 };
 
-/* eslint-disable new-cap */
 export default DragLayer(collectDragLayer)(TableOptionsColumnDragPreview);
-/* eslint-enable new-cap */

frontend/src/Components/Table/TableOptions/TableOptionsColumnDragSource.js

@@ -153,7 +153,6 @@ TableOptionsColumnDragSource.propTypes = {
   onColumnDragEnd: PropTypes.func.isRequired
 };
 
-/* eslint-disable new-cap */
 export default DropTarget(
   TABLE_COLUMN,
   columnDropTarget,
@@ -163,4 +162,3 @@ export default DropTarget(
   columnDragSource,
   collectDragSource
 )(TableOptionsColumnDragSource));
-/* eslint-enable new-cap */

frontend/src/Components/Table/TableOptions/TableOptionsModal.js

@@ -249,6 +249,4 @@ TableOptionsModal.defaultProps = {
   canModifyColumns: true
 };
 
-/* eslint-disable new-cap */
 export default DragDropContext(HTML5Backend)(TableOptionsModal);
-/* eslint-enable new-cap */

frontend/src/Components/Table/TableOptions/TableOptionsModalWrapper.js

@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types';
+import React, { Component, Fragment } from 'react';
+import TableOptionsModal from './TableOptionsModal';
+
+class TableOptionsModalWrapper extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isTableOptionsModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onTableOptionsPress = () => {
+    this.setState({ isTableOptionsModalOpen: true });
+  }
+
+  onTableOptionsModalClose = () => {
+    this.setState({ isTableOptionsModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      columns,
+      children,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <Fragment>
+        {
+          React.cloneElement(children, { onPress: this.onTableOptionsPress })
+        }
+
+        <TableOptionsModal
+          {...otherProps}
+          isOpen={this.state.isTableOptionsModalOpen}
+          columns={columns}
+          onModalClose={this.onTableOptionsModalClose}
+        />
+      </Fragment>
+    );
+  }
+}
+
+TableOptionsModalWrapper.propTypes = {
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  children: PropTypes.node.isRequired
+};
+
+export default TableOptionsModalWrapper;