Make quick eval buttons in group edit set dirty state on form and handle invalid case

public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx

@@ -234,7 +234,7 @@ export function EditCloudGroupModal(props: ModalProps): React.ReactElement {
     handleSubmit,
     register,
     watch,
-    formState: { isDirty, errors },
+    formState: { isDirty, errors, isValid },
     setValue,
     getValues,
   } = formAPI;
@@ -326,7 +326,7 @@ export function EditCloudGroupModal(props: ModalProps): React.ReactElement {
                 />
                 <EvaluationGroupQuickPick
                   currentInterval={getValues('groupInterval')}
-                  onSelect={(value) => setValue('groupInterval', value, { shouldValidate: true })}
+                  onSelect={(value) => setValue('groupInterval', value, { shouldValidate: true, shouldDirty: true })}
                 />
               </Stack>
             </Field>
@@ -359,7 +359,7 @@ export function EditCloudGroupModal(props: ModalProps): React.ReactElement {
                 </Button>
                 <Button
                   type="button"
-                  disabled={!isDirty || loading}
+                  disabled={!isDirty || !isValid || loading}
                   onClick={handleSubmit((values) => onSubmit(values), onInvalid)}
                 >
                   {loading ? 'Saving...' : 'Save'}