upcoming: [DI-21694] - Added Resource Select component to the Create-alert form

packages/api-v4/src/cloudpulse/alerts.ts

@@ -5,12 +5,12 @@ import { BETA_API_ROOT as API_ROOT } from 'src/constants';
 
 export const createAlertDefinition = (
   data: CreateAlertDefinitionPayload,
-  service_type: AlertServiceType
+  serviceType: AlertServiceType
 ) =>
   Request<Alert>(
     setURL(
       `${API_ROOT}/monitor/services/${encodeURIComponent(
-        service_type!
+        serviceType!
       )}/alert-definitions`
     ),
     setMethod('POST'),

packages/manager/.changeset/pr-11331-added-1732627930598.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+ResourceMultiSelect component, along with UT. Changed case for few variables and properties ([#11331](https://github.com/linode/manager/pull/11331))

packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsDefinitionLanding.tsx

@@ -14,7 +14,7 @@ export const AlertDefinitionLanding = () => {
       />
       <Route
         component={() => <CreateAlertDefinition />}
-        path="/monitor/cloudpulse/alerts/definitions/create"
+        path="/monitor/alerts/definitions/create"
       />
     </Switch>
   );

packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsLanding.tsx

@@ -84,7 +84,6 @@ export const AlertsLanding = React.memo(() => {
         <Switch>
           <Route
             component={AlertDefinitionLanding}
-            exact
             path={'/monitor/alerts/definitions'}
           />
           <Redirect from="*" to="/monitor/alerts/definitions" />

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/CreateAlertDefinition.test.tsx

@@ -34,5 +34,6 @@ describe('AlertDefinition Create', () => {
     expect(getByText('Severity is required.')).toBeVisible();
     expect(getByText('Service is required.')).toBeVisible();
     expect(getByText('Region is required.')).toBeVisible();
+    expect(getByText('At least one resource is needed.')).toBeVisible();
   });
 });

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/CreateAlertDefinition.tsx

@@ -12,6 +12,7 @@ import { useCreateAlertDefinition } from 'src/queries/cloudpulse/alerts';
 import { CloudPulseAlertSeveritySelect } from './GeneralInformation/AlertSeveritySelect';
 import { EngineOption } from './GeneralInformation/EngineOption';
 import { CloudPulseRegionSelect } from './GeneralInformation/RegionSelect';
+import { CloudPulseMultiResourceSelect } from './GeneralInformation/ResourceMultiSelect';
 import { CloudPulseServiceSelect } from './GeneralInformation/ServiceTypeSelect';
 import { CreateAlertDefinitionFormSchema } from './schemas';
 import { filterFormValues, filterMetricCriteriaFormValues } from './utilities';
@@ -33,34 +34,33 @@ const criteriaInitialValues: MetricCriteriaForm = {
 };
 const initialValues: CreateAlertDefinitionForm = {
   channel_ids: [],
-  engine_type: null,
+  engineType: null,
   label: '',
   region: '',
   resource_ids: [],
   rule_criteria: {
     rules: filterMetricCriteriaFormValues(criteriaInitialValues),
   },
-  service_type: null,
+  serviceType: null,
   severity: null,
   triggerCondition: triggerConditionInitialValues,
 };
 
 const overrides = [
   {
     label: 'Definitions',
-    linkTo: '/monitor/cloudpulse/alerts/definitions',
+    linkTo: '/monitor/alerts/definitions',
     position: 1,
   },
   {
     label: 'Details',
-    linkTo: `/monitor/cloudpulse/alerts/definitions/create`,
+    linkTo: `/monitor/alerts/definitions/create`,
     position: 2,
   },
 ];
 export const CreateAlertDefinition = () => {
   const history = useHistory();
-  const alertCreateExit = () =>
-    history.push('/monitor/cloudpulse/alerts/definitions');
+  const alertCreateExit = () => history.push('/monitor/alerts/definitions');
 
   const formMethods = useForm<CreateAlertDefinitionForm>({
     defaultValues: initialValues,
@@ -78,10 +78,10 @@ export const CreateAlertDefinition = () => {
   } = formMethods;
   const { enqueueSnackbar } = useSnackbar();
   const { mutateAsync: createAlert } = useCreateAlertDefinition(
-    getValues('service_type')!
+    getValues('serviceType')!
   );
 
-  const serviceWatcher = watch('service_type');
+  const serviceWatcher = watch('serviceType');
   const onSubmit = handleSubmit(async (values) => {
     try {
       await createAlert(filterFormValues(values));
@@ -140,9 +140,15 @@ export const CreateAlertDefinition = () => {
             control={control}
             name="description"
           />
-          <CloudPulseServiceSelect name="service_type" />
-          {serviceWatcher === 'dbaas' && <EngineOption name="engine_type" />}
+          <CloudPulseServiceSelect name="serviceType" />
+          {serviceWatcher === 'dbaas' && <EngineOption name="engineType" />}
           <CloudPulseRegionSelect name="region" />
+          <CloudPulseMultiResourceSelect
+            engine={watch('engineType')}
+            name="resource_ids"
+            region={watch('region')}
+            serviceType={serviceWatcher}
+          />
           <CloudPulseAlertSeveritySelect name="severity" />
           <ActionsPanel
             primaryButtonProps={{

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/GeneralInformation/EngineOption.test.tsx

@@ -9,15 +9,15 @@ import { EngineOption } from './EngineOption';
 describe('EngineOption component tests', () => {
   it('should render the component when resource type is dbaas', () => {
     const { getByLabelText, getByTestId } = renderWithThemeAndHookFormContext({
-      component: <EngineOption name={'engine_type'} />,
+      component: <EngineOption name={'engineType'} />,
     });
     expect(getByLabelText('Engine Option')).toBeInTheDocument();
     expect(getByTestId('engine-option')).toBeInTheDocument();
   });
   it('should render the options happy path', async () => {
     const user = userEvent.setup();
     renderWithThemeAndHookFormContext({
-      component: <EngineOption name={'engine_type'} />,
+      component: <EngineOption name={'engineType'} />,
     });
     user.click(screen.getByRole('button', { name: 'Open' }));
     expect(await screen.findByRole('option', { name: 'MySQL' }));
@@ -26,7 +26,7 @@ describe('EngineOption component tests', () => {
   it('should be able to select an option', async () => {
     const user = userEvent.setup();
     renderWithThemeAndHookFormContext({
-      component: <EngineOption name={'engine_type'} />,
+      component: <EngineOption name={'engineType'} />,
     });
     user.click(screen.getByRole('button', { name: 'Open' }));
     await user.click(await screen.findByRole('option', { name: 'MySQL' }));

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/GeneralInformation/ResourceMultiSelect.test.tsx

@@ -0,0 +1,220 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+
+import { linodeFactory } from 'src/factories';
+import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers';
+
+import { CloudPulseMultiResourceSelect } from './ResourceMultiSelect';
+
+const queryMocks = vi.hoisted(() => ({
+  useResourcesQuery: vi.fn().mockReturnValue({}),
+}));
+
+vi.mock('src/queries/cloudpulse/resources', async () => {
+  const actual = await vi.importActual('src/queries/cloudpulse/resources');
+  return {
+    ...actual,
+    useResourcesQuery: queryMocks.useResourcesQuery,
+  };
+});
+const SELECT_ALL = 'Select All';
+const ARIA_SELECTED = 'aria-selected';
+describe('ResourceMultiSelect component tests', () => {
+  it('should render disabled component if the props are undefined or regions and service type does not have any values', () => {
+    queryMocks.useResourcesQuery.mockReturnValue({
+      data: linodeFactory.buildList(2),
+      isError: false,
+      isLoading: false,
+      status: 'success',
+    });
+    const {
+      getByPlaceholderText,
+      getByTestId,
+    } = renderWithThemeAndHookFormContext({
+      component: (
+        <CloudPulseMultiResourceSelect
+          engine="mysql"
+          name="resource_ids"
+          region={undefined}
+          serviceType={null}
+        />
+      ),
+    });
+    expect(getByTestId('resource-select')).toBeInTheDocument();
+    expect(getByPlaceholderText('Select Resources')).toBeInTheDocument();
+  });
+  it('should render resources happy path', async () => {
+    const user = userEvent.setup();
+    queryMocks.useResourcesQuery.mockReturnValue({
+      data: linodeFactory.buildList(2),
+      isError: false,
+      isLoading: false,
+      status: 'success',
+    });
+    renderWithThemeAndHookFormContext({
+      component: (
+        <CloudPulseMultiResourceSelect
+          engine="mysql"
+          name="resource_ids"
+          region="us-east"
+          serviceType="linode"
+        />
+      ),
+    });
+    user.click(screen.getByRole('button', { name: 'Open' }));
+    expect(
+      await screen.findByRole('option', {
+        name: 'linode-3',
+      })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('option', {
+        name: 'linode-4',
+      })
+    ).toBeInTheDocument();
+  });
+  it('should be able to select all resources', async () => {
+    const user = userEvent.setup();
+    queryMocks.useResourcesQuery.mockReturnValue({
+      data: linodeFactory.buildList(2),
+      isError: false,
+      isLoading: false,
+      status: 'success',
+    });
+    renderWithThemeAndHookFormContext({
+      component: (
+        <CloudPulseMultiResourceSelect
+          engine="mysql"
+          name="resource_ids"
+          region="us-east"
+          serviceType="linode"
+        />
+      ),
+    });
+    user.click(await screen.findByRole('button', { name: 'Open' }));
+    await user.click(await screen.findByRole('option', { name: SELECT_ALL }));
+    expect(
+      await screen.findByRole('option', {
+        name: 'linode-5',
+      })
+    ).toHaveAttribute(ARIA_SELECTED, 'true');
+    expect(
+      screen.getByRole('option', {
+        name: 'linode-6',
+      })
+    ).toHaveAttribute(ARIA_SELECTED, 'true');
+  });
+  it('should be able to deselect the selected resources', async () => {
+    const user = userEvent.setup();
+    queryMocks.useResourcesQuery.mockReturnValue({
+      data: linodeFactory.buildList(2),
+      isError: false,
+      isLoading: false,
+      status: 'success',
+    });
+    renderWithThemeAndHookFormContext({
+      component: (
+        <CloudPulseMultiResourceSelect
+          engine="mysql"
+          name="resource_ids"
+          region="us-east"
+          serviceType="linode"
+        />
+      ),
+    });
+    user.click(screen.getByRole('button', { name: 'Open' }));
+    await user.click(await screen.findByRole('option', { name: SELECT_ALL }));
+    await user.click(
+      await screen.findByRole('option', { name: 'Deselect All' })
+    );
+    expect(
+      await screen.findByRole('option', {
+        name: 'linode-7',
+      })
+    ).toHaveAttribute(ARIA_SELECTED, 'false');
+    expect(
+      screen.getByRole('option', {
+        name: 'linode-8',
+      })
+    ).toHaveAttribute(ARIA_SELECTED, 'false');
+  });
+
+  it('should select multiple resources', async () => {
+    const user = userEvent.setup();
+    queryMocks.useResourcesQuery.mockReturnValue({
+      data: linodeFactory.buildList(3),
+      isError: false,
+      isLoading: false,
+      status: 'success',
+    });
+    renderWithThemeAndHookFormContext({
+      component: (
+        <CloudPulseMultiResourceSelect
+          engine="mysql"
+          name="resource_ids"
+          region="us-east"
+          serviceType="linode"
+        />
+      ),
+    });
+    user.click(screen.getByRole('button', { name: 'Open' }));
+    await user.click(await screen.findByRole('option', { name: 'linode-9' }));
+    await user.click(await screen.findByRole('option', { name: 'linode-10' }));
+
+    expect(
+      await screen.findByRole('option', {
+        name: 'linode-9',
+      })
+    ).toHaveAttribute(ARIA_SELECTED, 'true');
+    expect(
+      screen.getByRole('option', {
+        name: 'linode-10',
+      })
+    ).toHaveAttribute(ARIA_SELECTED, 'true');
+    expect(
+      screen.getByRole('option', {
+        name: 'linode-11',
+      })
+    ).toHaveAttribute(ARIA_SELECTED, 'false');
+    expect(
+      screen.getByRole('option', {
+        name: 'Select All',
+      })
+    ).toHaveAttribute(ARIA_SELECTED, 'false');
+  });
+  it('should render the label as cluster when resource is of dbaas type', () => {
+    const { getByLabelText } = renderWithThemeAndHookFormContext({
+      component: (
+        <CloudPulseMultiResourceSelect
+          engine="mysql"
+          name="resource_ids"
+          region="us-east"
+          serviceType="dbaas"
+        />
+      ),
+    });
+    expect(getByLabelText('Cluster'));
+  });
+  it('should render error messages when there is an API call failure', () => {
+    queryMocks.useResourcesQuery.mockReturnValue({
+      data: undefined,
+      isError: true,
+      isLoading: false,
+      status: 'error',
+    });
+    renderWithThemeAndHookFormContext({
+      component: (
+        <CloudPulseMultiResourceSelect
+          engine="mysql"
+          name="resource_ids"
+          region="us-east"
+          serviceType="linode"
+        />
+      ),
+    });
+    expect(
+      screen.getByText('Failed to fetch the resources.')
+    ).toBeInTheDocument();
+  });
+});