Man 356 search filter UI update

integration_tests/e2e/activityLog.cy.ts

@@ -38,6 +38,7 @@ context('Activity log', () => {
     cy.get('.toggle-menu .toggle-menu__list-item:nth-of-type(2) a').should('contain.text', 'Compact view')
     cy.get('[data-qa="filter-form"]').within(() => cy.get('h2').should('contain.text', 'Filter activity log'))
     page.getApplyFiltersButton().should('contain.text', 'Apply filters')
+    page.getSelectedFiltersBox().should('not.exist')
     cy.get('[data-qa="keywords"]').within(() => cy.get('label').should('contain.text', 'Keywords'))
     page.getKeywordsInput().should('exist').should('have.value', '')
     cy.get('[data-qa="date-from"]').within(() => cy.get('label').should('contain.text', 'Date from'))
@@ -159,6 +160,8 @@ context('Activity log', () => {
     const page = Page.verifyOnPage(ActivityLogPage)
     page.getKeywordsInput().type(value)
     page.getApplyFiltersButton().click()
+    page.getSelectedFiltersBox().find('h2').should('contain.text', 'Selected filters')
+    page.getSelectedFiltersBox().find('h3:nth-of-type(1)').should('contain.text', 'Search term')
     page.getSelectedFilterTags().should('have.length', 1)
     page.getSelectedFilterTag(1).should('contain.text', value)
     page.getCardHeader('timeline1').should('contain.text', 'Phone call from Eula Schmeler')
@@ -172,6 +175,7 @@ context('Activity log', () => {
     page.getApplyFiltersButton().click()
     page.getSelectedFilterTag(1).click()
     page.getSelectedFilterTag(1).should('not.exist')
+    page.getSelectedFiltersBox().should('not.exist')
     page.getKeywordsInput().should('have.value', '')
     page.getCardHeader('timeline1').should('contain.text', 'Video call')
   })
@@ -183,6 +187,7 @@ context('Activity log', () => {
     page.getDateFromInput().type(fromDate)
     page.getDateToInput().type(toDate)
     page.getApplyFiltersButton().click()
+    page.getSelectedFiltersBox().find('h3:nth-of-type(1)').should('contain.text', 'Date range')
     page.getDateFromInput().should('have.value', fromDate)
     page.getDateToInput().should('have.value', toDate)
     page.getSelectedFilterTags().should('have.length', 1)
@@ -202,6 +207,7 @@ context('Activity log', () => {
     page.getApplyFiltersButton().click()
     page.getSelectedFilterTag(1).click()
     page.getSelectedFilterTag(1).should('not.exist')
+    page.getSelectedFiltersBox().should('not.exist')
     page.getDateFromInput().should('have.value', '')
     page.getDateToInput().should('have.value', '')
     page.getCardHeader('timeline1').should('contain.text', 'Video call')
@@ -216,6 +222,8 @@ context('Activity log', () => {
     page.getComplianceFilter(2).click()
     page.getComplianceFilter(3).click()
     page.getApplyFiltersButton().click()
+    page.getSelectedFiltersBox().find('h3:nth-of-type(1)').should('contain.text', 'Compliance filters')
+    page.getSelectedFiltersBox().should('exist')
     page.getComplianceFilter(1).should('be.checked')
     page.getComplianceFilter(2).should('be.checked')
     page.getComplianceFilter(3).should('be.checked')
@@ -278,13 +286,17 @@ context('Activity log', () => {
     page.getComplianceFilter(2).click()
     page.getComplianceFilter(3).click()
     page.getApplyFiltersButton().click()
+    page.getSelectedFiltersBox().find('h3:nth-of-type(1)').should('contain.text', 'Search term')
+    page.getSelectedFiltersBox().find('h3:nth-of-type(2)').should('contain.text', 'Date range')
+    page.getSelectedFiltersBox().find('h3:nth-of-type(3)').should('contain.text', 'Compliance filters')
     page.getSelectedFilterTags().should('have.length', 5)
     page.getCardHeader('timeline1').should('contain.text', 'Phone call from Eula Schmeler')
     cy.get('[data-qa="results-count-start"]').should('contain.text', '1')
     cy.get('[data-qa="results-count-end"]').should('contain.text', '1')
     cy.get('[data-qa="results-count-total"]').should('contain.text', '1')
     cy.get('.govuk-pagination').should('not.exist')
     cy.get('.moj-filter__heading-action a').click()
+    page.getSelectedFiltersBox().should('not.exist')
     page.getSelectedFilterTags().should('not.exist')
     page.getKeywordsInput().should('have.value', '')
     page.getDateFromInput().should('have.value', '')
@@ -459,6 +471,10 @@ context('Activity log', () => {
       .getNoResults()
       .find('li:nth-of-type(3)')
       .should('contain.text', 'removing special characters like characters and accent letters')
+    page
+      .getNoResults()
+      .find('li:nth-of-type(4)')
+      .should('contain.text', 'using an asterisk (*) to search with a partial keyword, for example app*')
   })
   it('should persist the selected filters when a pagination link is clicked', () => {
     cy.visit('/case/X000001/activity-log')

integration_tests/pages/activityLog.ts

@@ -5,6 +5,8 @@ export default class ActivityLogPage extends Page {
     super('Activity log')
   }
 
+  getSelectedFiltersBox = (): PageElement => cy.get('.moj-filter__selected')
+
   getApplyFiltersButton = (): PageElement => cy.get('[data-qa="submit-button"]')
 
   getKeywordsInput = (): PageElement => cy.get('[data-qa="keywords"] input')

server/@types/ActivityLog.type.ts

@@ -25,7 +25,7 @@ export interface SelectedFilterItem {
 
 export interface ActivityLogFiltersResponse extends ActivityLogFilters {
   errors: Errors
-  selectedFilterItems: SelectedFilterItem[]
+  selectedFilterItems: Record<string, SelectedFilterItem[]>
   complianceOptions: Option[]
   baseUrl: string
   queryStr: string

server/middleware/filterActivityLog.ts

@@ -53,7 +53,6 @@ export const filterActivityLog: Route<void> = (req, res, next) => {
         }
         return acc
       }, '')
-
     return queryStr
   }
 
@@ -73,38 +72,30 @@ export const filterActivityLog: Route<void> = (req, res, next) => {
       ? `${baseUrl}?${queryStr}&clearFilterKey=${key}&clearFilterValue=${encodeURI(value)}`
       : `${baseUrl}?clearFilterKey=${key}&clearFilterValue=${encodeURI(value)}`
 
-  const selectedFilterItems: SelectedFilterItem[] = Object.entries(filters)
+  const selectedFilterItems: Record<string, SelectedFilterItem[]> = Object.entries(filters)
     .filter(([_key, value]) => value)
-    .reduce((acc, [key, value]) => {
-      if (Array.isArray(value)) {
-        for (const text of value) {
-          acc = [
-            ...acc,
-            {
-              text: complianceFilterOptions.find(option => option.value === text).text,
-              href: filterHref(key, text),
-            },
-          ]
+    .reduce((acc, [filterKey, filterValue]) => {
+      let value: string | SelectedFilterItem[] = null
+      if (Array.isArray(filterValue)) {
+        value = []
+        for (const text of filterValue) {
+          value.push({
+            text: complianceFilterOptions.find(option => option.value === text).text,
+            href: filterHref(filterKey, text),
+          })
         }
-      } else if (key !== 'dateTo') {
-        let text = value
-        let cfKey = key
-        if (key === 'dateFrom') {
-          text = value && filters.dateTo ? `${value} - ${filters.dateTo}` : ''
-          cfKey = 'dateRange'
+      } else if (filterKey !== 'dateTo') {
+        let text = filterValue
+        if (filterKey === 'dateFrom') {
+          text = filterValue && filters.dateTo ? `${filterValue} - ${filters.dateTo}` : ''
+          filterKey = 'dateRange'
         }
         if (text) {
-          acc = [
-            ...acc,
-            {
-              text,
-              href: filterHref(cfKey, value),
-            },
-          ]
+          value = [{ text, href: filterHref(filterKey, filterValue) }]
         }
       }
-      return acc
-    }, [])
+      return filterKey !== 'dateTo' ? { ...acc, [filterKey]: value } : acc
+    }, {})
 
   const complianceOptions: Option[] = complianceFilterOptions.map(({ text, value }) => ({
     text,

server/middleware/getPersonActivity.test.ts

@@ -142,7 +142,7 @@ describe('/middleware/getPersonActivity', () => {
       ...filterVals,
       complianceOptions: [],
       errors: null,
-      selectedFilterItems: [],
+      selectedFilterItems: {},
       baseUrl: '',
       query: { ...filterVals },
       queryStr: '',

server/views/pages/activity-log.njk

@@ -109,6 +109,7 @@
 <li>removing filters</li>
 <li>double-checking the spelling</li>
 <li>removing special characters like characters and accent letters</li>
+<li>using an asterisk (*) to search with a partial keyword, for example app*</li>
 </ul>
 </div>
 {% endif %}

server/views/pages/activity-log/_filters.njk

@@ -79,6 +79,35 @@
 
 {% endset -%}
 
+{% set filterCategories = [] %}
+{% if filters.selectedFilterItems.keywords.length %}
+   {% set filterCategories = (filterCategories.push(
+    {
+        heading: {
+          text: 'Search term'
+        },
+        items: filters.selectedFilterItems.keywords
+   }), filterCategories) %}
+{% endif %}
+{% if filters.selectedFilterItems.dateRange.length %}
+   {% set filterCategories = (filterCategories.push(
+    {
+        heading: {
+          text: 'Date range'
+        },
+        items: filters.selectedFilterItems.dateRange
+   }), filterCategories) %}
+{% endif %}
+{% if filters.selectedFilterItems.compliance.length %}
+  {% set filterCategories = (filterCategories.push(
+    {
+        heading: {
+          text: 'Compliance filters'
+        },
+        items: filters.selectedFilterItems.compliance
+   }), filterCategories) %}
+{% endif %}
+
 <div class="govuk-grid-column-one-third">
 <form method="get" data-qa="filter-form">
 {{ mojFilter({
@@ -94,19 +123,14 @@
   },
   selectedFilters: {
     heading: {
-      html: '<span class="govuk-heading-s">Selected filters</span>',
-      classes: 'govuk-heading-s'
+      html: '<span class="govuk-heading-m">Selected filters</span>'
     },
     clearLink: {
       text: 'Clear filters',
       href: '/case/' + crn + '/activity-log'
     },
-    categories: [
-      {
-        items: filters.selectedFilterItems
-      }
-    ]
-  } if filters.selectedFilterItems.length,
+    categories: filterCategories
+  } if filters.selectedFilterItems.keywords.length or filters.selectedFilterItems.dateRange.length or filters.selectedFilterItems.compliance.length,
   optionsHtml: filterOptionsHtml
 }) }}
 <input type="hidden" name="submit" value="true">