What does this change?

This introduces a new location for the Sort Control and also introduces a new control to toggle between images that have a Taken Date and those that don't

It also continues to support the previous configuration and placement of the sort control in the top search bar.

The presence or otherwise of the new sort capability is controlled via the kahuna config parameter 'usePermissionsFilter' True/False - which controls the visibility of all BBC specific UI elements (despite this parameter being overloaded it avoids the introduction of additional config parameters)

It continues to work with collections as previously;

We include an information banner to indicate the number of images;

How should a reviewer test this change?

1. Ensure that the sort control works for Upload date sort
2. Ensure that the sort control works correctly when sorting by Taken Date and that it works correctly in conjunction with the Taken Date tab control (toggling between images with and without taken date values)
3. The messaging regarding number of images without taken should display when the count of images without taken date changes and we're sorting by taken date
4. Ensure that the sort control works in conjunction with collections, including sort options other than 'Date add to collection'
5. Ensure that when navigating back to the grid page the prior sort order is retained.

Code Details

notification-banner : General code tidy-upand introduction of ability to remove a notification - this is used in conjunction extended sort control to allow removal of taken date notifications if they are not required.

panels (panel-button and panels) : Change of state between hidden and visible now includes dispatching windows event that is used by extended sort control to modify padding so that controls don't get hidden behind panels.

search-wrapper : sort control removed as it now sits in extended sort control in BBC config/view

sort-control : This has been re-factored to handle the 2 required patterns -> GNM - sort control used in isolation in the query toolbar; and BBC - sort control used in conjunction with the taken date tab control (has taken date/no taken date) and positioned in the results.html. The base-sort-control is now the core control that underpins the basic state management and rendering. The sort-control is the stand-alone configuration and this control adds appropriate state management and functionality onto the base. The extended-sort-control combines the bas control with the taken-date tab control into a single control. The extended control manages the shared state between the drop down and the tab control.

tab-swap : the taken date tab control to allow switching between '+has:dateTaken' and '-has:dateTaken' chips - works in conjunction with base-sort-control as part of extended-sort-control

image.html : minor change to date formatting displayed on image thumbnail in grid view

index.js : state change management revised to cope with added complexity of sort order state management introduced with new extended-sort-control

query.js : extracted sort order required state management functionality into separate functions - mostly around correct management of order by when a collection is selected. The functional changes are required to support both sort by configurations - by moving the display of the sort by control into the results.html we have added functionality into that section of the display and control hierarchy that impacts the search state and is impacted by changes in the search state via inputs in the query control. The additional functionality ensures correct and consistent information is available at both levels.

results.html : adding extended-sort-control to the rendering.

results.js : adding in necessary state management for the new control at the top level and ensuring correct cross communication of state values with the query control. The visibility of the taken-date tab control is in part influenced by the existence of images with a taken date so we have introduced an additional call to the api to establish this count prior to passing the props to the extended-sort-control. Also introduced better management of the notification messages accompanying selection of 'sort by taken date' to reduce the frequency and bring messages in line with UX requriements

Who should look at this?

Tested? Documented?

• locally by committer
• locally by Guardian reviewer
• on the Guardian's TEST environment
• relevant documentation added or amended (if needed)