[8.x] [Synthetics] Fixes annotation update after event change !! (ela…

…stic#199330) (elastic#199445)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Synthetics] Fixes annotation update after event change !!
(elastic#199330)](elastic#199330)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"Shahzad","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-08T10:37:39Z","message":"[Synthetics]
Fixes annotation update after event change !! (elastic#199330)\n\n##
Summary\r\n\r\nFixes annotation update after event change
!!\r\n\r\nFixes
https://github.com/elastic/kibana/issues/199418\r\n\r\nIn SLO details
page, create an annotation by holding Command+Dragging on\r\nchart, save
and try to change the annotation type and it should be able\r\nto save
it/update it\r\n\r\n<img width=\"1728\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a1ac92f6-1c0c-4544-b405-1c3c45c63739\">","sha":"3094dc45c6350f030dc1b5590b02d8d7979fdddc","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","ci:project-deploy-observability","Team:obs-ux-management","v8.16.0","backport:version","v8.17.0"],"title":"[Synthetics]
Fixes annotation update after event change
!!","number":199330,"url":"https://github.com/elastic/kibana/pull/199330","mergeCommit":{"message":"[Synthetics]
Fixes annotation update after event change !! (elastic#199330)\n\n##
Summary\r\n\r\nFixes annotation update after event change
!!\r\n\r\nFixes
https://github.com/elastic/kibana/issues/199418\r\n\r\nIn SLO details
page, create an annotation by holding Command+Dragging on\r\nchart, save
and try to change the annotation type and it should be able\r\nto save
it/update it\r\n\r\n<img width=\"1728\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a1ac92f6-1c0c-4544-b405-1c3c45c63739\">","sha":"3094dc45c6350f030dc1b5590b02d8d7979fdddc"}},"sourceBranch":"main","suggestedTargetBranches":["8.16","8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199330","number":199330,"mergeCommit":{"message":"[Synthetics]
Fixes annotation update after event change !! (elastic#199330)\n\n##
Summary\r\n\r\nFixes annotation update after event change
!!\r\n\r\nFixes
https://github.com/elastic/kibana/issues/199418\r\n\r\nIn SLO details
page, create an annotation by holding Command+Dragging on\r\nchart, save
and try to change the annotation type and it should be able\r\nto save
it/update it\r\n\r\n<img width=\"1728\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a1ac92f6-1c0c-4544-b405-1c3c45c63739\">","sha":"3094dc45c6350f030dc1b5590b02d8d7979fdddc"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Shahzad <[email protected]>

x-pack/plugins/observability_solution/observability/public/components/annotations/annotation_form.tsx

@@ -9,6 +9,7 @@ import { EuiForm, EuiFormRow, EuiHorizontalRule, EuiSpacer } from '@elastic/eui'
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useFormContext, Controller } from 'react-hook-form';
+import { defaultAnnotationColor } from '@kbn/event-annotation-common';
 import { CreateAnnotationForm } from './components/create_annotation';
 import { AnnotationApplyTo } from './components/annotation_apply_to';
 import { Annotation } from '../../../common/annotations';
@@ -17,7 +18,8 @@ import { AnnotationRange } from './components/annotation_range';
 import { AnnotationAppearance } from './annotation_apearance';
 
 export function AnnotationForm({ editAnnotation }: { editAnnotation?: Annotation | null }) {
-  const { control, formState, watch, trigger } = useFormContext<CreateAnnotationForm>();
+  const { control, formState, watch, trigger, unregister, setValue } =
+    useFormContext<CreateAnnotationForm>();
 
   const timestampStart = watch('@timestamp');
 
@@ -39,7 +41,14 @@ export function AnnotationForm({ editAnnotation }: { editAnnotation?: Annotation
             )}
             checked={Boolean(value)}
             onChange={(evt) => {
-              field.onChange(evt.target.checked ? timestampStart : null);
+              if (evt.target.checked) {
+                field.onChange(timestampStart);
+              } else {
+                // we need to do this to avoid validation errors
+                unregister('event.end');
+                field.onChange(null);
+                setValue('annotation.style.color', defaultAnnotationColor);
+              }
             }}
             compressed
           />