Alerting: Keep rule form buttons always on top (#71056)

* Keep form buttons always on top

* Fix tests

public/app/features/alerting/unified/RuleEditorCloudRules.test.tsx

@@ -36,6 +36,10 @@ jest.mock('app/features/query/components/QueryEditorRow', () => ({
   QueryEditorRow: () => <p>hi</p>,
 }));
 
+jest.mock('app/core/components/AppChrome/AppChromeUpdate', () => ({
+  AppChromeUpdate: ({ actions }: { actions: React.ReactNode }) => <div>{actions}</div>,
+}));
+
 jest.spyOn(config, 'getAllDataSources');
 
 // these tests are rather slow because we have to wait for various API calls and mocks to be called

public/app/features/alerting/unified/RuleEditorExisting.test.tsx

@@ -32,6 +32,10 @@ jest.mock('./components/rule-editor/ExpressionEditor', () => ({
   ),
 }));
 
+jest.mock('app/core/components/AppChrome/AppChromeUpdate', () => ({
+  AppChromeUpdate: ({ actions }: { actions: React.ReactNode }) => <div>{actions}</div>,
+}));
+
 jest.mock('./api/buildInfo');
 jest.mock('./api/ruler');
 jest.mock('../../../../app/features/manage-dashboards/state/actions');

public/app/features/alerting/unified/RuleEditorGrafanaRules.test.tsx

@@ -32,6 +32,10 @@ jest.mock('./api/buildInfo');
 jest.mock('./api/ruler');
 jest.mock('../../../../app/features/manage-dashboards/state/actions');
 
+jest.mock('app/core/components/AppChrome/AppChromeUpdate', () => ({
+  AppChromeUpdate: ({ actions }: { actions: React.ReactNode }) => <div>{actions}</div>,
+}));
+
 // there's no angular scope in test and things go terribly wrong when trying to render the query editor row.
 // lets just skip it
 jest.mock('app/features/query/components/QueryEditorRow', () => ({

public/app/features/alerting/unified/RuleEditorRecordingRule.test.tsx

@@ -39,6 +39,10 @@ jest.mock('./components/rule-editor/RecordingRuleEditor', () => ({
   },
 }));
 
+jest.mock('app/core/components/AppChrome/AppChromeUpdate', () => ({
+  AppChromeUpdate: ({ actions }: { actions: React.ReactNode }) => <div>{actions}</div>,
+}));
+
 jest.mock('./api/buildInfo');
 jest.mock('./api/ruler');
 jest.mock('../../../../app/features/manage-dashboards/state/actions');

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

@@ -7,6 +7,7 @@ import { Link, useParams } from 'react-router-dom';
 import { GrafanaTheme2 } from '@grafana/data';
 import { config, logInfo } from '@grafana/runtime';
 import { Button, ConfirmModal, CustomScrollbar, Field, HorizontalGroup, Input, Spinner, useStyles2 } from '@grafana/ui';
+import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
 import { useAppNotification } from 'app/core/copy/appNotification';
 import { contextSrv } from 'app/core/core';
 import { useCleanup } from 'app/core/hooks/useCleanup';
@@ -192,13 +193,12 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
   const evaluateEveryInForm = watch('evaluateEvery');
   useEffect(() => setEvaluateEvery(evaluateEveryInForm), [evaluateEveryInForm]);
 
-  return (
-    <FormProvider {...formAPI}>
-      <form onSubmit={(e) => e.preventDefault()} className={styles.form}>
+  const actionButtons = (
     <HorizontalGroup height="auto" justify="flex-end">
       <Button
         variant="primary"
         type="button"
+        size="sm"
         onClick={handleSubmit((values) => submit(values, false), onInvalid)}
         disabled={submitState.loading}
       >
@@ -208,6 +208,7 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
       <Button
         variant="primary"
         type="button"
+        size="sm"
         onClick={handleSubmit((values) => submit(values, true), onInvalid)}
         disabled={submitState.loading}
       >
@@ -215,12 +216,12 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
         Save rule and exit
       </Button>
       <Link to={returnTo}>
-            <Button variant="secondary" disabled={submitState.loading} type="button" onClick={cancelRuleCreation}>
+        <Button variant="secondary" disabled={submitState.loading} type="button" onClick={cancelRuleCreation} size="sm">
           Cancel
         </Button>
       </Link>
       {existing ? (
-            <Button variant="destructive" type="button" onClick={() => setShowDeleteModal(true)}>
+        <Button fill="outline" variant="destructive" type="button" onClick={() => setShowDeleteModal(true)} size="sm">
           Delete
         </Button>
       ) : null}
@@ -230,11 +231,18 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
           type="button"
           onClick={() => setShowEditYaml(true)}
           disabled={submitState.loading}
+          size="sm"
         >
           Edit YAML
         </Button>
       )}
     </HorizontalGroup>
+  );
+
+  return (
+    <FormProvider {...formAPI}>
+      <AppChromeUpdate actions={actionButtons} />
+      <form onSubmit={(e) => e.preventDefault()} className={styles.form}>
         <div className={styles.contentOuter}>
           <CustomScrollbar autoHeightMin="100%" hideHorizontalTrack={true}>
             <div className={styles.contentInner}>