From 482e660e01fdb422fed052e1a18a395f04c98a4e Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Mon, 15 Apr 2024 16:31:20 +0100
Subject: [PATCH] [v11.0.x] SaveDashboardForm: Remove deprecated Form usage
 (#86193)

SaveDashboardForm: Remove deprecated Form usage (#84172)

* SaveDashboardForm: Remove deprecated Form usage

* Update

(cherry picked from commit d105323f15e071e4c0f4db1d8f9c5a5d358603a7)

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
---
 .../components/RowOptions/RowOptionsForm.tsx  |   3 +-
 .../SaveDashboard/forms/SaveDashboardForm.tsx | 160 +++++++++---------
 2 files changed, 79 insertions(+), 84 deletions(-)

diff --git a/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx b/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx
index b486aabf5b8..13705193411 100644
--- a/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx
+++ b/public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx
@@ -1,7 +1,8 @@
 import React, { useCallback, useState } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
-import { Button, Field, Form, Modal, Input, Alert } from '@grafana/ui';
+import { Button, Field, Modal, Input, Alert } from '@grafana/ui';
+import { Form } from 'app/core/components/Form/Form';
 
 import { RepeatRowSelect } from '../RepeatRowSelect/RepeatRowSelect';
 
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
index 3f4b172b5a4..d742c75550e 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
@@ -5,16 +5,12 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { config } from '@grafana/runtime';
 import { Dashboard } from '@grafana/schema';
-import { Button, Checkbox, Form, TextArea, useStyles2, Stack } from '@grafana/ui';
+import { Button, Checkbox, TextArea, useStyles2, Stack } from '@grafana/ui';
 import { DashboardModel } from 'app/features/dashboard/state';
 
 import { GenAIDashboardChangesButton } from '../../GenAI/GenAIDashboardChangesButton';
 import { SaveDashboardData, SaveDashboardOptions } from '../types';
 
-interface FormDTO {
-  message: string;
-}
-
 export type SaveProps = {
   dashboard: DashboardModel; // original
   isLoading: boolean;
@@ -44,8 +40,9 @@ export const SaveDashboardForm = ({
   const styles = useStyles2(getStyles);
 
   return (
-    <Form
-      onSubmit={async (data: FormDTO) => {
+    <form
+      onSubmit={async (event) => {
+        event.preventDefault();
         if (!onSubmit) {
           return;
         }
@@ -58,84 +55,81 @@ export const SaveDashboardForm = ({
           setSaving(false);
         }
       }}
+      style={{ maxWidth: 600 }}
     >
-      {({ register, errors }) => {
-        return (
-          <Stack gap={2} direction="column" alignItems="flex-start">
-            {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}
-              />
-            )}
-            <div className={styles.message}>
-              {config.featureToggles.aiGeneratedDashboardChanges && (
-                <GenAIDashboardChangesButton
-                  dashboard={dashboard}
-                  onGenerate={(text) => {
-                    onOptionsChange({
-                      ...options,
-                      message: text,
-                    });
-                    setMessage(text);
-                  }}
-                  disabled={!saveModel.hasChanges}
-                />
-              )}
-              <TextArea
-                aria-label="message"
-                value={message}
-                onChange={(e) => {
-                  onOptionsChange({
-                    ...options,
-                    message: e.currentTarget.value,
-                  });
-                  setMessage(e.currentTarget.value);
-                }}
-                placeholder="Add a note to describe your changes."
-                autoFocus
-                rows={5}
-              />
-            </div>
+      <Stack gap={2} direction="column" alignItems="flex-start">
+        {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}
+          />
+        )}
+        <div className={styles.message}>
+          {config.featureToggles.aiGeneratedDashboardChanges && (
+            <GenAIDashboardChangesButton
+              dashboard={dashboard}
+              onGenerate={(text) => {
+                onOptionsChange({
+                  ...options,
+                  message: text,
+                });
+                setMessage(text);
+              }}
+              disabled={!saveModel.hasChanges}
+            />
+          )}
+          <TextArea
+            aria-label="message"
+            value={message}
+            onChange={(e) => {
+              onOptionsChange({
+                ...options,
+                message: e.currentTarget.value,
+              });
+              setMessage(e.currentTarget.value);
+            }}
+            placeholder="Add a note to describe your changes."
+            autoFocus
+            rows={5}
+          />
+        </div>
 
-            <Stack alignItems="center">
-              <Button variant="secondary" onClick={onCancel} fill="outline">
-                Cancel
-              </Button>
-              <Button
-                type="submit"
-                disabled={!saveModel.hasChanges || isLoading}
-                icon={saving ? 'spinner' : undefined}
-                aria-label={selectors.pages.SaveDashboardModal.save}
-              >
-                {isLoading ? 'Saving...' : 'Save'}
-              </Button>
-              {!saveModel.hasChanges && <div>No changes to save</div>}
-            </Stack>
-          </Stack>
-        );
-      }}
-    </Form>
+        <Stack alignItems="center">
+          <Button variant="secondary" onClick={onCancel} fill="outline">
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            disabled={!saveModel.hasChanges || isLoading}
+            icon={saving ? 'spinner' : undefined}
+            aria-label={selectors.pages.SaveDashboardModal.save}
+          >
+            {isLoading ? 'Saving...' : 'Save'}
+          </Button>
+          {!saveModel.hasChanges && <div>No changes to save</div>}
+        </Stack>
+      </Stack>
+    </form>
   );
 };