Merge remote-tracking branch 'origin/develop' into new-navigation-reb…

…ased

.github/dependabot.yml

@@ -14,3 +14,12 @@ updates:
     directory: "/" # Location of package manifests
     schedule:
       interval: "weekly"
+    ignore:
+      - dependency-name: "webpack"
+        versions: [">=5.0.0"]
+      - dependency-name: "webpack-dev-server"
+        versions: [">=5.0.0"]
+      - dependency-name: "css-loader"
+        versions: [">=6.0.0"]
+      - dependency-name: "style-loader"
+        versions: [">=2.0.0"]

.github/pull_request_template.md

@@ -1,5 +1,22 @@
-## Checklist
+### Purpose
+<!--- Explain what this PR accomplishes. Why are we changing this? -->
+
+### What has changed
+<!--- Explain what has changed and how -->
+
+### Steps to test
+<!---
+Try to explain in a few steps how to test and what things to look out for.
+-->
+
+<!-- [For UI changes]
+### Screenshots
+-->
+
+### Checklist
 <!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
 - [ ] This pull request is not adding new forms that use redux
 - [ ] This pull request is adding missing TypeScript types to modified code segments where it's easy to do so with confidence
 - [ ] This pull request is replacing `lodash.get` with optional chaining for modified code segments
+
+Resolves: #[issue-number]

.github/workflows/e2e.yml

@@ -42,7 +42,7 @@ jobs:
           CYPRESS_SCREENSHOTS_FOLDER: /tmp/cypress
       - name: Upload screenshots
         if: ${{ failure() }}
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: screenshots-e2e
           path: /tmp/cypress/**/*.png

.github/workflows/tests.yml

@@ -45,12 +45,16 @@ jobs:
   client:
     runs-on: ubuntu-latest
 
+    strategy:
+      matrix:
+        node-version: ['14', '18', '20']
+
     steps:
       - uses: actions/checkout@v4
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 14.x
+          node-version: ${{ matrix.node-version }}
           cache: npm
 
       - name: npm install

assets/globals.d.ts

@@ -64,6 +64,7 @@ interface IClientConfig {
     collapsed_search_by_default?: boolean;
     show_user_register?: boolean;
     multimedia_website_search_url?: string;
+    show_default_time_frame_label?: boolean;
 }
 
 interface Window {

assets/interfaces/agenda.ts

@@ -1,6 +1,6 @@
 import {AnyAction} from 'redux';
 import {ThunkAction, ThunkDispatch} from 'redux-thunk';
-import {IFilterGroup, IOccurStatus, ISingleItemAction, IResourceItem, ISection, ISubject, TDatetime, IDateFilter} from './common';
+import {IFilterGroup, IOccurStatus, ISingleItemAction, IResourceItem, ISection, ISubject, TDatetime, IDateFilters} from './common';
 import {IAgendaUIConfig} from './configs';
 import {IUser, IUserType} from './user';
 import {ITopic, ITopicFolder} from './topic';
@@ -313,7 +313,7 @@ export interface IAgendaState {
     };
     errors?: {[field: string]: Array<string>};
     loadingAggregations?: boolean;
-    dateFilters?: IDateFilter
+    dateFilters?: IDateFilters;
 }
 
 export type AgendaGetState = () => IAgendaState;

assets/interfaces/common.ts

@@ -87,3 +87,5 @@ export interface IDateFilter {
     filter?: string;
     query?: string;
 }
+
+export type IDateFilters = Array<IDateFilter>

assets/search/components/SearchResultsBar/SearchResultTagsList.tsx

@@ -8,7 +8,7 @@ import {IFilterGroup, INavigation, ISearchFields, ISearchParams, ITopic, IUser}
 import {SearchResultTagList} from './SearchResultTagList';
 import {gettext} from 'utils';
 import {getTopicUrl} from 'search/utils';
