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/Form/AlbumReleaseSelectInputConnector.js

@@ -44,7 +44,7 @@ class AlbumReleaseSelectInputConnector extends Component {
       albumReleases
     } = this.props;
 
-    let updatedReleases = _.map(albumReleases.value, (e) => ({ ...e, monitored: false }));
+    const updatedReleases = _.map(albumReleases.value, (e) => ({ ...e, monitored: false }));
     _.find(updatedReleases, { foreignReleaseId: value }).monitored = true;
 
     this.props.onChange({ name, value: updatedReleases });

frontend/src/Components/Form/AutoCompleteInput.css

@@ -0,0 +1,58 @@
+.input {
+  composes: input from 'Components/Form/Input.css';
+}
+
+.hasError {
+  composes: hasError from 'Components/Form/Input.css';
+}
+
+.hasWarning {
+  composes: hasWarning from 'Components/Form/Input.css';
+}
+
+.inputWrapper {
+  display: flex;
+}
+
+.inputContainer {
+  position: relative;
+  flex-grow: 1;
+}
+
+.container {
+  @add-mixin scrollbar;
+  @add-mixin scrollbarTrack;
+  @add-mixin scrollbarThumb;
+}
+
+.inputContainerOpen {
+  .container {
+    position: absolute;
+    z-index: 1;
+    overflow-y: auto;
+    max-height: 200px;
+    width: 100%;
+    border: 1px solid $inputBorderColor;
+    border-radius: 4px;
+    background-color: $white;
+    box-shadow: inset 0 1px 1px $inputBoxShadowColor;
+  }
+}
+
+.list {
+  margin: 5px 0;
+  padding-left: 0;
+  list-style-type: none;
+}
+
+.listItem {
+  padding: 0 16px;
+}
+
+.match {
+  font-weight: bold;
+}
+
+.highlighted {
+  background-color: $menuItemHoverBackgroundColor;
+}

frontend/src/Components/Form/AutoCompleteInput.js

@@ -0,0 +1,162 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Autosuggest from 'react-autosuggest';
+import classNames from 'classnames';
+import jdu from 'jdu';
+import styles from './AutoCompleteInput.css';
+
+class AutoCompleteInput extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      suggestions: []
+    };
+  }
+
+  //
+  // Control
+
+  getSuggestionValue(item) {
+    return item;
+  }
+
+  renderSuggestion(item) {
+    return item;
+  }
+
+  //
+  // Listeners
+
+  onInputChange = (event, { newValue }) => {
+    this.props.onChange({
+      name: this.props.name,
+      value: newValue
+    });
+  }
+
+  onInputKeyDown = (event) => {
+    const {
+      name,
+      value,
+      onChange
+    } = this.props;
+
+    const { suggestions } = this.state;
+
+    if (
+      event.key === 'Tab' &&
+      suggestions.length &&
+      suggestions[0] !== this.props.value
+    ) {
+      event.preventDefault();
+
+      if (value) {
+        onChange({
+          name,
+          value: suggestions[0]
+        });
+      }
+    }
+  }
+
+  onInputBlur = () => {
+    this.setState({ suggestions: [] });
+  }
+
+  onSuggestionsFetchRequested = ({ value }) => {
+    const { values } = this.props;
+    const lowerCaseValue = jdu.replace(value).toLowerCase();
+
+    const filteredValues = values.filter((v) => {
+      return jdu.replace(v).toLowerCase().contains(lowerCaseValue);
+    });
+
+    this.setState({ suggestions: filteredValues });
+  }
+
+  onSuggestionsClearRequested = () => {
+    this.setState({ suggestions: [] });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      className,
+      inputClassName,
+      name,
+      value,
+      placeholder,
+      hasError,
+      hasWarning
+    } = this.props;
+
+    const { suggestions } = this.state;
+
+    const inputProps = {
+      className: classNames(
+        inputClassName,
+        hasError && styles.hasError,
+        hasWarning && styles.hasWarning,
+      ),
+      name,
+      value,
+      placeholder,
+      autoComplete: 'off',
+      spellCheck: false,
+      onChange: this.onInputChange,
+      onKeyDown: this.onInputKeyDown,
+      onBlur: this.onInputBlur
+    };
+
+    const theme = {
+      container: styles.inputContainer,
+      containerOpen: styles.inputContainerOpen,
+      suggestionsContainer: styles.container,
+      suggestionsList: styles.list,
+      suggestion: styles.listItem,
+      suggestionHighlighted: styles.highlighted
+    };
+
+    return (
+      <div className={className}>
+        <Autosuggest
+          id={name}
+          inputProps={inputProps}
+          theme={theme}
+          suggestions={suggestions}
+          getSuggestionValue={this.getSuggestionValue}
+          renderSuggestion={this.renderSuggestion}
+          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+        />
+      </div>
+    );
+  }
+}
+
+AutoCompleteInput.propTypes = {
+  className: PropTypes.string.isRequired,
+  inputClassName: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  values: PropTypes.arrayOf(PropTypes.string).isRequired,
+  placeholder: PropTypes.string,
+  hasError: PropTypes.bool,
+  hasWarning: PropTypes.bool,
+  onChange: PropTypes.func.isRequired
+};
+
+AutoCompleteInput.defaultProps = {
+  className: styles.inputWrapper,
+  inputClassName: styles.input,
+  value: ''
+};
+
+export default AutoCompleteInput;

