New: Import List Tags (#505)

* New: Import List Tags

* New: Show ImportLists where Tag is Used in Tag manager

* Fixed: SignalR Errors due to handleTag missing

* Fixed: Clarify Lidarr Tags, not to be confused with LastFmTags

frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.js

@@ -44,6 +44,7 @@ function EditImportListModalContent(props) {
     qualityProfileId,
     languageProfileId,
     metadataProfileId,
+    tags,
     fields
   } = item;
 
@@ -152,6 +153,18 @@ function EditImportListModalContent(props) {
                 />
               </FormGroup>
 
+              <FormGroup>
+                <FormLabel>Lidarr Tags</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.TAG}
+                  name="tags"
+                  helpText="Add artists from this list with these tags"
+                  {...tags}
+                  onChange={onInputChange}
+                />
+              </FormGroup>
+
               {
                 !!fields && !!fields.length &&
                 <div>

frontend/src/Settings/Tags/Details/TagDetailsModalContent.js

@@ -17,6 +17,7 @@ function TagDetailsModalContent(props) {
     isTagUsed,
     artist,
     delayProfiles,
+    importLists,
     notifications,
     restrictions,
     onModalClose,
@@ -80,6 +81,21 @@ function TagDetailsModalContent(props) {
             </FieldSet>
         }
 
+        {
+          !!importLists.length &&
+            <FieldSet legend="Import Lists">
+              {
+                importLists.map((item) => {
+                  return (
+                    <div key={item.id}>
+                      {item.name}
+                    </div>
+                  );
+                })
+              }
+            </FieldSet>
+        }
+
         {
           !!restrictions.length &&
             <FieldSet legend="Restrictions">
@@ -154,6 +170,7 @@ TagDetailsModalContent.propTypes = {
   isTagUsed: PropTypes.bool.isRequired,
   artist: PropTypes.arrayOf(PropTypes.object).isRequired,
   delayProfiles: PropTypes.arrayOf(PropTypes.object).isRequired,
+  importLists: PropTypes.arrayOf(PropTypes.object).isRequired,
   notifications: PropTypes.arrayOf(PropTypes.object).isRequired,
   restrictions: PropTypes.arrayOf(PropTypes.object).isRequired,
   onModalClose: PropTypes.func.isRequired,

frontend/src/Settings/Tags/Details/TagDetailsModalContentConnector.js

@@ -25,6 +25,14 @@ function createMatchingDelayProfilesSelector() {
   );
 }
 
+function createMatchingImportListsSelector() {
+  return createSelector(
+    (state, { importListIds }) => importListIds,
+    (state) => state.settings.importLists.items,
+    findMatchingItems
+  );
+}
+
 function createMatchingNotificationsSelector() {
   return createSelector(
     (state, { notificationIds }) => notificationIds,
@@ -45,12 +53,14 @@ function createMapStateToProps() {
   return createSelector(
     createMatchingArtistSelector(),
     createMatchingDelayProfilesSelector(),
+    createMatchingImportListsSelector(),
     createMatchingNotificationsSelector(),
     createMatchingRestrictionsSelector(),
-    (artist, delayProfiles, notifications, restrictions) => {
+    (artist, delayProfiles, importLists, notifications, restrictions) => {
       return {
         artist,
         delayProfiles,
+        importLists,
         notifications,
         restrictions
       };

frontend/src/Settings/Tags/Tag.js

@@ -53,6 +53,7 @@ class Tag extends Component {
     const {
       label,
       delayProfileIds,
+      importListIds,
       notificationIds,
       restrictionIds,
       artistIds
@@ -65,6 +66,7 @@ class Tag extends Component {
 
     const isTagUsed = !!(
       delayProfileIds.length ||
+      importListIds.length ||
       notificationIds.length ||
       restrictionIds.length ||
       artistIds.length
@@ -97,6 +99,13 @@ class Tag extends Component {
                   </div>
               }
 
+              {
+                !!importListIds.length &&
+                  <div>
+                    {importListIds.length} import list{importListIds.length > 1 && 's'}
+                  </div>
+              }
+
               {
                 !!notificationIds.length &&
                   <div>
@@ -125,6 +134,7 @@ class Tag extends Component {
           isTagUsed={isTagUsed}
           artistIds={artistIds}
           delayProfileIds={delayProfileIds}
+          importListIds={importListIds}
           notificationIds={notificationIds}
           restrictionIds={restrictionIds}
           isOpen={isDetailsModalOpen}
@@ -150,6 +160,7 @@ Tag.propTypes = {
   id: PropTypes.number.isRequired,
   label: PropTypes.string.isRequired,
   delayProfileIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+  importListIds: PropTypes.arrayOf(PropTypes.number).isRequired,
   notificationIds: PropTypes.arrayOf(PropTypes.number).isRequired,
   restrictionIds: PropTypes.arrayOf(PropTypes.number).isRequired,
   artistIds: PropTypes.arrayOf(PropTypes.number).isRequired,
@@ -158,6 +169,7 @@ Tag.propTypes = {
 
 Tag.defaultProps = {
   delayProfileIds: [],
+  importListIds: [],
   notificationIds: [],
   restrictionIds: [],
   artistIds: []

frontend/src/Settings/Tags/TagsConnector.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchTagDetails } from 'Store/Actions/tagActions';
-import { fetchDelayProfiles, fetchNotifications, fetchRestrictions } from 'Store/Actions/settingsActions';
+import { fetchDelayProfiles, fetchNotifications, fetchRestrictions, fetchImportLists } from 'Store/Actions/settingsActions';
 import Tags from './Tags';
 
 function createMapStateToProps() {
@@ -27,6 +27,7 @@ function createMapStateToProps() {
 const mapDispatchToProps = {
   dispatchFetchTagDetails: fetchTagDetails,
   dispatchFetchDelayProfiles: fetchDelayProfiles,
+  dispatchFetchImportLists: fetchImportLists,
   dispatchFetchNotifications: fetchNotifications,
   dispatchFetchRestrictions: fetchRestrictions
 };
@@ -40,12 +41,14 @@ class MetadatasConnector extends Component {
     const {
       dispatchFetchTagDetails,
       dispatchFetchDelayProfiles,
+      dispatchFetchImportLists,
       dispatchFetchNotifications,
       dispatchFetchRestrictions
     } = this.props;
 
     dispatchFetchTagDetails();
     dispatchFetchDelayProfiles();
+    dispatchFetchImportLists();
     dispatchFetchNotifications();
     dispatchFetchRestrictions();
   }
@@ -65,6 +68,7 @@ class MetadatasConnector extends Component {
 MetadatasConnector.propTypes = {
   dispatchFetchTagDetails: PropTypes.func.isRequired,
   dispatchFetchDelayProfiles: PropTypes.func.isRequired,
+  dispatchFetchImportLists: PropTypes.func.isRequired,
   dispatchFetchNotifications: PropTypes.func.isRequired,
   dispatchFetchRestrictions: PropTypes.func.isRequired
 };