From 28e41868355558c706dee1c9d79bf53ac1a1eee1 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Sat, 20 May 2023 01:55:44 +0300
Subject: [PATCH] New: Show current tags for Connections

(cherry picked from commit 2016f11b1c322fcd5f9e2f09328ca19d2114629d)

Fixes #3696
---
 .../Notifications/Notifications/Notification.js      | 12 +++++++++++-
 .../Notifications/Notifications/Notifications.js     |  3 +++
 .../Notifications/NotificationsConnector.js          |  9 ++++++++-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Settings/Notifications/Notifications/Notification.js b/frontend/src/Settings/Notifications/Notifications/Notification.js
index 9e2e881c4..d82c37867 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';
@@ -78,7 +79,9 @@ class Notification extends Component {
       supportsOnDownloadFailure,
       supportsOnImportFailure,
       supportsOnTrackRetag,
-      supportsOnApplicationUpdate
+      supportsOnApplicationUpdate,
+      tags,
+      tagList
     } = this.props;
 
     return (
@@ -187,6 +190,11 @@ class Notification extends Component {
               </Label>
         }
 
+        <TagList
+          tags={tags}
+          tagList={tagList}
+        />
+
         <EditNotificationModalConnector
           id={id}
           isOpen={this.state.isEditNotificationModalOpen}
@@ -235,6 +243,8 @@ Notification.propTypes = {
   supportsOnImportFailure: PropTypes.bool.isRequired,
   supportsOnTrackRetag: 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
+      };
+    }
   );
 }