New: Show tags in Applications and Notifications index

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
 };
 

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
 };
 

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
+      };
+    }
   );
 }
 

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
 };
 

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
 };
 

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
+      };
+    }
   );
 }