From 1d513f66b854728aef797128e3ceeb5b496a2633 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 18 Apr 2024 10:15:06 +0200
Subject: [PATCH] DashboardScene: Fixes checkbox orienation in save forms
 (#86408)

---
 .../saving/SaveDashboardForm.tsx              | 56 +++++++++----------
 .../saving/SaveProvisionedDashboardForm.tsx   |  6 +-
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/public/app/features/dashboard-scene/saving/SaveDashboardForm.tsx b/public/app/features/dashboard-scene/saving/SaveDashboardForm.tsx
index 2ebef87618d..de4b76d4cec 100644
--- a/public/app/features/dashboard-scene/saving/SaveDashboardForm.tsx
+++ b/public/app/features/dashboard-scene/saving/SaveDashboardForm.tsx
@@ -101,7 +101,7 @@ export function SaveDashboardForm({ dashboard, drawer, changeInfo }: Props) {
   }
 
   return (
-    <Stack gap={0} direction="column">
+    <Stack gap={2} direction="column">
       <SaveDashboardFormCommonOptions drawer={drawer} changeInfo={changeInfo} />
       <Field label="Message">
         <TextArea
@@ -118,7 +118,7 @@ export function SaveDashboardForm({ dashboard, drawer, changeInfo }: Props) {
           rows={5}
         />
       </Field>
-      <Box paddingTop={2}>{renderFooter(state.error)}</Box>
+      {renderFooter(state.error)}
     </Stack>
   );
 }
@@ -133,37 +133,37 @@ export function SaveDashboardFormCommonOptions({ drawer, changeInfo }: SaveDashb
   const { hasTimeChanges, hasVariableValueChanges, hasRefreshChange } = changeInfo;
 
   return (
-    <>
+    <Stack direction={'column'} alignItems={'flex-start'}>
       {hasTimeChanges && (
-        <Field label="Update default time range" description="Will make current time range the new default">
-          <Checkbox
-            id="save-timerange"
-            checked={saveTimeRange}
-            onChange={drawer.onToggleSaveTimeRange}
-            data-testid={selectors.pages.SaveDashboardModal.saveTimerange}
-          />
-        </Field>
+        <Checkbox
+          id="save-timerange"
+          checked={saveTimeRange}
+          onChange={drawer.onToggleSaveTimeRange}
+          label="Update default time range"
+          description={'Will make current time range the new default'}
+          data-testid={selectors.pages.SaveDashboardModal.saveTimerange}
+        />
       )}
       {hasRefreshChange && (
-        <Field label="Update default refresh value" description="Will make the current refresh the new default">
-          <Checkbox
-            id="save-refresh"
-            checked={saveRefresh}
-            onChange={drawer.onToggleSaveRefresh}
-            data-testid={selectors.pages.SaveDashboardModal.saveRefresh}
-          />
-        </Field>
+        <Checkbox
+          id="save-refresh"
+          label="Update default refresh value"
+          description="Will make the current refresh the new default"
+          checked={saveRefresh}
+          onChange={drawer.onToggleSaveRefresh}
+          data-testid={selectors.pages.SaveDashboardModal.saveRefresh}
+        />
       )}
       {hasVariableValueChanges && (
-        <Field label="Update default variable values" description="Will make the current values the new default">
-          <Checkbox
-            id="save-variables"
-            checked={saveVariables}
-            onChange={drawer.onToggleSaveVariables}
-            data-testid={selectors.pages.SaveDashboardModal.saveVariables}
-          />
-        </Field>
+        <Checkbox
+          id="save-variables"
+          label="Update default variable values"
+          description="Will make the current values the new default"
+          checked={saveVariables}
+          onChange={drawer.onToggleSaveVariables}
+          data-testid={selectors.pages.SaveDashboardModal.saveVariables}
+        />
       )}
-    </>
+    </Stack>
   );
 }
diff --git a/public/app/features/dashboard-scene/saving/SaveProvisionedDashboardForm.tsx b/public/app/features/dashboard-scene/saving/SaveProvisionedDashboardForm.tsx
index ded87523600..98aa2e407be 100644
--- a/public/app/features/dashboard-scene/saving/SaveProvisionedDashboardForm.tsx
+++ b/public/app/features/dashboard-scene/saving/SaveProvisionedDashboardForm.tsx
@@ -49,9 +49,9 @@ export function SaveProvisionedDashboardForm({ dashboard, drawer, changeInfo }:
           <br /> <br />
           <strong>File path: </strong> {dashboard.state.meta.provisionedExternalId}
         </div>
-        <Stack direction="column" gap={0}>
-          <SaveDashboardFormCommonOptions drawer={drawer} changeInfo={changeInfo} />
-        </Stack>
+
+        <SaveDashboardFormCommonOptions drawer={drawer} changeInfo={changeInfo} />
+
         <div className={styles.json}>
           <AutoSizer disableWidth>
             {({ height }) => (