Add notification quick-filter bar in the frontend app (#9399)
* create FilterBar componer and its container, unstyled
* introduce basic styling for FilterBar
* add selection css
* allow FilterBar to display active CSS with js
* connect the FilterBar to the Redux state
* change getNotifications to use filter
* remove temporary comments
* add an option to turn the FilterBar off in settings
* fix showFilterBar data type to boolean
* fix eslint errors
* add English and Polish translations
* allowed filter bar overflow to accomodate for longer languages
* fix mispelled translation key
* add unified CSS look
* replace text in FilterBar with icons
* add tooltips
* replace text @ with an icon
* introduce simple and advanced filtering view
* add ability to toggle the advanced view
* add Polish translations
* change Advanced View description to be more clear
* make each filter flush notifications and load new ones, fixing pagination
* simplify getNotifications once frontend filtering is not needed for FilterBar
* add a semicolon
* Revert "simplify getNotifications once frontend filtering is not needed for FilterBar"
This reverts commit 9f4be78571.
* reset filter to 'all' when turning off FilterBar
constemptyMessage=<FormattedMessageid='empty_column.notifications'defaultMessage="You don't have any notifications yet. Interact with others to start the conversation."/>;
letscrollableContent=null;
constfilterBarContainer=showFilterBar
?(<FilterBarContainer/>)
:null;
if(isLoading&&this.scrollableContent){
scrollableContent=this.scrollableContent;
}elseif(notifications.size>0||hasMore){
@ -179,7 +196,7 @@ class Notifications extends React.PureComponent {