[8.8] [ResponseOps][Maintenance Windows] Show dates in the selected timezone on the edit form (#158020) (#158075)

# Backport This will backport the following commits from `main` to `8.8`: - [[ResponseOps][Maintenance Windows] Show dates in the selected timezone on the edit form (#158020)](https://github.com/elastic/kibana/pull/158020)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Alexi Doak <109488926+doakalexi@users.noreply.github.com>
2025-04-24 09:48:58 -04:00 · 2023-05-18 10:14:26 -04:00 · 2023-05-18 10:14:26 -04:00 · e0cc912c80
commit e0cc912c80
parent d6f6c0ce54
6 changed files with 75 additions and 17 deletions
--- a/x-pack/plugins/alerting/public/pages/maintenance_windows/components/create_maintenance_windows_form.test.tsx
+++ b/x-pack/plugins/alerting/public/pages/maintenance_windows/components/create_maintenance_windows_form.test.tsx
@ -94,8 +94,8 @@ describe('CreateMaintenanceWindowForm', () => {
    const timezoneInput = within(result.getByTestId('timezone-field')).getByTestId('input');

    expect(titleInput).toHaveValue('test');
-    expect(dateInputs[0]).toHaveValue('03/24/2023 12:00 AM');
-    expect(dateInputs[1]).toHaveValue('03/26/2023 12:00 AM');
+    expect(dateInputs[0]).toHaveValue('03/23/2023 09:00 PM');
+    expect(dateInputs[1]).toHaveValue('03/25/2023 09:00 PM');
    expect(recurringInput).toBeChecked();
    expect(timezoneInput).toHaveTextContent('America/Los_Angeles');
  });
--- a/x-pack/plugins/alerting/public/pages/maintenance_windows/components/create_maintenance_windows_form.tsx
+++ b/x-pack/plugins/alerting/public/pages/maintenance_windows/components/create_maintenance_windows_form.tsx
@ -108,9 +108,9 @@ export const CreateMaintenanceWindowForm = React.memo<CreateMaintenanceWindowFor
      onSubmit: submitMaintenanceWindow,
    });

-    const [{ recurring }] = useFormData<FormProps>({
+    const [{ recurring, timezone }] = useFormData<FormProps>({
      form,
-      watch: ['recurring'],
+      watch: ['recurring', 'timezone'],
    });
    const isRecurring = recurring || false;
    const showTimezone = isBrowser || initialValue?.timezone !== undefined;
@ -181,7 +181,13 @@ export const CreateMaintenanceWindowForm = React.memo<CreateMaintenanceWindowFor
                    },
                  }}
                >
