From 020b9960c83bebcd0abf7799ae795ad616659698 Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Fri, 2 Dec 2022 13:51:01 +0100
Subject: [PATCH] Alerting: Move modal buttons before the rules table (#59703)

Move modal buttons before the rules table
---
 .../components/rules/EditRuleGroupModal.tsx   | 43 +++++++++++--------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx b/public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx
index 24376df0e68..b55647a0878 100644
--- a/public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx
+++ b/public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx
@@ -394,6 +394,26 @@ export function EditCloudGroupModal(props: ModalProps): React.ReactElement {
             {checkEvaluationIntervalGlobalLimit(watch('groupInterval')).exceedsLimit && (
               <EvaluationIntervalLimitExceeded />
             )}
+            <div className={styles.modalButtons}>
+              <Modal.ButtonRow>
+                <Button
+                  variant="secondary"
+                  type="button"
+                  disabled={loading}
+                  onClick={() => onClose(false)}
+                  fill="outline"
+                >
+                  Close
+                </Button>
+                <Button
+                  type="button"
+                  disabled={!isDirty || loading}
+                  onClick={handleSubmit((values) => onSubmit(values), onInvalid)}
+                >
+                  {loading ? 'Saving...' : 'Save changes'}
+                </Button>
+              </Modal.ButtonRow>
+            </div>
             {rulerRuleRequests && (
               <>
                 <div>List of rules that belong to this group</div>
@@ -407,25 +427,6 @@ export function EditCloudGroupModal(props: ModalProps): React.ReactElement {
                 />
               </>
             )}
-
-            <Modal.ButtonRow>
-              <Button
-                variant="secondary"
-                type="button"
-                disabled={loading}
-                onClick={() => onClose(false)}
-                fill="outline"
-              >
-                Close
-              </Button>
-              <Button
-                type="button"
-                disabled={!isDirty || loading}
-                onClick={handleSubmit((values) => onSubmit(values), onInvalid)}
-              >
-                {loading ? 'Saving...' : 'Save changes'}
-              </Button>
-            </Modal.ButtonRow>
           </>
         </form>
       </FormProvider>
@@ -437,6 +438,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
   modal: css`
     max-width: 560px;
   `,
+  modalButtons: css`
+    top: -24px;
+    position: relative;
+  `,
   formInput: css`
     width: 275px;
     & + & {