Dashboard save: Persist details message when navigating through dashboard save drawer's tabs. (#54084)

* Dashboard: Fix `changes note` textarea to save draft when going to other tabs

* Do not show Changes tab if there are no changes

* Fix comments

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.tsx

@@ -153,7 +153,9 @@ export const SaveDashboardDrawer = ({ dashboard, onDismiss, onSaveSuccess, isCop
       tabs={
         <TabsBar>
           <Tab label={'Details'} active={!showDiff} onChangeTab={() => setShowDiff(false)} />
-          <Tab label={'Changes'} active={showDiff} onChangeTab={() => setShowDiff(true)} counter={data.diffCount} />
+          {data.hasChanges && (
+            <Tab label={'Changes'} active={showDiff} onChangeTab={() => setShowDiff(true)} counter={data.diffCount} />
+          )}
         </TabsBar>
       }
       expandable

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

@@ -119,4 +119,33 @@ describe('SaveDashboardAsForm', () => {
       });
     });
   });
+  describe('saved message draft rendered', () => {
+    it('renders saved message draft if it was filled before', () => {
+      render(
+        <SaveDashboardForm
+          dashboard={new DashboardModel({})}
+          onCancel={() => {}}
+          onSuccess={() => {}}
+          onSubmit={async () => {
+            return {};
+          }}
+          saveModel={{
+            clone: new DashboardModel({}),
+            diff: {},
+            diffCount: 0,
+            hasChanges: true,
+          }}
+          options={{ message: 'Saved draft' }}
+          onOptionsChange={(opts: SaveDashboardOptions) => {
+            return;
+          }}
+        />
+      );
+
+      const messageTextArea = screen.getByLabelText('message');
+
+      expect(messageTextArea).toBeInTheDocument();
+      expect(messageTextArea).toHaveTextContent('Saved draft');
+    });
+  });
 });

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

@@ -56,53 +56,69 @@ export const SaveDashboardForm = ({
         }
       }}
     >
-      {({ register, errors }) => (
-        <Stack direction="column" gap={2}>
-          {hasTimeChanged && (
-            <Checkbox
-              checked={!!options.saveTimerange}
-              onChange={() =>
+      {({ register, errors }) => {
+        const messageProps = register('message');
+        return (
+          <Stack direction="column" gap={2}>
+            {hasTimeChanged && (
+              <Checkbox
+                checked={!!options.saveTimerange}
+                onChange={() =>
+                  onOptionsChange({
+                    ...options,
+                    saveTimerange: !options.saveTimerange,
+                  })
+                }
+                label="Save current time range as dashboard default"
+                aria-label={selectors.pages.SaveDashboardModal.saveTimerange}
+              />
+            )}
+            {hasVariableChanged && (
+              <Checkbox
+                checked={!!options.saveVariables}
+                onChange={() =>
+                  onOptionsChange({
+                    ...options,
+                    saveVariables: !options.saveVariables,
+                  })
+                }
+                label="Save current variable values as dashboard default"
+                aria-label={selectors.pages.SaveDashboardModal.saveVariables}
+              />
+            )}
+            <TextArea
+              {...messageProps}
+              aria-label="message"
+              value={options.message}
+              onChange={(e) => {
                 onOptionsChange({
                   ...options,
-                  saveTimerange: !options.saveTimerange,
-                })
-              }
-              label="Save current time range as dashboard default"
-              aria-label={selectors.pages.SaveDashboardModal.saveTimerange}
+                  message: e.currentTarget.value,
+                });
+                messageProps.onChange(e);
+              }}
+              placeholder="Add a note to describe your changes."
+              autoFocus
+              rows={5}
             />
-          )}
-          {hasVariableChanged && (
-            <Checkbox
-              checked={!!options.saveVariables}
-              onChange={() =>
-                onOptionsChange({
-                  ...options,
-                  saveVariables: !options.saveVariables,
-                })
-              }
-              label="Save current variable values as dashboard default"
-              aria-label={selectors.pages.SaveDashboardModal.saveVariables}
-            />
-          )}
 
-          <TextArea {...register('message')} placeholder="Add a note to describe your changes." autoFocus rows={5} />
-
-          <Stack alignItems="center">
-            <Button variant="secondary" onClick={onCancel} fill="outline">
-              Cancel
-            </Button>
-            <Button
-              type="submit"
-              disabled={!saveModel.hasChanges}
-              icon={saving ? 'fa fa-spinner' : undefined}
-              aria-label={selectors.pages.SaveDashboardModal.save}
-            >
-              Save
-            </Button>
-            {!saveModel.hasChanges && <div>No changes to save</div>}
+            <Stack alignItems="center">
+              <Button variant="secondary" onClick={onCancel} fill="outline">
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={!saveModel.hasChanges}
+                icon={saving ? 'fa fa-spinner' : undefined}
+                aria-label={selectors.pages.SaveDashboardModal.save}
+              >
+                Save
+              </Button>
+              {!saveModel.hasChanges && <div>No changes to save</div>}
+            </Stack>
           </Stack>
-        </Stack>
-      )}
+        );
+      }}
     </Form>
   );
 };