SaveDashboard: Updated modal design/layout a bit (#22810)

(cherry picked from commit 46165a7f7b)

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';

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>
+          </div>
-          {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>
-          )}
 
           <HorizontalGroup>
             <Button type="submit" aria-label={e2e.pages.SaveDashboardModal.selectors.save}>