From 24a926a125f7c3fec96d3235ffe611c7eae62a01 Mon Sep 17 00:00:00 2001
From: Petr Jasek <jasekpetr@gmail.com>
Date: Thu, 19 Dec 2024 09:28:31 +0100
Subject: [PATCH] fix UI crash when using time popup

STT-40
---
 client/components/UI/Button.tsx               |  3 ++
 .../UI/Form/TimeInput/TimeInputPopup.tsx      |  3 ++
 client/components/UI/Form/TimeInput/index.tsx |  1 +
 client/components/UI/IconButton.tsx           |  4 +++
 client/validators/events.ts                   |  4 +--
 e2e/cypress/e2e/events/event_all_day.cy.ts    | 28 +++++++++++++++++--
 e2e/docker-compose.yml                        |  6 ++--
 7 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/client/components/UI/Button.tsx b/client/components/UI/Button.tsx
index e8d84d6c4..d013b279f 100644
--- a/client/components/UI/Button.tsx
+++ b/client/components/UI/Button.tsx
@@ -28,6 +28,7 @@ interface IButtonProps {
     children?: React.ReactNode;
     pullRight?: boolean;
     empty?: boolean;
+    testId?: string;
 }
 
 const Button = ({
@@ -53,6 +54,7 @@ const Button = ({
     refNode,
     onKeyDown,
     children,
+    testId,
     ...props
 }: IButtonProps) => {
     const handeKeyDown = (event) => {
@@ -92,6 +94,7 @@ const Button = ({
             onKeyDown={enterKeyIsClick ? handeKeyDown : onKeyDown}
             autoFocus={autoFocus}
             ref={refNode}
+            data-test-id={testId}
             {...props}
         >
             {icon && <i className={icon} />}
diff --git a/client/components/UI/Form/TimeInput/TimeInputPopup.tsx b/client/components/UI/Form/TimeInput/TimeInputPopup.tsx
index 876c5ca66..4dec41efe 100644
--- a/client/components/UI/Form/TimeInput/TimeInputPopup.tsx
+++ b/client/components/UI/Form/TimeInput/TimeInputPopup.tsx
@@ -180,6 +180,7 @@ export class TimeInputPopup extends React.Component<IProps, IState> {
                         size="small"
                         pullRight
                         onClick={() => this.handleClear()}
+                        testId="time-popup-clear"
                     />
                     <Button
                         text={gettext('Confirm')}
@@ -187,12 +188,14 @@ export class TimeInputPopup extends React.Component<IProps, IState> {
                         size="small"
                         pullRight={true}
                         onClick={() => this.handleConfirm(0)}
+                        testId="time-popup-confirm"
                     />
                     <Button
                         text={gettext('Cancel')}
                         size="small"
                         pullRight={true}
                         onClick={this.props.close}
+                        testId="time-popup-cancel"
                     />
 
                 </Footer>
diff --git a/client/components/UI/Form/TimeInput/index.tsx b/client/components/UI/Form/TimeInput/index.tsx
index 301950cf9..786d21fe2 100644
--- a/client/components/UI/Form/TimeInput/index.tsx
+++ b/client/components/UI/Form/TimeInput/index.tsx
@@ -278,6 +278,7 @@ export class TimeInput extends React.Component {
                     onFocus={onFocus}
                     onClick={!readOnly ? this.toggleOpenTimePicker : null}
                     aria-label={gettext('Time picker')}
+                    testId="time-popup-toggle"
                 />
                 <Input
                     field={field}
diff --git a/client/components/UI/IconButton.tsx b/client/components/UI/IconButton.tsx
index 7866ec0d3..ae7a40dbc 100644
--- a/client/components/UI/IconButton.tsx
+++ b/client/components/UI/IconButton.tsx
@@ -24,6 +24,8 @@ const IconButton = ({
     label,
     tooltip,
     tooltipDirection,
+    testId,
+    testField,
     ...props
 }) => {
     const handleKeyDown = (event) => {
@@ -50,6 +52,7 @@ const IconButton = ({
             onKeyDown={enterKeyIsClick ? handleKeyDown : onKeyDown}
             data-sd-tooltip={tooltip}
             data-flow={tooltipDirection}
+            data-test-id={testId}
             {...props}
         >
             <Icon icon={icon} />
@@ -70,6 +73,7 @@ IconButton.propTypes = {
     label: PropTypes.string,
     tooltip: PropTypes.string,
     tooltipDirection: PropTypes.string,
+    testId: PropTypes.string,
 };
 
 IconButton.defaultProps = {
diff --git a/client/validators/events.ts b/client/validators/events.ts
index 5549bfdba..a518fbfb6 100644
--- a/client/validators/events.ts
+++ b/client/validators/events.ts
@@ -64,8 +64,8 @@ const validateDateInPast = ({getState, value, errors, messages}) => {
     const canCreateInPast = !!privileges[PRIVILEGES.CREATE_IN_PAST];
     const today = moment();
 
-    const startDate = value.all_day ? getDateOnly(value.start) : value.start;
-    const endDate = value.all_day || value.no_end_time ? getDateOnly(value.end) : value.end;
+    const startDate = value.start && value.all_day ? getDateOnly(value.start) : value.start;
+    const endDate = value.end && (value.all_day || value.no_end_time) ? getDateOnly(value.end) : value.end;
 
     if (moment.isMoment(startDate) && startDate.isBefore(today, 'day')) {
         set(errors, 'start.date', gettext('Start date is in the past'));
diff --git a/e2e/cypress/e2e/events/event_all_day.cy.ts b/e2e/cypress/e2e/events/event_all_day.cy.ts
index 3a1a0103e..19bf2be74 100644
--- a/e2e/cypress/e2e/events/event_all_day.cy.ts
+++ b/e2e/cypress/e2e/events/event_all_day.cy.ts
@@ -1,10 +1,9 @@
 import moment from 'moment';
-import {setup, login, waitForPageLoad, SubNavBar, Workqueue, CLIENT_FORMAT} from '../../support/common';
+import {setup, login, waitForPageLoad, SubNavBar, CLIENT_FORMAT} from '../../support/common';
 import {PlanningList, EventEditor} from '../../support/planning';
 import {getDateStringFor} from '../../support/utils/time';
-import {create} from 'lodash';
 
-describe('Planning.Events: all day', () => {
+describe('Planning.Events: all day events and events without end time', () => {
     const editor = new EventEditor();
     const subnav = new SubNavBar();
     const list = new PlanningList();
@@ -108,4 +107,27 @@ describe('Planning.Events: all day', () => {
         list.item(0).find('[data-test-id="event-end-date"]').should('contain.text', event['dates.end.date']);
     });
 
+    it('can clear time via popup', () => {
+        const event = {
+            ...baseEvent, 
+            'dates.start.date': moment().format(CLIENT_FORMAT),
+            'dates.start.time': '12:00',
+            'dates.end.time': '13:00',
+        };
+
+        editor.openAllToggleBoxes();
+        editor.type(event);
+     
+        cy.get('[data-test-id="field-dates_end"]').find('[data-test-id="time-popup-toggle"]').click();
+        cy.get('[data-test-id="time-popup-clear"]').click();
+
+        cy.get('[data-test-id="field-dates_start"]').find('[data-test-id="time-popup-toggle"]').click();
+        cy.get('[data-test-id="time-popup-clear"]').click();
+
+        editor.createButton
+            .should('exist')
+            .click();
+
+        list.item(0).find('[data-test-id="event-start-date"]').should('contain.text', event['dates.start.date']);
+    });
 });
\ No newline at end of file
diff --git a/e2e/docker-compose.yml b/e2e/docker-compose.yml
index 789344691..56da4b215 100644
--- a/e2e/docker-compose.yml
+++ b/e2e/docker-compose.yml
@@ -1,5 +1,3 @@
-version: "3.8"
-
 name: superdesk-planning-e2e
 
 services:
@@ -11,6 +9,10 @@ services:
             - e2e
         tmpfs:
             - /usr/share/elasticsearch/data
+        deploy:
+            resources:
+                limits:
+                    memory: 2g
 
     redis:
         image: redis:alpine