From cc2f50544b52824112a69e99158c3998c4847626 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Fri, 19 May 2023 20:33:31 +0300
Subject: [PATCH] New: Show tags in Applications and Notifications index

---
 .../Applications/Applications/Application.js         | 12 +++++++++++-
 .../Applications/Applications/Applications.js        |  3 +++
 .../Applications/ApplicationsConnector.js            |  9 ++++++++-
 .../Notifications/Notifications/Notification.js      | 12 +++++++++++-
 .../Notifications/Notifications/Notifications.js     |  3 +++
 .../Notifications/NotificationsConnector.js          |  9 ++++++++-
 6 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Settings/Applications/Applications/Application.js b/frontend/src/Settings/Applications/Applications/Application.js
index 728747ecf..aebb015a9 100644
--- a/frontend/src/Settings/Applications/Applications/Application.js
+++ b/frontend/src/Settings/Applications/Applications/Application.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 translate from 'Utilities/String/translate';
 import EditApplicationModalConnector from './EditApplicationModalConnector';
@@ -55,7 +56,9 @@ class Application extends Component {
     const {
       id,
       name,
-      syncLevel
+      syncLevel,
+      tags,
+      tagList
     } = this.props;
 
     return (
@@ -92,6 +95,11 @@ class Application extends Component {
             </Label>
         }
 
+        <TagList
+          tags={tags}
+          tagList={tagList}
+        />
+
         <EditApplicationModalConnector
           id={id}
           isOpen={this.state.isEditApplicationModalOpen}
@@ -117,6 +125,8 @@ Application.propTypes = {
   id: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
   syncLevel: PropTypes.string.isRequired,
+  tags: PropTypes.arrayOf(PropTypes.number).isRequired,
+  tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
   onConfirmDeleteApplication: PropTypes.func
 };
 
diff --git a/frontend/src/Settings/Applications/Applications/Applications.js b/frontend/src/Settings/Applications/Applications/Applications.js
index 9e679f0e7..c6421c9ec 100644
--- a/frontend/src/Settings/Applications/Applications/Applications.js
+++ b/frontend/src/Settings/Applications/Applications/Applications.js
@@ -49,6 +49,7 @@ class Applications extends Component {
   render() {
     const {
       items,
+      tagList,
       onConfirmDeleteApplication,
       ...otherProps
     } = this.props;
@@ -71,6 +72,7 @@ class Applications extends Component {
                   <Application
                     key={item.id}
                     {...item}
+                    tagList={tagList}
                     onConfirmDeleteApplication={onConfirmDeleteApplication}
                   />
                 );
@@ -109,6 +111,7 @@ Applications.propTypes = {
   isFetching: PropTypes.bool.isRequired,
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
   onConfirmDeleteApplication: PropTypes.func.isRequired
 };
 
diff --git a/frontend/src/Settings/Applications/Applications/ApplicationsConnector.js b/frontend/src/Settings/Applications/Applications/ApplicationsConnector.js
index a984299f0..bbf8722c5 100644
--- a/frontend/src/Settings/Applications/Applications/ApplicationsConnector.js
+++ b/frontend/src/Settings/Applications/Applications/ApplicationsConnector.js
@@ -4,13 +4,20 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { deleteApplication, fetchApplications } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
 import sortByName from 'Utilities/Array/sortByName';
 import Applications from './Applications';
 
 function createMapStateToProps() {
   return createSelector(
     createSortedSectionSelector('settings.applications', sortByName),
-    (applications) => applications
+    createTagsSelector(),
+    (applications, tagList) => {
+      return {
+        ...applications,
+        tagList
+      };
+    }
   );
 }
 
diff --git a/frontend/src/Settings/Notifications/Notifications/Notification.js b/frontend/src/Settings/Notifications/Notifications/Notification.js
index 66021fd0d..0ffd49b40 100644
--- a/frontend/src/Settings/Notifications/Notifications/Notification.js
+++ b/frontend/src/Settings/Notifications/Notifications/Notification.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 translate from 'Utilities/String/translate';
 import EditNotificationModalConnector from './EditNotificationModalConnector';
@@ -62,7 +63,9 @@ class Notification extends Component {
       supportsOnGrab,
       supportsOnHealthIssue,
       supportsOnHealthRestored,
-      supportsOnApplicationUpdate
+      supportsOnApplicationUpdate,
+      tags,
+      tagList
     } = this.props;
 
     return (
@@ -118,6 +121,11 @@ class Notification extends Component {
             null
         }
 
+        <TagList
+          tags={tags}
+          tagList={tagList}
+        />
+
         <EditNotificationModalConnector
           id={id}
           isOpen={this.state.isEditNotificationModalOpen}
@@ -150,6 +158,8 @@ Notification.propTypes = {
   supportsOnHealthIssue: PropTypes.bool.isRequired,
   supportsOnHealthRestored: PropTypes.bool.isRequired,
   supportsOnApplicationUpdate: PropTypes.bool.isRequired,
+  tags: PropTypes.arrayOf(PropTypes.number).isRequired,
+  tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
   onConfirmDeleteNotification: PropTypes.func.isRequired
 };
 
diff --git a/frontend/src/Settings/Notifications/Notifications/Notifications.js b/frontend/src/Settings/Notifications/Notifications/Notifications.js
index 8b3bfbb36..81b1b90b3 100644
--- a/frontend/src/Settings/Notifications/Notifications/Notifications.js
+++ b/frontend/src/Settings/Notifications/Notifications/Notifications.js
@@ -49,6 +49,7 @@ class Notifications extends Component {
   render() {
     const {
       items,
+      tagList,
       onConfirmDeleteNotification,
       ...otherProps
     } = this.props;
@@ -71,6 +72,7 @@ class Notifications extends Component {
                   <Notification
                     key={item.id}
                     {...item}
+                    tagList={tagList}
                     onConfirmDeleteNotification={onConfirmDeleteNotification}
                   />
                 );
@@ -109,6 +111,7 @@ Notifications.propTypes = {
   isFetching: PropTypes.bool.isRequired,
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
   onConfirmDeleteNotification: PropTypes.func.isRequired
 };
 
diff --git a/frontend/src/Settings/Notifications/Notifications/NotificationsConnector.js b/frontend/src/Settings/Notifications/Notifications/NotificationsConnector.js
index 83ee6c697..b306f742a 100644
--- a/frontend/src/Settings/Notifications/Notifications/NotificationsConnector.js
+++ b/frontend/src/Settings/Notifications/Notifications/NotificationsConnector.js
@@ -4,13 +4,20 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { deleteNotification, fetchNotifications } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
 import sortByName from 'Utilities/Array/sortByName';
 import Notifications from './Notifications';
 
 function createMapStateToProps() {
   return createSelector(
     createSortedSectionSelector('settings.notifications', sortByName),
-    (notifications) => notifications
+    createTagsSelector(),
+    (notifications, tagList) => {
+      return {
+        ...notifications,
+        tagList
+      };
+    }
   );
 }