[Fleet] Do not allow to select a time in the past (#133624)

x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_upgrade_modal/hooks.test.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import moment from 'moment';
+import { act } from '@testing-library/react-hooks';
+
+import { createFleetTestRendererMock } from '../../../../../../mock';
+
+import { useScheduleDateTime } from './hooks';
+
+jest.mock('../../../../../../hooks/use_fleet_status', () => ({
+  FleetStatusProvider: (props: any) => {
+    return props.children;
+  },
+  useFleetStatus: jest.fn().mockReturnValue({}),
+}));
+
+describe('useScheduleDateTime', () => {
+  it('do not allow to set a date before the current time', async () => {
+    const renderer = createFleetTestRendererMock();
+    const { result } = renderer.renderHook(() => useScheduleDateTime('2020-01-01T10:10:00.000Z'));
+
+    act(() => result.current.onChangeStartDateTime(moment('2020-01-01T10:10:00.000Z')));
+
+    expect(result.current.startDatetime.toISOString()).toEqual('2020-01-01T10:10:00.000Z');
+  });
+
+  it('allow to set a date after the current time', async () => {
+    const renderer = createFleetTestRendererMock();
+    const { result } = renderer.renderHook(() => useScheduleDateTime('2020-01-01T10:10:00.000Z'));
+
+    act(() => result.current.onChangeStartDateTime(moment('2020-01-01T10:15:00.000Z')));
+
+    expect(result.current.startDatetime.toISOString()).toEqual('2020-01-01T10:15:00.000Z');
+  });
+
+  it('should set minTime and maxTime for the same day', async () => {
+    const renderer = createFleetTestRendererMock();
+    const { result } = renderer.renderHook(() => useScheduleDateTime('2020-01-01'));
+
+    expect(result.current.minTime).toBeDefined();
+    expect(result.current.maxTime).toBeDefined();
+    expect(result.current.minTime?.toISOString()).toEqual('2020-01-01T05:00:00.000Z');
+    expect(result.current.maxTime?.toISOString()).toEqual('2020-01-02T04:59:59.999Z');
+  });
+
+  it('should not set minTime and maxTime if the user choose a day in the future', async () => {
+    const renderer = createFleetTestRendererMock();
+    const { result } = renderer.renderHook(() => useScheduleDateTime('2020-01-01'));
+
+    act(() => result.current.onChangeStartDateTime(moment('2020-01-02')));
+
+    expect(result.current.minTime).not.toBeDefined();
+    expect(result.current.maxTime).not.toBeDefined();
+  });
+});

x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_upgrade_modal/hooks.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { useState, useMemo, useCallback } from 'react';
+import moment from 'moment';
+
+export function useScheduleDateTime(now?: string) {
+  const initialDatetime = useMemo(() => moment(now), [now]);
+  const [startDatetime, setStartDatetime] = useState<moment.Moment>(initialDatetime);
+  const minTime = useMemo(() => {
+    if (startDatetime.isSame(initialDatetime, 'day')) {
+      return initialDatetime.clone();
+    }
+  }, [startDatetime, initialDatetime]);
+  const maxTime = useMemo(() => {
+    if (startDatetime.isSame(initialDatetime, 'day')) {
+      return initialDatetime.clone().endOf('day');
+    }
+  }, [startDatetime, initialDatetime]);
+
+  const onChangeStartDateTime = useCallback(
+    (date: moment.Moment | null) => {
+      if (!date) {
+        return;
+      }
+
+      if (date.isBefore(initialDatetime)) {
+        setStartDatetime(initialDatetime);
+      } else {
+        setStartDatetime(date);
+      }
+    },
+    [initialDatetime]
+  );
+
+  return {
+    startDatetime,
+    initialDatetime,
+    onChangeStartDateTime,
+    minTime,
+    maxTime,
+  };
+}

x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_upgrade_modal/index.tsx

@@ -7,7 +7,6 @@
 
 import React, { useState, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
-import moment from 'moment';
 import {
   EuiConfirmModal,
   EuiComboBox,
@@ -38,6 +37,7 @@ import {
 } from '../../../../hooks';
 
 import { FALLBACK_VERSIONS, MAINTAINANCE_VALUES } from './constants';
+import { useScheduleDateTime } from './hooks';
 
 export interface AgentUpgradeAgentModalProps {
   onClose: () => void;
@@ -107,8 +107,8 @@ export const AgentUpgradeAgentModal: React.FunctionComponent<AgentUpgradeAgentMo
     isSmallBatch ? maintainanceOptions[0] : maintainanceOptions[1],
   ]);
 
-  const initialDatetime = useMemo(() => moment(), []);
-  const [startDatetime, setStartDatetime] = useState<moment.Moment>(initialDatetime);
+  const { startDatetime, onChangeStartDateTime, initialDatetime, minTime, maxTime } =
+    useScheduleDateTime();
 
   async function onSubmit() {
     const version = getVersion(selectedVersion);
@@ -341,7 +341,9 @@ export const AgentUpgradeAgentModal: React.FunctionComponent<AgentUpgradeAgentMo
               showTimeSelect
               selected={startDatetime}
               minDate={initialDatetime}
-              onChange={(date) => setStartDatetime(date as moment.Moment)}
+              minTime={minTime}
+              maxTime={maxTime}
+              onChange={onChangeStartDateTime}
             />
           </EuiFormRow>
         </>