[8.19] [ResponseOps][MaintenanceWindows] Move recurring schedule form to dedicated package (#220535) (#223203)

# Backport

This will backport the following commits from `main` to `8.19`:
- [[ResponseOps][MaintenanceWindows] Move recurring schedule form to
dedicated package
(#220535)](#220535)

<!--- Backport version: 10.0.0 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Umberto
Pepato","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-06-10T08:50:22Z","message":"[ResponseOps][MaintenanceWindows]
Move recurring schedule form to dedicated package (#220535)\n\n##
Summary\n\nMoves the recurring schedule (rrule) form from the
Maintenance Windows\nform to a dedicated package.\n\n## Implementation
details\n\n~~Because of the tight time constraints we have for this
epic, I tried\nto change the recurring schedule form as little as
possible, keeping the\nexisting form-lib-based implementation and adding
an intermediate layer\nto embed the editing UI in larger forms (i.e. MW
form). While this is\nnot particularly elegant, it allows us to build on
top of an existing,\ntested codebase and to leverage form-lib's
validation and state\nmanagement capabilities.~~\n\n~~In the context of
the MW form, the recurring schedule editor is\ntreated as a single
field. Value and error updates are synced through\nform-lib's field hook
API:~~\n\n\nhttps://github.com/elastic/kibana/blob/acd6a4823e5b9c53ae7cbed59a246972ab32cfe0/x-pack/platform/plugins/shared/alerting/public/pages/maintenance_windows/components/recurring_schedule_field.tsx#L21-L34\n\n~~Errors
are handled internally by the schedule editor, but must still\nbe
surfaced up to the parent form in order to have a consistent
validity\nstate (otherwise submits are not prevented even if errors are
shown in\nthe UI).~~\n\nThe recurring schedule form schema and form
fields are exported to be\nreused in larger form-lib forms.\n\n##
References\n\nCloses #219454\n\n### Checklist\n\n- [x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common
scenarios\n\n---------\n\nCo-authored-by: kibanamachine
<[email protected]>","sha":"664a435e6c20444217c9215bfa280c3f8fe9320e","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:ResponseOps","backport:version","v9.1.0","v8.19.0"],"title":"[ResponseOps][MaintenanceWindows]
Move recurring schedule form to dedicated
package","number":220535,"url":"https://github.com/elastic/kibana/pull/220535","mergeCommit":{"message":"[ResponseOps][MaintenanceWindows]
Move recurring schedule form to dedicated package (#220535)\n\n##
Summary\n\nMoves the recurring schedule (rrule) form from the
Maintenance Windows\nform to a dedicated package.\n\n## Implementation
details\n\n~~Because of the tight time constraints we have for this
epic, I tried\nto change the recurring schedule form as little as
possible, keeping the\nexisting form-lib-based implementation and adding
an intermediate layer\nto embed the editing UI in larger forms (i.e. MW
form). While this is\nnot particularly elegant, it allows us to build on
top of an existing,\ntested codebase and to leverage form-lib's
validation and state\nmanagement capabilities.~~\n\n~~In the context of
the MW form, the recurring schedule editor is\ntreated as a single
field. Value and error updates are synced through\nform-lib's field hook
API:~~\n\n\nhttps://github.com/elastic/kibana/blob/acd6a4823e5b9c53ae7cbed59a246972ab32cfe0/x-pack/platform/plugins/shared/alerting/public/pages/maintenance_windows/components/recurring_schedule_field.tsx#L21-L34\n\n~~Errors
are handled internally by the schedule editor, but must still\nbe
surfaced up to the parent form in order to have a consistent
validity\nstate (otherwise submits are not prevented even if errors are
shown in\nthe UI).~~\n\nThe recurring schedule form schema and form
fields are exported to be\nreused in larger form-lib forms.\n\n##
References\n\nCloses #219454\n\n### Checklist\n\n- [x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common
scenarios\n\n---------\n\nCo-authored-by: kibanamachine
<[email protected]>","sha":"664a435e6c20444217c9215bfa280c3f8fe9320e"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/220535","number":220535,"mergeCommit":{"message":"[ResponseOps][MaintenanceWindows]
Move recurring schedule form to dedicated package (#220535)\n\n##
Summary\n\nMoves the recurring schedule (rrule) form from the
Maintenance Windows\nform to a dedicated package.\n\n## Implementation
details\n\n~~Because of the tight time constraints we have for this
epic, I tried\nto change the recurring schedule form as little as
possible, keeping the\nexisting form-lib-based implementation and adding
an intermediate layer\nto embed the editing UI in larger forms (i.e. MW
form). While this is\nnot particularly elegant, it allows us to build on
top of an existing,\ntested codebase and to leverage form-lib's
validation and state\nmanagement capabilities.~~\n\n~~In the context of
the MW form, the recurring schedule editor is\ntreated as a single
field. Value and error updates are synced through\nform-lib's field hook
API:~~\n\n\nhttps://github.com/elastic/kibana/blob/acd6a4823e5b9c53ae7cbed59a246972ab32cfe0/x-pack/platform/plugins/shared/alerting/public/pages/maintenance_windows/components/recurring_schedule_field.tsx#L21-L34\n\n~~Errors
are handled internally by the schedule editor, but must still\nbe
surfaced up to the parent form in order to have a consistent
validity\nstate (otherwise submits are not prevented even if errors are
shown in\nthe UI).~~\n\nThe recurring schedule form schema and form
fields are exported to be\nreused in larger form-lib forms.\n\n##
References\n\nCloses #219454\n\n### Checklist\n\n- [x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common
scenarios\n\n---------\n\nCo-authored-by: kibanamachine
<[email protected]>","sha":"664a435e6c20444217c9215bfa280c3f8fe9320e"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: kibanamachine <[email protected]>

Author: umbopepato

.github/CODEOWNERS

@@ -778,6 +778,7 @@ src/platform/packages/shared/response-ops/alerts-apis @elastic/response-ops
 src/platform/packages/shared/response-ops/alerts-fields-browser @elastic/response-ops
 src/platform/packages/shared/response-ops/alerts-filters-form @elastic/response-ops
 src/platform/packages/shared/response-ops/alerts-table @elastic/response-ops
+src/platform/packages/shared/response-ops/recurring-schedule-form @elastic/response-ops
 src/platform/packages/shared/response-ops/rule_form @elastic/response-ops
 src/platform/packages/shared/response-ops/rule_params @elastic/response-ops
 src/platform/packages/shared/response-ops/rules-apis @elastic/response-ops

package.json

@@ -789,6 +789,7 @@
     "@kbn/response-ops-alerts-fields-browser": "link:src/platform/packages/shared/response-ops/alerts-fields-browser",
     "@kbn/response-ops-alerts-filters-form": "link:src/platform/packages/shared/response-ops/alerts-filters-form",
     "@kbn/response-ops-alerts-table": "link:src/platform/packages/shared/response-ops/alerts-table",
+    "@kbn/response-ops-recurring-schedule-form": "link:src/platform/packages/shared/response-ops/recurring-schedule-form",
     "@kbn/response-ops-rule-form": "link:src/platform/packages/shared/response-ops/rule_form",
     "@kbn/response-ops-rule-params": "link:src/platform/packages/shared/response-ops/rule_params",
     "@kbn/response-ops-rules-apis": "link:src/platform/packages/shared/response-ops/rules-apis",

src/platform/packages/shared/response-ops/recurring-schedule-form/README.md

@@ -0,0 +1,25 @@
+# @kbn/response-ops-recurring-schedule-form
+
+[Form lib](https://docs.elastic.dev/form-lib/welcome) fields to create RRule recurring schedules.
+
+## Usage
+
+In your form schema, add a `recurringSchedule` field:
+
+```tsx
+const form = useForm({
+  schema: {
+    recurringSchedule: getRecurringScheduleFormSchema(),
+  }
+});
+```
+
+And render `RecurringScheduleFormFields` in your form: 
+
+```tsx
+<RecurringScheduleFormFields
+  startDate={startDate}
+  endDate={endDate}
+  timezone={timezone}
+/>
+```

src/platform/packages/shared/response-ops/recurring-schedule-form/components/custom_recurring_schedule.test.tsx

@@ -0,0 +1,163 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { PropsWithChildren } from 'react';
+import { fireEvent, render, within, screen } from '@testing-library/react';
+import { useForm, Form } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
+import { Frequency } from '@kbn/rrule';
+import type { RecurringSchedule } from '../types';
+import { getRecurringScheduleFormSchema } from '../schemas/recurring_schedule_form_schema';
+import { CustomRecurringSchedule } from './custom_recurring_schedule';
+import { RecurrenceEnd } from '../constants';
+
+interface FormValue {
+  recurringSchedule: RecurringSchedule;
+}
+
+const initialValue: FormValue = {
+  recurringSchedule: {
+    frequency: 'CUSTOM',
+    ends: RecurrenceEnd.NEVER,
+  },
+};
+
+const TestWrapper = ({ children, iv = initialValue }: PropsWithChildren<{ iv?: FormValue }>) => {
+  const { form } = useForm<FormValue>({
+    defaultValue: iv,
+    options: { stripEmptyFields: false },
+    schema: { recurringSchedule: getRecurringScheduleFormSchema() },
+  });
+
+  return <Form form={form}>{children}</Form>;
+};
+
+describe('CustomRecurringSchedule', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders all form fields', async () => {
+    render(
+      <TestWrapper>
+        <CustomRecurringSchedule />
+      </TestWrapper>
+    );
+
+    expect(screen.getByTestId('interval-field')).toBeInTheDocument();
+    expect(screen.getByTestId('custom-frequency-field')).toBeInTheDocument();
+    expect(screen.getByTestId('byweekday-field')).toBeInTheDocument();
+    expect(screen.queryByTestId('bymonth-field')).not.toBeInTheDocument();
+  });
+
+  it('renders byweekday field if custom frequency = weekly', async () => {
+    render(
+      <TestWrapper>
+        <CustomRecurringSchedule />
+      </TestWrapper>
+    );
+
+    fireEvent.change(
+      within(screen.getByTestId('custom-frequency-field')).getByTestId(
+        'customRecurringScheduleFrequencySelect'
+      ),
+      {
+        target: { value: Frequency.WEEKLY },
+      }
+    );
+    expect(await screen.findByTestId('byweekday-field')).toBeInTheDocument();
+  });
+
+  it('renders byweekday field if frequency = daily', async () => {
+    const iv: FormValue = {
+      recurringSchedule: {
+        ...initialValue,
+        frequency: Frequency.DAILY,
+        ends: RecurrenceEnd.NEVER,
+      },
+    };
+    render(
+      <TestWrapper iv={iv}>
+        <CustomRecurringSchedule />
+      </TestWrapper>
+    );
+
+    expect(screen.getByTestId('byweekday-field')).toBeInTheDocument();
+  });
+
+  it('renders bymonth field if custom frequency = monthly', async () => {
+    render(
+      <TestWrapper>
+        <CustomRecurringSchedule />
+      </TestWrapper>
+    );
+
+    fireEvent.change(
+      within(screen.getByTestId('custom-frequency-field')).getByTestId(
+        'customRecurringScheduleFrequencySelect'
+      ),
+      {
+        target: { value: Frequency.MONTHLY },
+      }
+    );
+    expect(await screen.findByTestId('bymonth-field')).toBeInTheDocument();
+  });
+
+  it('should initialize the form when no initialValue provided', () => {
+    render(
+      <TestWrapper>
+        <CustomRecurringSchedule />
+      </TestWrapper>
+    );
+
+    const frequencyInput = within(screen.getByTestId('custom-frequency-field')).getByTestId(
+      'customRecurringScheduleFrequencySelect'
+    );
+    const intervalInput = within(screen.getByTestId('interval-field')).getByTestId(
+      'customRecurringScheduleIntervalInput'
+    );
+
+    expect(frequencyInput).toHaveValue('2');
+    expect(intervalInput).toHaveValue(1);
+  });
+
+  it('should prefill the form when provided with initialValue', () => {
+    const iv: FormValue = {
+      recurringSchedule: {
+        ...initialValue,
+        frequency: 'CUSTOM',
+        ends: RecurrenceEnd.NEVER,
+        customFrequency: Frequency.WEEKLY,
+        interval: 3,
+        byweekday: { 1: false, 2: false, 3: true, 4: true, 5: false, 6: false, 7: false },
+      },
+    };
+    render(
+      <TestWrapper iv={iv}>
+        <CustomRecurringSchedule />
+      </TestWrapper>
+    );
+
+    const frequencyInput = within(screen.getByTestId('custom-frequency-field')).getByTestId(
+      'customRecurringScheduleFrequencySelect'
+    );
+    const intervalInput = within(screen.getByTestId('interval-field')).getByTestId(
+      'customRecurringScheduleIntervalInput'
+    );
+    const input3 = within(screen.getByTestId('byweekday-field'))
+      .getByTestId('isoWeekdays3')
+      .getAttribute('aria-pressed');
+    const input4 = within(screen.getByTestId('byweekday-field'))
+      .getByTestId('isoWeekdays4')
+      .getAttribute('aria-pressed');
+    expect(frequencyInput).toHaveValue('2');
+    expect(intervalInput).toHaveValue(3);
+    expect(input3).toBe('true');
+    expect(input4).toBe('true');
+  });
+});

src/platform/packages/shared/response-ops/recurring-schedule-form/components/custom_recurring_schedule.tsx

@@ -0,0 +1,177 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useMemo } from 'react';
+import { Frequency } from '@kbn/rrule';
+import moment from 'moment';
+import { css } from '@emotion/react';
+import {
+  FIELD_TYPES,
+  getUseField,
+  useFormData,
+} from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
+import type { MultiButtonGroupFieldValue } from '@kbn/es-ui-shared-plugin/static/forms/components';
+import { Field } from '@kbn/es-ui-shared-plugin/static/forms/components';
+import { EuiFlexGroup, EuiFlexItem, EuiFormLabel, EuiSpacer } from '@elastic/eui';
+import { RECURRING_SCHEDULE_FORM_CUSTOM_FREQUENCY, WEEKDAY_OPTIONS } from '../constants';
+import { getInitialByWeekday } from '../utils/get_initial_by_weekday';
+import { parseSchedule } from '../utils/parse_schedule';
+import { getWeekdayInfo } from '../utils/get_weekday_info';
+import { RecurringSchedule } from '../types';
+import {
+  RECURRING_SCHEDULE_FORM_CUSTOM_REPEAT_MONTHLY_ON_DAY,
+  RECURRING_SCHEDULE_FORM_WEEKDAY_SHORT,
+  RECURRING_SCHEDULE_FORM_INTERVAL_EVERY,
+  RECURRING_SCHEDULE_FORM_BYWEEKDAY_REQUIRED,
+} from '../translations';
+
+const UseField = getUseField({ component: Field });
+
+const styles = {
+  flexField: css`
+    .euiFormRow__labelWrapper {
+      margin-bottom: unset;
+    }
+  `,
+};
+
+export interface CustomRecurringScheduleProps {
+  startDate?: string;
+}
+
+export const CustomRecurringSchedule: React.FC = React.memo(
+  ({ startDate }: CustomRecurringScheduleProps) => {
+    const [{ recurringSchedule }] = useFormData<{ recurringSchedule: RecurringSchedule }>({
+      watch: [
+        'recurringSchedule.frequency',
+        'recurringSchedule.interval',
+        'recurringSchedule.customFrequency',
+      ],
+    });
+
+    const parsedSchedule = useMemo(() => {
+      return parseSchedule(recurringSchedule);
+    }, [recurringSchedule]);
+
+    const frequencyOptions = useMemo(
+      () => RECURRING_SCHEDULE_FORM_CUSTOM_FREQUENCY(parsedSchedule?.interval),
+      [parsedSchedule?.interval]
+    );
+
+    const bymonthOptions = useMemo(() => {
+      if (!startDate) return [];
+      const date = moment(startDate);
+      const { dayOfWeek, nthWeekdayOfMonth, isLastOfMonth } = getWeekdayInfo(date, 'ddd');
+      return [
+        {
+          id: 'day',
+          label: RECURRING_SCHEDULE_FORM_CUSTOM_REPEAT_MONTHLY_ON_DAY(date),
+        },
+        {
+          id: 'weekday',
+          label:
+            RECURRING_SCHEDULE_FORM_WEEKDAY_SHORT(dayOfWeek)[isLastOfMonth ? 0 : nthWeekdayOfMonth],
+        },
+      ];
+    }, [startDate]);
+
+    const defaultByWeekday = useMemo(() => getInitialByWeekday([], moment(startDate)), [startDate]);
+
+    return (
+      <>
+        {parsedSchedule?.frequency !== Frequency.DAILY ? (
+          <>
+            <EuiSpacer size="s" />
+            <EuiFlexGroup gutterSize="s" alignItems="flexStart">
+              <EuiFlexItem>
+                <UseField
+                  path="recurringSchedule.interval"
+                  css={styles.flexField}
+                  componentProps={{
+                    'data-test-subj': 'interval-field',
+                    id: 'interval',
+                    euiFieldProps: {
+                      'data-test-subj': 'customRecurringScheduleIntervalInput',
+                      min: 1,
+                      prepend: (
+                        <EuiFormLabel htmlFor={'interval'}>
+                          {RECURRING_SCHEDULE_FORM_INTERVAL_EVERY}
+                        </EuiFormLabel>
+                      ),
+                    },
+                  }}
+                />
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <UseField
+                  path="recurringSchedule.customFrequency"
+                  componentProps={{
+                    'data-test-subj': 'custom-frequency-field',
+                    euiFieldProps: {
+                      'data-test-subj': 'customRecurringScheduleFrequencySelect',
+                      options: frequencyOptions,
+                    },
+                  }}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            <EuiSpacer size="s" />
+          </>
+        ) : null}
+        {Number(parsedSchedule?.customFrequency) === Frequency.WEEKLY ||
+        parsedSchedule?.frequency === Frequency.DAILY ? (
+          <UseField
+            path="recurringSchedule.byweekday"
+            config={{
+              type: FIELD_TYPES.MULTI_BUTTON_GROUP,
+              label: '',
+              validations: [
+                {
+                  validator: ({ value }) => {
+                    if (
+                      Object.values(value as MultiButtonGroupFieldValue).every((v) => v === false)
+                    ) {
+                      return {
+                        message: RECURRING_SCHEDULE_FORM_BYWEEKDAY_REQUIRED,
+                      };
+                    }
+                  },
+                },
+              ],
+              defaultValue: defaultByWeekday,
+            }}
+            componentProps={{
+              'data-test-subj': 'byweekday-field',
+              euiFieldProps: {
+                'data-test-subj': 'customRecurringScheduleByWeekdayButtonGroup',
+                legend: 'Repeat on weekday',
+                options: WEEKDAY_OPTIONS,
+              },
+            }}
+          />
+        ) : null}
+
+        {Number(parsedSchedule?.customFrequency) === Frequency.MONTHLY ? (
+          <UseField
+            path="recurringSchedule.bymonth"
+            componentProps={{
+              'data-test-subj': 'bymonth-field',
+              euiFieldProps: {
+                legend: 'Repeat on weekday or month day',
+                options: bymonthOptions,
+              },
+            }}
+          />
+        ) : null}
+      </>
+    );
+  }
+);
+
+CustomRecurringSchedule.displayName = 'CustomRecurringSchedule';