upcoming: [DI-24238] - UI changes to Create/Edit form (linode#11963)

* upcoming: [DI-24238] - UI changes to Create/Edit form

* upcoming: [DI-23238] - Added changeset

---------

Co-authored-by: venkatmano-akamai <vmangalr@akamai.com>

Author: santoshp210-akamai

packages/manager/.changeset/pr-11963-upcoming-features-1743680039001.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+UI bugfixes: Resetting Trigger Occurences, Resources values when service type is cleared, Disabling Trigger Occurences, Threshold values unless Service Type is selected. Added Max value for Trigger Occurences and Threshold TextField components ([#11963](https://github.com/linode/manager/pull/11963))

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

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { CreateAlertDefinition } from './CreateAlertDefinition';
+
 vi.mock('src/queries/cloudpulse/resources', () => ({
   ...vi.importActual('src/queries/cloudpulse/resources'),
   useResourcesQuery: queryMocks.useResourcesQuery,
@@ -16,12 +17,29 @@ vi.mock('@linode/queries', async (importOriginal) => ({
 }));
 
 const queryMocks = vi.hoisted(() => ({
+  useCloudPulseServiceTypes: vi.fn().mockReturnValue({}),
+  useGetCloudPulseMetricDefinitionsByServiceType: vi.fn().mockReturnValue({}),
   useRegionsQuery: vi.fn(),
   useResourcesQuery: vi.fn(),
 }));
 
+vi.mock('src/queries/cloudpulse/services', async () => {
+  const actual = await vi.importActual('src/queries/cloudpulse/services');
+  return {
+    ...actual,
+    useCloudPullMetricDefinitionsByServiceType:
+      queryMocks.useGetCloudPulseMetricDefinitionsByServiceType,
+    useCloudPulseServiceTypes: queryMocks.useCloudPulseServiceTypes,
+  };
+});
+
 beforeEach(() => {
   Element.prototype.scrollIntoView = vi.fn();
+  queryMocks.useGetCloudPulseMetricDefinitionsByServiceType.mockReturnValue({
+    data: [],
+    isError: false,
+    isLoading: false,
+  });
   queryMocks.useResourcesQuery.mockReturnValue({
     data: [],
     isError: false,
@@ -32,6 +50,12 @@ beforeEach(() => {
     isError: false,
     isFetching: false,
   });
+  queryMocks.useCloudPulseServiceTypes.mockReturnValue({
+    data: { data: [{ label: 'Linode', service_type: 'linode' }] },
+    isError: false,
+    isLoading: false,
+    status: 'success',
+  });
 });
 
 describe('AlertDefinition Create', () => {
@@ -72,37 +96,72 @@ describe('AlertDefinition Create', () => {
     expect(specificInput).toHaveAttribute('value', 'text');
   });
 
-  it('should render client side validation errors', async () => {
+  queryMocks.useGetCloudPulseMetricDefinitionsByServiceType.mockReturnValue({
+    data: {
+      data: [
+        {
+          available_aggregate_functions: ['min'],
+          dimensions: [],
+          is_alertable: true,
+          label: 'CPU utilization',
+          metric: 'system_cpu_utilization_percent',
+          metric_type: 'gauge',
+          scrape_interval: '2m',
+          unit: 'percent',
+        },
+      ],
+    },
+  });
+  it('should render client side validation errors for threshold and trigger occurences text field', async () => {
+    const user = userEvent.setup();
+    const container = renderWithTheme(<CreateAlertDefinition />);
+
+    const serviceTypeInput = container.getByPlaceholderText('Select a Service');
+    await user.click(serviceTypeInput);
+
+    await user.click(container.getByText('Linode'));
+
+    const dataFieldContainer = container.getByPlaceholderText(
+      'Select a Data Field'
+    );
+
+    await user.click(dataFieldContainer);
+    await user.click(container.getByText('CPU utilization'));
+
+    const submitButton = container.getByText('Submit');
+
+    await user.click(submitButton);
+
+    expect(container.getAllByText('Enter a positive value.').length).toBe(2);
+
+    const thresholdInput = container.getByLabelText('Threshold');
+    const triggerOccurrences = container.getByTestId('trigger-occurences');
+    await user.clear(thresholdInput);
+    await user.clear(within(triggerOccurrences).getByTestId('textfield-input'));
+    await user.click(submitButton!);
+
+    expect(container.getAllByText('The value should be a number.').length).toBe(
+      2
+    );
+  });
+
+  it('should render the client side validation error messages for the form', async () => {
     const errorMessage = 'This field is required.';
     const user = userEvent.setup();
     const container = renderWithTheme(<CreateAlertDefinition />);
-    const input = container.getByLabelText('Threshold');
+
+    const submitButton = container.getByText('Submit');
+
     await user.click(
       container.getByRole('button', { name: 'Add dimension filter' })
     );
-    const submitButton = container.getByText('Submit');
+
     await user.click(submitButton!);
-    expect(container.getAllByText('This field is required.').length).toBe(11);
+    expect(container.getAllByText(errorMessage).length).toBe(11);
     container.getAllByText(errorMessage).forEach((element) => {
       expect(element).toBeVisible();
     });
 
-    await user.clear(input);
-    await user.type(input, '-3');
-    await userEvent.click(submitButton!);
-
-    expect(
-      await container.findByText("The value can't be negative.")
-    ).toBeVisible();
-
-    await user.clear(input);
-    await user.type(input, 'sdgf');
-    await userEvent.click(submitButton!);
-
-    expect(
-      await container.findByText('The value should be a number.')
-    ).toBeInTheDocument();
-
     expect(
       await container.findByText(
         'At least one notification channel is required.'

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

@@ -151,16 +151,9 @@ export const CreateAlertDefinition = () => {
 
   const handleServiceTypeChange = React.useCallback(() => {
     // Reset the criteria to initial state
-    setValue('rule_criteria.rules', [
-      {
-        aggregate_function: null,
-        dimension_filters: [],
-        metric: null,
-        operator: null,
-        threshold: 0,
-      },
-    ]);
+    setValue('rule_criteria.rules', [{ ...criteriaInitialValues }]);
     setValue('entity_ids', []);
+    setValue('trigger_conditions', triggerConditionInitialValues);
   }, [setValue]);
 
   React.useEffect(() => {

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/Metric.test.tsx

@@ -222,6 +222,9 @@ describe('Metric component tests', () => {
         ),
         useFormOptions: {
           defaultValues: {
+            rule_criteria: {
+              rules: [mockData[0]],
+            },
             serviceType: 'linode',
           },
         },

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/Metric.tsx

@@ -263,8 +263,10 @@ export const Metric = (props: MetricCriteriaProps) => {
                     data-qa-metric-threshold={`${name}-threshold`}
                     data-qa-threshold="threshold"
                     data-testid="threshold"
+                    disabled={!metricWatcher}
                     errorText={fieldState.error?.message}
                     label="Threshold"
+                    max={Number.MAX_SAFE_INTEGER}
                     min={0}
                     name={`${name}.threshold`}
                     noMarginTop

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/TriggerConditions.tsx

@@ -173,8 +173,10 @@ export const TriggerConditions = (props: TriggerConditionProps) => {
                 }}
                 data-qa-trigger-occurrences
                 data-testid="trigger-occurences"
+                disabled={!serviceTypeWatcher}
                 errorText={fieldState.error?.message}
                 label=""
+                max={Number.MAX_SAFE_INTEGER}
                 min={0}
                 name={`${name}.trigger_occurrences`}
                 noMarginTop

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/GeneralInformation/ServiceTypeSelect.tsx

@@ -40,7 +40,7 @@ export const CloudPulseServiceSelect = (
     string,
     AlertServiceType
   >[] => {
-    return serviceOptions && serviceOptions.data.length > 0
+    return serviceOptions?.data?.length
       ? serviceOptions.data.map((service) => ({
           label: service.label,
           value: service.service_type as AlertServiceType,

packages/validation/.changeset/pr-11963-changed-1743680086813.md

@@ -0,0 +1,5 @@
+---
+"@linode/validation": Changed
+---
+
+Validation message for threshold field in Metric Threshold ([#11963](https://github.com/linode/manager/pull/11963))

packages/validation/src/cloudpulse.schema.ts

@@ -14,7 +14,7 @@ const metricCriteria = object({
   operator: string().required(fieldErrorMessage),
   threshold: number()
     .required(fieldErrorMessage)
-    .min(0, "The value can't be negative.")
+    .positive("Enter a positive value.")
     .typeError('The value should be a number.'),
   dimension_filters: array().of(dimensionFilters).notRequired(),
 });