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

packages/grafana-ui/src/components/Forms/index.ts

@@ -10,6 +10,7 @@ import { Field } from './Field';
 import { Button, LinkButton } from './Button';
 import { Button, LinkButton } from './Button';
 import { Switch } from './Switch';
 import { Switch } from './Switch';
 import { TextArea } from './TextArea/TextArea';
 import { TextArea } from './TextArea/TextArea';
+import { Checkbox } from './Checkbox';
 
 
 const Forms = {
 const Forms = {
   RadioButtonGroup,
   RadioButtonGroup,
@@ -26,6 +27,7 @@ const Forms = {
   InputControl,
   InputControl,
   AsyncSelect,
   AsyncSelect,
   TextArea,
   TextArea,
+  Checkbox,
 };
 };
 
 
 export { ButtonVariant } from './Button';
 export { ButtonVariant } from './Button';

public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx

 import React, { useMemo } from 'react';
 import React, { useMemo } from 'react';
+
 import { Forms, Button, HorizontalGroup } from '@grafana/ui';
 import { Forms, Button, HorizontalGroup } from '@grafana/ui';
 import { e2e } from '@grafana/e2e';
 import { e2e } from '@grafana/e2e';
 import { SaveDashboardFormProps } from '../types';
 import { SaveDashboardFormProps } from '../types';
@@ -30,32 +31,32 @@ export const SaveDashboardForm: React.FC<SaveDashboardFormProps> = ({ dashboard,
     >
     >
       {({ register, errors }) => (
       {({ register, errors }) => (
         <>
         <>
-          <Forms.Field label="Changes description">
-            <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
+          <div className="gf-form-group">
+            {hasTimeChanged && (
+              <Forms.Checkbox
+                label="Save current time range as dashboard default"
                 name="saveTimerange"
                 name="saveTimerange"
                 ref={register}
                 ref={register}
                 aria-label={e2e.pages.SaveDashboardModal.selectors.saveTimerange}
                 aria-label={e2e.pages.SaveDashboardModal.selectors.saveTimerange}
               />
               />
-            </Forms.Field>
-          )}
-          {hasVariableChanged && (
-            <Forms.Field label="Save current variables" description="Dashboard variables have changed">
-              <Forms.Switch
+            )}
+            {hasVariableChanged && (
+              <Forms.Checkbox
+                label="Save current variable values as dashboard default"
                 name="saveVariables"
                 name="saveVariables"
                 ref={register}
                 ref={register}
                 aria-label={e2e.pages.SaveDashboardModal.selectors.saveVariables}
                 aria-label={e2e.pages.SaveDashboardModal.selectors.saveVariables}
               />
               />
-            </Forms.Field>
-          )}
+            )}
+            {(hasVariableChanged || hasTimeChanged) && <div className="gf-form-group" />}
+
+            <Forms.TextArea
+              name="message"
+              ref={register}
+              placeholder="Add a note to describe your changes..."
+              autoFocus
+            />
+          </div>
 
 
           <HorizontalGroup>
           <HorizontalGroup>
             <Button type="submit" aria-label={e2e.pages.SaveDashboardModal.selectors.save}>
             <Button type="submit" aria-label={e2e.pages.SaveDashboardModal.selectors.save}>