Add notification for bulk action, adjust based on mark/unmark

scripts/apps/highlights/components/SetHighlightsForMultipleArticlesModal.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import {gettext} from 'core/utils';
+import {getArticleLabel, gettext} from 'core/utils';
 import {connectServices} from 'core/helpers/ReactRenderAsync';
 import {IDesk, IArticle} from 'superdesk-api';
 import {getHighlightsLabel, IHighlight} from '../services/HighlightsService';
 import {Modal} from 'superdesk-ui-framework/react/components/Modal';
 import {Button, ButtonGroup} from 'superdesk-ui-framework/react';
+import {notify} from 'core/notify/notify';
 
 interface IProps {
     closeModal(): void;
@@ -28,20 +29,27 @@ export function getModalForMultipleHighlights(articles: Array<IArticle>, deskId:
             this.handleChange = this.handleChange.bind(this);
             this.markHighlights = this.markHighlights.bind(this);
         }
+
         componentDidMount() {
             this.props.highlightsService.get(deskId).then((res) => {
                 this.setState({
                     highlightsForDesk: res._items,
                 });
             });
         }
+
         markHighlights() {
             var promises = Promise.resolve();
 
             articles.forEach((article) => {
                 this.state.selectedHighlights.forEach((highlightId) => {
                     if (article.highlights == null || article.highlights.includes(highlightId) === false) {
                         promises.then(() => this.props.highlightsService.markItem(highlightId, article));
+                    } else {
+                        notify.error(gettext(
+                            "Article {{ slug }} is already marked for this highlight",
+                            {slug: getArticleLabel(article)},
+                        ));
                     }
                 });
             });
@@ -50,6 +58,7 @@ export function getModalForMultipleHighlights(articles: Array<IArticle>, deskId:
                 this.props.closeModal();
             });
         }
+
         handleChange(event: React.ChangeEvent<HTMLSelectElement>) {
             const selected = [];
             const {options} = event.target;
@@ -66,6 +75,7 @@ export function getModalForMultipleHighlights(articles: Array<IArticle>, deskId:
                 selectedHighlights: selected,
             });
         }
+
         render() {
             if (this.state.highlightsForDesk == null) {
                 return null;

scripts/apps/highlights/services/HighlightsService.ts

@@ -1,8 +1,7 @@
 import _ from 'lodash';
 import {gettext} from 'core/utils';
 import {IPackagesService} from 'types/Services/Packages';
-import {IBaseRestApiResponse} from 'superdesk-api';
-import {notify} from 'core/notify/notify';
+import {IArticle, IBaseRestApiResponse} from 'superdesk-api';
 import {trackArticleActionProgress} from 'core/helpers/network';
 
 export interface IHighlight extends IBaseRestApiResponse {
@@ -112,17 +111,19 @@ export function HighlightsService(api, $q, $cacheFactory, packages: IPackagesSer
     };
 
     /**
-     * Mark an item for a highlight
+     * Mark/Unmark an item for a highlight
      */
-    service.markItem = function(highlight, markedItem) {
+    service.markItem = function(highlight: string, markedItem: IArticle) {
+        const addToHighlight = markedItem.highlights.includes(highlight) === false;
+
         return trackArticleActionProgress(
             () => api.save(
                 'marked_for_highlights',
                 {highlights: [highlight], marked_item: markedItem._id},
             ),
             markedItem._id,
-            gettext('Item marked'),
-            gettext('Couldn\'t mark item'),
+            gettext(addToHighlight ? 'Item marked' : 'Item unmarked'),
+            gettext(addToHighlight ? 'Couldn\'t mark item' : 'Couldn\'t unmark item'),
         );
     };