upcoming: [DI-23769] - multiple error handling #11874

santoshp210-akamai · 2025-03-18T15:35:54Z

Description 📝

Handling multiple error messages from API and displaying it in the form accordingly.

Changes 🔄

Introduced a new component AlertListNoticeMessages.tsx
Added a util method handleMultipleError to handle the error map logic
Added the AlertListNoticeMessages component in AddChannelListing & MetricCriteria components
Modified the handleSubmit method in Create and Edit flow to include the error handling
Relevant tests for the components and util methods

Target release date 🗓️

Please specify a release date (and environment, if applicable) to guarantee timely review of this PR. If exact date is not known, please approximate and update it as needed.

Preview 📷

UX Mockups	Local

How to test 🧪

Prerequisites

(How to setup test environment)

In serverHandler.ts use the given snippet below as the return response for either
http.post('*/monitor/services/:service_type/alert-definitions') request
or
http.put('*/monitor/services/:serviceType/alert-definitions/:id') request

return HttpResponse.json(
      {
        errors: [
          { field: 'channel_ids', reason: 'Reason 1.' },
          {
            field: 'label',
            reason: 'Very long error primary message example with no full stop',
          },
          {
            field: 'label',
            reason: 'Very long error secondary message example.',
          },
          {
            field: 'label',
            reason:
              'Very long error tertiary message example with no full stop',
          },

          { field: 'severity', reason: 'Wrong field.' },
          { field: 'severity', reason: 'Wrong field.' },
          { reason: 'Failed.' },
          {
            field: 'rule_criteria.rules[0].aggregate_function',
            reason: 'Must be one of avg, sum, min, max, count and no full stop',
          },
          {
            field: 'rule_criteria',
            reason: 'Must have at least one rule.',
          },
          {
            field: 'rule_criteria',
            reason: 'Must have at least one rule.',
          },
        ],
      },
      { status: 500 }
    );

Navigate to monitor, see the menu items displayed. They should be these 3 in the order shown - 'Metrics', 'Alerts', 'Longview'.
Click on Alerts, Under Alerts either Click on Create Alert or Click on Action Item for an Alert and choose Edit
Fill the Create or Edit Form
Click on submit, the errors should be visible.

Verification steps

(How to verify changes)

The errors for channel_ids, rule_criteria.rules should be shown in AlertListNoticeMessages component
The child errors for channel_ids, rule_criteria.rules should be captured shown in AlertListNoticeMessages component.
The AlertListNoticeMessages should show listed errors (bulleted) only when the errorMessages are multiple
The AlertListNoticeMessages should show single error (non-bulleted) when the errorMessages is a single string
The errors for other FieldValues except channel_ids, rule_criteria.rules should be displayed in the relevant errorText handlers of the components
The errors for other FieldValues except channel_ids, rule_criteria.rules should be concatenated if they are multiple with a space in between.
The errors displayed must be unique

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

All unit tests are passing
TypeScript compilation succeeded without errors
Code passes all linting rules

…s in forms, Added a Notice based component to render list or single accordingly

venkymano-akamai · 2025-03-19T04:52:15Z

packages/manager/src/features/CloudPulse/Alerts/Utils/AlertListNoticeMessages.tsx

+      </AlertNoticeErrorState>
+    );
+  } else {
+    return (


@santoshp210-akamai , I think we don't need else, we can just return here, lets remove this branching

venkymano-akamai · 2025-03-19T04:52:52Z

packages/manager/src/features/CloudPulse/Alerts/Utils/utils.ts

+  errors: APIError[],
+  errorFieldMap: Record<string, FieldPath<T>>,
+  multiLineErrorSeparator: string,
+  singleLineErrorSeparator: string,
+  setError: UseFormSetError<T>


Since this has more than 2 arguments, better to have it in interface

venkymano-akamai · 2025-03-19T04:56:04Z

packages/manager/src/features/CloudPulse/Alerts/Utils/utils.ts

+      continue;
+    }
+
+    const errorField = error.field.split('.')[0];


@santoshp210-akamai , the function is good, lets add comments above each step, explaining what it does

venkymano-akamai · 2025-03-19T04:57:23Z

packages/manager/src/features/CloudPulse/Alerts/Utils/AlertListNoticeMessages.test.tsx

+    const { queryAllByTestId, queryByTestId } = renderWithTheme(
+      <AlertListNoticeMessages
+        errorMessage={errorMessage}
+        separator={''}


Suggested change

separator={''}

separator=""

venkymano-akamai

@santoshp210-akamai , Looks good, we can address minor comment I left

ankita-akamai · 2025-03-19T05:00:16Z

packages/manager/src/features/CloudPulse/Alerts/Utils/AlertListNoticeMessages.tsx

+            fontFamily: theme.tokens.typography.Body.Bold,
+          })}
+          data-testid="alert_message_notice"
+          variant="body2"


