From 4d235b978e24cc22e31be04635d68b3fc0b5c653 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 16 Mar 2020 15:33:18 +0100
Subject: [PATCH] SaveDashboard: Updated modal design/layout a bit (#22810)

(cherry picked from commit 46165a7f7b3652bfa2a08504551e86db4c32678d)
---
 .../grafana-ui/src/components/Forms/index.ts  |  2 +
 .../SaveDashboard/forms/SaveDashboardForm.tsx | 41 ++++++++++---------
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/packages/grafana-ui/src/components/Forms/index.ts b/packages/grafana-ui/src/components/Forms/index.ts
index 6edc4796e82..55f9b4ff077 100644
--- a/packages/grafana-ui/src/components/Forms/index.ts
+++ b/packages/grafana-ui/src/components/Forms/index.ts
@@ -10,6 +10,7 @@ import { Field } from './Field';
 import { Button, LinkButton } from './Button';
 import { Switch } from './Switch';
 import { TextArea } from './TextArea/TextArea';
+import { Checkbox } from './Checkbox';
 
 const Forms = {
   RadioButtonGroup,
@@ -26,6 +27,7 @@ const Forms = {
   InputControl,
   AsyncSelect,
   TextArea,
+  Checkbox,
 };
 
 export { ButtonVariant } from './Button';
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
index cc5d9748905..4768a8c80d7 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+
 import { Forms, Button, HorizontalGroup } from '@grafana/ui';
 import { e2e } from '@grafana/e2e';
 import { SaveDashboardFormProps } from '../types';
@@ -30,32 +31,32 @@ export const SaveDashboardForm: React.FC<SaveDashboardFormProps> = ({ dashboard,
     >
       {({ register, errors }) => (
         <>
-          <Forms.Field label="Changes description">
+          <div className="gf-form-group">
+            {hasTimeChanged && (
+              <Forms.Checkbox
+                label="Save current time range as dashboard default"
+                name="saveTimerange"
+                ref={register}
+                aria-label={e2e.pages.SaveDashboardModal.selectors.saveTimerange}
+              />
+            )}
+            {hasVariableChanged && (
+              <Forms.Checkbox
+                label="Save current variable values as dashboard default"
+                name="saveVariables"
+                ref={register}
+                aria-label={e2e.pages.SaveDashboardModal.selectors.saveVariables}
+              />
+            )}
+            {(hasVariableChanged || hasTimeChanged) && <div className="gf-form-group" />}
+
             <Forms.TextArea
               name="message"
               ref={register}
               placeholder="Add a note to describe your changes..."
               autoFocus
             />
-          </Forms.Field>
-          {hasTimeChanged && (
-            <Forms.Field label="Save current time range" description="Dashboard time range has changed">
-              <Forms.Switch
-                name="saveTimerange"
-                ref={register}
-                aria-label={e2e.pages.SaveDashboardModal.selectors.saveTimerange}
-              />
-            </Forms.Field>
-          )}
-          {hasVariableChanged && (
-            <Forms.Field label="Save current variables" description="Dashboard variables have changed">
-              <Forms.Switch
-                name="saveVariables"
-                ref={register}
-                aria-label={e2e.pages.SaveDashboardModal.selectors.saveVariables}
-              />
-            </Forms.Field>
-          )}
+          </div>
 
           <HorizontalGroup>
             <Button type="submit" aria-label={e2e.pages.SaveDashboardModal.selectors.save}>