[SDESK-2573] Modal Editor for Planning Form

additional changes

final changes

merge conflict

review changes

test case fix

client/actions/assignments/tests/notification_test.js

@@ -226,8 +226,13 @@ describe('actions.assignments.notification', () => {
     });
 
     describe('`assignment:completed`', () => {
+        beforeEach(() => {
+            sinon.stub(assignmentsUi, 'queryAndGetMyAssignments').callsFake(() => (Promise.resolve()));
+        });
+
         afterEach(() => {
             restoreSinonStub(assignmentsUi.reloadAssignments);
+            restoreSinonStub(assignmentsUi.queryAndGetMyAssignments);
         });
 
         it('update planning on assignment complete', (done) => {
@@ -284,9 +289,9 @@ describe('actions.assignments.notification', () => {
                 .then(() => {
                     expect(coverage1.assigned_to.desk).toBe('desk2');
                     expect(coverage1.assigned_to.state).toBe('completed');
-                    expect(store.dispatch.callCount).toBe(7);
+                    expect(store.dispatch.callCount).toBe(4);
                     expect(assignmentsApi.fetchAssignmentById.callCount).toBe(1);
-                    expect(store.dispatch.args[4]).toEqual([{
+                    expect(store.dispatch.args[3]).toEqual([{
                         type: 'UNLOCK_ASSIGNMENT',
                         payload: {
                             assignment: {
@@ -304,13 +309,21 @@ describe('actions.assignments.notification', () => {
     });
 
     describe('assignments:removed', () => {
+        beforeEach(() => {
+            sinon.stub(assignmentsUi, 'queryAndGetMyAssignments').callsFake(() => (Promise.resolve()));
+        });
+
+        afterEach(() => {
+            restoreSinonStub(assignmentsUi.queryAndGetMyAssignments);
+        });
+
         it('calls `REMOVE_ASSIGNMENT` action', (done) => (
             store.test(done, assignmentNotifications.onAssignmentRemoved(
                 {},
                 {assignment: 'as1'}
             ))
                 .then(() => {
-                    expect(store.dispatch.callCount).toBe(5);
+                    expect(store.dispatch.callCount).toBe(2);
                     expect(store.dispatch.args[0]).toEqual([{
                         type: 'REMOVE_ASSIGNMENT',
                         payload: {assignment: 'as1'},

client/actions/main.js

@@ -24,7 +24,7 @@ import {lockUtils} from '../utils';
 
 import * as selectors from '../selectors';
 
-const lockAndEdit = (item) => (
+const lockAndEdit = (item, modal = false) => (
     (dispatch, getState, {notify}) => {
         const currentItemId = selectors.forms.currentItemId(getState());
         const currentSession = selectors.general.session(getState());
@@ -40,7 +40,16 @@ const lockAndEdit = (item) => (
         }
 
         dispatch({type: MAIN.ACTIONS.EDIT_LOADING_START});
-        dispatch(self.openEditor(item));
+        if (!modal) {
+            dispatch(self.openEditor(item));
+        } else {
+            // Open the modal to show the editor
+            dispatch(showModal({
+                modalType: MODALS.EDIT_ITEM,
+                modalProps: {item},
+            }));
+        }
+
 
         // If the item being edited is currently opened in the Preview panel
         // then close the preview panel
@@ -519,6 +528,15 @@ const openEditor = (item) => (
     }
 );
 
+/**
+ * Action to open the editor for modalView
+ * @param {object} item - The item to open. Must have _id and type attributes
+ */
+const openEditorModal = (item) => ({
+    type: MAIN.ACTIONS.OPEN_EDITOR_MODAL,
+    payload: item,
+});
+
 /**
  * Action to close the editor and update the URL
  */
@@ -724,6 +742,7 @@ const self = {
     publish,
     openCancelModal,
     openEditor,
+    openEditorModal,
     closeEditor,
     filter,
     _filter,
@@ -740,7 +759,7 @@ const self = {
     loadItem,
     openPreview,
     setJumpInterval,
-    jumpTo,
+    jumpTo
 };
 
 export default self;

client/apps/PageContent.jsx

@@ -25,6 +25,7 @@ export class PageContent extends React.Component {
             ListPanel,
             PreviewPanel,
             EditorPanel,
+            editorInModal,
             editorOpen,
             fullPreviewOpen,
             previewOpen,
@@ -35,13 +36,14 @@ export class PageContent extends React.Component {
             fullPreview,
         } = this.props;
 
+        const mountEditorInMainPage = EditorPanel && !editorInModal && !fullPreviewOpen;
         const sectionClassName = classNames(
             'sd-content',
             {
                 'sd-page-content--slide-in': !splitView,
                 'sd-page-content--split': splitView,
                 'sd-content--margin-b30': marginBottom,
-                'sd-page-content--slide-in--open': editorOpen || fullPreviewOpen,
+                'sd-page-content--slide-in--open': mountEditorInMainPage && editorOpen,
             }
         );
 
@@ -101,7 +103,7 @@ export class PageContent extends React.Component {
                         )}
                     </div>
                 </div>
-                {!fullPreview && EditorPanel && (
+                { mountEditorInMainPage && (
                     <div className={slideInClassName}>
                         <EditorPanel
                             toggleFilterPanel={this.toggleFilterPanel}
@@ -135,6 +137,7 @@ PageContent.propTypes = {
     splitView: PropTypes.bool,
     fullPreview: PropTypes.bool,
     fullPreviewOpen: PropTypes.bool,
+    editorInModal: PropTypes.bool,
 };
 
 PageContent.defaultProps = {

client/apps/Planning/PlanningUi.jsx

@@ -7,10 +7,12 @@ import {SearchPanel, Editor, PreviewPanel} from '../../components/Main';
 import {PlanningList} from './PlanningList';
 
 export const PlanningUi = ({
+    editorInModal,
     editorOpen,
     previewOpen,
 }) => (
     <PageContent
+        editorInModal={editorInModal}
         editorOpen={editorOpen}
         previewOpen={previewOpen}
         SubNavPanel={PlanningSubNav}
@@ -22,6 +24,7 @@ export const PlanningUi = ({
 );
 
 PlanningUi.propTypes = {
+    editorInModal: PropTypes.editorInModal,
     editorOpen: PropTypes.bool,
     previewOpen: PropTypes.bool,
 };

client/apps/Planning/index.jsx

@@ -5,6 +5,7 @@ import {PlanningUi} from './PlanningUi';
 import {AddToPlanningUi} from './AddToPlanningUi';
 
 const mapStateToProps = (state) => ({
+    editorInModal: !!selectors.forms.editorModalView(state),
     editorOpen: !!selectors.forms.currentItemType(state),
     previewOpen: !!selectors.main.previewType(state),
 });

client/components/Coverages/CoverageArrayInput.jsx

@@ -33,6 +33,7 @@ export const CoverageArrayInput = ({
     addNewsItemToPlanning,
     readOnly,
     message,
+    navigation,
     ...props,
 }) => (
     <div>
@@ -43,6 +44,7 @@ export const CoverageArrayInput = ({
                 field={field}
                 value={value}
                 onChange={onChange}
+                navigation={navigation}
                 addButtonText={addButtonText}
                 addButtonComponent={CoverageAddButton}
                 element={CoverageEditor}
@@ -108,6 +110,7 @@ CoverageArrayInput.propTypes = {
     errors: PropTypes.object,
     showErrors: PropTypes.bool,
     addNewsItemToPlanning: PropTypes.object,
+    navigation: PropTypes.object,
 };
 
 CoverageArrayInput.defaultProps = {

client/components/Coverages/CoverageEditor/CoverageForm.jsx

@@ -82,6 +82,7 @@ export class CoverageForm extends React.Component {
             defaultGenre,
             addNewsItemToPlanning,
             popupContainer,
+            onFieldFocus,
         } = this.props;
 
         const contentTypeQcode = get(value, 'planning.g2_content_type') || null;
@@ -99,6 +100,7 @@ export class CoverageForm extends React.Component {
             formProfile: formProfile,
             errors: errors,
             showErrors: showErrors,
+            onFocus: onFieldFocus,
         };
 
         const roFields = planningUtils.getCoverageReadOnlyFields(
@@ -235,6 +237,7 @@ CoverageForm.propTypes = {
     defaultGenre: PropTypes.object,
     addNewsItemToPlanning: PropTypes.object,
     popupContainer: PropTypes.func,
+    onFieldFocus: PropTypes.func,
 };
 
 CoverageForm.defaultProps = {

client/components/Coverages/CoverageEditor/CoverageFormHeader.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {get} from 'lodash';
-import {getCreator, getItemInArrayById, gettext, planningUtils} from '../../../utils';
+import {getCreator, getItemInArrayById, gettext, planningUtils, onEventCapture} from '../../../utils';
 import {Item, Border, Column, Row as ListRow} from '../../UI/List';
 import {Button} from '../../UI';
 import {UserAvatar} from '../../';
@@ -16,8 +16,13 @@ export class CoverageFormHeader extends React.Component {
         this.togglePopup = this.togglePopup.bind(this);
     }
 
-    togglePopup() {
+    togglePopup(event) {
+        onEventCapture(event);
         this.setState({popupOpen: !this.state.popupOpen});
+
+        if (this.props.onFocus) {
+            this.props.onFocus(this.props.field);
+        }
     }
 
     render() {
@@ -175,4 +180,5 @@ CoverageFormHeader.propTypes = {
     priorities: PropTypes.array,
     readOnly: PropTypes.bool,
     addNewsItemToPlanning: PropTypes.object,
+    onFocus: PropTypes.func,
 };

client/components/Coverages/CoverageEditor/index.jsx

@@ -8,7 +8,7 @@ import {CoverageItem} from '../CoverageItem';
 import {CoverageForm} from './CoverageForm';
 import {CoverageFormHeader} from './CoverageFormHeader';
 
-import {planningUtils, gettext} from '../../../utils';
+import {planningUtils, gettext, editorMenuUtils} from '../../../utils';
 import {COVERAGES} from '../../../constants';
 
 export const CoverageEditor = ({
@@ -35,6 +35,7 @@ export const CoverageEditor = ({
     openComponent,
     defaultGenre,
     addNewsItemToPlanning,
+    navigation,
     ...props,
 }) => {
     // Coverage item actions
@@ -88,11 +89,19 @@ export const CoverageEditor = ({
         }
     }
 
+    const onClose = editorMenuUtils.onItemClose(navigation, field);
+    const onOpen = editorMenuUtils.onItemOpen(navigation, field);
+    const forceScroll = editorMenuUtils.forceScroll(navigation, field);
+    const isOpen = editorMenuUtils.isOpen(navigation, field) || (openComponent || !props.item._id ||
+        isEqual(value, COVERAGES.DEFAULT_VALUE(newsCoverageStatus, props.item,
+            get(value, 'planning.g2_content_type'))));
+    const onFocus = editorMenuUtils.onItemFocus(navigation, field);
+
     const itemActionComponent = get(itemActions, 'length', 0) > 0 ?
         (
             <ItemActionsMenu
-                className="side-panel__top-tools-right"
-                actions={itemActions} />
+                className="side-panel__top-tools-right" actions={itemActions}
+                onOpen={onFocus} />
         ) : null;
 
     const coverageItem = (
@@ -140,6 +149,7 @@ export const CoverageEditor = ({
             hasAssignment={planningUtils.isCoverageAssigned(value)}
             defaultGenre={defaultGenre}
             addNewsItemToPlanning={addNewsItemToPlanning}
+            onFieldFocus={onFocus}
             {...props}
         />
     );
@@ -151,10 +161,11 @@ export const CoverageEditor = ({
             openItemTopBar={coverageTopBar}
             openItem={coverageForm}
             scrollInView={true}
-            isOpen={openComponent || !props.item._id ||
-                isEqual(value, COVERAGES.DEFAULT_VALUE(newsCoverageStatus, props.item,
-                    get(value, 'planning.g2_content_type')))}
+            isOpen={isOpen}
             invalid={invalid}
+            forceScroll={forceScroll}
+            onClose={onClose}
+            onOpen={onOpen}
             tabEnabled
         />
     );
@@ -192,6 +203,7 @@ CoverageEditor.propTypes = {
     openComponent: PropTypes.bool,
     defaultGenre: PropTypes.object,
     addNewsItemToPlanning: PropTypes.object,
+    navigation: PropTypes.object,
 };
 
 CoverageEditor.defaultProps = {

client/components/Coverages/CoverageItem.jsx

@@ -24,7 +24,8 @@ export const CoverageItem = ({
     timeFormat,
     contentTypes,
     itemActionComponent,
-    isPreview
+    isPreview,
+    active
 }) => {
     const userAssigned = getCreator(coverage, 'assigned_to.user', users);
     const deskAssigned = getItemInArrayById(desks, get(coverage, 'assigned_to.desk'));
@@ -34,7 +35,7 @@ export const CoverageItem = ({
     const coverageInWorkflow = planningUtils.isCoverageInWorkflow(coverage);
 
     return (
-        <Item noBg={true}>
+        <Item noBg={!active} activated={active}>
             <Border/>
             {!isPreview && <Column border={false}>
                 {userAssigned ? (
@@ -118,7 +119,8 @@ CoverageItem.propTypes = {
     onCancelCoverage: PropTypes.func,
     itemActionComponent: PropTypes.node,
     contentTypes: PropTypes.array,
-    isPreview: PropTypes.bool
+    isPreview: PropTypes.bool,
+    active: PropTypes.bool,
 };
 
 CoverageItem.defaultProps = {