From 57534db2f8e54e103ed9e4a4a75a17380b87051e Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Sun, 27 Oct 2024 00:17:18 +0300
Subject: [PATCH] New: Display tags on import list cards

---
 .../ImportLists/ImportLists/ImportList.js      | 18 ++++++++++++++----
 .../ImportLists/ImportLists/ImportLists.js     |  3 +++
 .../ImportLists/ImportListsConnector.js        |  9 ++++++++-
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/frontend/src/Settings/ImportLists/ImportLists/ImportList.js b/frontend/src/Settings/ImportLists/ImportLists/ImportList.js
index 75792c9ae..ba9f0761b 100644
--- a/frontend/src/Settings/ImportLists/ImportLists/ImportList.js
+++ b/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';
@@ -57,6 +58,8 @@ class ImportList extends Component {
       id,
       name,
       enableAutomaticAdd,
+      tags,
+      tagList,
       minRefreshInterval
     } = this.props;
 
@@ -72,16 +75,21 @@ class ImportList extends Component {
 
         <div className={styles.enabled}>
           {
-            enableAutomaticAdd &&
+            enableAutomaticAdd ?
               <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>
@@ -111,6 +119,8 @@ ImportList.propTypes = {
   id: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
   enableAutomaticAdd: PropTypes.bool.isRequired,
+  tags: PropTypes.arrayOf(PropTypes.number).isRequired,
+  tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
   minRefreshInterval: PropTypes.string.isRequired,
   onConfirmDeleteImportList: PropTypes.func.isRequired
 };
diff --git a/frontend/src/Settings/ImportLists/ImportLists/ImportLists.js b/frontend/src/Settings/ImportLists/ImportLists/ImportLists.js
index 11fcceb54..b6f6e5837 100644
--- a/frontend/src/Settings/ImportLists/ImportLists/ImportLists.js
+++ b/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
 };
 
diff --git a/frontend/src/Settings/ImportLists/ImportLists/ImportListsConnector.js b/frontend/src/Settings/ImportLists/ImportLists/ImportListsConnector.js
index 017467e53..633d4f2f7 100644
--- a/frontend/src/Settings/ImportLists/ImportLists/ImportListsConnector.js
+++ b/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
+      };
+    }
   );
 }