IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

SaveDashboardForm: Remove deprecated Form usage (#84172)

Browse Source 
* SaveDashboardForm: Remove deprecated Form usage

* Update
This commit is contained in:
Alex Khomenko 2024-03-26 13:14:17 +01:00 committed by GitHub
parent 0f6858709b
commit d105323f15
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 79 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx
View File

@ -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';

160
public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
View File

@ -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>
);
};