New: Add/remove individual albums

frontend/src/Search/AddNewItem.css

@@ -0,0 +1,54 @@
+.searchContainer {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.searchIconContainer {
+  width: 58px;
+  height: 46px;
+  border: 1px solid $inputBorderColor;
+  border-right: none;
+  border-radius: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  background-color: #edf1f2;
+  text-align: center;
+  line-height: 46px;
+}
+
+.searchInput {
+  composes: input from '~Components/Form/TextInput.css';
+
+  height: 46px;
+  border-radius: 0;
+  font-size: 18px;
+}
+
+.clearLookupButton {
+  border: 1px solid $inputBorderColor;
+  border-left: none;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.message {
+  margin-top: 30px;
+  text-align: center;
+}
+
+.helpText {
+  margin-bottom: 10px;
+  font-weight: 300;
+  font-size: 24px;
+}
+
+.noResults {
+  margin-bottom: 10px;
+  font-weight: 300;
+  font-size: 30px;
+}
+
+.searchResults {
+  margin-top: 30px;
+}

frontend/src/Search/AddNewItem.js

@@ -0,0 +1,201 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import Link from 'Components/Link/Link';
+import Icon from 'Components/Icon';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import TextInput from 'Components/Form/TextInput';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import AddNewArtistSearchResultConnector from './Artist/AddNewArtistSearchResultConnector';
+import AddNewAlbumSearchResultConnector from './Album/AddNewAlbumSearchResultConnector';
+import styles from './AddNewItem.css';
+
+class AddNewItem extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      term: props.term || '',
+      isFetching: false
+    };
+  }
+
+  componentDidMount() {
+    const term = this.state.term;
+
+    if (term) {
+      this.props.onSearchChange(term);
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      term,
+      isFetching
+    } = this.props;
+
+    if (term && term !== prevProps.term) {
+      this.setState({
+        term,
+        isFetching: true
+      });
+      this.props.onSearchChange(term);
+    } else if (isFetching !== prevProps.isFetching) {
+      this.setState({
+        isFetching
+      });
+    }
+  }
+
+  //
+  // Listeners
+
+  onSearchInputChange = ({ value }) => {
+    const hasValue = !!value.trim();
+
+    this.setState({ term: value, isFetching: hasValue }, () => {
+      if (hasValue) {
+        this.props.onSearchChange(value);
+      } else {
+        this.props.onClearSearch();
+      }
+    });
+  }
+
+  onClearSearchPress = () => {
+    this.setState({ term: '' });
+    this.props.onClearSearch();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      error,
+      items
+    } = this.props;
+
+    const term = this.state.term;
+    const isFetching = this.state.isFetching;
+
+    return (
+      <PageContent title="Add New Item">
+        <PageContentBodyConnector>
+          <div className={styles.searchContainer}>
+            <div className={styles.searchIconContainer}>
+              <Icon
+                name={icons.SEARCH}
+                size={20}
+              />
+            </div>
+
+            <TextInput
+              className={styles.searchInput}
+              name="searchBox"
+              value={term}
+              placeholder="eg. Breaking Benjamin, lidarr:854a1807-025b-42a8-ba8c-2a39717f1d25"
+              autoFocus={true}
+              onChange={this.onSearchInputChange}
+            />
+
+            <Button
+              className={styles.clearLookupButton}
+              onPress={this.onClearSearchPress}
+            >
+              <Icon
+                name={icons.REMOVE}
+                size={20}
+              />
+            </Button>
+          </div>
+
+          {
+            isFetching &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetching && !!error &&
+              <div>Failed to load search results, please try again.</div>
+          }
+
+          {
+            !isFetching && !error && !!items.length &&
+              <div className={styles.searchResults}>
+                {
+                  items.map((item) => {
+                    if (item.artist) {
+                      const artist = item.artist;
+                      return (
+                        <AddNewArtistSearchResultConnector
+                          key={item.id}
+                          {...artist}
+                        />
+                      );
+                    } else if (item.album) {
+                      const album = item.album;
+                      return (
+                        <AddNewAlbumSearchResultConnector
+                          key={item.id}
+                          isExistingAlbum={'id' in album && album.id !== 0}
+                          isExistingArtist={'id' in album.artist && album.artist.id !== 0}
+                          {...album}
+                        />
+                      );
+                    }
+                    return null;
+                  })
+                }
+              </div>
+          }
+
+          {
+            !isFetching && !error && !items.length && !!term &&
+              <div className={styles.message}>
+                <div className={styles.noResults}>Couldn't find any results for '{term}'</div>
+                <div>
+                  You can also search using the
+                  <Link to="https://musicbrainz.org/search"> MusicBrainz ID </Link>
+                  of an artist e.g. lidarr:cc197bad-dc9c-440d-a5b5-d52ba2e14234
+                </div>
+              </div>
+          }
+
+          {
+            !term &&
+              <div className={styles.message}>
+                <div className={styles.helpText}>It's easy to add a new artist, just start typing the name of the artist you want to add.</div>
+                <div>
+                  You can also search using the
+                  <Link to="https://musicbrainz.org/search"> MusicBrainz ID </Link>
+                  of an artist e.g. lidarr:cc197bad-dc9c-440d-a5b5-d52ba2e14234
+                </div>
+              </div>
+          }
+
+          <div />
+        </PageContentBodyConnector>
+      </PageContent>
+    );
+  }
+}
+
+AddNewItem.propTypes = {
+  term: PropTypes.string,
+  isFetching: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  isAdding: PropTypes.bool.isRequired,
+  addError: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onSearchChange: PropTypes.func.isRequired,
+  onClearSearch: PropTypes.func.isRequired
+};
+
+export default AddNewItem;

