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 React, { useCallback, useState } from 'react';
import { selectors } from '@grafana/e2e-selectors'; 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'; 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 { selectors } from '@grafana/e2e-selectors';
import { config } from '@grafana/runtime'; import { config } from '@grafana/runtime';
import { Dashboard } from '@grafana/schema'; 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 { DashboardModel } from 'app/features/dashboard/state';
import { GenAIDashboardChangesButton } from '../../GenAI/GenAIDashboardChangesButton'; import { GenAIDashboardChangesButton } from '../../GenAI/GenAIDashboardChangesButton';
import { SaveDashboardData, SaveDashboardOptions } from '../types'; import { SaveDashboardData, SaveDashboardOptions } from '../types';
interface FormDTO {
message: string;
}
export type SaveProps = { export type SaveProps = {
dashboard: DashboardModel; // original dashboard: DashboardModel; // original
isLoading: boolean; isLoading: boolean;
@ -44,8 +40,9 @@ export const SaveDashboardForm = ({
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
return ( return (
<Form <form
onSubmit={async (data: FormDTO) => { onSubmit={async (event) => {
event.preventDefault();
if (!onSubmit) { if (!onSubmit) {
return; return;
} }
@ -58,84 +55,81 @@ export const SaveDashboardForm = ({
setSaving(false); setSaving(false);
} }
}} }}
style={{ maxWidth: 600 }}
> >
{({ register, errors }) => { <Stack gap={2} direction="column" alignItems="flex-start">
return ( {hasTimeChanged && (
<Stack gap={2} direction="column" alignItems="flex-start"> <Checkbox
{hasTimeChanged && ( checked={!!options.saveTimerange}
<Checkbox onChange={() =>
checked={!!options.saveTimerange} onOptionsChange({
onChange={() => ...options,
onOptionsChange({ saveTimerange: !options.saveTimerange,
...options, })
saveTimerange: !options.saveTimerange, }
}) label="Save current time range as dashboard default"
} aria-label={selectors.pages.SaveDashboardModal.saveTimerange}
label="Save current time range as dashboard default" />
aria-label={selectors.pages.SaveDashboardModal.saveTimerange} )}
/> {hasVariableChanged && (
)} <Checkbox
{hasVariableChanged && ( checked={!!options.saveVariables}
<Checkbox onChange={() =>
checked={!!options.saveVariables} onOptionsChange({
onChange={() => ...options,
onOptionsChange({ saveVariables: !options.saveVariables,
...options, })
saveVariables: !options.saveVariables, }
}) label="Save current variable values as dashboard default"
} aria-label={selectors.pages.SaveDashboardModal.saveVariables}
label="Save current variable values as dashboard default" />
aria-label={selectors.pages.SaveDashboardModal.saveVariables} )}
/> <div className={styles.message}>
)} {config.featureToggles.aiGeneratedDashboardChanges && (
<div className={styles.message}> <GenAIDashboardChangesButton
{config.featureToggles.aiGeneratedDashboardChanges && ( dashboard={dashboard}
<GenAIDashboardChangesButton onGenerate={(text) => {
dashboard={dashboard} onOptionsChange({
onGenerate={(text) => { ...options,
onOptionsChange({ message: text,
...options, });
message: text, setMessage(text);
}); }}
setMessage(text); disabled={!saveModel.hasChanges}
}} />
disabled={!saveModel.hasChanges} )}
/> <TextArea
)} aria-label="message"
<TextArea value={message}
aria-label="message" onChange={(e) => {
value={message} onOptionsChange({
onChange={(e) => { ...options,
onOptionsChange({ message: e.currentTarget.value,
...options, });
message: e.currentTarget.value, setMessage(e.currentTarget.value);
}); }}
setMessage(e.currentTarget.value); placeholder="Add a note to describe your changes."
}} autoFocus
placeholder="Add a note to describe your changes." rows={5}
autoFocus />
rows={5} </div>
/>
</div>
<Stack alignItems="center"> <Stack alignItems="center">
<Button variant="secondary" onClick={onCancel} fill="outline"> <Button variant="secondary" onClick={onCancel} fill="outline">
Cancel Cancel
</Button> </Button>
<Button <Button
type="submit" type="submit"
disabled={!saveModel.hasChanges || isLoading} disabled={!saveModel.hasChanges || isLoading}
icon={saving ? 'spinner' : undefined} icon={saving ? 'spinner' : undefined}
aria-label={selectors.pages.SaveDashboardModal.save} aria-label={selectors.pages.SaveDashboardModal.save}
> >
{isLoading ? 'Saving...' : 'Save'} {isLoading ? 'Saving...' : 'Save'}
</Button> </Button>
{!saveModel.hasChanges && <div>No changes to save</div>} {!saveModel.hasChanges && <div>No changes to save</div>}
</Stack> </Stack>
</Stack> </Stack>
); </form>
}}
</Form>
); );
}; };