Merge branch 'authoring-react-planning' into subject-field

.github/workflows/ci-e2e.yml

@@ -8,7 +8,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        python-version: ['3.8']
+        python-version: ['3.10']
         node-version: ['14']
         e2e: ['a', 'b']
     env:

client/components/Coverages/CoverageArrayInput.tsx

@@ -9,7 +9,6 @@ import {
     ICoverageProvider, IEventItem, IFile,
     IG2ContentType,
     IGenre,
-    IKeyword,
     IPlanningCoverageItem, IPlanningItem,
     IPlanningNewsCoverageStatus,
 } from '../../interfaces';
@@ -22,9 +21,10 @@ import * as selectors from '../../selectors';
 import {InputArray} from '../UI/Form';
 import {CoverageEditor} from './CoverageEditor';
 import {CoverageAddButton} from './CoverageAddButton';
+import planningActions from '../../actions/planning/api';
 
 
-interface IProps {
+interface IOwnProps {
     field: string;
     addButtonText?: string; // defaults to 'Add a coverage'
     item: IPlanningItem;
@@ -38,39 +38,43 @@ interface IProps {
     originalCount?: number;
     message: string | {[key: string]: any};
     event?: IEventItem;
-    preferredCoverageDesks: {[key: string]: string};
     getRef?(field: string, value: IPlanningCoverageItem): React.RefObject<CoverageEditor>;
     testId?: string;
     editorType: EDITOR_TYPE;
 
-    // Redux state
+    onChange(field: string, value: any): void;
+    popupContainer(): HTMLElement;
+    onPopupOpen(): void;
+    onPopupClose(): void;
+    createUploadLink(file: IFile): void;
+    notifyValidationErrors(errors: Array<string>): void;
+}
+
+interface IReduxStateProps {
     users: Array<IUser>;
     desks: Array<IDesk>;
     genres: Array<IGenre>;
     coverageProviders: Array<ICoverageProvider>;
     priorities: Array<IAssignmentPriority>;
-    keywords: Array<IKeyword>;
     contentTypes: Array<IG2ContentType>;
     newsCoverageStatus: Array<IPlanningNewsCoverageStatus>;
     formProfile: ICoverageFormProfile;
     planningAllowScheduledUpdates: boolean;
     coverageAddAdvancedMode: boolean;
     defaultDesk: IDesk;
+}
 
-    onChange(field: string, value: any): void;
-    popupContainer(): HTMLElement;
-    onPopupOpen(): void;
-    onPopupClose(): void;
-    createUploadLink(file: IFile): void;
+interface IReduxDispatchProps {
     uploadFiles(files: Array<Array<File>>): Promise<Array<IFile>>;
-    notifyValidationErrors(errors: Array<string>): void;
 }
 
+type IProps = IOwnProps & IReduxStateProps & IReduxDispatchProps;
+
 interface IState {
     openCoverageIds: Array<IPlanningCoverageItem['coverage_id']>;
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state): IReduxStateProps => ({
     users: selectors.general.users(state),
     desks: selectors.general.desks(state),
     genres: state.genres,
@@ -84,6 +88,10 @@ const mapStateToProps = (state) => ({
     defaultDesk: selectors.general.defaultDesk(state),
 });
 
+const mapDispatchToProps = (dispatch): IReduxDispatchProps => ({
+    uploadFiles: (files) => dispatch(planningActions.uploadFiles({files: files})),
+});
+
 class CoverageArrayInputComponent extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);
@@ -156,7 +164,6 @@ class CoverageArrayInputComponent extends React.Component<IProps, IState> {
             popupContainer,
             onPopupOpen,
             onPopupClose,
-            preferredCoverageDesks,
             item,
             navigation,
             useLocalNavigation,
@@ -197,7 +204,6 @@ class CoverageArrayInputComponent extends React.Component<IProps, IState> {
                     defaultDesk,
                     onPopupOpen,
                     onPopupClose,
-                    preferredCoverageDesks,
                     newsCoverageStatus,
                     field,
                     value,
@@ -227,7 +233,6 @@ class CoverageArrayInputComponent extends React.Component<IProps, IState> {
                 diff={item}
                 navigation={coverageNavigation}
                 openCoverageIds={this.state.openCoverageIds}
-                preferredCoverageDesks={preferredCoverageDesks}
                 getRef={this.props.getRef}
                 editorType={editorType}
                 {...props}
@@ -236,4 +241,7 @@ class CoverageArrayInputComponent extends React.Component<IProps, IState> {
     }
 }
 
-export const CoverageArrayInput = connect(mapStateToProps)(CoverageArrayInputComponent);
+export const CoverageArrayInput = connect<IReduxStateProps, IReduxDispatchProps, IOwnProps>(
+    mapStateToProps,
+    mapDispatchToProps,
+)(CoverageArrayInputComponent);

client/components/Events/EventDateTime.tsx

@@ -82,6 +82,7 @@ export class EventDateTime extends React.PureComponent<IProps> {
                             date={start}
                             {...commonProps}
                             withTime={false}
+                            testId="event-start-date"
                         />
                     )}
                     {gettext('All day')}
@@ -95,9 +96,11 @@ export class EventDateTime extends React.PureComponent<IProps> {
                     </span>
                 )}
                 <DateTime
+                    withTime={!isFullDay}
                     withDate={showEventStartDate}
                     withYear={withYear}
                     date={start}
+                    testId="event-start-date"
                     {...commonProps}
                 />
                 {showDash && <>&ndash;</>}
@@ -106,6 +109,7 @@ export class EventDateTime extends React.PureComponent<IProps> {
                     withYear={withYear}
                     isEndEventDateTime={true}
                     date={end}
+                    testId="event-end-date"
                     {...commonProps}
                 />
                 {isRemoteTimeZone && (

client/components/Events/EventDateTimeColumn.tsx

@@ -52,6 +52,7 @@ export class EventDateTimeColumn extends React.PureComponent<IProps> {
                                 withYear={!isThisYear}
                                 withTime={false}
                                 date={start}
+                                testId="event-start-date"
                                 {...commonProps}
                             />
                             {!multiDay ? null : (
@@ -62,13 +63,14 @@ export class EventDateTimeColumn extends React.PureComponent<IProps> {
                                         withYear={!isThisYear}
                                         withTime={false}
                                         date={end}
+                                        testId="event-end-date"
                                         {...commonProps}
                                     />
                                 </React.Fragment>
                             )}
                             {!isRemoteTimeZone ? null : (
                                 <span className="sd-margin-l--0-5">(
-                                    <span className="EventDateTime__timezone">
+                                    <span className="EventDateTime__timezone" data-test-id="event-timezone">
                                         {tzCode}
                                     </span>
                                 )</span>
@@ -85,13 +87,15 @@ export class EventDateTimeColumn extends React.PureComponent<IProps> {
                                         withDate={false}
                                         withYear={false}
                                         date={start}
+                                        testId="event-start-date"
                                         {...commonProps}
                                     />
                                     &ndash;
                                     <DateTime
                                         withDate={false}
                                         withYear={false}
                                         date={end}
+                                        testId="event-end-date"
                                         {...commonProps}
                                     />
                                 </React.Fragment>

client/components/Events/EventEditor/index.tsx

@@ -121,6 +121,8 @@ class EventEditorComponent extends React.PureComponent<IProps> {
             start: value['dates.start'],
             end: value['dates.end'],
             tz: value['dates.tz'],
+            all_day: value['dates.all_day'],
+            no_end_time: value['dates.no_end_time'],
         });
 
         this.props.onChangeHandler(value);

client/components/Main/EditorPanel.tsx

@@ -26,7 +26,6 @@ const mapStateToProps = (state: IPlanningAppState) => ({
     newsCoverageStatus: selectors.general.newsCoverageStatus(state),
     contentTypes: selectors.general.contentTypes(state),
     defaultDesk: selectors.general.defaultDesk(state),
-    preferredCoverageDesks: get(selectors.general.preferredCoverageDesks(state), 'desks'),
     associatedPlannings: selectors.events.getRelatedPlannings(state),
     associatedEvents: selectors.events.planningEditAssociatedEvents(state),
     currentWorkspace: selectors.general.currentWorkspace(state),
@@ -53,7 +52,6 @@ const mapStateToPropsModal = (state) => ({
     inModalView: !!selectors.forms.currentItemIdModal(state),
     contentTypes: selectors.general.contentTypes(state),
     defaultDesk: selectors.general.defaultDesk(state),
-    preferredCoverageDesks: get(selectors.general.preferredCoverageDesks(state), 'desks'),
     associatedPlannings: selectors.events.getRelatedPlanningsForModalEvent(state),
     associatedEvents: selectors.events.planningEditAssociatedEventsModal(state),
     currentWorkspace: selectors.general.currentWorkspace(state),

client/components/Main/ItemEditor/ItemManager.ts

@@ -27,6 +27,7 @@ import * as actions from '../../../actions';
 import {EditorComponent} from './Editor';
 import {AutoSave} from './AutoSave';
 import {EditorGroup} from '../../Editor/EditorGroup';
+import * as selectors from '../../../selectors';
 
 
 export class ItemManager {
@@ -863,13 +864,16 @@ export class ItemManager {
     }
 
     addCoverage(g2ContentType) {
+        const state = planningApi.redux.store.getState();
+        const preferredCoverageDesks = selectors.general.preferredCoverageDesks(state)?.desks ?? {};
+
         const newCoverage = planningUtils.defaultCoverageValues(
             this.props.newsCoverageStatus,
             this.state.initialValues,
             this.props.associatedEvents?.[0] ?? null, // TAG: MULTIPLE_PRIMARY_EVENTS
             g2ContentType,
             this.props.defaultDesk,
-            this.props.preferredCoverageDesks
+            preferredCoverageDesks,
         );
 
         this.editor.onChangeHandler(

client/components/Main/ItemEditor/tests/ItemManager_test.ts

@@ -89,7 +89,6 @@ describe('components.Main.ItemManager', () => {
                 inModalView: false,
                 newsCoverageStatus: null,
                 defaultDesk: null,
-                preferredCoverageDesks: null,
                 onCancel: null,
 
                 occurStatuses: testData.vocabularies.eventoccurstatus,

client/components/Planning/PlanningEditor/index.tsx

@@ -55,7 +55,6 @@ interface IProps {
     user: IUser['_id'];
     contentTypes: Array<IG2ContentType>;
     defaultDesk?: IDesk;
-    preferredCoverageDesks: {[key: string]: string};
     files: Array<IFile>;
     lockedItems: ILockedItems;
 
@@ -87,7 +86,6 @@ const mapStateToProps = (state) => ({
     desk: selectors.general.currentDeskId(state),
     user: selectors.general.currentUserId(state),
     defaultDesk: selectors.general.defaultDesk(state),
-    preferredCoverageDesks: get(selectors.general.preferredCoverageDesks(state), 'desks'),
     files: selectors.general.files(state),
     contentTypes: selectors.general.contentTypes(state),
     formProfile: selectors.forms.planningProfile(state),
@@ -406,7 +404,6 @@ class PlanningEditorComponent extends React.Component<IProps, IState> {
                         originalCount: this.props.item?.coverages?.length ?? 0,
                         message: this.props.message,
                         event: this.props.event, // TAG: MULTIPLE_PRIMARY_EVENTS
-                        preferredCoverageDesks: this.props.preferredCoverageDesks,
                         defaultValue: [],
                         files: this.props.files,
                         uploadFiles: this.props.uploadFiles,

client/components/UI/DateTime.tsx

@@ -19,6 +19,7 @@ interface IPropsDateTime {
     isEndEventDateTime?: boolean,
     noEndTime?: boolean,
     multiDay?: boolean,
+    testId?: string,
 }
 
 /**
@@ -37,6 +38,7 @@ function DateTime({
     isEndEventDateTime,
     noEndTime,
     multiDay,
+    testId,
 }: IPropsDateTime) {
     const {gettext} = superdeskApi.localization;
     const dateFormat = appConfig.planning.dateformat;
@@ -78,7 +80,7 @@ function DateTime({
     const tz = timeUtils.getTimeZoneAbbreviation(date.format('z')) + ' ';
 
     return (
-        <time className={!padLeft ? 'Datetime' : null} title={tz + displayDate}>
+        <time className={!padLeft ? 'Datetime' : null} title={tz + displayDate} data-test-id={testId}>
             {displayDate}
         </time>
     );

client/components/UI/Form/DateInput/DateInputPopup.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import moment from 'moment-timezone';
 import {Popup, Content, Header, Footer} from '../../Popup';
 import {Button} from '../../';
@@ -11,14 +10,35 @@ import {gettext} from '../../utils';
 
 import './style.scss';
 
+interface IProps {
+    value?: string | moment.Moment;
+    onChange(value: moment.Moment): void;
+    close(): void;
+    target: string;
+    maxMode?: string;
+    yearRange?: number;
+    popupContainer(): HTMLElement;
+    onPopupOpen?(): void;
+    onPopupClose?(): void;
+    remoteTimeZone?: string;
+}
+
+interface IState {
+    mode: 'day' | 'month' | 'year';
+    modeTitle: string;
+    currentDate: moment.Moment;
+    selectedDate: moment.Moment;
+}
+
 /**
  * @ngdoc react
  * @name DateInputPopup
  * @description Main Popup Component of DatePicker
  */
-export class DateInputPopup extends React.Component {
+export class DateInputPopup extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);
+
         const currentDate = props.remoteTimeZone ?
             moment.tz(props.remoteTimeZone) :
             moment();
@@ -27,7 +47,7 @@ export class DateInputPopup extends React.Component {
             mode: 'day',
             modeTitle: this.getModeTitle(currentDate, 'day'),
             currentDate: currentDate,
-            selectedDate: currentDate,
+            selectedDate: currentDate.clone(),
         };
 
         this.handleModeChange = this.handleModeChange.bind(this);
@@ -148,7 +168,7 @@ export class DateInputPopup extends React.Component {
     * @description handleSelectChange changes mode from days-months-year
     */
     handleSelectChange(newDate) {
-        let nextMode = '';
+        let nextMode;
 
         switch (this.state.mode) {
         case 'month':
@@ -253,20 +273,4 @@ export class DateInputPopup extends React.Component {
             </Popup>
         );
     }
-}
-
-DateInputPopup.propTypes = {
-    value: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.instanceOf(moment),
-    ]),
-    onChange: PropTypes.func.isRequired,
-    close: PropTypes.func.isRequired,
-    target: PropTypes.string.isRequired,
-    maxMode: PropTypes.string,
-    yearRange: PropTypes.number,
-    popupContainer: PropTypes.func,
-    onPopupOpen: PropTypes.func,
-    onPopupClose: PropTypes.func,
-    remoteTimeZone: PropTypes.string,
-};
+}