frontend/src/Search/AddNewItemConnector.js

@@ -0,0 +1,102 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import parseUrl from 'Utilities/String/parseUrl';
+import { getSearchResults, clearSearchResults } from 'Store/Actions/searchActions';
+import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
+import AddNewItem from './AddNewItem';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.search,
+    (state) => state.router.location,
+    (search, location) => {
+      const { params } = parseUrl(location.search);
+
+      return {
+        term: params.term,
+        ...search
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  getSearchResults,
+  clearSearchResults,
+  fetchRootFolders
+};
+
+class AddNewItemConnector extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._searchTimeout = null;
+  }
+
+  componentDidMount() {
+    this.props.fetchRootFolders();
+  }
+
+  componentWillUnmount() {
+    if (this._searchTimeout) {
+      clearTimeout(this._searchTimeout);
+    }
+
+    this.props.clearSearchResults();
+  }
+
+  //
+  // Listeners
+
+  onSearchChange = (term) => {
+    if (this._searchTimeout) {
+      clearTimeout(this._searchTimeout);
+    }
+
+    if (term.trim() === '') {
+      this.props.clearSearchResults();
+    } else {
+      this._searchTimeout = setTimeout(() => {
+        this.props.getSearchResults({ term });
+      }, 300);
+    }
+  }
+
+  onClearSearch = () => {
+    this.props.clearSearchResults();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      term,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <AddNewItem
+        term={term}
+        {...otherProps}
+        onSearchChange={this.onSearchChange}
+        onClearSearch={this.onClearSearch}
+      />
+    );
+  }
+}
+
+AddNewItemConnector.propTypes = {
+  term: PropTypes.string,
+  getSearchResults: PropTypes.func.isRequired,
+  clearSearchResults: PropTypes.func.isRequired,
+  fetchRootFolders: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AddNewItemConnector);

