fix UI crash when using time popup

STT-40
petrjasek · Dec 19, 2024 · 24a926a · 24a926a
1 parent 237bec3
commit 24a926a
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 7 deletions.
diff --git 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
@@ -180,19 +180,22 @@ export class TimeInputPopup extends React.Component<IProps, IState> {
                         size="small"
                         pullRight
                         onClick={() => this.handleClear()}
+                        testId="time-popup-clear"
                     />
                     <Button
                         text={gettext('Confirm')}
                         color="primary"
                         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
@@ -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
@@ -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
@@ -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
@@ -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']);
+    });
 });
diff --git 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