frontend/src/Components/Form/Form.css

@@ -0,0 +1,3 @@
+.validationFailures {
+  margin-bottom: 20px;
+}

frontend/src/Components/Form/Form.js

@@ -2,37 +2,42 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { kinds } from 'Helpers/Props';
 import Alert from 'Components/Alert';
+import styles from './Form.css';
 
 function Form({ children, validationErrors, validationWarnings, ...otherProps }) {
   return (
     <div>
-      <div>
-        {
-          validationErrors.map((error, index) => {
-            return (
-              <Alert
-                key={index}
-                kind={kinds.DANGER}
-              >
-                {error.errorMessage}
-              </Alert>
-            );
-          })
-        }
+      {
+        validationErrors.length || validationWarnings.length ?
+          <div className={styles.validationFailures}>
+            {
+              validationErrors.map((error, index) => {
+                return (
+                  <Alert
+                    key={index}
+                    kind={kinds.DANGER}
+                  >
+                    {error.errorMessage}
+                  </Alert>
+                );
+              })
+            }
 
-        {
-          validationWarnings.map((warning, index) => {
-            return (
-              <Alert
-                key={index}
-                kind={kinds.WARNING}
-              >
-                {warning.errorMessage}
-              </Alert>
-            );
-          })
-        }
-      </div>
+            {
+              validationWarnings.map((warning, index) => {
+                return (
+                  <Alert
+                    key={index}
+                    kind={kinds.WARNING}
+                  >
+                    {warning.errorMessage}
+                  </Alert>
+                );
+              })
+            }
+          </div> :
+          null
+      }
 
       {children}
     </div>

frontend/src/Components/Form/FormInputGroup.js

@@ -2,9 +2,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { inputTypes } from 'Helpers/Props';
 import Link from 'Components/Link/Link';
+import AutoCompleteInput from './AutoCompleteInput';
 import CaptchaInputConnector from './CaptchaInputConnector';
 import CheckInput from './CheckInput';
 import DeviceInputConnector from './DeviceInputConnector';
+import KeyValueListInput from './KeyValueListInput';
 import MonitorAlbumsSelectInput from './MonitorAlbumsSelectInput';
 import NumberInput from './NumberInput';
 import OAuthInputConnector from './OAuthInputConnector';
@@ -25,6 +27,9 @@ import styles from './FormInputGroup.css';
 
 function getComponent(type) {
   switch (type) {
+    case inputTypes.AUTO_COMPLETE:
+      return AutoCompleteInput;
+
     case inputTypes.CAPTCHA:
       return CaptchaInputConnector;
 
@@ -34,6 +39,9 @@ function getComponent(type) {
     case inputTypes.DEVICE:
       return DeviceInputConnector;
 
+    case inputTypes.KEY_VALUE_LIST:
+      return KeyValueListInput;
+
     case inputTypes.MONITOR_ALBUMS_SELECT:
       return MonitorAlbumsSelectInput;
 

frontend/src/Components/Form/KeyValueListInput.css

@@ -0,0 +1,21 @@
+.inputContainer {
+  composes: input from 'Components/Form/Input.css';
+
+  position: relative;
+  min-height: 35px;
+  height: auto;
+
+  &.isFocused {
+    outline: 0;
+    border-color: $inputFocusBorderColor;
+    box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor;
+  }
+}
+
+.hasError {
+  composes: hasError from 'Components/Form/Input.css';
+}
+
+.hasWarning {
+  composes: hasWarning from 'Components/Form/Input.css';
+}

frontend/src/Components/Form/KeyValueListInput.js

@@ -0,0 +1,152 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import KeyValueListInputItem from './KeyValueListInputItem';
+import styles from './KeyValueListInput.css';
+
+class KeyValueListInput extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isFocused: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onItemChange = (index, itemValue) => {
+    const {
+      name,
+      value,
+      onChange
+    } = this.props;
+
+    const newValue = [...value];
+
+    if (index == null) {
+      newValue.push(itemValue);
+    } else {
+      newValue.splice(index, 1, itemValue);
+    }
+
+    onChange({
+      name,
+      value: newValue
+    });
+  }
+
+  onRemoveItem = (index) => {
+    const {
+      name,
+      value,
+      onChange
+    } = this.props;
+
+    const newValue = [...value];
+    newValue.splice(index, 1);
+
+    onChange({
+      name,
+      value: newValue
+    });
+  }
+
+  onFocus = () => {
+    this.setState({
+      isFocused: true
+    });
+  }
+
+  onBlur = () => {
+    this.setState({
+      isFocused: false
+    });
+
+    const {
+      name,
+      value,
+      onChange
+    } = this.props;
+
+    const newValue = value.reduce((acc, v) => {
+      if (v.key || v.value) {
+        acc.push(v);
+      }
+
+      return acc;
+    }, []);
+
+    if (newValue.length !== value.length) {
+      onChange({
+        name,
+        value: newValue
+      });
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      className,
+      value,
+      keyPlaceholder,
+      valuePlaceholder
+    } = this.props;
+
+    const { isFocused } = this.state;
+
+    return (
+      <div className={classNames(
+        className,
+        isFocused && styles.isFocused
+      )}
+      >
+        {
+          [...value, { key: '', value: '' }].map((v, index) => {
+            return (
+              <KeyValueListInputItem
+                key={index}
+                index={index}
+                keyValue={v.key}
+                value={v.value}
+                keyPlaceholder={keyPlaceholder}
+                valuePlaceholder={valuePlaceholder}
+                isNew={index === value.length}
+                onChange={this.onItemChange}
+                onRemove={this.onRemoveItem}
+                onFocus={this.onFocus}
+                onBlur={this.onBlur}
+              />
+            );
+          })
+        }
+      </div>
+    );
+  }
+}
+
+KeyValueListInput.propTypes = {
+  className: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.arrayOf(PropTypes.object).isRequired,
+  hasError: PropTypes.bool,
+  hasWarning: PropTypes.bool,
+  keyPlaceholder: PropTypes.string,
+  valuePlaceholder: PropTypes.string,
+  onChange: PropTypes.func.isRequired
+};
+
+KeyValueListInput.defaultProps = {
+  className: styles.inputContainer,
+  value: []
+};
+
+export default KeyValueListInput;

frontend/src/Components/Form/KeyValueListInputItem.css

@@ -0,0 +1,14 @@
+.itemContainer {
+  display: flex;
+  margin-bottom: 3px;
+  border-bottom: 1px solid $inputBorderColor;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.keyInput,
+.valueInput {
+  border: none;
+}

frontend/src/Components/Form/KeyValueListInputItem.js

@@ -0,0 +1,117 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons } from 'Helpers/Props';
+import IconButton from 'Components/Link/IconButton';
+import TextInput from './TextInput';
+import styles from './KeyValueListInputItem.css';
+
+class KeyValueListInputItem extends Component {
+
+  //
+  // Listeners
+
+  onKeyChange = ({ value: keyValue }) => {
+    const {
+      index,
+      value,
+      onChange
+    } = this.props;
+
+    onChange(index, { key: keyValue, value });
+  }
+
+  onValueChange = ({ value }) => {
+    // TODO: Validate here or validate at a lower level component
+
+    const {
+      index,
+      keyValue,
+      onChange
+    } = this.props;
+
+    onChange(index, { key: keyValue, value });
+  }
+
+  onRemovePress = () => {
+    const {
+      index,
+      onRemove
+    } = this.props;
+
+    onRemove(index);
+  }
+
+  onFocus = () => {
+    this.props.onFocus();
+  }
+
+  onBlur = () => {
+    this.props.onBlur();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      keyValue,
+      value,
+      keyPlaceholder,
+      valuePlaceholder,
+      isNew
+    } = this.props;
+
+    return (
+      <div className={styles.itemContainer}>
+        <TextInput
+          className={styles.keyInput}
+          name="key"
+          value={keyValue}
+          placeholder={keyPlaceholder}
+          onChange={this.onKeyChange}
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
+        />
+
+        <TextInput
+          className={styles.valueInput}
+          name="value"
+          value={value}
+          placeholder={valuePlaceholder}
+          onChange={this.onValueChange}
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
+        />
+
+        {
+          !isNew &&
+            <IconButton
+              name={icons.REMOVE}
+              tabIndex={-1}
+              onPress={this.onRemovePress}
+            />
+        }
+      </div>
+    );
+  }
+}
+
+KeyValueListInputItem.propTypes = {
+  index: PropTypes.number,
+  keyValue: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  keyPlaceholder: PropTypes.string.isRequired,
+  valuePlaceholder: PropTypes.string.isRequired,
+  isNew: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired,
+  onFocus: PropTypes.func.isRequired,
+  onBlur: PropTypes.func.isRequired
+};
+
+KeyValueListInputItem.defaultProps = {
+  keyPlaceholder: 'Key',
+  valuePlaceholder: 'Value'
+};
+
+export default KeyValueListInputItem;

frontend/src/Components/Form/MonitorAlbumsSelectInput.js

@@ -1,17 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import monitorOptions from 'Utilities/Artist/monitorOptions';
 import SelectInput from './SelectInput';
 
-const monitorOptions = [
-  { key: 'all', value: 'All Albums' },
-  { key: 'future', value: 'Future Albums' },
-  { key: 'missing', value: 'Missing Albums' },
-  { key: 'existing', value: 'Existing Albums' },
-  { key: 'first', value: 'Only First Album' },
-  { key: 'latest', value: 'Only Latest Album' },
-  { key: 'none', value: 'None' }
-];
-
 function MonitorAlbumsSelectInput(props) {
   const {
     includeNoChange,

frontend/src/Components/Form/NumberInput.js

@@ -2,44 +2,91 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import TextInput from './TextInput';
 
+function parseValue(props, value) {
+  const {
+    isFloat,
+    min,
+    max
+  } = props;
+
+  if (value == null || value === '') {
+    return min;
+  }
+
+  let newValue = isFloat ? parseFloat(value) : parseInt(value);
+
+  if (min != null && newValue != null && newValue < min) {
+    newValue = min;
+  } else if (max != null && newValue != null && newValue > max) {
+    newValue = max;
+  }
+
+  return newValue;
+}
+
 class NumberInput extends Component {
 
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      value: props.value == null ? '' : props.value.toString(),
+      isFocused: false
+    };
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const { value } = this.props;
+
+    if (value !== prevProps.value && !this.state.isFocused) {
+      this.setState({
+        value: value == null ? '' : value.toString()
+      });
+    }
+  }
+
   //
   // Listeners
 
   onChange = ({ name, value }) => {
-    let newValue = null;
-
-    if (value) {
-      newValue = this.props.isFloat ? parseFloat(value) : parseInt(value);
-    }
+    this.setState({ value });
 
     this.props.onChange({
       name,
-      value: newValue
+      value: parseValue(this.props, value)
     });
+
+  }
+
+  onFocus = () => {
+    this.setState({ isFocused: true });
   }
 
   onBlur = () => {
     const {
       name,
-      value,
-      min,
-      max,
       onChange
     } = this.props;
 
-    let newValue = value;
+    const { value } = this.state;
+    const parsedValue = parseValue(this.props, value);
+    const stringValue = parsedValue == null ? '' : parsedValue.toString();
 
-    if (min != null && newValue != null && newValue < min) {
-      newValue = min;
-    } else if (max != null && newValue != null && newValue > max) {
-      newValue = max;
+    if (stringValue === value) {
+      this.setState({ isFocused: false });
+    } else {
+      this.setState({
+        value: stringValue,
+        isFocused: false
+      });
     }
 
     onChange({
       name,
-      value: newValue
+      value: parsedValue
     });
   }
 
@@ -47,18 +94,16 @@ class NumberInput extends Component {
   // Render
 
   render() {
-    const {
-      value,
-      ...otherProps
-    } = this.props;
+    const value = this.state.value;
 
     return (
       <TextInput
+        {...this.props}
         type="number"
         value={value == null ? '' : value}
-        {...otherProps}
         onChange={this.onChange}
         onBlur={this.onBlur}
+        onFocus={this.onFocus}
       />
     );
   }

frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css

@@ -14,9 +14,7 @@
 }
 
 .freeSpace {
-  @add-mixin truncate;
-
-  flex: 1 0 0;
+  flex: 0 0 auto;
   margin-left: 15px;
   color: $gray;
   text-align: right;

frontend/src/Components/Form/TagInputTag.js

@@ -33,7 +33,10 @@ class TagInputTag extends Component {
     } = this.props;
 
     return (
-      <Link onPress={this.onDelete}>
+      <Link
+        tabIndex={-1}
+        onPress={this.onDelete}
+      >
         <Label kind={kind}>
           {tag.name}
         </Label>

frontend/src/Components/Form/TextInput.js

@@ -127,6 +127,7 @@ class TextInput extends Component {
       hasError,
       hasWarning,
       hasButton,
+      step,
       onBlur
     } = this.props;
 
@@ -146,6 +147,7 @@ class TextInput extends Component {
         )}
         name={name}
         value={value}
+        step={step}
         onChange={this.onChange}
         onFocus={this.onFocus}
         onBlur={onBlur}
@@ -168,6 +170,7 @@ TextInput.propTypes = {
   hasError: PropTypes.bool,
   hasWarning: PropTypes.bool,
   hasButton: PropTypes.bool,
+  step: PropTypes.number,
   onChange: PropTypes.func.isRequired,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,