Merge branch 'async' into release/3.0

.github/dependabot.yml

@@ -9,17 +9,13 @@ updates:
     directory: "/" # Location of package manifests
     schedule:
       interval: "weekly"
-      
+
   - package-ecosystem: "npm" # See documentation for possible values
     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"]
+
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"

.github/workflows/e2e.yml

@@ -5,17 +5,37 @@ on: [push, pull_request]
 jobs:
   e2e:
     runs-on: ubuntu-latest
+
     strategy:
       fail-fast: false
       matrix:
         python-version: ['3.10']
         node-version: ['14']
+
+    services:
+      redis:
+          image: redis:alpine
+          ports:
+              - "6379:6379"
+
+      mongo:
+          image: mongo:6
+          ports:
+              - "27017:27017"
+
+      elastic:
+        image: docker.elastic.co/elasticsearch/elasticsearch:7.17.25
+        ports:
+            - "9200:9200"
+        env:
+            discovery.type: single-node
+
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-      - uses: actions/setup-python@v4
+      - uses: actions/setup-python@v5
         with:
           python-version: ${{ matrix.python-version }}
           cache: 'pip'

.github/workflows/tests.yml

@@ -12,16 +12,32 @@ jobs:
       matrix:
         python-version: ['3.10']
 
+    services:
+      redis:
+          image: redis:alpine
+          ports:
+              - "6379:6379"
+
+      mongo:
+          image: mongo:6
+          ports:
+              - "27017:27017"
+
+      elastic:
+        image: docker.elastic.co/elasticsearch/elasticsearch:7.17.25
+        ports:
+            - "9200:9200"
+        env:
+            discovery.type: single-node
+
     steps:
       - uses: actions/checkout@v4
 
       - name: setup python
         uses: actions/setup-python@v5
         with:
           python-version: ${{ matrix.python-version }}
-
-      - name: docker compose
-        run: docker compose -f .actions-docker-compose.yml up -d
+          cache: 'pip'
 
       - run: |
              sudo apt-get update
@@ -39,9 +55,6 @@ jobs:
       - name: behave (Web)
         run: behave --format progress2 --logging-level=ERROR features/web_api
 
-      - name: black
-        run: black --check .
-
   client:
     runs-on: ubuntu-latest
 

assets/agenda/actions.ts

