Alerting: update panel alert tab (#33850)

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

@@ -18,6 +18,7 @@ import { useDispatch } from 'react-redux';
 import { useCleanup } from 'app/core/hooks/useCleanup';
 import { rulerRuleToFormValues, defaultFormValues, getDefaultQueries } from '../../utils/rule-form';
 import { Link } from 'react-router-dom';
+import { useQueryParams } from 'app/core/hooks/useQueryParams';
 
 type Props = {
   existing?: RuleWithLocation;
@@ -26,6 +27,9 @@ type Props = {
 export const AlertRuleForm: FC<Props> = ({ existing }) => {
   const styles = useStyles2(getStyles);
   const dispatch = useDispatch();
+  const [queryParams] = useQueryParams();
+
+  const returnTo: string = (queryParams['returnTo'] as string | undefined) ?? '/alerting/list';
 
   const defaultValues: RuleFormValues = useMemo(() => {
     if (existing) {
@@ -34,8 +38,9 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
     return {
       ...defaultFormValues,
       queries: getDefaultQueries(),
+      ...(queryParams['defaults'] ? JSON.parse(queryParams['defaults'] as string) : {}),
     };
-  }, [existing]);
+  }, [existing, queryParams]);
 
   const formAPI = useForm<RuleFormValues>({
     mode: 'onSubmit',
@@ -68,7 +73,7 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
           labels: values.labels?.filter(({ key }) => !!key) ?? [],
         },
         existing,
-        exitOnSave,
+        redirectOnSave: exitOnSave ? returnTo : undefined,
       })
     );
   };
@@ -77,7 +82,7 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
     <FormProvider {...formAPI}>
       <form onSubmit={handleSubmit((values) => submit(values, false))} className={styles.form}>
         <PageToolbar title="Create alert rule" pageIcon="bell">
-          <Link to="/alerting/list">
+          <Link to={returnTo}>
             <Button variant="secondary" disabled={submitState.loading} type="button" fill="outline">
               Cancel
             </Button>

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

@@ -1,13 +1,7 @@
 import { SelectableValue } from '@grafana/data';
 import React, { FC, useMemo } from 'react';
 import { SelectWithAdd } from './SelectWIthAdd';
-
-enum AnnotationOptions {
-  description = 'Description',
-  dashboard = 'Dashboard',
-  summary = 'Summary',
-  runbook = 'Runbook URL',
-}
+import { Annotation, annotationLabels } from '../../utils/constants';
 
 interface Props {
   onChange: (value: string) => void;
@@ -21,9 +15,9 @@ interface Props {
 export const AnnotationKeyInput: FC<Props> = ({ value, existingKeys, ...rest }) => {
   const annotationOptions = useMemo(
     (): SelectableValue[] =>
-      Object.entries(AnnotationOptions)
-        .filter(([optKey]) => !existingKeys.includes(optKey)) // remove keys already taken in other annotations
-        .map(([key, value]) => ({ value: key, label: value })),
+      Object.values(Annotation)
+        .filter((key) => !existingKeys.includes(key)) // remove keys already taken in other annotations
+        .map((key) => ({ value: key, label: annotationLabels[key] })),
     [existingKeys]
   );
 
@@ -31,7 +25,7 @@ export const AnnotationKeyInput: FC<Props> = ({ value, existingKeys, ...rest })
     <SelectWithAdd
       value={value}
       options={annotationOptions}
-      custom={!!value && !Object.keys(AnnotationOptions).includes(value)}
+      custom={!!value && !(Object.values(Annotation) as string[]).includes(value)}
       {...rest}
     />
   );

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

@@ -29,7 +29,7 @@ const AnnotationsField: FC = () => {
           return (
             <div className={styles.flexColumn}>
               {fields.map((field, index) => (
-                <div key={`${field.annotationKey}-${index}`} className={styles.flexRow}>
+                <div key={field.id} className={styles.flexRow}>
                   <Field
                     className={styles.field}
                     invalid={!!errors.annotations?.[index]?.key?.message}
@@ -38,7 +38,7 @@ const AnnotationsField: FC = () => {
                     <InputControl
                       name={`annotations[${index}].key`}
                       render={({ field: { ref, ...field } }) => (
-                        <AnnotationKeyInput {...field} existingKeys={existingKeys(index)} width={15} />
+                        <AnnotationKeyInput {...field} existingKeys={existingKeys(index)} width={18} />
                       )}
                       control={control}
                       rules={{ required: { value: !!annotations[index]?.value, message: 'Required.' } }}
@@ -89,7 +89,7 @@ const AnnotationsField: FC = () => {
 
 const getStyles = (theme: GrafanaTheme) => ({
   annotationTextArea: css`
-    width: 450px;
+    width: 426px;
     height: 76px;
   `,
   addAnnotationsButton: css`

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

@@ -1,5 +1,6 @@
 import { SelectableValue } from '@grafana/data';
 import { Field, InputControl, Select } from '@grafana/ui';
+import { ExpressionDatasourceID } from 'app/features/expressions/ExpressionDatasource';
 import React, { FC, useEffect, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { RuleFormValues } from '../../types/rule-form';
@@ -25,12 +26,15 @@ export const ConditionField: FC = () => {
     [queries]
   );
 
-  // if option no longer exists, reset it
+  // reset condition if option no longer exists or if it is unset, but there are options available
   useEffect(() => {
+    const expressions = queries.filter((query) => query.model.datasource === ExpressionDatasourceID);
     if (condition && !options.find(({ value }) => value === condition)) {
-      setValue('condition', null);
+      setValue('condition', expressions.length ? expressions[expressions.length - 1].refId : null);
+    } else if (!condition && expressions.length) {
+      setValue('condition', expressions[expressions.length - 1].refId);
     }
-  }, [condition, options, setValue]);
+  }, [condition, options, queries, setValue]);
 
   return (
     <Field

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

@@ -25,7 +25,7 @@ const LabelsField: FC<Props> = ({ className }) => {
           return (
             <>
               <div className={styles.flexRow}>
-                <InlineLabel width={15}>Labels</InlineLabel>
+                <InlineLabel width={18}>Labels</InlineLabel>
                 <div className={styles.flexColumn}>
                   {fields.map((field, index) => {
                     return (
@@ -128,7 +128,7 @@ const getStyles = (theme: GrafanaTheme) => {
       margin-left: ${theme.spacing.xs};
     `,
     labelInput: css`
-      width: 207px;
+      width: 183px;
       margin-bottom: ${theme.spacing.sm};
       & + & {
         margin-left: ${theme.spacing.sm};