-import {IDateFilter} from 'interfaces/common';
+import {IDateFilters} from 'interfaces/common';
 
 export interface IProps {
     user: IUser;
@@ -35,7 +35,7 @@ export interface IProps {
 
     saveMyTopic?: (params: ISearchParams) => void;
     deselectMyTopic?: (topicId: ITopic['_id']) => void;
-    dateFilters?: IDateFilter;
+    dateFilters?: IDateFilters;
 }
 
 export function SearchResultTagsList({

assets/search/components/SearchResultsBar/index.tsx

@@ -23,8 +23,10 @@ import {
 import {Dropdown} from './../../../components/Dropdown';
 
 import {SearchResultTagsList} from './SearchResultTagsList';
-import {IDateFilter} from 'interfaces/common';
+import {IDateFilters} from 'interfaces/common';
 import {ToolTip} from 'ui/components/ToolTip';
+import {ICreatedFilter} from 'interfaces/search';
+import {Popup} from 'ui/components/Popover';
 
 interface ISortOption {
     label: string;
@@ -73,6 +75,7 @@ interface IOwnProps {
     showTotalLabel?: boolean;
     showSaveTopic?: boolean;
     showSortDropdown?: boolean;
+    showDefaultTimeframeLabel?: boolean;
     totalItems?: number;
     activeTopic: ITopic;
     topicType: ITopic['topic_type'];
@@ -83,7 +86,8 @@ interface IOwnProps {
     onClearAll?(): void;
     setQuery(query: string): void;
     setSortQuery(query: ISearchSortValue): void;
-    dateFilters?: IDateFilter
+    dateFilters?: IDateFilters;
+    activeDateFilter?: ICreatedFilter;
 }
 
 type IProps = IReduxStoreProps & IDispatchProps & IOwnProps;
@@ -187,6 +191,8 @@ class SearchResultsBarComponent extends React.Component<IProps, IState> {
         const sortOptions = this.props.sortOptions || defaultSortOptions;
         const selectedSortOption = sortOptions.find((option) => option.value === (this.props.searchParams.sortQuery || ''));
 
+        const defaultDateFilter = this.props.dateFilters?.find(dateFilter => dateFilter.default === true);
+
         return (
             <React.Fragment>
                 <div
@@ -196,13 +202,62 @@ class SearchResultsBarComponent extends React.Component<IProps, IState> {
                     {!this.props.showTotalItems ? null : (
                         <div className="navbar navbar--flex line-shadow-end--light navbar--search-results">
                             {!this.props.showTotalItems ? null : (
-                                <div className="search-result-count">
-                                    {this.props.totalItems === 1 ?
-                                        gettext('1 result') :
-                                        gettext('{{ count }} results', {
-                                            count: numberFormatter.format(this.props.totalItems || 0)
-                                        })
-                                    }
+                                <div>
+                                    <div className="search-result-count">
+                                        {this.props.totalItems === 1 ?
+                                            gettext('1 result') :
+                                            gettext('{{ count }} results', {
+                                                count: numberFormatter.format(this.props.totalItems || 0)
+                                            })
+                                        }
+                                    </div>
+                                    {this.props.showDefaultTimeframeLabel && (() => {
+                                        if (!(this.props.activeDateFilter?.date_filter == null && defaultDateFilter?.name != null)) {
+                                            return null;
+                                        }
+                                        const dateFilterName = defaultDateFilter.name;
+
+                                        return (
+                                            <span className='d-flex align-items-center'>
+                                                <span className='popup-text--label'>{dateFilterName}</span>
+
+                                                <Popup
+                                                    placement='right'
+                                                    component={({closePopup}) => (
+                                                        <div className='p-1'>
+                                                            <div className='d-flex justify-content-end'>
+                                                                <button
+                                                                    type="button"
+                                                                    className="icon-button icon-button--secondary icon-button--small"
+                                                                    aria-label={gettext('Close')}
+                                                                    onClick={closePopup}
+                                                                >
+                                                                    <i className="icon--close-thin" />
+                                                                </button>
+                                                            </div>
+                                                            <div className='pb-3 ps-3 pe-3'>
+                                                                <p className='popup-text--info'>
+                                                                    {gettext(
+                                                                        'The initial search is limited to the {{dateFilterName}}. Please find different date ranges in the filter panel using the burger menu.',
+                                                                        {dateFilterName: dateFilterName},
+                                                                    )}
+                                                                </p>
+                                                            </div>
+                                                        </div>
+                                                    )}
+                                                >
+                                                    {
+                                                        (togglePopup) => (
+                                                            <i
+                                                                className="icon--info icon--info--smaller"
+                                                                onClick={togglePopup}
+                                                            />
+                                                        )
+                                                    }
+                                                </Popup>
+                                            </span>
+                                        );
+                                    })()}
                                 </div>
                             )}
                             <div className="navbar__button-group">
@@ -299,6 +354,7 @@ const mapStateToProps = (state: IAgendaState) => ({
     filterGroups: filterGroupsByIdSelector(state),
     availableFields: getAdvancedSearchFields(state.context),
     dateFilters: state.dateFilters,
+    activeDateFilter: state.search.createdFilter
 });
 
 const mapDispatchToProps = {

assets/styles/agenda.scss

@@ -20,7 +20,7 @@
 }
 .wire-column__main-header-container {
     position: relative;
-    z-index: 1;
+    z-index: 2;
     background-color: var(--main-header-color-bg);
     box-shadow: 0 3px 6px hsla(0, 0%, 0%, 0.1), 0 1px 0 hsla(0, 0%, 0%, 0.06);
     gap: 0;
@@ -46,7 +46,7 @@
 }
 
 .navbar.navbar--search-results {
-    z-index: 1;
+    z-index: 2;
     grid-row: 2 / 3;
 }
 

assets/styles/article-list.scss

@@ -130,15 +130,13 @@
     margin-block-start: 0;
     overflow: auto;
     flex-grow: 1;
+    z-index: 1; // Z-index fix for Chrome
 }
 
-
-
 .wire-articles__item-sidebar {
     margin-inline-end: var(--space--2);
 }
 
-
 // STATES 
 .wire-articles__item--covering {
     &:before {

assets/styles/form-elements.scss

@@ -66,10 +66,11 @@
             inset-inline-start: 16%;
             width: 1rem;
             height: .5rem;
-            border: .16rem solid #64646466;
+            border: .16rem solid hsla(0, 0%, 0%, 0.3);
             border-block-start: none;
             border-inline-end: none;
             background: rgba(0, 0, 0, 0);
+            transition: all 0.3s ease;
         }
     }
 }

assets/styles/index.scss

@@ -1406,6 +1406,21 @@ article.list {
     }
 }
 
+.popup-text--label {
+    font-size: 0.875rem;
+    color: var(--color-text--muted);
+    line-height: 1.2;
+    margin-inline-end: 8px;
+}
+
+.popup-text--info {
+    font-size: 0.875rem;
+    color: var(--color-text--muted);
+    line-height: 1.2;
+    letter-spacing: 0.02rem;
+    margin: 0;
+}
+
 .text-break {
     overflow-wrap: break-word;
     word-break: break-word;

assets/ui/components/Popover.tsx

@@ -0,0 +1,58 @@
+import {Placement} from 'popper.js';
+import * as React from 'react';
+import {Popover} from 'reactstrap';
+
+interface IProps {
+    children(toggle: () => void): React.ReactNode;
+    placement: Placement;
+    component: React.ComponentType<{closePopup(): void}>;
+}
+
+interface IState {
+    isOpen: boolean;
+}
+
+export class Popup extends React.PureComponent<IProps, IState> {
+    elem: HTMLElement | undefined;
+    referenceElem: HTMLElement | undefined;
+    constructor(props: any) {
+        super(props);
+
+        this.state = {
+            isOpen: false,
+        };
+
+        this.toggle = this.toggle.bind(this);
+    }
+
+    toggle() {
+        this.setState({
+            isOpen: !this.state.isOpen,
+        });
+    }
+
+    render() {
+        const {component: Component} = this.props;
+
+        return (
+            <>
+                <div
+                    ref={(elem: any) => this.referenceElem = elem}
+                >
+                    {this.props.children(this.toggle)}
+                </div>
+
+                {this.referenceElem && (
+                    <Popover
+                        className="action-popover"
+                        target={this.referenceElem}
+                        isOpen={this.state.isOpen}
+                        placement={this.props.placement ?? 'auto'}
+                    >
+                        <Component closePopup={this.toggle} />
+                    </Popover>
+                )}
+            </>
+        );
+    }
+}

assets/wire/components/WireApp.tsx

@@ -5,7 +5,7 @@ import {connect} from 'react-redux';
 import {get, isEqual} from 'lodash';
 
 import {ISearchSortValue} from 'interfaces';
-import {gettext, DISPLAY_NEWS_ONLY, DISPLAY_ALL_VERSIONS_TOGGLE} from 'utils';
+import {gettext, DISPLAY_NEWS_ONLY, DISPLAY_ALL_VERSIONS_TOGGLE, getConfig} from 'utils';
 import {getSingleFilterValue, searchParamsUpdated} from 'search/utils';
 
 import {
@@ -224,6 +224,7 @@ class WireApp extends SearchBase<any> {
                                             refresh={this.props.fetchItems}
                                             setSortQuery={this.props.setSortQuery}
                                             setQuery={this.props.setQuery}
+                                            showDefaultTimeframeLabel={getConfig('show_default_time_frame_label') ?? true}
                                         />
                                     )
                                 }

assets/wire/components/filters/NavCreatedPicker.tsx

@@ -3,14 +3,14 @@ import {gettext} from 'utils';
 
 import NavGroup from './NavGroup';
 
-import {IDateFilter} from 'interfaces/common';
+import {IDateFilter, IDateFilters} from 'interfaces/common';
 import {ICreatedFilter} from 'interfaces/search';
 
 interface IProps {
     context: 'wire' | 'agenda';
     createdFilter: ICreatedFilter;
     setCreatedFilter: (createdFilter: ICreatedFilter) => void;
-    dateFilters: IDateFilter[];
+    dateFilters: IDateFilters;
 }
 
 function NavCreatedPicker({setCreatedFilter, createdFilter, context, dateFilters}: IProps) {

dev-requirements.in

@@ -1,5 +1,4 @@
 -r requirements.txt
--r mypy-requirements.txt
 -r black-requirements.txt
 
 flake8