frontend/src/Search/Album/AddNewAlbumModal.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import AddNewAlbumModalContentConnector from './AddNewAlbumModalContentConnector';
+
+function AddNewAlbumModal(props) {
+  const {
+    isOpen,
+    onModalClose,
+    ...otherProps
+  } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <AddNewAlbumModalContentConnector
+        {...otherProps}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+AddNewAlbumModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default AddNewAlbumModal;

frontend/src/Search/Album/AddNewAlbumModalContent.css

@@ -0,0 +1,126 @@
+.container {
+  display: flex;
+}
+
+.poster {
+  flex: 0 0 170px;
+  margin-right: 20px;
+  height: 250px;
+}
+
+.info {
+  flex-grow: 1;
+}
+
+.name {
+  font-weight: 300;
+  font-size: 36px;
+}
+
+.artistName {
+  margin-bottom: 20px;
+  font-weight: 300;
+  font-size: 20px;
+}
+
+.disambiguation {
+  margin-bottom: 20px;
+  color: $disabledColor;
+  font-weight: 300;
+  font-size: 20px;
+}
+
+.overview {
+  margin-bottom: 30px;
+  max-height: 230px;
+  text-align: justify;
+}
+
+.header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  width: 100%;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  flex: 0 1 300px;
+}
+
+.albumType {
+  margin-bottom: 20px;
+  border: 1px solid $borderColor;
+  border-radius: 4px;
+  background-color: $white;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+.albumTypeLabel {
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.albumCount {
+  color: #8895aa;
+  font-style: italic;
+  font-size: 18px;
+}
+
+.expandButton {
+  composes: link from '~Components/Link/Link.css';
+
+  flex-grow: 1;
+  width: 100%;
+  text-align: center;
+}
+
+.searchForNewAlbumLabelContainer {
+  display: flex;
+  margin-top: 2px;
+}
+
+.searchForNewAlbumLabel {
+  margin-right: 8px;
+  font-weight: normal;
+}
+
+.searchForNewAlbumContainer {
+  composes: container from '~Components/Form/CheckInput.css';
+
+  flex: 0 1 0;
+}
+
+.searchForNewAlbumInput {
+  composes: input from '~Components/Form/CheckInput.css';
+
+  margin-top: 0;
+}
+
+.modalFooter {
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
+}
+
+.addButton {
+  @add-mixin truncate;
+  composes: button from '~Components/Link/SpinnerButton.css';
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .modalFooter {
+    display: block;
+    text-align: center;
+  }
+
+  .addButton {
+    margin-top: 10px;
+  }
+}

frontend/src/Search/Album/AddNewAlbumModalContent.js

@@ -0,0 +1,157 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import TextTruncate from 'react-text-truncate';
+import { kinds } from 'Helpers/Props';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import CheckInput from 'Components/Form/CheckInput';
+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 AlbumCover from 'Album/AlbumCover';
+import AddArtistOptionsForm from '../Common/AddArtistOptionsForm.js';
+import styles from './AddNewAlbumModalContent.css';
+
+class AddNewAlbumModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      searchForNewAlbum: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onSearchForNewAlbumChange = ({ value }) => {
+    this.setState({ searchForNewAlbum: value });
+  }
+
+  onAddAlbumPress = () => {
+    this.props.onAddAlbumPress(this.state.searchForNewAlbum);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      albumTitle,
+      artistName,
+      disambiguation,
+      overview,
+      images,
+      isAdding,
+      isExistingArtist,
+      isSmallScreen,
+      onModalClose,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Add new Album
+        </ModalHeader>
+
+        <ModalBody>
+          <div className={styles.container}>
+            {
+              isSmallScreen ?
+                null:
+                <div className={styles.poster}>
+                  <AlbumCover
+                    className={styles.poster}
+                    images={images}
+                    size={250}
+                  />
+                </div>
+            }
+
+            <div className={styles.info}>
+              <div className={styles.name}>
+                {albumTitle}
+              </div>
+
+              {
+                !!disambiguation &&
+                  <span className={styles.disambiguation}>({disambiguation})</span>
+              }
+
+              <div>
+                <span className={styles.artistName}> By: {artistName}</span>
+              </div>
+
+              {
+                overview ?
+                  <div className={styles.overview}>
+                    <TextTruncate
+                      truncateText="…"
+                      line={8}
+                      text={overview}
+                    />
+                  </div> :
+                  null
+              }
+
+              {
+                !isExistingArtist &&
+                  <AddArtistOptionsForm
+                    artistName={artistName}
+                    includeNoneMetadataProfile={true}
+                    {...otherProps}
+                  />
+              }
+            </div>
+          </div>
+        </ModalBody>
+
+        <ModalFooter className={styles.modalFooter}>
+          <label className={styles.searchForNewAlbumLabelContainer}>
+            <span className={styles.searchForNewAlbumLabel}>
+              Start search for new album
+            </span>
+
+            <CheckInput
+              containerClassName={styles.searchForNewAlbumContainer}
+              className={styles.searchForNewAlbumInput}
+              name="searchForNewAlbum"
+              value={this.state.searchForNewAlbum}
+              onChange={this.onSearchForNewAlbumChange}
+            />
+          </label>
+
+          <SpinnerButton
+            className={styles.addButton}
+            kind={kinds.SUCCESS}
+            isSpinning={isAdding}
+            onPress={this.onAddAlbumPress}
+          >
+            Add {albumTitle}
+          </SpinnerButton>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+AddNewAlbumModalContent.propTypes = {
+  albumTitle: PropTypes.string.isRequired,
+  artistName: PropTypes.string.isRequired,
+  disambiguation: PropTypes.string.isRequired,
+  overview: PropTypes.string,
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isAdding: PropTypes.bool.isRequired,
+  addError: PropTypes.object,
+  isExistingArtist: PropTypes.bool.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onAddAlbumPress: PropTypes.func.isRequired
+};
+
+export default AddNewAlbumModalContent;

frontend/src/Search/Album/AddNewAlbumModalContentConnector.js

@@ -0,0 +1,135 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { metadataProfileNames } from 'Helpers/Props';
+import { setAddDefault, addAlbum } from 'Store/Actions/searchActions';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import selectSettings from 'Store/Selectors/selectSettings';
+import AddNewAlbumModalContent from './AddNewAlbumModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state, { isExistingArtist }) => isExistingArtist,
+    (state) => state.search,
+    (state) => state.settings.metadataProfiles,
+    createDimensionsSelector(),
+    (isExistingArtist, searchState, metadataProfiles, dimensions) => {
+      const {
+        isAdding,
+        addError,
+        defaults
+      } = searchState;
+
+      const {
+        settings,
+        validationErrors,
+        validationWarnings
+      } = selectSettings(defaults, {}, addError);
+
+      // For adding single albums, default to None profile
+      const noneProfile = metadataProfiles.items.find((item) => item.name === metadataProfileNames.NONE);
+
+      return {
+        isAdding,
+        addError,
+        showMetadataProfile: true,
+        isSmallScreen: dimensions.isSmallScreen,
+        validationErrors,
+        validationWarnings,
+        noneMetadataProfileId: noneProfile.id,
+        ...settings
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  setAddDefault,
+  addAlbum
+};
+
+class AddNewAlbumModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      metadataProfileIdDefault: props.metadataProfileId.value
+    };
+
+    // select none as default
+    this.onInputChange({
+      name: 'metadataProfileId',
+      value: props.noneMetadataProfileId
+    });
+  }
+
+  componentWillUnmount() {
+    // reinstate standard default
+    this.props.setAddDefault({ metadataProfileId: this.state.metadataProfileIdDefault });
+  }
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.setAddDefault({ [name]: value });
+  }
+
+  onAddAlbumPress = (searchForNewAlbum) => {
+    const {
+      foreignAlbumId,
+      rootFolderPath,
+      monitor,
+      qualityProfileId,
+      metadataProfileId,
+      albumFolder,
+      tags
+    } = this.props;
+
+    this.props.addAlbum({
+      foreignAlbumId,
+      rootFolderPath: rootFolderPath.value,
+      monitor: monitor.value,
+      qualityProfileId: qualityProfileId.value,
+      metadataProfileId: metadataProfileId.value,
+      albumFolder: albumFolder.value,
+      tags: tags.value,
+      searchForNewAlbum
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <AddNewAlbumModalContent
+        {...this.props}
+        onInputChange={this.onInputChange}
+        onAddAlbumPress={this.onAddAlbumPress}
+      />
+    );
+  }
+}
+
+AddNewAlbumModalContentConnector.propTypes = {
+  isExistingArtist: PropTypes.bool.isRequired,
+  foreignAlbumId: PropTypes.string.isRequired,
+  rootFolderPath: PropTypes.object,
+  monitor: PropTypes.object.isRequired,
+  qualityProfileId: PropTypes.object,
+  metadataProfileId: PropTypes.object,
+  noneMetadataProfileId: PropTypes.number.isRequired,
+  albumFolder: PropTypes.object.isRequired,
+  tags: PropTypes.object.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  setAddDefault: PropTypes.func.isRequired,
+  addAlbum: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AddNewAlbumModalContentConnector);

frontend/src/Search/Album/AddNewAlbumSearchResult.css

@@ -0,0 +1,64 @@
+.searchResult {
+  display: flex;
+  margin: 20px 0;
+  padding: 20px;
+  width: 100%;
+  background-color: $white;
+  color: inherit;
+  transition: background 500ms;
+
+  &:hover {
+    background-color: #eaf2ff;
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+.poster {
+  flex: 0 0 170px;
+  margin-right: 20px;
+  height: 250px;
+}
+
+.content {
+  flex: 0 1 100%;
+}
+
+.name {
+  display: flex;
+  font-weight: 300;
+  font-size: 36px;
+}
+
+.artistName {
+  font-weight: 300;
+  font-size: 20px;
+}
+
+.year {
+  margin-left: 10px;
+  color: $disabledColor;
+}
+
+.mbLink {
+  composes: link from '~Components/Link/Link.css';
+
+  margin-top: -4px;
+  margin-left: auto;
+  color: $textColor;
+}
+
+.mbLinkIcon {
+  margin-left: 10px;
+}
+
+.alreadyExistsIcon {
+  margin-left: 10px;
+  color: #37bc9b;
+}
+
+.overview {
+  overflow: hidden;
+  margin-top: 20px;
+  text-align: justify;
+}

frontend/src/Search/Album/AddNewAlbumSearchResult.js

@@ -0,0 +1,250 @@
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import TextTruncate from 'react-text-truncate';
+import dimensions from 'Styles/Variables/dimensions';
+import fonts from 'Styles/Variables/fonts';
+import { icons, sizes } from 'Helpers/Props';
+import HeartRating from 'Components/HeartRating';
+import Icon from 'Components/Icon';
+import Label from 'Components/Label';
+import Link from 'Components/Link/Link';
+import AlbumCover from 'Album/AlbumCover';
+import AddNewAlbumModal from './AddNewAlbumModal';
+import styles from './AddNewAlbumSearchResult.css';
+
+const columnPadding = parseInt(dimensions.artistIndexColumnPadding);
+const columnPaddingSmallScreen = parseInt(dimensions.artistIndexColumnPaddingSmallScreen);
+const defaultFontSize = parseInt(fonts.defaultFontSize);
+const lineHeight = parseFloat(fonts.lineHeight);
+
+function calculateHeight(rowHeight, isSmallScreen) {
+  let height = rowHeight - 70;
+
+  if (isSmallScreen) {
+    height -= columnPaddingSmallScreen;
+  } else {
+    height -= columnPadding;
+  }
+
+  return height;
+}
+
+class AddNewAlbumSearchResult extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isNewAddAlbumModalOpen: false
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!prevProps.isExistingAlbum && this.props.isExistingAlbum) {
+      this.onAddAlbumModalClose();
+    }
+  }
+
+  //
+  // Listeners
+
+  onPress = () => {
+    this.setState({ isNewAddAlbumModalOpen: true });
+  }
+
+  onAddAlbumModalClose = () => {
+    this.setState({ isNewAddAlbumModalOpen: false });
+  }
+
+  onMBLinkPress = (event) => {
+    event.stopPropagation();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      foreignAlbumId,
+      title,
+      releaseDate,
+      disambiguation,
+      albumType,
+      secondaryTypes,
+      overview,
+      ratings,
+      images,
+      releases,
+      artist,
+      isExistingAlbum,
+      isExistingArtist,
+      isSmallScreen
+    } = this.props;
+
+    const {
+      isNewAddAlbumModalOpen
+    } = this.state;
+
+    const linkProps = isExistingAlbum ? { to: `/album/${foreignAlbumId}` } : { onPress: this.onPress };
+
+    const height = calculateHeight(230, isSmallScreen);
+
+    return (
+      <div>
+        <Link
+          className={styles.searchResult}
+          {...linkProps}
+        >
+          {
+            !isSmallScreen &&
+            <AlbumCover
+              className={styles.poster}
+              images={images}
+              size={250}
+            />
+          }
+
+          <div className={styles.content}>
+            <div className={styles.name}>
+              {title}
+
+              {
+                !!disambiguation &&
+                <span className={styles.year}>({disambiguation})</span>
+              }
+
+              {
+                isExistingAlbum ?
+                  <Icon
+                    className={styles.alreadyExistsIcon}
+                    name={icons.CHECK_CIRCLE}
+                    size={20}
+                    title="Album already in your library"
+                  /> :
+                  null
+              }
+
+              <Link
+                className={styles.mbLink}
+                to={`https://musicbrainz.org/release-group/${foreignAlbumId}`}
+                onPress={this.onMBLinkPress}
+              >
+                <Icon
+                  className={styles.mbLinkIcon}
+                  name={icons.EXTERNAL_LINK}
+                  size={28}
+                />
+              </Link>
+
+            </div>
+
+            <div>
+              <span className={styles.artistName}> By: {artist.artistName}</span>
+
+              {
+                isExistingArtist ?
+                  <Icon
+                    className={styles.alreadyExistsIcon}
+                    name={icons.CHECK_CIRCLE}
+                    size={15}
+                    title="Artist already in your library"
+                  /> :
+                  null
+              }
+            </div>
+
+            <div>
+              <Label size={sizes.LARGE}>
+                <HeartRating
+                  rating={ratings.value}
+                  iconSize={13}
+                />
+              </Label>
+
+              {
+                !!releaseDate &&
+                  <Label size={sizes.LARGE}>
+                    {moment(releaseDate).format('YYYY')}
+                  </Label>
+              }
+
+              <Label size={sizes.LARGE}>
+                {releases.length} release{releases.length > 0 ? 's' : null}
+              </Label>
+
+              {
+                !!albumType &&
+                  <Label size={sizes.LARGE}>
+                    {albumType}
+                  </Label>
+              }
+
+              {
+                !!secondaryTypes &&
+                  secondaryTypes.map((item, i) => {
+                    return (
+                      <Label
+                        size={sizes.LARGE}
+                        key={i}
+                      >
+                        {item}
+                      </Label>
+                    );
+                  })
+              }
+
+            </div>
+
+            <div
+              className={styles.overview}
+              style={{
+                maxHeight: `${height}px`
+              }}
+            >
+              <TextTruncate
+                truncateText="…"
+                line={Math.floor(height / (defaultFontSize * lineHeight))}
+                text={overview}
+              />
+            </div>
+          </div>
+        </Link>
+
+        <AddNewAlbumModal
+          isOpen={isNewAddAlbumModalOpen && !isExistingAlbum}
+          isExistingArtist={isExistingArtist}
+          foreignAlbumId={foreignAlbumId}
+          albumTitle={title}
+          disambiguation={disambiguation}
+          artistName={artist.artistName}
+          overview={overview}
+          images={images}
+          onModalClose={this.onAddAlbumModalClose}
+        />
+      </div>
+    );
+  }
+}
+
+AddNewAlbumSearchResult.propTypes = {
+  foreignAlbumId: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  releaseDate: PropTypes.string.isRequired,
+  disambiguation: PropTypes.string,
+  albumType: PropTypes.string,
+  secondaryTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
+  overview: PropTypes.string,
+  ratings: PropTypes.object.isRequired,
+  artist: PropTypes.object,
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  releases: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isExistingAlbum: PropTypes.bool.isRequired,
+  isExistingArtist: PropTypes.bool.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired
+};
+
+export default AddNewAlbumSearchResult;

