[SDBELGA-778] fix: Show recurring Planning update method on Ignore|Cancel|Save modal

Also improve look and feel when rendering Event & Planning metadata in the modal

Author: MarkLark86

client/actions/events/api.ts

@@ -565,8 +565,9 @@ const save = (original, updates) => (
             ) {
                 delete eventUpdates.dates;
             }
-            eventUpdates.update_method = get(eventUpdates, 'update_method.value') ||
-                EVENTS.UPDATE_METHODS[0].value;
+            eventUpdates.update_method = eventUpdates.update_method == null ?
+                EVENTS.UPDATE_METHODS[0].value :
+                eventUpdates.update_method?.value ?? eventUpdates.update_method;
 
             return originalEvent?._id != null ?
                 planningApi.events.update(originalItem, eventUpdates) :

client/actions/events/ui.ts

@@ -928,6 +928,7 @@ const save = (original, updates, confirmation, unlockOnClose) => (
                 {
                     actionType: 'save',
                     unlockOnClose: unlockOnClose,
+                    large: true,
                 }
             ));
         }

client/actions/main.ts

@@ -703,11 +703,7 @@ const openIgnoreCancelSaveModal = ({
         const storedItems = itemType === ITEM_TYPE.EVENT ?
             selectors.events.storedEvents(getState()) :
             selectors.planning.storedPlannings(getState());
-
-        const item = {
-            ...get(storedItems, itemId) || {},
-            ...autosaveData,
-        };
+        const item = get(storedItems, itemId) || {};
 
         if (!isExistingItem(item)) {
             delete item._id;
@@ -736,7 +732,7 @@ const openIgnoreCancelSaveModal = ({
                 modalType: MODALS.IGNORE_CANCEL_SAVE,
                 modalProps: {
                     item: itemWithAssociatedData,
-                    itemType: itemType,
+                    updates: autosaveData,
                     onCancel: onCancel,
                     onIgnore: onIgnore,
                     onSave: onSave,

client/components/ConfirmationModal.tsx

@@ -1,13 +1,35 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import {gettext} from '../utils';
 
 import {Modal} from './index';
 import {ButtonList, Icon} from './UI';
 import {KEYCODES} from '../constants';
 
-export class ConfirmationModal extends React.Component {
+interface IProps {
+    handleHide(itemType?: string): void;
+    modalProps: {
+        onCancel?(): void;
+        cancelText?: string;
+        ignore?(): void;
+        showIgnore?: boolean;
+        ignoreText?: string;
+        okText?: string;
+        action?(): void;
+        title?: string;
+        body: React.ReactNode;
+        itemType?: string;
+        autoClose?: boolean;
+        large?: boolean;
+        bodyClassname?: string;
+    };
+}
+
+interface IState {
+    submitting: boolean;
+}
+
+export class ConfirmationModal extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);
 
@@ -96,14 +118,18 @@ export class ConfirmationModal extends React.Component {
         }
 
         return (
-            <Modal show={true} onHide={this.onCancel}>
+            <Modal
+                show={true}
+                onHide={this.onCancel}
+                large={this.props.modalProps.large}
+            >
                 <Modal.Header>
                     <h3 className="modal__heading">{modalProps.title || gettext('Confirmation')}</h3>
                     <a className="icn-btn" aria-label={gettext('Close')} onClick={this.onCancel}>
                         <Icon icon="icon-close-small" />
                     </a>
                 </Modal.Header>
-                <Modal.Body>
+                <Modal.Body className={this.props.modalProps.bodyClassname}>
                     <div>
                         {modalProps.body || gettext('Are you sure ?')}
                     </div>
@@ -115,23 +141,3 @@ export class ConfirmationModal extends React.Component {
         );
     }
 }
-
-ConfirmationModal.propTypes = {
-    handleHide: PropTypes.func.isRequired,
-    modalProps: PropTypes.shape({
-        onCancel: PropTypes.func,
-        cancelText: PropTypes.string,
-        ignore: PropTypes.func,
-        showIgnore: PropTypes.bool,
-        ignoreText: PropTypes.string,
-        okText: PropTypes.string,
-        action: PropTypes.func,
-        title: PropTypes.string,
-        body: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.element,
-        ]),
-        itemType: PropTypes.string,
-        autoClose: PropTypes.bool,
-    }),
-};

client/components/Events/EventScheduleSummary/index.tsx

@@ -1,24 +1,32 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {get} from 'lodash';
 
+import {IEventItem} from 'interfaces';
+import {gettext, eventUtils, timeUtils} from '../../../utils';
+
+import {FormLabel, Text, ContentDivider} from 'superdesk-ui-framework/react';
 import {RepeatEventSummary} from '../RepeatEventSummary';
 import {Row} from '../../UI/Preview';
-import {gettext, eventUtils, timeUtils} from '../../../utils';
+
 import './style.scss';
-import {IEventItem} from 'interfaces';
+
+
 interface IProps {
     event: Partial<IEventItem>,
     noPadding?: boolean,
     forUpdating?: boolean,
     useEventTimezone?: boolean
+    useFormLabelAndText?: boolean
+    addContentDivider?: boolean
 }
 
 export const EventScheduleSummary = ({
     event,
     noPadding = false,
     forUpdating = false,
-    useEventTimezone = false
+    useEventTimezone = false,
+    useFormLabelAndText = false,
+    addContentDivider = false,
 }: IProps) => {
     if (!event) {
         return null;
@@ -74,7 +82,32 @@ export const EventScheduleSummary = ({
         currentDateLabel = gettext('Current Date (Based on Event timezone)');
     }
 
-    return (
+    return useFormLabelAndText ? (
+        <React.Fragment>
+            <div>
+                <FormLabel text={forUpdating ? currentDateLabel : gettext('Date:')} />
+                <Text size="small" weight="medium">
+                    {currentDateText || ''}
+                </Text>
+            </div>
+            {addContentDivider !== true ? null : (
+                <ContentDivider type="dashed" margin="x-small" />
+            )}
+            {doesRepeat !== true ? null : (
+                <React.Fragment>
+                    <div>
+                        <FormLabel text={gettext('Repeat Summary')} />
+                        <Text size="small" weight="medium">
+                            {eventUtils.getRepeatSummaryForEvent(eventSchedule)}
+                        </Text>
+                    </div>
+                    {addContentDivider !== true ? null : (
+                        <ContentDivider type="dashed" margin="x-small" />
+                    )}
+                </React.Fragment>
+            )}
+        </React.Fragment>
+    ) : (
         <React.Fragment>
             <Row
                 label={forUpdating ? currentDateLabel : gettext('Date:')}