From 3094dc45c6350f030dc1b5590b02d8d7979fdddc Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad31comp@gmail.com>
Date: Fri, 8 Nov 2024 11:37:39 +0100
Subject: [PATCH] [Synthetics] Fixes annotation update after event change !!
 (#199330)

## Summary

Fixes annotation update after event change !!

Fixes https://github.com/elastic/kibana/issues/199418

In SLO details page, create an annotation by holding Command+Dragging on
chart, save and try to change the annotation type and it should be able
to save it/update it

<img width="1728" alt="image"
src="https://github.com/user-attachments/assets/a1ac92f6-1c0c-4544-b405-1c3c45c63739">
---
 .../components/annotations/annotation_form.tsx      | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/observability_solution/observability/public/components/annotations/annotation_form.tsx b/x-pack/plugins/observability_solution/observability/public/components/annotations/annotation_form.tsx
index cbee1ca8ad0b1..1a3550f3205df 100644
--- a/x-pack/plugins/observability_solution/observability/public/components/annotations/annotation_form.tsx
+++ b/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
           />