Alerting: Fix being redirected to list view when clicking Save rule button (#75510)

* Fix: dont allow 'Save rule' button and let 'Save rule and exit' in case of new rule

* Fix tests

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

@@ -152,7 +152,7 @@ describe('RuleEditor cloud', () => {
     await user.type(getLabelInput(ui.inputs.labelValue(0).get()), 'warn{enter}');
 
     // save and check what was sent to backend
-    await user.click(ui.buttons.save.get());
+    await user.click(ui.buttons.saveAndExit.get());
     await waitFor(() => expect(mocks.api.setRulerRuleGroup).toHaveBeenCalled());
     expect(mocks.api.setRulerRuleGroup).toHaveBeenCalledWith(
       { dataSourceName: 'Prom', apiVersion: 'config' },

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

@@ -145,7 +145,7 @@ describe('RuleEditor grafana managed rules', () => {
     //8 segons
 
     // save and check what was sent to backend
-    await userEvent.click(ui.buttons.save.get());
+    await userEvent.click(ui.buttons.saveAndExit.get());
     // 9seg
     await waitFor(() => expect(mocks.api.setRulerRuleGroup).toHaveBeenCalled());
     // 9seg

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

@@ -1,4 +1,4 @@
-import { waitFor, screen, within, waitForElementToBeRemoved } from '@testing-library/react';
+import { screen, waitFor, waitForElementToBeRemoved, within } from '@testing-library/react';
 import userEvent, { PointerEventsCheckLevel } from '@testing-library/user-event';
 import React from 'react';
 import { renderRuleEditor, ui } from 'test/helpers/alertingRuleEditor';
@@ -151,7 +151,7 @@ describe('RuleEditor recording rules', () => {
     await userEvent.type(getLabelInput(ui.inputs.labelValue(1).get()), 'the a-team{enter}');
 
     // try to save, find out that recording rule name is invalid
-    await userEvent.click(ui.buttons.save.get());
+    await userEvent.click(ui.buttons.saveAndExit.get());
     await waitFor(() =>
       expect(
         byText(
@@ -166,7 +166,7 @@ describe('RuleEditor recording rules', () => {
     await userEvent.type(await ui.inputs.name.find(), 'my:great:new:recording:rule');
 
     // save and check what was sent to backend
-    await userEvent.click(ui.buttons.save.get());
+    await userEvent.click(ui.buttons.saveAndExit.get());
     await waitFor(() => expect(mocks.api.setRulerRuleGroup).toHaveBeenCalled());
     expect(mocks.api.setRulerRuleGroup).toHaveBeenCalledWith(
       { dataSourceName: 'Prom', apiVersion: 'legacy' },

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

@@ -166,16 +166,18 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
 
   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}
-      >
-        {submitState.loading && <Spinner className={styles.buttonSpinner} inline={true} />}
-        Save rule
-      </Button>
+      {existing && (
+        <Button
+          variant="primary"
+          type="button"
+          size="sm"
+          onClick={handleSubmit((values) => submit(values, false), onInvalid)}
+          disabled={submitState.loading}
+        >
+          {submitState.loading && <Spinner className={styles.buttonSpinner} inline={true} />}
+          Save rule
+        </Button>
+      )}
       <Button
         variant="primary"
         type="button"

public/test/helpers/alertingRuleEditor.tsx

@@ -25,6 +25,7 @@ export const ui = {
     expr: byTestId('expr'),
   },
   buttons: {
+    saveAndExit: byRole('button', { name: 'Save rule and exit' }),
     save: byRole('button', { name: 'Save rule' }),
     addAnnotation: byRole('button', { name: /Add info/ }),
     addLabel: byRole('button', { name: /Add label/ }),