New: Display items tags on import lists index

frontend/src/Settings/ImportLists/ImportLists/ImportList.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import Card from 'Components/Card';
 import Label from 'Components/Label';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
+import TagList from 'Components/TagList';
 import { kinds } from 'Helpers/Props';
 import formatShortTimeSpan from 'Utilities/Date/formatShortTimeSpan';
 import translate from 'Utilities/String/translate';
@@ -58,6 +59,8 @@ class ImportList extends Component {
       name,
       enabled,
       enableAuto,
+      tags,
+      tagList,
       minRefreshInterval
     } = this.props;
 
@@ -72,7 +75,6 @@ class ImportList extends Component {
         </div>
 
         <div className={styles.enabled}>
-
           {
             enabled ?
               <Label kind={kinds.SUCCESS}>
@@ -87,15 +89,21 @@ class ImportList extends Component {
           }
 
           {
-            enableAuto &&
+            enableAuto ?
               <Label kind={kinds.SUCCESS}>
                 {translate('AutomaticAdd')}
-              </Label>
+              </Label> :
+              null
           }
         </div>
 
+        <TagList
+          tags={tags}
+          tagList={tagList}
+        />
+
         <div className={styles.enabled}>
-          <Label kind={kinds.INFO} title='List Refresh Interval'>
+          <Label kind={kinds.DEFAULT} title='List Refresh Interval'>
             {`${translate('Refresh')}: ${formatShortTimeSpan(minRefreshInterval)}`}
           </Label>
         </div>
@@ -126,6 +134,8 @@ ImportList.propTypes = {
   name: PropTypes.string.isRequired,
   enabled: PropTypes.bool.isRequired,
   enableAuto: PropTypes.bool.isRequired,
+  tags: PropTypes.arrayOf(PropTypes.number).isRequired,
+  tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
   minRefreshInterval: PropTypes.string.isRequired,
   onConfirmDeleteImportList: PropTypes.func.isRequired
 };

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

@@ -49,6 +49,7 @@ class ImportLists extends Component {
   render() {
     const {
       items,
+      tagList,
       onConfirmDeleteImportList,
       ...otherProps
     } = this.props;
@@ -71,6 +72,7 @@ class ImportLists extends Component {
                   <ImportList
                     key={item.id}
                     {...item}
+                    tagList={tagList}
                     onConfirmDeleteImportList={onConfirmDeleteImportList}
                   />
                 );
@@ -109,6 +111,7 @@ ImportLists.propTypes = {
   isFetching: PropTypes.bool.isRequired,
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
   onConfirmDeleteImportList: PropTypes.func.isRequired
 };
 

frontend/src/Settings/ImportLists/ImportLists/ImportListsConnector.js

@@ -5,13 +5,20 @@ import { createSelector } from 'reselect';
 import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
 import { deleteImportList, fetchImportLists } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
 import sortByProp from 'Utilities/Array/sortByProp';
 import ImportLists from './ImportLists';
 
 function createMapStateToProps() {
   return createSelector(
     createSortedSectionSelector('settings.importLists', sortByProp('name')),
-    (importLists) => importLists
+    createTagsSelector(),
+    (importLists, tagList) => {
+      return {
+        ...importLists,
+        tagList
+      };
+    }
   );
 }