AnnotationsEditor: Remove deprecated components (#84538)

* AnnotationEditorForm: Remove deprecated components

* AnnotationEditor2: Remove deprecated components
This commit is contained in:
Alex Khomenko 2024-03-16 08:48:17 +01:00 committed by GitHub
parent 1714d52f17
commit 39b32524e2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 12 deletions

View File

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

View File

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