frontend/src/Search/Album/AddNewAlbumSearchResultConnector.js

@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import AddNewAlbumSearchResult from './AddNewAlbumSearchResult';
+
+function createMapStateToProps() {
+  return createSelector(
+    createDimensionsSelector(),
+    (dimensions) => {
+      return {
+        isSmallScreen: dimensions.isSmallScreen
+      };
+    }
+  );
+}
+
+export default connect(createMapStateToProps)(AddNewAlbumSearchResult);

frontend/src/Search/Artist/AddNewArtistModal.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import AddNewArtistModalContentConnector from './AddNewArtistModalContentConnector';
+
+function AddNewArtistModal(props) {
+  const {
+    isOpen,
+    onModalClose,
+    ...otherProps
+  } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <AddNewArtistModalContentConnector
+        {...otherProps}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+AddNewArtistModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default AddNewArtistModal;

frontend/src/Search/Artist/AddNewArtistModalContent.css

@@ -0,0 +1,78 @@
+.container {
+  display: flex;
+}
+
+.year {
+  margin-left: 5px;
+  color: $disabledColor;
+}
+
+.poster {
+  flex: 0 0 170px;
+  margin-right: 20px;
+  height: 250px;
+}
+
+.info {
+  flex-grow: 1;
+}
+
+.name {
+  font-weight: 300;
+  font-size: 36px;
+}
+
+.disambiguation {
+  margin-bottom: 20px;
+  color: $disabledColor;
+  font-weight: 300;
+  font-size: 20px;
+}
+
+.overview {
+  margin-bottom: 30px;
+  max-height: 230px;
+  text-align: justify;
+}
+
+.searchForMissingAlbumsLabelContainer {
+  display: flex;
+  margin-top: 2px;
+}
+
+.searchForMissingAlbumsLabel {
+  margin-right: 8px;
+  font-weight: normal;
+}
+
+.searchForMissingAlbumsContainer {
+  composes: container from '~Components/Form/CheckInput.css';
+
+  flex: 0 1 0;
+}
+
+.searchForMissingAlbumsInput {
+  composes: input from '~Components/Form/CheckInput.css';
+
+  margin-top: 0;
+}
+
+.modalFooter {
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
+}
+
+.addButton {
+  @add-mixin truncate;
+  composes: button from '~Components/Link/SpinnerButton.css';
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .modalFooter {
+    display: block;
+    text-align: center;
+  }
+
+  .addButton {
+    margin-top: 10px;
+  }
+}

frontend/src/Search/Artist/AddNewArtistModalContent.js

@@ -0,0 +1,146 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import TextTruncate from 'react-text-truncate';
+import { kinds } from 'Helpers/Props';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import CheckInput from 'Components/Form/CheckInput';
+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 ArtistPoster from 'Artist/ArtistPoster';
+import AddArtistOptionsForm from '../Common/AddArtistOptionsForm.js';
+import styles from './AddNewArtistModalContent.css';
+
+class AddNewArtistModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      searchForMissingAlbums: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onSearchForMissingAlbumsChange = ({ value }) => {
+    this.setState({ searchForMissingAlbums: value });
+  }
+
+  onAddArtistPress = () => {
+    this.props.onAddArtistPress(this.state.searchForMissingAlbums);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      artistName,
+      disambiguation,
+      overview,
+      images,
+      isAdding,
+      isSmallScreen,
+      onModalClose,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Add new Artist
+        </ModalHeader>
+
+        <ModalBody>
+          <div className={styles.container}>
+            {
+              isSmallScreen ?
+                null:
+                <div className={styles.poster}>
+                  <ArtistPoster
+                    className={styles.poster}
+                    images={images}
+                    size={250}
+                  />
+                </div>
+            }
+
+            <div className={styles.info}>
+              <div className={styles.name}>
+                {artistName}
+              </div>
+
+              {
+                !!disambiguation &&
+                  <span className={styles.disambiguation}>({disambiguation})</span>
+              }
+
+              {
+                overview ?
+                  <div className={styles.overview}>
+                    <TextTruncate
+                      truncateText="…"
+                      line={8}
+                      text={overview}
+                    />
+                  </div> :
+                  null
+              }
+
+              <AddArtistOptionsForm
+                includeNoneMetadataProfile={false}
+                {...otherProps}
+              />
+
+            </div>
+          </div>
+        </ModalBody>
+
+        <ModalFooter className={styles.modalFooter}>
+          <label className={styles.searchForMissingAlbumsLabelContainer}>
+            <span className={styles.searchForMissingAlbumsLabel}>
+              Start search for missing albums
+            </span>
+
+            <CheckInput
+              containerClassName={styles.searchForMissingAlbumsContainer}
+              className={styles.searchForMissingAlbumsInput}
+              name="searchForMissingAlbums"
+              value={this.state.searchForMissingAlbums}
+              onChange={this.onSearchForMissingAlbumsChange}
+            />
+          </label>
+
+          <SpinnerButton
+            className={styles.addButton}
+            kind={kinds.SUCCESS}
+            isSpinning={isAdding}
+            onPress={this.onAddArtistPress}
+          >
+            Add {artistName}
+          </SpinnerButton>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+AddNewArtistModalContent.propTypes = {
+  artistName: PropTypes.string.isRequired,
+  disambiguation: PropTypes.string.isRequired,
+  overview: PropTypes.string,
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isAdding: PropTypes.bool.isRequired,
+  addError: PropTypes.object,
+  isSmallScreen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onAddArtistPress: PropTypes.func.isRequired
+};
+
+export default AddNewArtistModalContent;

frontend/src/Search/Artist/AddNewArtistModalContentConnector.js

@@ -0,0 +1,105 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { setAddDefault, addArtist } from 'Store/Actions/searchActions';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import selectSettings from 'Store/Selectors/selectSettings';
+import AddNewArtistModalContent from './AddNewArtistModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.search,
+    (state) => state.settings.metadataProfiles,
+    createDimensionsSelector(),
+    (searchState, metadataProfiles, dimensions) => {
+      const {
+        isAdding,
+        addError,
+        defaults
+      } = searchState;
+
+      const {
+        settings,
+        validationErrors,
+        validationWarnings
+      } = selectSettings(defaults, {}, addError);
+
+      return {
+        isAdding,
+        addError,
+        showMetadataProfile: metadataProfiles.items.length > 2, // NONE (not allowed for artists) and one other
+        isSmallScreen: dimensions.isSmallScreen,
+        validationErrors,
+        validationWarnings,
+        ...settings
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  setAddDefault,
+  addArtist
+};
+
+class AddNewArtistModalContentConnector extends Component {
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.setAddDefault({ [name]: value });
+  }
+
+  onAddArtistPress = (searchForMissingAlbums) => {
+    const {
+      foreignArtistId,
+      rootFolderPath,
+      monitor,
+      qualityProfileId,
+      metadataProfileId,
+      albumFolder,
+      tags
+    } = this.props;
+
+    this.props.addArtist({
+      foreignArtistId,
+      rootFolderPath: rootFolderPath.value,
+      monitor: monitor.value,
+      qualityProfileId: qualityProfileId.value,
+      metadataProfileId: metadataProfileId.value,
+      albumFolder: albumFolder.value,
+      tags: tags.value,
+      searchForMissingAlbums
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <AddNewArtistModalContent
+        {...this.props}
+        onInputChange={this.onInputChange}
+        onAddArtistPress={this.onAddArtistPress}
+      />
+    );
+  }
+}
+
+AddNewArtistModalContentConnector.propTypes = {
+  foreignArtistId: PropTypes.string.isRequired,
+  rootFolderPath: PropTypes.object,
+  monitor: PropTypes.object.isRequired,
+  qualityProfileId: PropTypes.object,
+  metadataProfileId: PropTypes.object,
+  albumFolder: PropTypes.object.isRequired,
+  tags: PropTypes.object.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  setAddDefault: PropTypes.func.isRequired,
+  addArtist: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AddNewArtistModalContentConnector);

frontend/src/Search/Artist/AddNewArtistSearchResult.css

@@ -0,0 +1,59 @@
+.searchResult {
+  display: flex;
+  margin: 20px 0;
+  padding: 20px;
+  width: 100%;
+  background-color: $white;
+  color: inherit;
+  transition: background 500ms;
+
+  &:hover {
+    background-color: #eaf2ff;
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+.poster {
+  flex: 0 0 170px;
+  margin-right: 20px;
+  height: 250px;
+}
+
+.content {
+  flex: 0 1 100%;
+}
+
+.name {
+  display: flex;
+  font-weight: 300;
+  font-size: 36px;
+}
+
+.year {
+  margin-left: 10px;
+  color: $disabledColor;
+}
+
+.mbLink {
+  composes: link from '~Components/Link/Link.css';
+
+  margin-top: -4px;
+  margin-left: auto;
+  color: $textColor;
+}
+
+.mbLinkIcon {
+  margin-left: 10px;
+}
+
+.alreadyExistsIcon {
+  margin-left: 10px;
+  color: #37bc9b;
+}
+
+.overview {
+  overflow: hidden;
+  margin-top: 20px;
+  text-align: justify;
+}

frontend/src/Search/Artist/AddNewArtistSearchResult.js

@@ -0,0 +1,224 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import TextTruncate from 'react-text-truncate';
+import dimensions from 'Styles/Variables/dimensions';
+import fonts from 'Styles/Variables/fonts';
+import { icons, kinds, sizes } from 'Helpers/Props';
+import HeartRating from 'Components/HeartRating';
+import Icon from 'Components/Icon';
+import Label from 'Components/Label';
+import Link from 'Components/Link/Link';
+import ArtistPoster from 'Artist/ArtistPoster';
+import AddNewArtistModal from './AddNewArtistModal';
+import styles from './AddNewArtistSearchResult.css';
+
+const columnPadding = parseInt(dimensions.artistIndexColumnPadding);
+const columnPaddingSmallScreen = parseInt(dimensions.artistIndexColumnPaddingSmallScreen);
+const defaultFontSize = parseInt(fonts.defaultFontSize);
+const lineHeight = parseFloat(fonts.lineHeight);
+
+function calculateHeight(rowHeight, isSmallScreen) {
+  let height = rowHeight - 45;
+
+  if (isSmallScreen) {
+    height -= columnPaddingSmallScreen;
+  } else {
+    height -= columnPadding;
+  }
+
+  return height;
+}
+
+class AddNewArtistSearchResult extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isNewAddArtistModalOpen: false
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!prevProps.isExistingArtist && this.props.isExistingArtist) {
+      this.onAddArtistModalClose();
+    }
+  }
+
+  //
+  // Listeners
+
+  onPress = () => {
+    this.setState({ isNewAddArtistModalOpen: true });
+  }
+
+  onAddArtistModalClose = () => {
+    this.setState({ isNewAddArtistModalOpen: false });
+  }
+
+  onMBLinkPress = (event) => {
+    event.stopPropagation();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      foreignArtistId,
+      artistName,
+      year,
+      disambiguation,
+      artistType,
+      status,
+      overview,
+      ratings,
+      images,
+      isExistingArtist,
+      isSmallScreen
+    } = this.props;
+
+    const {
+      isNewAddArtistModalOpen
+    } = this.state;
+
+    const linkProps = isExistingArtist ? { to: `/artist/${foreignArtistId}` } : { onPress: this.onPress };
+
+    const endedString = artistType === 'Person' ? 'Deceased' : 'Ended';
+
+    const height = calculateHeight(230, isSmallScreen);
+
+    return (
+      <div>
+        <Link
+          className={styles.searchResult}
+          {...linkProps}
+        >
+          {
+            isSmallScreen ?
+              null :
+              <ArtistPoster
+                className={styles.poster}
+                images={images}
+                size={250}
+                overflow={true}
+              />
+          }
+
+          <div className={styles.content}>
+            <div className={styles.name}>
+              {artistName}
+
+              {
+                !name.contains(year) && year ?
+                  <span className={styles.year}>
+                    ({year})
+                  </span> :
+                  null
+              }
+
+              {
+                !!disambiguation &&
+                <span className={styles.year}>({disambiguation})</span>
+              }
+
+              {
+                isExistingArtist ?
+                  <Icon
+                    className={styles.alreadyExistsIcon}
+                    name={icons.CHECK_CIRCLE}
+                    size={36}
+                    title="Already in your library"
+                  /> :
+                  null
+              }
+
+              <Link
+                className={styles.mbLink}
+                to={`https://musicbrainz.org/artist/${foreignArtistId}`}
+                onPress={this.onMBLinkPress}
+              >
+                <Icon
+                  className={styles.mbLinkIcon}
+                  name={icons.EXTERNAL_LINK}
+                  size={28}
+                />
+              </Link>
+            </div>
+
+            <div>
+              <Label size={sizes.LARGE}>
+                <HeartRating
+                  rating={ratings.value}
+                  iconSize={13}
+                />
+              </Label>
+
+              {
+                artistType ?
+                  <Label size={sizes.LARGE}>
+                    {artistType}
+                  </Label> :
+                  null
+              }
+
+              {
+                status === 'ended' ?
+                  <Label
+                    kind={kinds.DANGER}
+                    size={sizes.LARGE}
+                  >
+                    {endedString}
+                  </Label> :
+                  null
+              }
+            </div>
+
+            <div
+              className={styles.overview}
+              style={{
+                maxHeight: `${height}px`
+              }}
+            >
+              <TextTruncate
+                truncateText="…"
+                line={Math.floor(height / (defaultFontSize * lineHeight))}
+                text={overview}
+              />
+            </div>
+          </div>
+        </Link>
+
+        <AddNewArtistModal
+          isOpen={isNewAddArtistModalOpen && !isExistingArtist}
+          foreignArtistId={foreignArtistId}
+          artistName={artistName}
+          disambiguation={disambiguation}
+          year={year}
+          overview={overview}
+          images={images}
+          onModalClose={this.onAddArtistModalClose}
+        />
+      </div>
+    );
+  }
+}
+
+AddNewArtistSearchResult.propTypes = {
+  foreignArtistId: PropTypes.string.isRequired,
+  artistName: PropTypes.string.isRequired,
+  year: PropTypes.number,
+  disambiguation: PropTypes.string,
+  artistType: PropTypes.string,
+  status: PropTypes.string.isRequired,
+  overview: PropTypes.string,
+  ratings: PropTypes.object.isRequired,
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isExistingArtist: PropTypes.bool.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired
+};
+
+export default AddNewArtistSearchResult;

frontend/src/Search/Artist/AddNewArtistSearchResultConnector.js

@@ -0,0 +1,20 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createExistingArtistSelector from 'Store/Selectors/createExistingArtistSelector';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import AddNewArtistSearchResult from './AddNewArtistSearchResult';
+
+function createMapStateToProps() {
+  return createSelector(
+    createExistingArtistSelector(),
+    createDimensionsSelector(),
+    (isExistingArtist, dimensions) => {
+      return {
+        isExistingArtist,
+        isSmallScreen: dimensions.isSmallScreen
+      };
+    }
+  );
+}
+
+export default connect(createMapStateToProps)(AddNewArtistSearchResult);

frontend/src/Search/Common/AddArtistOptionsForm.css

@@ -0,0 +1,9 @@
+.labelIcon {
+  margin-left: 8px;
+}
+
+.hideMetadataProfile {
+  composes: group from '~Components/Form/FormGroup.css';
+
+  display: none;
+}

frontend/src/Search/Common/AddArtistOptionsForm.js

@@ -0,0 +1,160 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons, inputTypes, tooltipPositions } from 'Helpers/Props';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import Icon from 'Components/Icon';
+import Popover from 'Components/Tooltip/Popover';
+import ArtistMonitoringOptionsPopoverContent from 'AddArtist/ArtistMonitoringOptionsPopoverContent';
+import ArtistMetadataProfilePopoverContent from 'AddArtist/ArtistMetadataProfilePopoverContent';
+import styles from './AddArtistOptionsForm.css';
+
+class AddArtistOptionsForm extends Component {
+
+  //
+  // Listeners
+
+  onQualityProfileIdChange = ({ value }) => {
+    this.props.onInputChange({ name: 'qualityProfileId', value: parseInt(value) });
+  }
+
+  onMetadataProfileIdChange = ({ value }) => {
+    this.props.onInputChange({ name: 'metadataProfileId', value: parseInt(value) });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      rootFolderPath,
+      monitor,
+      qualityProfileId,
+      metadataProfileId,
+      includeNoneMetadataProfile,
+      showMetadataProfile,
+      albumFolder,
+      tags,
+      onInputChange,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <Form {...otherProps}>
+        <FormGroup>
+          <FormLabel>Root Folder</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.ROOT_FOLDER_SELECT}
+            name="rootFolderPath"
+            onChange={onInputChange}
+            {...rootFolderPath}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>
+            Monitor
+
+            <Popover
+              anchor={
+                <Icon
+                  className={styles.labelIcon}
+                  name={icons.INFO}
+                />
+              }
+              title="Monitoring Options"
+              body={<ArtistMonitoringOptionsPopoverContent />}
+              position={tooltipPositions.RIGHT}
+            />
+          </FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.MONITOR_ALBUMS_SELECT}
+            name="monitor"
+            onChange={onInputChange}
+            {...monitor}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>Quality Profile</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.QUALITY_PROFILE_SELECT}
+            name="qualityProfileId"
+            onChange={this.onQualityProfileIdChange}
+            {...qualityProfileId}
+          />
+        </FormGroup>
+
+        <FormGroup className={showMetadataProfile ? undefined : styles.hideMetadataProfile}>
+          <FormLabel>
+            Metadata Profile
+
+            {
+              includeNoneMetadataProfile &&
+                <Popover
+                  anchor={
+                    <Icon
+                      className={styles.labelIcon}
+                      name={icons.INFO}
+                    />
+                  }
+                  title="Metadata Profile"
+                  body={<ArtistMetadataProfilePopoverContent />}
+                  position={tooltipPositions.RIGHT}
+                />
+            }
+          </FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.METADATA_PROFILE_SELECT}
+            name="metadataProfileId"
+            includeNone={includeNoneMetadataProfile}
+            onChange={this.onMetadataProfileIdChange}
+            {...metadataProfileId}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>Album Folder</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.CHECK}
+            name="albumFolder"
+            onChange={onInputChange}
+            {...albumFolder}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>Tags</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.TAG}
+            name="tags"
+            onChange={onInputChange}
+            {...tags}
+          />
+        </FormGroup>
+      </Form>
+    );
+  }
+}
+
+AddArtistOptionsForm.propTypes = {
+  rootFolderPath: PropTypes.object,
+  monitor: PropTypes.object.isRequired,
+  qualityProfileId: PropTypes.object,
+  metadataProfileId: PropTypes.object,
+  showMetadataProfile: PropTypes.bool.isRequired,
+  includeNoneMetadataProfile: PropTypes.bool.isRequired,
+  albumFolder: PropTypes.object.isRequired,
+  tags: PropTypes.object.isRequired,
+  onInputChange: PropTypes.func.isRequired
+};
+
+export default AddArtistOptionsForm;