mirror of
https://github.com/grafana/grafana.git
synced 2024-11-23 01:16:31 -06:00
AnnotationsEditor: Remove deprecated components (#84538)
* AnnotationEditorForm: Remove deprecated components * AnnotationEditor2: Remove deprecated components
This commit is contained in:
parent
1714d52f17
commit
39b32524e2
@ -1,10 +1,12 @@
|
||||
import { css, cx } from '@emotion/css';
|
||||
import React, { HTMLAttributes, useRef } from 'react';
|
||||
import { Controller } from 'react-hook-form';
|
||||
import useAsyncFn from 'react-use/lib/useAsyncFn';
|
||||
import useClickAway from 'react-use/lib/useClickAway';
|
||||
|
||||
import { AnnotationEventUIModel, GrafanaTheme2 } from '@grafana/data';
|
||||
import { Button, Field, Form, HorizontalGroup, InputControl, TextArea, usePanelContext, useStyles2 } from '@grafana/ui';
|
||||
import { Button, Field, Stack, TextArea, usePanelContext, useStyles2 } from '@grafana/ui';
|
||||
import { Form } from 'app/core/components/Form/Form';
|
||||
import { TagFilter } from 'app/core/components/TagFilter/TagFilter';
|
||||
import { getAnnotationTags } from 'app/features/annotations/api';
|
||||
|
||||
@ -73,10 +75,10 @@ export const AnnotationEditorForm = React.forwardRef<HTMLDivElement, AnnotationE
|
||||
{...otherProps}
|
||||
>
|
||||
<div className={styles.header}>
|
||||
<HorizontalGroup justify={'space-between'} align={'center'}>
|
||||
<Stack justifyContent={'space-between'} alignItems={'center'}>
|
||||
<div className={styles.title}>Add annotation</div>
|
||||
<div className={styles.ts}>{ts}</div>
|
||||
</HorizontalGroup>
|
||||
</Stack>
|
||||
</div>
|
||||
<div className={styles.editorForm}>
|
||||
<Form<AnnotationEditFormDTO>
|
||||
@ -94,7 +96,7 @@ export const AnnotationEditorForm = React.forwardRef<HTMLDivElement, AnnotationE
|
||||
/>
|
||||
</Field>
|
||||
<Field label={'Tags'}>
|
||||
<InputControl
|
||||
<Controller
|
||||
control={control}
|
||||
name="tags"
|
||||
render={({ field: { ref, onChange, ...field } }) => {
|
||||
@ -110,14 +112,14 @@ export const AnnotationEditorForm = React.forwardRef<HTMLDivElement, AnnotationE
|
||||
}}
|
||||
/>
|
||||
</Field>
|
||||
<HorizontalGroup justify={'flex-end'}>
|
||||
<Stack justifyContent={'flex-end'}>
|
||||
<Button size={'sm'} variant="secondary" onClick={onDismiss} fill="outline">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size={'sm'} type={'submit'} disabled={stateIndicator?.loading}>
|
||||
{stateIndicator?.loading ? 'Saving' : 'Save'}
|
||||
</Button>
|
||||
</HorizontalGroup>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
|
@ -1,9 +1,11 @@
|
||||
import { css } from '@emotion/css';
|
||||
import React, { useRef } from 'react';
|
||||
import { Controller } from 'react-hook-form';
|
||||
import { useAsyncFn, useClickAway } from 'react-use';
|
||||
|
||||
import { AnnotationEventUIModel, GrafanaTheme2, dateTimeFormat, systemDateFormats } from '@grafana/data';
|
||||
import { Button, Field, Form, HorizontalGroup, InputControl, TextArea, usePanelContext, useStyles2 } from '@grafana/ui';
|
||||
import { Button, Field, Stack, TextArea, usePanelContext, useStyles2 } from '@grafana/ui';
|
||||
import { Form } from 'app/core/components/Form/Form';
|
||||
import { TagFilter } from 'app/core/components/TagFilter/TagFilter';
|
||||
import { getAnnotationTags } from 'app/features/annotations/api';
|
||||
|
||||
@ -67,10 +69,10 @@ export const AnnotationEditor2 = ({ annoVals, annoIdx, dismiss, timeZone, ...oth
|
||||
return (
|
||||
<div ref={clickAwayRef} className={styles.editor} {...otherProps}>
|
||||
<div className={styles.header}>
|
||||
<HorizontalGroup justify={'space-between'} align={'center'}>
|
||||
<Stack justifyContent={'space-between'} alignItems={'center'}>
|
||||
<div>{isUpdatingAnnotation ? 'Edit annotation' : 'Add annotation'}</div>
|
||||
<div>{time}</div>
|
||||
</HorizontalGroup>
|
||||
</Stack>
|
||||
</div>
|
||||
<Form<AnnotationEditFormDTO>
|
||||
onSubmit={onSubmit}
|
||||
@ -89,7 +91,7 @@ export const AnnotationEditor2 = ({ annoVals, annoIdx, dismiss, timeZone, ...oth
|
||||
/>
|
||||
</Field>
|
||||
<Field label={'Tags'}>
|
||||
<InputControl
|
||||
<Controller
|
||||
control={control}
|
||||
name="tags"
|
||||
render={({ field: { ref, onChange, ...field } }) => {
|
||||
@ -107,14 +109,14 @@ export const AnnotationEditor2 = ({ annoVals, annoIdx, dismiss, timeZone, ...oth
|
||||
</Field>
|
||||
</div>
|
||||
<div className={styles.footer}>
|
||||
<HorizontalGroup justify={'flex-end'}>
|
||||
<Stack justifyContent={'flex-end'}>
|
||||
<Button size={'sm'} variant="secondary" onClick={dismiss} fill="outline">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size={'sm'} type={'submit'} disabled={stateIndicator?.loading}>
|
||||
{stateIndicator?.loading ? 'Saving' : 'Save'}
|
||||
</Button>
|
||||
</HorizontalGroup>
|
||||
</Stack>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user