optional: remove this

Suggested change

variant="body2"

ankita-akamai · 2025-03-19T05:06:29Z

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

+      if (rootError) {
+        enqueueSnackbar(`Creating alert failed: ${rootError.reason}`, {
+          variant: 'error',
+        });


we had a fallback err msg from ui for enable/disable error handling, but we don't have it here?

This is the fall back message, for fields we are handling manually everywhere. But if no fields are given, we show in snackbar.

still the reason is from api, cc: @venkymano-akamai

linode-gh-bot · 2025-03-19T05:51:28Z

Cloud Manager UI test results

🔺 1 failing test on test run #5 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`1 Failing`	`538 Passing`	`3 Skipped`	`115m 47s`

Details

Failing Tests
	Spec	Test
❌	`smoke-community-stackscripts.spec.ts`	Community Stackscripts integration tests » pagination works with infinite scrolling

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/stackscripts/smoke-community-stackscripts.spec.ts"

santoshp210-akamai · 2025-03-19T15:14:48Z

There seems to be a case that's missing from this and an existing component can be enhanced to work with new component and reduce redundancy. So converted to draft to work on it.

santoshp210-akamai added 5 commits March 18, 2025 18:54

upcoming: [DI-23769] - Added util to handle and render Multiple Error…

0355dae

…s in forms, Added a Notice based component to render list or single accordingly

upcoming: [DI-23769] - Fixed linting issue

2f9d305

upcoming: [DI-23769] - Typecheck fix

c433779

Merge branch 'develop' into feature/multiple-error-handling

f3325f6

upcoming: [DI-23769] - Added changeset

9810b63

santoshp210-akamai marked this pull request as ready for review March 18, 2025 17:09

santoshp210-akamai requested a review from a team as a code owner March 18, 2025 17:09

santoshp210-akamai requested review from hkhalil-akamai and cliu-akamai and removed request for a team March 18, 2025 17:09

ankita-akamai assigned santoshp210-akamai Mar 19, 2025

venkymano-akamai reviewed Mar 19, 2025

View reviewed changes

venkymano-akamai approved these changes Mar 19, 2025

View reviewed changes

venkymano-akamai added Cloud Pulse Cloud Pulse - Alerting labels Mar 19, 2025

ankita-akamai reviewed Mar 19, 2025

View reviewed changes

Merge branch 'develop' into feature/multiple-error-handling

2d3c26d

ankita-akamai approved these changes Mar 19, 2025

View reviewed changes

santoshp210-akamai added the Work in Progress label Mar 19, 2025

santoshp210-akamai marked this pull request as draft March 19, 2025 15:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

upcoming: [DI-23769] - multiple error handling #11874

upcoming: [DI-23769] - multiple error handling #11874

santoshp210-akamai commented Mar 18, 2025 •

edited

Loading

venkymano-akamai Mar 19, 2025

venkymano-akamai Mar 19, 2025

venkymano-akamai Mar 19, 2025

venkymano-akamai Mar 19, 2025

venkymano-akamai left a comment

ankita-akamai Mar 19, 2025 •

edited

Loading

ankita-akamai Mar 19, 2025

santoshp210-akamai Mar 19, 2025

ankita-akamai Mar 19, 2025

linode-gh-bot commented Mar 19, 2025

santoshp210-akamai commented Mar 19, 2025

upcoming: [DI-23769] - multiple error handling #11874

Are you sure you want to change the base?

upcoming: [DI-23769] - multiple error handling #11874

Conversation

santoshp210-akamai commented Mar 18, 2025 • edited Loading

Description 📝

Changes 🔄

Target release date 🗓️

Preview 📷

How to test 🧪

Prerequisites

Verification steps

As an Author, to speed up the review process, I considered 🤔

As an Author, before moving this PR from Draft to Open, I confirmed ✅

venkymano-akamai Mar 19, 2025

Choose a reason for hiding this comment

venkymano-akamai Mar 19, 2025

Choose a reason for hiding this comment

venkymano-akamai Mar 19, 2025

Choose a reason for hiding this comment

venkymano-akamai Mar 19, 2025

Choose a reason for hiding this comment

venkymano-akamai left a comment

Choose a reason for hiding this comment

ankita-akamai Mar 19, 2025 • edited Loading

Choose a reason for hiding this comment

ankita-akamai Mar 19, 2025

Choose a reason for hiding this comment

santoshp210-akamai Mar 19, 2025

Choose a reason for hiding this comment

ankita-akamai Mar 19, 2025

Choose a reason for hiding this comment

linode-gh-bot commented Mar 19, 2025

Cloud Manager UI test results

🔺 1 failing test on test run #5 ↗︎

Details

Troubleshooting

santoshp210-akamai commented Mar 19, 2025

santoshp210-akamai commented Mar 18, 2025 •

edited

Loading

ankita-akamai Mar 19, 2025 •

edited

Loading