@@ -335,7 +335,7 @@ function setListGroupsAndLoadHiddenItems(items: Array<IAgendaItem>, next?: boole
 
         // If there are groups shown, then load the hidden items for those groups
         const state = getState();
-        const {activeGrouping, featuredOnly} = state.agenda;
+        const {activeGrouping, featuredOnly, itemType} = state.agenda;
         const {fromDate, toDate, searchParams} = getAgendaSearchParamsFromState(state);
 
         let minDate: moment.Moment | undefined;
@@ -376,7 +376,7 @@ function setListGroupsAndLoadHiddenItems(items: Array<IAgendaItem>, next?: boole
         }
 
         const groups: Array<IAgendaListGroup> = (searchParams.sortQuery ?? '') === '' ?
-            groupItems(items, minDate, maxDate, activeGrouping, featuredOnly) :
+            groupItems(items, minDate, maxDate, activeGrouping, featuredOnly, itemType) :
             [{
                 date: '',
                 items: items.map((item) => item._id),

assets/agenda/components/AgendaApp.tsx

@@ -57,7 +57,6 @@ import BookmarkTabs from 'components/BookmarkTabs';
 import {setActiveDate, setAgendaDropdownFilter} from 'local-store';
 import {previewConfigSelector, detailsConfigSelector} from 'ui/selectors';
 import {SearchResultsBar} from 'search/components/SearchResultsBar';
-import NewItemsIcon from 'search/components/NewItemsIcon';
 
 const modals = {
     shareItem: ShareItemModal,
@@ -268,17 +267,9 @@ class AgendaApp extends SearchBase<any> {
                                     toggleFeaturedFilter={this.props.toggleFeaturedFilter}
                                     featuredFilter={this.props.featuredOnly}
                                     hasAgendaFeaturedItems={this.props.hasAgendaFeaturedItems}
+                                    newItems={this.props.newItems}
+                                    fetchItems={this.props.fetchItems}
                                 />
-                                {!(this.props.newItems || []).length ? null : (
-                                    <div className="navbar navbar--flex navbar--small">
-                                        <div className="navbar__inner navbar__inner--end">
-                                            <NewItemsIcon
-                                                newItems={this.props.newItems}
-                                                refresh={this.props.fetchItems}
-                                            />
-                                        </div>
-                                    </div>
-                                )}
                             </div>
                             <AgendaList
                                 actions={this.props.actions}

assets/agenda/components/AgendaCoverages.tsx

@@ -55,44 +55,46 @@ export default function AgendaCoverages({
                     ))}
                 </div>
             )}
-            {coveragesWithState.map((coverage: ICoverage) => {
-                return (
-                    <div
-                        className={classNames(
-                            'coverage-item',
-                            {'coverage-item--clickable': onClick}
-                        )}
-                        key={coverage.coverage_id}
-                        onClick={onClick}
-                        title={onClick ? gettext('Open {{agenda}} in a new tab', window.sectionNames) : ''}
-                    >
-                        {coverageFieldsToRender.map((field) => {
-                            const FieldComponent = coverageFieldToComponentMap[field];
+            <div className='coverage-item__list'>
+                {coveragesWithState.map((coverage: ICoverage) => {
+                    return (
+                        <div
+                            className={classNames(
+                                'coverage-item',
+                                {'coverage-item--clickable': onClick}
+                            )}
+                            key={coverage.coverage_id}
+                            onClick={onClick}
+                            title={onClick ? gettext('Open {{agenda}} in a new tab', window.sectionNames) : ''}
+                        >
+                            {coverageFieldsToRender.map((field) => {
+                                const FieldComponent = coverageFieldToComponentMap[field];
 
-                            if (FieldComponent == null) {
-                                console.warn(`Component not registered for field ${field}`);
-                                return null;
-                            }
+                                if (FieldComponent == null) {
+                                    console.warn(`Component not registered for field ${field}`);
+                                    return null;
+                                }
 
-                            return (
-                                <FieldComponent
-                                    key={field}
-                                    agenda={item}
-                                    coverage={coverage}
-                                    wireItems={wireItems}
-                                    actions={actions}
-                                    user={user}
-                                    hideViewContentItems={hideViewContentItems}
-                                    fullCoverage={
-                                        (item.planning_items || [])
-                                            .find((planningItem) => planningItem._id === coverage.planning_id)
-                                            ?.coverages?.find((coverageItem) => coverageItem.coverage_id === coverage.coverage_id)
-                                    }
-                                />
-                            );
-                        })}
-                    </div>
-                );})}
+                                return (
+                                    <FieldComponent
+                                        key={field}
+                                        agenda={item}
+                                        coverage={coverage}
+                                        wireItems={wireItems}
+                                        actions={actions}
+                                        user={user}
+                                        hideViewContentItems={hideViewContentItems}
+                                        fullCoverage={
+                                            (item.planning_items || [])
+                                                .find((planningItem) => planningItem._id === coverage.planning_id)
+                                                ?.coverages?.find((coverageItem) => coverageItem.coverage_id === coverage.coverage_id)
+                                        }
+                                    />
+                                );
+                            })}
+                        </div>
+                    );})}
+            </div>
         </React.Fragment>
     );
 }

assets/agenda/components/AgendaFilters.tsx

@@ -48,6 +48,7 @@ const renderFilter = {
                 key="location"
                 activeFilter={props.activeFilter}
                 toggleFilter={props.toggleFilter}
+                locationEnabledOptions = {props.locationEnabledOptions}
             />
         )
     ),
@@ -154,6 +155,7 @@ const mapStateToProps = (state: IAgendaState) => ({
     locators: state.locators?.items || [],
     itemTypeFilterConfig: state.uiConfig.subnav?.item_type || {},
     subnavConfig: state,
+    locationEnabledOptions: state.locationsFiltersOptions || {},
 });
 
 type StateProps = ReturnType<typeof mapStateToProps>;

assets/agenda/components/AgendaList.tsx

