[SLOs Annotations] Fix rendering issue with annotations (#214157)

## Summary

fixes https://github.com/elastic/kibana/issues/210198

Fix rendering issue with annotations !!

This has been done because react suspense doesn't plays nicely with
elastic/chart rendering. And we have to render annotation with charts
dynamically.

x-pack/solutions/observability/plugins/observability/public/components/annotations/components/annotation_icon.tsx

@@ -8,14 +8,14 @@
 import React from 'react';
 import { EuiIcon, useEuiTheme } from '@elastic/eui';
 import { annotationsIconSet } from '@kbn/event-annotation-components';
-import { IconType } from '@elastic/eui/src/components/icon/icon';
-import { Annotation, CreateAnnotationParams } from '../../../../common/annotations';
+import type { IconType } from '@elastic/eui/src/components/icon/icon';
+import type { Annotation, CreateAnnotationParams } from '../../../../common/annotations';
 
-export function AnnotationIcon({
-  annotation,
-}: {
+export interface AnnotationIconProps {
   annotation: Annotation | CreateAnnotationParams;
-}) {
+}
+
+function AnnotationIcon({ annotation }: AnnotationIconProps) {
   const eventEnd = annotation.event?.end;
   const { euiTheme } = useEuiTheme();
   const annotationStyle = annotation.annotation?.style;
@@ -35,3 +35,6 @@ export function AnnotationIcon({
     />
   );
 }
+
+// eslint-disable-next-line import/no-default-export
+export default AnnotationIcon;

x-pack/solutions/observability/plugins/observability/public/components/annotations/components/annotation_tooltip/annotation_tooltip.tsx

@@ -15,15 +15,15 @@ import {
 import { TagsList } from '@kbn/observability-shared-plugin/public';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { TimestampRangeLabel } from './timestamp_range_label';
-import { Annotation, CreateAnnotationParams } from '../../../../common/annotations';
-import { AnnotationIcon } from './annotation_icon';
+import { AnnotationIcon } from '..';
+import { TimestampRangeLabel } from '../timestamp_range_label';
+import { Annotation, CreateAnnotationParams } from '../../../../../common/annotations';
 
-export function AnnotationTooltip({
-  annotation,
-}: {
+export interface AnnotationTooltipProps {
   annotation: Annotation | CreateAnnotationParams;
-}) {
+}
+
+function AnnotationTooltip({ annotation }: AnnotationTooltipProps) {
   const listItems = [
     {
       title: i18n.translate('xpack.observability.annotationTooltip.title', {
@@ -84,3 +84,6 @@ export function AnnotationTooltip({
     </EuiPanel>
   );
 }
+
+// eslint-disable-next-line import/no-default-export
+export default AnnotationTooltip;

x-pack/solutions/observability/plugins/observability/public/components/annotations/components/annotation_tooltip/index.tsx

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { lazy, Suspense } from 'react';
+import type { AnnotationTooltipProps } from './annotation_tooltip';
+
+const AnnotationTooltipLazy = lazy(() => import('./annotation_tooltip'));
+
+export function AnnotationTooltip(props: AnnotationTooltipProps) {
+  return (
+    <Suspense fallback={null}>
+      <AnnotationTooltipLazy {...props} />
+    </Suspense>
+  );
+}

x-pack/solutions/observability/plugins/observability/public/components/annotations/components/create_annotation.tsx

@@ -42,7 +42,7 @@ export interface CreateAnnotationProps {
   deleteAnnotation: (data: { annotations: Annotation[] }) => void;
 }
 
-export function CreateAnnotation({
+function CreateAnnotation({
   onSave,
   onCancel,
   isLoading,

x-pack/solutions/observability/plugins/observability/public/components/annotations/components/index.tsx

@@ -6,16 +6,13 @@
  */
 
 import React, { lazy, Suspense } from 'react';
-import type { ObservabilityAnnotationsProps } from './observability_annotation';
-
-const ObservabilityAnnotationsLazy = lazy(() => import('./observability_annotation'));
+import {
+  type ObservabilityAnnotationsProps,
+  ObservabilityAnnotations as ObservabilityAnnotationsComponent,
+} from './observability_annotation';
 
 export function ObservabilityAnnotations(props: ObservabilityAnnotationsProps) {
-  return (
-    <Suspense fallback={null}>
-      <ObservabilityAnnotationsLazy {...props} />
-    </Suspense>
-  );
+  return <ObservabilityAnnotationsComponent {...props} />;
 }
 
 import type { CreateAnnotationProps } from './create_annotation';
@@ -29,3 +26,15 @@ export function CreateAnnotation(props: CreateAnnotationProps) {
     </Suspense>
   );
 }
+
+import type { AnnotationIconProps } from './annotation_icon';
+
+const AnnotationIconLazy = lazy(() => import('./annotation_icon'));
+
+export function AnnotationIcon(props: AnnotationIconProps) {
+  return (
+    <Suspense fallback={null}>
+      <AnnotationIconLazy {...props} />
+    </Suspense>
+  );
+}

x-pack/solutions/observability/plugins/observability/public/components/annotations/components/new_line_annotation.tsx

@@ -11,9 +11,9 @@ import { AnnotationDomainType, LineAnnotation } from '@elastic/charts';
 import { EuiText, useEuiTheme } from '@elastic/eui';
 import { useFormContext } from 'react-hook-form';
 import { SLOWithSummaryResponse } from '@kbn/slo-schema';
-import { AnnotationIcon } from './annotation_icon';
+import { AnnotationIcon } from '.';
 import { AnnotationTooltip } from './annotation_tooltip';
-import { Annotation, CreateAnnotationParams } from '../../../../common/annotations';
+import type { Annotation, CreateAnnotationParams } from '../../../../common/annotations';
 
 export function NewLineAnnotation({
   slo,

x-pack/solutions/observability/plugins/observability/public/components/annotations/components/new_rect_annotation.tsx

@@ -12,7 +12,7 @@ import moment from 'moment';
 import { useFormContext } from 'react-hook-form';
 import { SLOWithSummaryResponse } from '@kbn/slo-schema';
 import { AnnotationTooltip } from './annotation_tooltip';
-import { Annotation, CreateAnnotationParams } from '../../../../common/annotations';
+import type { Annotation, CreateAnnotationParams } from '../../../../common/annotations';
 
 export function NewRectAnnotation({
   slo,

x-pack/solutions/observability/plugins/observability/public/components/annotations/components/obs_annotation.tsx

@@ -7,7 +7,7 @@
 import React from 'react';
 import { ObsRectAnnotation } from './new_rect_annotation';
 import { ObsLineAnnotation } from './new_line_annotation';
-import { Annotation } from '../../../../common/annotations';
+import type { Annotation } from '../../../../common/annotations';
 
 export function ObsAnnotation({ annotation }: { annotation: Annotation }) {
   if (!annotation.event?.end || annotation.annotation.type === 'line') {

x-pack/solutions/observability/plugins/observability/public/components/annotations/components/observability_annotation.tsx

@@ -18,9 +18,9 @@ import { i18n } from '@kbn/i18n';
 import { useFormContext } from 'react-hook-form';
 import moment from 'moment';
 import { SLOWithSummaryResponse } from '@kbn/slo-schema';
-import { CreateAnnotationForm } from './create_annotation';
-import { Annotation } from '../../../../common/annotations';
-import { DisplayAnnotation } from '../display_annotations';
+import { ObsAnnotation } from './obs_annotation';
+import type { CreateAnnotationForm } from './create_annotation';
+import type { Annotation } from '../../../../common/annotations';
 import { NewLineAnnotation } from './new_line_annotation';
 import { NewRectAnnotation } from './new_rect_annotation';
 
@@ -57,7 +57,9 @@ export function ObservabilityAnnotations({
   return (
     <EuiErrorBoundary>
       <Tooltip {...(tooltipSpecs ?? {})} actions={actions} type={TooltipType.VerticalCursor} />
-      <DisplayAnnotation annotations={annotations} />
+      {annotations?.map((annotation, index) => (
+        <ObsAnnotation annotation={annotation} key={annotation.id ?? index} />
+      ))}
 
       <NewLineAnnotation slo={slo} isCreateOpen={isCreateOpen} />
       <NewRectAnnotation slo={slo} isCreateOpen={isCreateOpen} />

x-pack/solutions/observability/plugins/observability/public/components/annotations/display_annotations.tsx

@@ -1,20 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React, { memo } from 'react';
-import { Annotation } from '../../../common/annotations';
-import { ObsAnnotation } from './components/obs_annotation';
-
-export const DisplayAnnotation = memo(({ annotations }: { annotations?: Annotation[] }) => {
-  return (
-    <>
-      {annotations?.map((annotation, index) => (
-        <ObsAnnotation annotation={annotation} key={annotation.id ?? index} />
-      ))}
-    </>
-  );
-});