[8.11] [RAM][Maintenance Window] Fix maintenance window category ID e…

…dit UI not initializing correctly. (elastic#170352) (elastic#170377)

# Backport

This will backport the following commits from `main` to `8.11`:
- [[RAM][Maintenance Window] Fix maintenance window category ID edit UI
not initializing correctly.
(elastic#170352)](elastic#170352)

<!--- Backport version: 8.9.7 -->

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

<!--BACKPORT [{"author":{"name":"Jiawei
Wu","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-11-02T03:55:02Z","message":"[RAM][Maintenance
Window] Fix maintenance window category ID edit UI not initializing
correctly. (elastic#170352)\n\n## Summary\r\nFixed a bug with the MW category
ID selection feature where if a MW had\r\nit's category IDs changed,
when attempting to edit this MW, the category\r\nIDs would fail to
initialize.\r\n\r\nSteps to test:\r\n1. Create a maintenance window with
only 2 categories selected (o11y,\r\nmanagement)\r\n2. Edit the
maintenance window\r\n3. Assert that the categories initialize correctly
(o11y and management\r\ncheckboxes are checked)\r\n\r\n###
Checklist\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"ea1451e14c5543ed40a8448a80556c91173815e5","branchLabelMapping":{"^v8.12.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","Team:ResponseOps","Feature:Alerting/RulesManagement","v8.11.0","v8.12.0"],"number":170352,"url":"https://github.com/elastic/kibana/pull/170352","mergeCommit":{"message":"[RAM][Maintenance
Window] Fix maintenance window category ID edit UI not initializing
correctly. (elastic#170352)\n\n## Summary\r\nFixed a bug with the MW category
ID selection feature where if a MW had\r\nit's category IDs changed,
when attempting to edit this MW, the category\r\nIDs would fail to
initialize.\r\n\r\nSteps to test:\r\n1. Create a maintenance window with
only 2 categories selected (o11y,\r\nmanagement)\r\n2. Edit the
maintenance window\r\n3. Assert that the categories initialize correctly
(o11y and management\r\ncheckboxes are checked)\r\n\r\n###
Checklist\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"ea1451e14c5543ed40a8448a80556c91173815e5"}},"sourceBranch":"main","suggestedTargetBranches":["8.11"],"targetPullRequestStates":[{"branch":"8.11","label":"v8.11.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.12.0","labelRegex":"^v8.12.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/170352","number":170352,"mergeCommit":{"message":"[RAM][Maintenance
Window] Fix maintenance window category ID edit UI not initializing
correctly. (elastic#170352)\n\n## Summary\r\nFixed a bug with the MW category
ID selection feature where if a MW had\r\nit's category IDs changed,
when attempting to edit this MW, the category\r\nIDs would fail to
initialize.\r\n\r\nSteps to test:\r\n1. Create a maintenance window with
only 2 categories selected (o11y,\r\nmanagement)\r\n2. Edit the
maintenance window\r\n3. Assert that the categories initialize correctly
(o11y and management\r\ncheckboxes are checked)\r\n\r\n###
Checklist\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"ea1451e14c5543ed40a8448a80556c91173815e5"}}]}]
BACKPORT-->

Co-authored-by: Jiawei Wu <[email protected]>

x-pack/plugins/alerting/public/pages/maintenance_windows/components/create_maintenance_windows_form.test.tsx

@@ -189,6 +189,43 @@ describe('CreateMaintenanceWindowForm', () => {
     expect(managementInput).toBeChecked();
   });
 
+  it('should initialize MWs with selected category ids properly', async () => {
+    const result = appMockRenderer.render(
+      <CreateMaintenanceWindowForm
+        {...formProps}
+        initialValue={{
+          title: 'test',
+          startDate: '2023-03-24',
+          endDate: '2023-03-26',
+          timezone: ['America/Los_Angeles'],
+          recurring: true,
+          categoryIds: ['observability', 'management'],
+        }}
+        maintenanceWindowId="test"
+      />
+    );
+
+    await waitFor(() => {
+      expect(
+        result.queryByTestId('maintenanceWindowCategorySelectionLoading')
+      ).not.toBeInTheDocument();
+    });
+
+    const observabilityInput = within(
+      result.getByTestId('maintenanceWindowCategorySelection')
+    ).getByTestId('checkbox-observability');
+    const securityInput = within(
+      result.getByTestId('maintenanceWindowCategorySelection')
+    ).getByTestId('checkbox-securitySolution');
+    const managementInput = within(
+      result.getByTestId('maintenanceWindowCategorySelection')
+    ).getByTestId('checkbox-management');
+
+    expect(observabilityInput).toBeChecked();
+    expect(managementInput).toBeChecked();
+    expect(securityInput).not.toBeChecked();
+  });
+
   it('can select category IDs', async () => {
     const result = appMockRenderer.render(<CreateMaintenanceWindowForm {...formProps} />);
 

x-pack/plugins/alerting/public/pages/maintenance_windows/components/create_maintenance_windows_form.tsx

@@ -120,7 +120,7 @@ export const CreateMaintenanceWindowForm = React.memo<CreateMaintenanceWindowFor
       onSubmit: submitMaintenanceWindow,
     });
 
-    const [{ recurring, timezone, categoryIds }] = useFormData<FormProps>({
+    const [{ recurring, timezone, categoryIds }, _, mounted] = useFormData<FormProps>({
       form,
       watch: ['recurring', 'timezone', 'categoryIds'],
     });
@@ -188,6 +188,9 @@ export const CreateMaintenanceWindowForm = React.memo<CreateMaintenanceWindowFor
       if (isEditMode) {
         return;
       }
+      if (!mounted) {
+        return;
+      }
       if (hasSetInitialCategories.current) {
         return;
       }
@@ -197,7 +200,7 @@ export const CreateMaintenanceWindowForm = React.memo<CreateMaintenanceWindowFor
       setFieldValue('categoryIds', [...new Set(ruleTypes.map((ruleType) => ruleType.category))]);
       hasSetInitialCategories.current = true;
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isEditMode, ruleTypes]);
+    }, [isEditMode, ruleTypes, mounted]);
 
     // For edit mode, if a maintenance window => category_ids is not an array, this means
     // the maintenance window was created before the introduction of category filters.
@@ -206,6 +209,9 @@ export const CreateMaintenanceWindowForm = React.memo<CreateMaintenanceWindowFor
       if (!isEditMode) {
         return;
       }
+      if (!mounted) {
+        return;
+      }
       if (hasSetInitialCategories.current) {
         return;
       }
@@ -219,7 +225,7 @@ export const CreateMaintenanceWindowForm = React.memo<CreateMaintenanceWindowFor
       ]);
       hasSetInitialCategories.current = true;
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isEditMode, categoryIds]);
+    }, [isEditMode, categoryIds, mounted]);
 
     return (
       <Form form={form}>