@@ -122,6 +122,7 @@ interface IStateProps {
     userType: IUserType;
     hiddenGroupsShown: {[dateString: string]: boolean};
     itemTypeFilter: IAgendaState['agenda']['itemType'];
+    activeSortQuery: string;
 }
 
 interface IDispatchProps {
@@ -356,7 +357,7 @@ class AgendaList extends React.Component<IProps, IState> {
                     const isRead = version == null
                         ? this.props.readItems[itemId] != null // event
                         : version === this.props.readItems[itemId]; // planning item
-
+                    
                     return plans.length > 0 ? (
                         <React.Fragment key={`${itemId}--${group.date}`}>
                             {plans.map((plan) => (
@@ -435,7 +436,7 @@ class AgendaList extends React.Component<IProps, IState> {
                 }}
                 onScroll={this.props.onScroll}
             >
-                {groupedItems.length === 1 ?
+                {groupedItems.length === 1 && this.props.activeSortQuery !== '' ?
                     this.renderGroupItems(groupedItems[0], false) :
                     groupedItems.map((group) => (
                         <React.Fragment key={group.date}>
@@ -495,6 +496,7 @@ const mapStateToProps = (state: IAgendaState): IStateProps => ({
     userType: state.userType,
     hiddenGroupsShown: hiddenGroupsShownSelector(state),
     itemTypeFilter: state.agenda?.itemType,
+    activeSortQuery: state.search.activeSortQuery || '',
 });
 
 const mapDispatchToProps: IDispatchProps = {

assets/agenda/components/AgendaListItem.tsx

@@ -20,7 +20,7 @@ import {
     getInternalNote,
 } from '../utils';
 import ActionMenu from '../../components/ActionMenu';
-import {LIST_ANIMATIONS, isMobilePhone, gettext} from 'utils';
+import {LIST_ANIMATIONS, isTablet, gettext} from 'utils';
 import TopStoryLabel from './TopStoryLabel';
 import ToBeConfirmedLabel from './ToBeConfirmedLabel';
 import {LabelGroup} from 'ui/components/LabelGroup';
@@ -438,7 +438,7 @@ class AgendaListItem extends React.Component<IProps> {
     }
 
     render() {
-        return isMobilePhone() ?
+        return isTablet() ?
             this.renderMobile() :
             this.renderNonMobile();
     }

assets/agenda/components/AgendaListViewControls.tsx

@@ -1,31 +1,54 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
 import AgendaFeaturedStoriesToogle from './AgendaFeaturedStoriesToogle';
-import {DISPLAY_AGENDA_FEATURED_STORIES_ONLY} from 'utils';
+import {DISPLAY_AGENDA_FEATURED_STORIES_ONLY, isMobilePhoneScreen} from 'utils';
 import ListViewOptions from 'components/ListViewOptions';
+import NewItemsIcon from 'search/components/NewItemsIcon';
+import {WithScreenSizeObserver} from '@sourcefabric/common';
+import {IAgendaItem, IEvent} from 'interfaces';
 
-function AgendaListViewControls({activeView, setView, hideFeaturedToggle, toggleFeaturedFilter, featuredFilter, hasAgendaFeaturedItems}: any) {
-    return (
-        <div className="navbar navbar--flex navbar--small navbar--list-controls ">
-            <div className="navbar__inner navbar__inner--end">
-                {!hideFeaturedToggle && hasAgendaFeaturedItems  && DISPLAY_AGENDA_FEATURED_STORIES_ONLY &&
-                    <AgendaFeaturedStoriesToogle onChange={toggleFeaturedFilter} featuredFilter={featuredFilter}/>
-                }
-                <ListViewOptions setView={setView} activeView={activeView} />
-            </div>
-        </div>
-    );
+interface IProps {
+    activeView?: string;
+    hideFeaturedToggle?: boolean;
+    featuredFilter?: boolean;
+    hasAgendaFeaturedItems?: boolean;
+    newItems?: Array<IAgendaItem['_id']>;
+    setView: (view: {type: string, label: string}) => void;
+    toggleFeaturedFilter: (event: IEvent) => void;
+    fetchItems: () => void;
 }
 
+function AgendaListViewControls({activeView, setView, hideFeaturedToggle, toggleFeaturedFilter, featuredFilter, hasAgendaFeaturedItems, newItems, fetchItems}: IProps) {
+    const renderRefreshButton = (newItems || []).length > 0 && (
+        <div className="navbar__inner navbar__inner--icon">
+            <NewItemsIcon
+                newItems={newItems}
+                refresh={fetchItems}
+            />
+        </div>
+    );
 
-AgendaListViewControls.propTypes = {
-    activeView: PropTypes.string,
-    setView: PropTypes.func.isRequired,
-    toggleFeaturedFilter: PropTypes.func.isRequired,
-    hideFeaturedToggle: PropTypes.bool,
-    featuredFilter: PropTypes.bool,
-    hasAgendaFeaturedItems: PropTypes.bool,
-};
+    return (
+        <WithScreenSizeObserver>
+            {(dimensions) => (
+                <div className="navbar navbar--flex navbar--small navbar--list-controls">
+                    {isMobilePhoneScreen(dimensions.width)
+                        ? renderRefreshButton
+                        : (
+                            <>
+                                {renderRefreshButton}
+                                <div className="navbar__inner navbar__inner--end navbar__inner--buttons">
+                                    {!hideFeaturedToggle && hasAgendaFeaturedItems  && DISPLAY_AGENDA_FEATURED_STORIES_ONLY &&
+                                        <AgendaFeaturedStoriesToogle onChange={toggleFeaturedFilter} featuredFilter={featuredFilter}/>
+                                    }
+                                    <ListViewOptions setView={setView} activeView={activeView} />
+                                </div>
+                            </>
+                        )
+                    }
+                </div>
+            )}
+        </WithScreenSizeObserver>
+    );
+}
 
 export default AgendaListViewControls;