Alerting: improve error presentation in forms (#34309)

public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useMemo } from 'react';
-import { GrafanaTheme2 } from '@grafana/data';
-import { PageToolbar, Button, useStyles2, CustomScrollbar, Spinner, Alert } from '@grafana/ui';
+import { GrafanaTheme2, AppEvents } from '@grafana/data';
+import { PageToolbar, Button, useStyles2, CustomScrollbar, Spinner } from '@grafana/ui';
 import { css } from '@emotion/css';
 
 import { AlertTypeStep } from './AlertTypeStep';
@@ -20,6 +20,8 @@ import { rulerRuleToFormValues, getDefaultFormValues, getDefaultQueries } from '
 import { Link } from 'react-router-dom';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
 
+import { appEvents } from 'app/core/core';
+
 type Props = {
   existing?: RuleWithLocation;
 };
@@ -45,15 +47,10 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
   const formAPI = useForm<RuleFormValues>({
     mode: 'onSubmit',
     defaultValues,
+    shouldFocusError: true,
   });
 
-  const {
-    handleSubmit,
-    watch,
-    formState: { errors },
-  } = formAPI;
-
-  const hasErrors = !!Object.values(errors).filter((x) => !!x).length;
+  const { handleSubmit, watch } = formAPI;
 
   const type = watch('type');
   const dataSourceName = watch('dataSourceName');
@@ -78,6 +75,10 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
     );
   };
 
+  const onInvalid = () => {
+    appEvents.emit(AppEvents.alertError, ['There are errors in the form. Please correct them and try again!']);
+  };
+
   return (
     <FormProvider {...formAPI}>
       <form onSubmit={(e) => e.preventDefault()} className={styles.form}>
@@ -90,7 +91,7 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
           <Button
             variant="secondary"
             type="button"
-            onClick={handleSubmit((values) => submit(values, false))}
+            onClick={handleSubmit((values) => submit(values, false), onInvalid)}
             disabled={submitState.loading}
           >
             {submitState.loading && <Spinner className={styles.buttonSpinner} inline={true} />}
@@ -99,7 +100,7 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
           <Button
             variant="primary"
             type="button"
-            onClick={handleSubmit((values) => submit(values, true))}
+            onClick={handleSubmit((values) => submit(values, true), onInvalid)}
             disabled={submitState.loading}
           >
             {submitState.loading && <Spinner className={styles.buttonSpinner} inline={true} />}
@@ -109,17 +110,6 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
         <div className={styles.contentOuter}>
           <CustomScrollbar autoHeightMin="100%" hideHorizontalTrack={true}>
             <div className={styles.contentInner}>
-              {hasErrors && (
-                <Alert
-                  severity="error"
-                  title="There are errors in the form below. Please fix them and try saving again"
-                />
-              )}
-              {submitState.error && (
-                <Alert severity="error" title="Error saving rule">
-                  {submitState.error.message || (submitState.error as any)?.data?.message || String(submitState.error)}
-                </Alert>
-              )}
               <AlertTypeStep editingExistingRule={!!existing} />
               {showStep2 && (
                 <>