As a user I want to see the search terms highlighted in the Agenda section [CPCN-197]

assets/agenda/actions.js

@@ -256,6 +256,7 @@ function search(state, next) {
         timezone_offset: getTimezoneOffset(),
         featured: featuredFilter,
         itemType: itemTypeFilter,
+        es_highlight: !searchParams.query && !searchParams.advancedSearch ? null : 1
     };
 
     const queryString = Object.keys(params)

assets/agenda/components/AgendaListItem.jsx

@@ -18,6 +18,8 @@ import {
     getName,
     isWatched,
     getDescription,
+    getHighlightedDescription,
+    getHighlightedName,
     getInternalNote,
 } from '../utils';
 import ActionMenu from '../../components/ActionMenu';
@@ -122,8 +124,7 @@ class AgendaListItem extends React.Component {
         const {item, isExtended, group, planningId, listConfig} = this.props;
         const classes = this.getClassNames(isExtended);
         const planningItem = (get(item, 'planning_items') || []).find((p) => p.guid === planningId) || {};
-        const description = getDescription(item, planningItem);
-
+        const description =item.es_highlight ? getHighlightedDescription(item, planningItem) : getDescription(item,planningItem);
         // Show headline for adhoc planning items
         const showHeadline = !item.event && get(item, 'headline.length', 0) > 0;
 
@@ -148,10 +149,13 @@ class AgendaListItem extends React.Component {
 
                             <span className={
                                 classNames({'wire-articles__item__meta-time': showHeadline})}>
-                                {getName(item)}</span>
+                                {item.es_highlight ?  <div
+                                    dangerouslySetInnerHTML={({__html: getHighlightedName(item)})}/> : getName(item)}</span>
                             {showHeadline && <span
                                 className='wire-articles__item__text wire-articles__item__text--large wire-articles__item__text--headline'>
-                                {item.headline}</span>}
+                                {item.es_highlight && item.es_highlight.headline ? <div
+                                    dangerouslySetInnerHTML={({__html: item.es_highlight.headline && item.es_highlight.headline[0]})}
+                                /> : item.headline}</span>}
                         </h4>
 
                         {!isMobile ? null : (
@@ -173,7 +177,9 @@ class AgendaListItem extends React.Component {
 
                         {(isMobile || isExtended) && description && (
                             <p className="wire-articles__item__text">
-                                <PlainText text={description} />
+                                {item.es_highlight && item.es_highlight ? <span
+                                    dangerouslySetInnerHTML={({__html: description})}
+                                /> : <PlainText text={description} />}
                             </p>
                         )}
                     </div>

assets/agenda/components/AgendaLongDescription.jsx

@@ -1,18 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {get} from 'lodash';
+import {getHighlightedDescription} from '../utils';
 
 
 export default function AgendaLongDescription({item, plan}) {
-    const description = get(plan, 'description_text') || item.definition_long || item.definition_short;
+    const description = item.es_highlight ? getHighlightedDescription(item, plan) : get(
+        plan, 'description_text') || item.definition_long || item.definition_short;
 
     if (!description) {
         return null;
     }
 
     return description[0] !== '<' ? (
         <p className="wire-column__preview__text wire-column__preview__text--pre">
-            {description}
+            {item.es_highlight ? (
+                <span dangerouslySetInnerHTML={{__html: description}} /> ) : description}
         </p>
     ) : (
         <div dangerouslySetInnerHTML={{__html: description}} />

assets/agenda/components/AgendaName.jsx

@@ -2,13 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from  'classnames';
 
-import {getName} from '../utils';
+import {getName, getHighlightedName} from '../utils';
 
 export default function AgendaName({item, noMargin, small}) {
     return (
         <h2 className={classNames({'wire-column__preview__headline': !small},
             {'wire-articles__item__text wire-column__preview__versions__box-headline': small},
-            {'mt-4': !noMargin})}>{getName(item)}</h2>
+            {'mt-4': !noMargin})}>{item.es_highlight ? (
+                <span dangerouslySetInnerHTML={{__html: getHighlightedName(item)}} /> ) : getName(item)}</h2>
     );
 }
 

assets/agenda/utils.js

@@ -555,6 +555,21 @@ export function getName(item) {
     return item.name || item.slugline || item.headline;
 }
 
+export function getHighlightedName(item) {
+    if (item.es_highlight.name){
+        return item.es_highlight.name[0];
+    }
+    else if (item.es_highlight.slugline){
+        return item.es_highlight.slugline [0];
+    }
+    else if (item.es_highlight.headline){
+        return item.es_highlight.headline [0];
+    }
+    else{
+        return getName(item);
+    }
+}
+
 /**
  * Get agenda item description
  *
@@ -566,6 +581,26 @@ export function getDescription(item, plan) {
     return plan.description_text || item.definition_short;
 }
 
+/**
+ * Get agenda item highlighted description
+ *
+ * @param {Object} item
+ * @param {Object} plan
+ * @return {String}
+ */
+export function getHighlightedDescription(item, plan) {
+
+    if (item.es_highlight.description_text) {
+        return item.es_highlight.description_text[0];
+    }
+    else if (item.es_highlight.definition_short){
+        return item.es_highlight.definition_short[0];
+    }
+    else{
+        return getDescription(item, plan);
+    }
+}
+
 
 /**
  * Gets the extra days outside the event days

newsroom/search/service.py

@@ -531,9 +531,14 @@ def prefill_search_highlights(self, search, req):
             selected_field = advanced_search.get("fields") or []
             if not selected_field:
                 elastic_highlight_query["fields"] = {
+                    # wire
                     "body_html": field_settings,
                     "headline": field_settings,
                     "slugline": field_settings,
+                    # Agenda
+                    "description_text": field_settings,
+                    "definition_short": field_settings,
+                    "name": field_settings,
                 }
             else:
                 elastic_highlight_query["fields"] = {field: field_settings for field in selected_field}