Chore: Add e2e selectors to alert rule page (#86909)

wip

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -300,6 +300,15 @@ export const Components = {
     groupToggle: 'data-testid group-collapse-toggle',
     toggle: 'data-testid collapse-toggle',
     expandedContent: 'data-testid expanded-content',
+    previewButton: 'data-testid alert-rule preview-button',
+    ruleNameField: 'data-testid alert-rule name-field',
+    newFolderButton: 'data-testid alert-rule new-folder-button',
+    newFolderNameField: 'data-testid alert-rule name-folder-name-field',
+    newFolderNameCreateButton: 'data-testid alert-rule name-folder-name-create-button',
+    newEvaluationGroupButton: 'data-testid alert-rule new-evaluation-group-button',
+    newEvaluationGroupName: 'data-testid alert-rule new-evaluation-group-name',
+    newEvaluationGroupInterval: 'data-testid alert-rule new-evaluation-group-interval',
+    newEvaluationGroupCreate: 'data-testid alert-rule new-evaluation-group-create-button',
   },
   Alert: {
     /**

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useFormContext } from 'react-hook-form';
 
+import { selectors } from '@grafana/e2e-selectors';
 import { Field, Input, Text } from '@grafana/ui';
 
 import { RuleFormType, RuleFormValues } from '../../types/rule-form';
@@ -35,6 +36,7 @@ export const AlertRuleNameInput = () => {
     >
       <Field label="Name" error={errors?.name?.message} invalid={!!errors.name?.message}>
         <Input
+          data-testid={selectors.components.AlertRules.ruleNameField}
           id="name"
           width={35}
           {...register('name', {

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

@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormProvider, useForm, useFormContext, Controller } from 'react-hook-form';
 
 import { AppEvents, GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { AsyncSelect, Box, Button, Field, Input, Label, Modal, Stack, Text, useStyles2 } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
 import { contextSrv } from 'app/core/services/context_srv';
@@ -180,6 +181,7 @@ export function FolderAndGroup({
                     fill="outline"
                     variant="secondary"
                     disabled={!contextSrv.hasPermission(AccessControlAction.FoldersCreate)}
+                    data-testid={selectors.components.AlertRules.newFolderButton}
                   >
                     New folder
                   </Button>
@@ -258,6 +260,7 @@ export function FolderAndGroup({
             fill="outline"
             variant="secondary"
             disabled={!folder}
+            data-testid={selectors.components.AlertRules.newEvaluationGroupButton}
           >
             New evaluation group
           </Button>
@@ -309,6 +312,7 @@ function FolderCreationModal({
           invalid={error}
         >
           <Input
+            data-testid={selectors.components.AlertRules.newFolderNameField}
             autoFocus={true}
             id="folderName"
             placeholder="Enter a name"
@@ -322,7 +326,11 @@ function FolderCreationModal({
           <Button variant="secondary" type="button" onClick={onClose}>
             Cancel
           </Button>
-          <Button type="submit" disabled={!title || error}>
+          <Button
+            type="submit"
+            disabled={!title || error}
+            data-testid={selectors.components.AlertRules.newFolderNameCreateButton}
+          >
             Create
           </Button>
         </Modal.ButtonRow>
@@ -388,6 +396,7 @@ function EvaluationGroupCreationModal({
             invalid={Boolean(formState.errors.group)}
           >
             <Input
+              data-testid={selectors.components.AlertRules.newEvaluationGroupName}
               className={styles.formInput}
               autoFocus={true}
               id={'group'}
@@ -407,6 +416,7 @@ function EvaluationGroupCreationModal({
           >
             <Stack direction="column">
               <Input
+                data-testid={selectors.components.AlertRules.newEvaluationGroupInterval}
                 className={styles.formInput}
                 id={evaluateEveryId}
                 placeholder={DEFAULT_GROUP_EVALUATION_INTERVAL}
@@ -421,7 +431,11 @@ function EvaluationGroupCreationModal({
             <Button variant="secondary" type="button" onClick={onCancel}>
               Cancel
             </Button>
-            <Button type="submit" disabled={!formState.isValid}>
+            <Button
+              type="submit"
+              disabled={!formState.isValid}
+              data-testid={selectors.components.AlertRules.newEvaluationGroupCreate}
+            >
               Create
             </Button>
           </Modal.ButtonRow>

public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx

@@ -497,7 +497,13 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: P
               </Button>
             )}
             {!isPreviewLoading && (
-              <Button icon="sync" type="button" onClick={() => runQueriesPreview()} disabled={emptyQueries}>
+              <Button
+                data-testid={selectors.components.AlertRules.previewButton}
+                icon="sync"
+                type="button"
+                onClick={() => runQueriesPreview()}
+                disabled={emptyQueries}
+              >
                 Preview
               </Button>
             )}