From 39b32524e2f6e08512a78d8efa98042d6b048cee Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Sat, 16 Mar 2024 08:48:17 +0100
Subject: [PATCH] AnnotationsEditor: Remove deprecated components (#84538)

* AnnotationEditorForm: Remove deprecated components

* AnnotationEditor2: Remove deprecated components
---
 .../plugins/annotations/AnnotationEditorForm.tsx   | 14 ++++++++------
 .../plugins/annotations2/AnnotationEditor2.tsx     | 14 ++++++++------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationEditorForm.tsx b/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationEditorForm.tsx
index 26e041a1789..c8de3bd3934 100644
--- a/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationEditorForm.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationEditorForm.tsx
@@ -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>
                 </>
               );
             }}
diff --git a/public/app/plugins/panel/timeseries/plugins/annotations2/AnnotationEditor2.tsx b/public/app/plugins/panel/timeseries/plugins/annotations2/AnnotationEditor2.tsx
index 702711454e4..21f998ce696 100644
--- a/public/app/plugins/panel/timeseries/plugins/annotations2/AnnotationEditor2.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/annotations2/AnnotationEditor2.tsx
@@ -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>
             </>
           );