[RAM][Maintenance Window] Fix maintenance window category ID edit UI not initializing correctly.

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}>