-                  {(fields) => <DatePickerRangeField fields={fields} data-test-subj="date-field" />}
+                  {(fields) => (
+                    <DatePickerRangeField
+                      fields={fields}
+                      timezone={timezone ?? [defaultTimezone]}
+                      data-test-subj="date-field"
+                    />
+                  )}
                </UseMultiFields>
              </EuiFlexItem>
              {showTimezone ? (
--- a/x-pack/plugins/alerting/public/pages/maintenance_windows/components/fields/date_picker_field.tsx
+++ b/x-pack/plugins/alerting/public/pages/maintenance_windows/components/fields/date_picker_field.tsx
@ -28,7 +28,7 @@ export const DatePickerField: React.FC<DatePickerFieldProps> = React.memo(
    const { setFieldValue } = useFormContext();
    const [form] = useFormData({ watch: [field.path] });

-    const selected = getSelected(form, field.path);
+    const { selected, utcOffset } = getSelected(form, field.path);

    const onChange = useCallback(
      (currentDate: Moment | null) => {
@ -45,6 +45,7 @@ export const DatePickerField: React.FC<DatePickerFieldProps> = React.memo(
          selected={selected}
          onChange={onChange}
          minDate={today}
+          utcOffset={utcOffset}
          fullWidth
        />
      </EuiFormRow>
--- a/x-pack/plugins/alerting/public/pages/maintenance_windows/components/fields/date_picker_range_field.tsx
+++ b/x-pack/plugins/alerting/public/pages/maintenance_windows/components/fields/date_picker_range_field.tsx
@ -18,19 +18,28 @@ import { getSelectedForDatePicker as getSelected } from '../../helpers/get_selec

 interface DatePickerRangeFieldProps {
  fields: { startDate: FieldHook<string, string>; endDate: FieldHook<string, string> };
+  timezone?: string[];
  showTimeSelect?: boolean;
  'data-test-subj'?: string;
 }

 export const DatePickerRangeField: React.FC<DatePickerRangeFieldProps> = React.memo(
-  ({ fields, showTimeSelect = true, ...rest }) => {
+  ({ fields, timezone, showTimeSelect = true, ...rest }) => {
    const [today] = useState<Moment>(moment());

    const { setFieldValue } = useFormContext();
    const [form] = useFormData({ watch: [fields.startDate.path, fields.endDate.path] });

-    const startDate = getSelected(form, fields.startDate.path);
-    const endDate = getSelected(form, fields.endDate.path);
+    const { selected: startDate, utcOffset: startOffset } = getSelected(
+      form,
+      fields.startDate.path,
+      timezone
+    );
+    const { selected: endDate, utcOffset: endOffset } = getSelected(
+      form,
+      fields.endDate.path,
+      timezone
+    );

    const onStartDateChange = useCallback(
      (currentDate: Moment | null) => {
@ -69,6 +78,7 @@ export const DatePickerRangeField: React.FC<DatePickerRangeFieldProps> = React.m
                aria-label="Start date"
                showTimeSelect={showTimeSelect}
                minDate={today}
+                utcOffset={startOffset}
              />
            }
            endDateControl={
@ -80,6 +90,7 @@ export const DatePickerRangeField: React.FC<DatePickerRangeFieldProps> = React.m
                aria-label="End date"
                showTimeSelect={showTimeSelect}
                minDate={today}
+                utcOffset={endOffset}
              />
            }
            fullWidth
--- a/x-pack/plugins/alerting/public/pages/maintenance_windows/helpers/get_selected_for_date_picker.test.ts
+++ b/x-pack/plugins/alerting/public/pages/maintenance_windows/helpers/get_selected_for_date_picker.test.ts
@ -15,22 +15,43 @@ describe('getSelectedForDatePicker', () => {
  test('should return the current date if the form is not initialized', () => {
    jest.useFakeTimers().setSystemTime(new Date('2023-03-30T00:00:00.000Z'));

-    expect(getSelectedForDatePicker({}, 'date').toISOString()).toEqual('2023-03-30T00:00:00.000Z');
+    const { selected } = getSelectedForDatePicker({}, 'date');
+    expect(selected.toISOString()).toEqual('2023-03-30T00:00:00.000Z');
  });

  test('should return the form date if it is valid', () => {
    jest.useFakeTimers().setSystemTime(new Date('2023-03-30T00:00:00.000Z'));

-    expect(
-      getSelectedForDatePicker({ date: '2023-01-30T00:00:00.000Z' }, 'date').toISOString()
-    ).toEqual('2023-01-30T00:00:00.000Z');
+    const { selected } = getSelectedForDatePicker({ date: '2023-01-30T00:00:00.000Z' }, 'date');
+    expect(selected.toISOString()).toEqual('2023-01-30T00:00:00.000Z');
  });

  test('should return the current date if the form date is not valid', () => {
    jest.useFakeTimers().setSystemTime(new Date('2023-03-30T00:00:00.000Z'));

-    expect(getSelectedForDatePicker({ date: 'test' }, 'date').toISOString()).toEqual(
-      '2023-03-30T00:00:00.000Z'
+    const { selected } = getSelectedForDatePicker({ date: 'test' }, 'date');
+    expect(selected.toISOString()).toEqual('2023-03-30T00:00:00.000Z');
+  });
+
+  test('should return the current date if the form is not initialized and an offset that reflects the timezone', () => {
+    jest.useFakeTimers().setSystemTime(new Date('2023-03-30T00:00:00.000Z'));
+
+    const { selected, utcOffset } = getSelectedForDatePicker({}, 'date', ['America/Denver']);
+    expect(selected.toISOString()).toEqual('2023-03-30T00:00:00.000Z');
+    expect(selected.toString()).toEqual('Wed Mar 29 2023 18:00:00 GMT-0600');
+    expect(utcOffset).toEqual(-360);
+  });
+
+  test('should return the form date if it is valid and an offset that reflects the timezone', () => {
+    jest.useFakeTimers().setSystemTime(new Date('2023-03-30T00:00:00.000Z'));
+
+    const { selected, utcOffset } = getSelectedForDatePicker(
+      { date: '2023-05-01T00:00:00.000Z' },
+      'date',
+      ['America/Denver']
    );
+    expect(selected.toISOString()).toEqual('2023-05-01T00:00:00.000Z');
+    expect(selected.toString()).toEqual('Sun Apr 30 2023 18:00:00 GMT-0600');
+    expect(utcOffset).toEqual(-360);
  });
 });
--- a/x-pack/plugins/alerting/public/pages/maintenance_windows/helpers/get_selected_for_date_picker.ts
+++ b/x-pack/plugins/alerting/public/pages/maintenance_windows/helpers/get_selected_for_date_picker.ts
@ -7,9 +7,15 @@

 import { get } from 'lodash';
 import moment, { Moment } from 'moment';
+import 'moment-timezone';
+
 import { FormData } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';

-export function getSelectedForDatePicker(form: FormData, path: string): Moment {
+export function getSelectedForDatePicker(
+  form: FormData,
+  path: string,
+  timezone?: string[]
+): { selected: Moment; utcOffset: number } {
  // parse from a string date to moment() if there is an intitial value
  // otherwise just get the current date
  const initialValue = get(form, path);
@ -17,5 +23,18 @@ export function getSelectedForDatePicker(form: FormData, path: string): Moment {
  if (initialValue && moment(initialValue).isValid()) {
    selected = moment(initialValue);
  }
-  return selected;
+  const utcOffset =
+    timezone && timezone.length > 0
+      ? moment()
+          .tz(timezone[0])
+          .year(selected.year())
+          .month(selected.month())
+          .date(selected.date())
+          .hour(selected.hour())
+          .minute(selected.minute())
+          .second(selected.second())
+          .millisecond(selected.millisecond())
+          .utcOffset()
+      : selected.utcOffset();
+  return { selected: selected.clone().utcOffset(utcOffset), utcOffset };
 }