From 9270bb890f2accf214f62b609ae9beb35cd28fc3 Mon Sep 17 00:00:00 2001
From: Jiawei Wu <74562234+JiaweiWu@users.noreply.github.com>
Date: Wed, 1 Nov 2023 20:55:02 -0700
Subject: [PATCH] [RAM][Maintenance Window] Fix maintenance window category ID
 edit UI not initializing correctly. (#170352)

## Summary
Fixed a bug with the MW category ID selection feature where if a MW had
it's category IDs changed, when attempting to edit this MW, the category
IDs would fail to initialize.

Steps to test:
1. Create a maintenance window with only 2 categories selected (o11y,
management)
2. Edit the maintenance window
3. Assert that the categories initialize correctly (o11y and management
checkboxes are checked)

### Checklist
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

(cherry picked from commit ea1451e14c5543ed40a8448a80556c91173815e5)
---
 .../create_maintenance_windows_form.test.tsx  | 37 +++++++++++++++++++
 .../create_maintenance_windows_form.tsx       | 12 ++++--
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git 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
index dc78b4455d54b..c5fb3bdf8357a 100644
--- 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
@@ -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} />);
 
diff --git 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
index f51f16d972c02..3a99e8bf75b90 100644
--- 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
@@ -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}>