New: Added Artist Monitoring Toggle to Artist Details

(cherry picked from commit 0ff889c3be1e8ee48759b233aeabf1bf1c4b4ff4)

frontend/src/AddArtist/ArtistMonitoringOptionsPopoverContent.css

@@ -0,0 +1,5 @@
+.message {
+  composes: alert from '~Components/Alert.css';
+
+  margin-bottom: 30px;
+}

frontend/src/AddArtist/ArtistMonitoringOptionsPopoverContent.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'message': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/AddArtist/ArtistMonitoringOptionsPopoverContent.js

@@ -2,14 +2,17 @@ import React from 'react';
 import Alert from 'Components/Alert';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
+import styles from './ArtistMonitoringOptionsPopoverContent.css';
 
 function ArtistMonitoringOptionsPopoverContent() {
   return (
     <>
-      <Alert>
+      <Alert kind={kinds.INFO} className={styles.message}>
         This is a one time adjustment to set which albums are monitored
       </Alert>
+
       <DescriptionList>
         <DescriptionListItem
           title={translate('AllAlbums')}

frontend/src/Artist/Details/ArtistDetails.js

@@ -6,6 +6,7 @@ import ArtistPoster from 'Artist/ArtistPoster';
 import DeleteArtistModal from 'Artist/Delete/DeleteArtistModal';
 import EditArtistModalConnector from 'Artist/Edit/EditArtistModalConnector';
 import ArtistHistoryModal from 'Artist/History/ArtistHistoryModal';
+import MonitoringOptionsModal from 'Artist/MonitoringOptions/MonitoringOptionsModal';
 import ArtistInteractiveSearchModalConnector from 'Artist/Search/ArtistInteractiveSearchModalConnector';
 import HeartRating from 'Components/HeartRating';
 import Icon from 'Components/Icon';
@@ -72,6 +73,7 @@ class ArtistDetails extends Component {
       isArtistHistoryModalOpen: false,
       isInteractiveImportModalOpen: false,
       isInteractiveSearchModalOpen: false,
+      isMonitorOptionsModalOpen: false,
       allExpanded: false,
       allCollapsed: false,
       expandedState: {}
@@ -148,6 +150,14 @@ class ArtistDetails extends Component {
     this.setState({ isArtistHistoryModalOpen: false });
   };
 
+  onMonitorOptionsPress = () => {
+    this.setState({ isMonitorOptionsModalOpen: true });
+  };
+
+  onMonitorOptionsClose = () => {
+    this.setState({ isMonitorOptionsModalOpen: false });
+  };
+
   onExpandAllPress = () => {
     const {
       allExpanded,
@@ -224,6 +234,7 @@ class ArtistDetails extends Component {
       isArtistHistoryModalOpen,
       isInteractiveImportModalOpen,
       isInteractiveSearchModalOpen,
+      isMonitorOptionsModalOpen,
       allExpanded,
       allCollapsed,
       expandedState
@@ -319,6 +330,12 @@ class ArtistDetails extends Component {
 
             <PageToolbarSeparator />
 
+            <PageToolbarButton
+              label={translate('ArtistMonitoring')}
+              iconName={icons.MONITORED}
+              onPress={this.onMonitorOptionsPress}
+            />
+
             <PageToolbarButton
               label={translate('Edit')}
               iconName={icons.EDIT}
@@ -330,6 +347,7 @@ class ArtistDetails extends Component {
               iconName={icons.DELETE}
               onPress={this.onDeleteArtistPress}
             />
+
           </PageToolbarSection>
 
           <PageToolbarSection alignContent={align.RIGHT}>
@@ -689,6 +707,12 @@ class ArtistDetails extends Component {
             artistId={id}
             onModalClose={this.onInteractiveSearchModalClose}
           />
+
+          <MonitoringOptionsModal
+            isOpen={isMonitorOptionsModalOpen}
+            artistId={id}
+            onModalClose={this.onMonitorOptionsClose}
+          />
         </PageContentBody>
       </PageContent>
     );

frontend/src/Artist/MonitoringOptions/MonitoringOptionModalConnector.js

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import MonitoringOptionsModal from './MonitoringOptionsModal';
+
+const mapDispatchToProps = {
+  clearPendingChanges
+};
+
+class MonitoringOptionsModalConnector extends Component {
+
+  //
+  // Listeners
+
+  onModalClose = () => {
+    this.props.clearPendingChanges({ section: 'artist' });
+    this.props.onModalClose();
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <MonitoringOptionsModal
+        {...this.props}
+        onModalClose={this.onModalClose}
+      />
+    );
+  }
+}
+
+MonitoringOptionsModalConnector.propTypes = {
+  onModalClose: PropTypes.func.isRequired,
+  clearPendingChanges: PropTypes.func.isRequired
+};
+
+export default connect(undefined, mapDispatchToProps)(MonitoringOptionsModalConnector);

frontend/src/Artist/MonitoringOptions/MonitoringOptionsModal.js

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

frontend/src/Artist/MonitoringOptions/MonitoringOptionsModalContent.css

@@ -0,0 +1,9 @@
+.labelIcon {
+  margin-left: 8px;
+}
+
+.message {
+  composes: alert from '~Components/Alert.css';
+
+  margin-bottom: 30px;
+}

frontend/src/Artist/MonitoringOptions/MonitoringOptionsModalContent.css.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'labelIcon': string;
+  'message': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Artist/MonitoringOptions/MonitoringOptionsModalContent.js

@@ -1,18 +1,22 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import ArtistMonitoringOptionsPopoverContent from 'AddArtist/ArtistMonitoringOptionsPopoverContent';
 import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
+import Icon from 'Components/Icon';
 import Button from 'Components/Link/Button';
 import SpinnerButton from 'Components/Link/SpinnerButton';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
-import { inputTypes, kinds } from 'Helpers/Props';
+import Popover from 'Components/Tooltip/Popover';
+import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
+import styles from './MonitoringOptionsModalContent.css';
 
 const NO_CHANGE = 'noChange';
 
@@ -51,8 +55,7 @@ class MonitoringOptionsModalContent extends Component {
 
   onSavePress = () => {
     const {
-      onSavePress,
+      onSavePress
-      isSaving
     } = this.props;
     const {
       monitor
@@ -61,14 +64,6 @@ class MonitoringOptionsModalContent extends Component {
     if (monitor !== NO_CHANGE) {
       onSavePress({ monitor });
     }
-
-    if (!isSaving) {
-      this.onModalClose();
-    }
-  };
-
-  onModalClose = () => {
-    this.props.onModalClose();
   };
 
   //
@@ -89,19 +84,31 @@ class MonitoringOptionsModalContent extends Component {
     return (
       <ModalContent onModalClose={onModalClose}>
         <ModalHeader>
-          {translate('MonitorAlbum')}
+          {translate('MonitorArtist')}
         </ModalHeader>
 
         <ModalBody>
-          <Alert kind={kinds.INFO}>
+          <Alert kind={kinds.INFO} className={styles.message}>
-            <div>
+            {translate('MonitorAlbumExistingOnlyWarning')}
-              {translate('MonitorAlbumExistingOnlyWarning')}
-            </div>
           </Alert>
 
           <Form {...otherProps}>
             <FormGroup>
-              <FormLabel>{translate('Monitoring')}</FormLabel>
+              <FormLabel>
+                {translate('MonitorExistingAlbums')}
+
+                <Popover
+                  anchor={
+                    <Icon
+                      className={styles.labelIcon}
+                      name={icons.INFO}
+                    />
+                  }
+                  title={translate('MonitoringOptions')}
+                  body={<ArtistMonitoringOptionsPopoverContent />}
+                  position={tooltipPositions.RIGHT}
+                />
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.MONITOR_ALBUMS_SELECT}
@@ -134,7 +141,7 @@ class MonitoringOptionsModalContent extends Component {
 }
 
 MonitoringOptionsModalContent.propTypes = {
-  authorId: PropTypes.number.isRequired,
+  artistId: PropTypes.number.isRequired,
   saveError: PropTypes.object,
   isSaving: PropTypes.bool.isRequired,
   onInputChange: PropTypes.func.isRequired,

frontend/src/Artist/MonitoringOptions/MonitoringOptionsModalContentConnector.js

@@ -0,0 +1,76 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { updateArtistsMonitor } from 'Store/Actions/artistActions';
+import MonitoringOptionsModalContent from './MonitoringOptionsModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.artist,
+    (artistState) => {
+      const {
+        isSaving,
+        saveError
+      } = artistState;
+
+      return {
+        isSaving,
+        saveError
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchUpdateMonitoringOptions: updateArtistsMonitor
+};
+
+class MonitoringOptionsModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
+      this.props.onModalClose(true);
+    }
+  }
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.setState({ name, value });
+  };
+
+  onSavePress = ({ monitor }) => {
+    this.props.dispatchUpdateMonitoringOptions({
+      artistIds: [this.props.artistId],
+      monitor
+    });
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <MonitoringOptionsModalContent
+        {...this.props}
+        onInputChange={this.onInputChange}
+        onSavePress={this.onSavePress}
+      />
+    );
+  }
+}
+
+MonitoringOptionsModalContentConnector.propTypes = {
+  artistId: PropTypes.number.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  dispatchUpdateMonitoringOptions: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(MonitoringOptionsModalContentConnector);

frontend/src/Store/Actions/albumStudioActions.js

@@ -102,21 +102,21 @@ export const actionHandlers = handleThunks({
   [SAVE_ALBUM_STUDIO]: function(getState, payload, dispatch) {
     const {
       artistIds,
-      monitored,
       monitor,
+      monitored,
       monitorNewItems
     } = payload;
 
-    const artist = [];
+    const artists = [];
 
     artistIds.forEach((id) => {
-      const artistToUpdate = { id };
+      const artistsToUpdate = { id };
 
       if (payload.hasOwnProperty('monitored')) {
-        artistToUpdate.monitored = monitored;
+        artistsToUpdate.monitored = monitored;
       }
 
-      artist.push(artistToUpdate);
+      artists.push(artistsToUpdate);
     });
 
     dispatch(set({
@@ -128,7 +128,7 @@ export const actionHandlers = handleThunks({
       url: '/albumStudio',
       method: 'POST',
       data: JSON.stringify({
-        artist,
+        artist: artists,
         monitoringOptions: { monitor },
         monitorNewItems
       }),

frontend/src/Store/Actions/artistActions.js

@@ -2,11 +2,12 @@ import _ from 'lodash';
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
 import { filterTypePredicates, filterTypes, sortDirections } from 'Helpers/Props';
+import { fetchAlbums } from 'Store/Actions/albumActions';
 import { createThunk, handleThunks } from 'Store/thunks';
 import createAjaxRequest from 'Utilities/createAjaxRequest';
 import dateFilterPredicate from 'Utilities/Date/dateFilterPredicate';
 import translate from 'Utilities/String/translate';
-import { updateItem } from './baseActions';
+import { set, updateItem } from './baseActions';
 import createFetchHandler from './Creators/createFetchHandler';
 import createHandleActions from './Creators/createHandleActions';
 import createRemoveItemHandler from './Creators/createRemoveItemHandler';
@@ -177,6 +178,7 @@ export const DELETE_ARTIST = 'artist/deleteArtist';
 
 export const TOGGLE_ARTIST_MONITORED = 'artist/toggleArtistMonitored';
 export const TOGGLE_ALBUM_MONITORED = 'artist/toggleAlbumMonitored';
+export const UPDATE_ARTISTS_MONITOR = 'artist/updateArtistsMonitor';
 
 export const SET_DELETE_OPTION = 'artist/setDeleteOption';
 
@@ -212,6 +214,7 @@ export const deleteArtist = createThunk(DELETE_ARTIST, (payload) => {
 
 export const toggleArtistMonitored = createThunk(TOGGLE_ARTIST_MONITORED);
 export const toggleAlbumMonitored = createThunk(TOGGLE_ALBUM_MONITORED);
+export const updateArtistsMonitor = createThunk(UPDATE_ARTISTS_MONITOR);
 
 export const setArtistValue = createAction(SET_ARTIST_VALUE, (payload) => {
   return {
@@ -342,6 +345,61 @@ export const actionHandlers = handleThunks({
         seasons: artist.seasons
       }));
     });
+  },
+
+  [UPDATE_ARTISTS_MONITOR]: function(getState, payload, dispatch) {
+    const {
+      artistIds,
+      monitor,
+      monitored,
+      monitorNewItems
+    } = payload;
+
+    const artists = [];
+
+    artistIds.forEach((id) => {
+      const artistsToUpdate = { id };
+
+      if (monitored != null) {
+        artistsToUpdate.monitored = monitored;
+      }
+
+      artists.push(artistsToUpdate);
+    });
+
+    dispatch(set({
+      section,
+      isSaving: true
+    }));
+
+    const promise = createAjaxRequest({
+      url: '/albumStudio',
+      method: 'POST',
+      data: JSON.stringify({
+        artist: artists,
+        monitoringOptions: { monitor },
+        monitorNewItems
+      }),
+      dataType: 'json'
+    }).request;
+
+    promise.done((data) => {
+      dispatch(fetchAlbums({ artistId: artistIds[0] }));
+
+      dispatch(set({
+        section,
+        isSaving: false,
+        saveError: null
+      }));
+    });
+
+    promise.fail((xhr) => {
+      dispatch(set({
+        section,
+        isSaving: false,
+        saveError: xhr
+      }));
+    });
   }
 
 });

src/NzbDrone.Core/Localization/Core/en.json

@@ -98,6 +98,7 @@
   "ArtistClickToChangeAlbum": "Click to change album",
   "ArtistEditor": "Artist Editor",
   "ArtistFolderFormat": "Artist Folder Format",
+  "ArtistMonitoring": "Artist Monitoring",
   "ArtistName": "Artist Name",
   "ArtistNameHelpText": "The name of the artist/album to exclude (can be anything meaningful)",
   "ArtistProgressBarText": "{trackFileCount} / {trackCount} (Total: {totalTrackCount})",