mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
SaveDashboardForm: Remove deprecated Form usage (#84172)
* SaveDashboardForm: Remove deprecated Form usage * Update
This commit is contained in:
parent
0f6858709b
commit
d105323f15
@ -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';
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user