Skip to content

Commit d105323

Browse files
Clarity-89Clarity-89
authored
SaveDashboardForm: Remove deprecated Form usage (#84172)
* SaveDashboardForm: Remove deprecated Form usage * Update
1 parent 0f68587 commit d105323

File tree

2 files changed

+79
-84
lines changed

2 files changed

+79
-84
lines changed

‎public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React, { useCallback, useState } from 'react';
22

33
import { selectors } from '@grafana/e2e-selectors';
4-
import { Button, Field, Form, Modal, Input, Alert } from '@grafana/ui';
4+
import { Button, Field, Modal, Input, Alert } from '@grafana/ui';
5+
import { Form } from 'app/core/components/Form/Form';
56

67
import { RepeatRowSelect } from '../RepeatRowSelect/RepeatRowSelect';
78

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

Lines changed: 77 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,12 @@ import { GrafanaTheme2 } from '@grafana/data';
55
import { selectors } from '@grafana/e2e-selectors';
66
import { config } from '@grafana/runtime';
77
import { Dashboard } from '@grafana/schema';
8-
import { Button, Checkbox, Form, TextArea, useStyles2, Stack } from '@grafana/ui';
8+
import { Button, Checkbox, TextArea, useStyles2, Stack } from '@grafana/ui';
99
import { DashboardModel } from 'app/features/dashboard/state';
1010

1111
import { GenAIDashboardChangesButton } from '../../GenAI/GenAIDashboardChangesButton';
1212
import { SaveDashboardData, SaveDashboardOptions } from '../types';
1313

14-
interface FormDTO {
15-
message: string;
16-
}
17-
1814
export type SaveProps = {
1915
dashboard: DashboardModel; // original
2016
isLoading: boolean;
@@ -44,8 +40,9 @@ export const SaveDashboardForm = ({
4440
const styles = useStyles2(getStyles);
4541

4642
return (
47-
<Form
48-
onSubmit={async (data: FormDTO) => {
43+
<form
44+
onSubmit={async (event) => {
45+
event.preventDefault();
4946
if (!onSubmit) {
5047
return;
5148
}
@@ -58,84 +55,81 @@ export const SaveDashboardForm = ({
5855
setSaving(false);
5956
}
6057
}}
58+
style={{ maxWidth: 600 }}
6159
>
62-
{({ register, errors }) => {
63-
return (
64-
<Stack gap={2} direction="column" alignItems="flex-start">
65-
{hasTimeChanged && (
66-
<Checkbox
67-
checked={!!options.saveTimerange}
68-
onChange={() =>
69-
onOptionsChange({
70-
...options,
71-
saveTimerange: !options.saveTimerange,
72-
})
73-
}
74-
label="Save current time range as dashboard default"
75-
aria-label={selectors.pages.SaveDashboardModal.saveTimerange}
76-
/>
77-
)}
78-
{hasVariableChanged && (
79-
<Checkbox
80-
checked={!!options.saveVariables}
81-
onChange={() =>
82-
onOptionsChange({
83-
...options,
84-
saveVariables: !options.saveVariables,
85-
})
86-
}
87-
label="Save current variable values as dashboard default"
88-
aria-label={selectors.pages.SaveDashboardModal.saveVariables}
89-
/>
90-
)}
91-
<div className={styles.message}>
92-
{config.featureToggles.aiGeneratedDashboardChanges && (
93-
<GenAIDashboardChangesButton
94-
dashboard={dashboard}
95-
onGenerate={(text) => {
96-
onOptionsChange({
97-
...options,
98-
message: text,
99-
});
100-
setMessage(text);
101-
}}
102-
disabled={!saveModel.hasChanges}
103-
/>
104-
)}
105-
<TextArea
106-
aria-label="message"
107-
value={message}
108-
onChange={(e) => {
109-
onOptionsChange({
110-
...options,
111-
message: e.currentTarget.value,
112-
});
113-
setMessage(e.currentTarget.value);
114-
}}
115-
placeholder="Add a note to describe your changes."
116-
autoFocus
117-
rows={5}
118-
/>
119-
</div>
60+
<Stack gap={2} direction="column" alignItems="flex-start">
61+
{hasTimeChanged && (
62+
<Checkbox
63+
checked={!!options.saveTimerange}
64+
onChange={() =>
65+
onOptionsChange({
66+
...options,
67+
saveTimerange: !options.saveTimerange,
68+
})
69+
}
70+
label="Save current time range as dashboard default"
71+
aria-label={selectors.pages.SaveDashboardModal.saveTimerange}
72+
/>
73+
)}
74+
{hasVariableChanged && (
75+
<Checkbox
76+
checked={!!options.saveVariables}
77+
onChange={() =>
78+
onOptionsChange({
79+
...options,
80+
saveVariables: !options.saveVariables,
81+
})
82+
}
83+
label="Save current variable values as dashboard default"
84+
aria-label={selectors.pages.SaveDashboardModal.saveVariables}
85+
/>
86+
)}
87+
<div className={styles.message}>
88+
{config.featureToggles.aiGeneratedDashboardChanges && (
89+
<GenAIDashboardChangesButton
90+
dashboard={dashboard}
91+
onGenerate={(text) => {
92+
onOptionsChange({
93+
...options,
94+
message: text,
95+
});
96+
setMessage(text);
97+
}}
98+
disabled={!saveModel.hasChanges}
99+
/>
100+
)}
101+
<TextArea
102+
aria-label="message"
103+
value={message}
104+
onChange={(e) => {
105+
onOptionsChange({
106+
...options,
107+
message: e.currentTarget.value,
108+
});
109+
setMessage(e.currentTarget.value);
110+
}}
111+
placeholder="Add a note to describe your changes."
112+
autoFocus
113+
rows={5}
114+
/>
115+
</div>
120116

121-
<Stack alignItems="center">
122-
<Button variant="secondary" onClick={onCancel} fill="outline">
123-
Cancel
124-
</Button>
125-
<Button
126-
type="submit"
127-
disabled={!saveModel.hasChanges || isLoading}
128-
icon={saving ? 'spinner' : undefined}
129-
aria-label={selectors.pages.SaveDashboardModal.save}
130-
>
131-
{isLoading ? 'Saving...' : 'Save'}
132-
</Button>
133-
{!saveModel.hasChanges && <div>No changes to save</div>}
134-
</Stack>
135-
</Stack>
136-
);
137-
}}
138-
</Form>
117+
<Stack alignItems="center">
118+
<Button variant="secondary" onClick={onCancel} fill="outline">
119+
Cancel
120+
</Button>
121+
<Button
122+
type="submit"
123+
disabled={!saveModel.hasChanges || isLoading}
124+
icon={saving ? 'spinner' : undefined}
125+
aria-label={selectors.pages.SaveDashboardModal.save}
126+
>
127+
{isLoading ? 'Saving...' : 'Save'}
128+
</Button>
129+
{!saveModel.hasChanges && <div>No changes to save</div>}
130+
</Stack>
131+
</Stack>
132+
</form>
139133
);
140134
};
141135

0 commit comments

Comments
 (0)