[Lens][Event annotations] Move logic into packages (#161500)

.github/CODEOWNERS

@@ -360,6 +360,8 @@ packages/kbn-eslint-plugin-eslint @elastic/kibana-operations
 packages/kbn-eslint-plugin-imports @elastic/kibana-operations
 packages/kbn-eslint-plugin-telemetry @elastic/actionable-observability
 x-pack/test/encrypted_saved_objects_api_integration/plugins/api_consumer_plugin @elastic/kibana-security
+packages/kbn-event-annotation-common @elastic/kibana-visualizations
+packages/kbn-event-annotation-components @elastic/kibana-visualizations
 src/plugins/event_annotation @elastic/kibana-visualizations
 x-pack/test/plugin_api_integration/plugins/event_log @elastic/response-ops
 x-pack/plugins/event_log @elastic/response-ops
@@ -762,7 +764,7 @@ src/plugins/vis_types/timeseries @elastic/kibana-visualizations
 src/plugins/vis_types/vega @elastic/kibana-visualizations
 src/plugins/vis_types/vislib @elastic/kibana-visualizations
 src/plugins/vis_types/xy @elastic/kibana-visualizations
-src/plugins/visualization_ui_components @elastic/kibana-visualizations
+packages/kbn-visualization-ui-components @elastic/kibana-visualizations
 src/plugins/visualizations @elastic/kibana-visualizations
 x-pack/plugins/watcher @elastic/platform-deployment-management
 packages/kbn-web-worker-stub @elastic/kibana-operations

.i18nrc.json

@@ -44,6 +44,8 @@
     "expressionShape": "src/plugins/expression_shape",
     "expressionTagcloud": "src/plugins/chart_expressions/expression_tagcloud",
     "eventAnnotation": "src/plugins/event_annotation",
+    "eventAnnotationCommon": "packages/kbn-event-annotation-common",
+    "eventAnnotationComponents": "packages/kbn-event-annotation-components",
     "fieldFormats": "src/plugins/field_formats",
     "files": "src/plugins/files",
     "filesManagement": "src/plugins/files_management",
@@ -72,7 +74,11 @@
     "kibanaOverview": "src/plugins/kibana_overview",
     "lists": "packages/kbn-securitysolution-list-utils/src",
     "exceptionList-components": "packages/kbn-securitysolution-exception-list-components/src",
-    "management": ["src/legacy/core_plugins/management", "src/plugins/management", "packages/kbn-management"],
+    "management": [
+      "src/legacy/core_plugins/management",
+      "src/plugins/management",
+      "packages/kbn-management"
+    ],
     "monaco": "packages/kbn-monaco/src",
     "navigation": "src/plugins/navigation",
     "newsfeed": "src/plugins/newsfeed",
@@ -113,7 +119,7 @@
     "visTypeVislib": "src/plugins/vis_types/vislib",
     "visTypeXy": "src/plugins/vis_types/xy",
     "visualizations": "src/plugins/visualizations",
-    "visualizationUiComponents": "src/plugins/visualization_ui_components",
+    "visualizationUiComponents": "packages/kbn-visualization-ui-components",
     "unifiedSearch": "src/plugins/unified_search",
     "unifiedFieldList": "packages/kbn-unified-field-list",
     "unifiedHistogram": "src/plugins/unified_histogram"

docs/developer/plugin-list.asciidoc

@@ -407,10 +407,6 @@ The plugin exposes the static DefaultEditorController class to consume.
 |WARNING: Missing README.
 
 
-|{kib-repo}blob/{branch}/src/plugins/visualization_ui_components/README.md[visualizationUiComponents]
-|A series of UI components pulled out of Lens to make them available outside Lens.
-
-
 |===
 
 [discrete]

package.json

@@ -394,6 +394,8 @@
     "@kbn/es-types": "link:packages/kbn-es-types",
     "@kbn/es-ui-shared-plugin": "link:src/plugins/es_ui_shared",
     "@kbn/eso-plugin": "link:x-pack/test/encrypted_saved_objects_api_integration/plugins/api_consumer_plugin",
+    "@kbn/event-annotation-common": "link:packages/kbn-event-annotation-common",
+    "@kbn/event-annotation-components": "link:packages/kbn-event-annotation-components",
     "@kbn/event-annotation-plugin": "link:src/plugins/event_annotation",
     "@kbn/event-log-fixture-plugin": "link:x-pack/test/plugin_api_integration/plugins/event_log",
     "@kbn/event-log-plugin": "link:x-pack/plugins/event_log",
@@ -750,7 +752,7 @@
     "@kbn/vis-type-vega-plugin": "link:src/plugins/vis_types/vega",
     "@kbn/vis-type-vislib-plugin": "link:src/plugins/vis_types/vislib",
     "@kbn/vis-type-xy-plugin": "link:src/plugins/vis_types/xy",
-    "@kbn/visualization-ui-components": "link:src/plugins/visualization_ui_components",
+    "@kbn/visualization-ui-components": "link:packages/kbn-visualization-ui-components",
     "@kbn/visualizations-plugin": "link:src/plugins/visualizations",
     "@kbn/watcher-plugin": "link:x-pack/plugins/watcher",
     "@loaders.gl/core": "^2.3.1",

packages/kbn-coloring/package.json

@@ -2,5 +2,6 @@
   "name": "@kbn/coloring",
   "private": true,
   "version": "1.0.0",
-  "license": "SSPL-1.0 OR Elastic License 2.0"
-}
+  "license": "SSPL-1.0 OR Elastic License 2.0",
+  "sideEffects": false
+}

packages/kbn-event-annotation-common/README.md

@@ -0,0 +1,3 @@
+# @kbn/event-annotation-common
+
+A few core annotation-related types and utilities that are available in both server and browser contexts.

packages/kbn-event-annotation-common/index.ts

@@ -0,0 +1,52 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const AvailableAnnotationIcons = {
+  ASTERISK: 'asterisk',
+  ALERT: 'alert',
+  BELL: 'bell',
+  BOLT: 'bolt',
+  BUG: 'bug',
+  CIRCLE: 'circle',
+  EDITOR_COMMENT: 'editorComment',
+  FLAG: 'flag',
+  HEART: 'heart',
+  MAP_MARKER: 'mapMarker',
+  PIN_FILLED: 'pinFilled',
+  STAR_EMPTY: 'starEmpty',
+  STAR_FILLED: 'starFilled',
+  TAG: 'tag',
+  TRIANGLE: 'triangle',
+} as const;
+
+export const EVENT_ANNOTATION_GROUP_TYPE = 'event-annotation-group';
+
+export {
+  defaultAnnotationColor,
+  defaultAnnotationRangeColor,
+  defaultAnnotationLabel,
+  getDefaultManualAnnotation,
+  getDefaultQueryAnnotation,
+  createCopiedAnnotation,
+  isRangeAnnotationConfig,
+  isManualPointAnnotationConfig,
+  isQueryAnnotationConfig,
+} from './util';
+
+export type {
+  EventAnnotationGroupContent,
+  AvailableAnnotationIcon,
+  PointStyleProps,
+  EventAnnotationConfig,
+  EventAnnotationGroupConfig,
+  RangeStyleProps,
+  ManualAnnotationType,
+  PointInTimeEventAnnotationConfig,
+  RangeEventAnnotationConfig,
+  QueryPointEventAnnotationConfig,
+} from './types';

packages/kbn-event-annotation-common/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test/jest_node',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-event-annotation-common'],
+};

packages/kbn-event-annotation-common/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/event-annotation-common",
+  "owner": "@elastic/kibana-visualizations"
+}

packages/kbn-event-annotation-common/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@kbn/event-annotation-common",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0",
+  "sideEffects": false
+}

packages/kbn-event-annotation-common/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": [
+      "jest",
+      "node"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+  ],
+  "exclude": [
+    "target/**/*"
+  ],
+  "kbn_references": [
+    "@kbn/data-plugin",
+    "@kbn/content-management-table-list-view-table",
+    "@kbn/visualization-ui-components",
+    "@kbn/ui-theme",
+    "@kbn/i18n",
+  ]
+}

packages/kbn-event-annotation-common/types.ts

@@ -0,0 +1,89 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { $Values } from 'utility-types';
+import { DataViewSpec, KibanaQueryOutput } from '@kbn/data-plugin/common';
+import { UserContentCommonSchema } from '@kbn/content-management-table-list-view-table';
+import type { LineStyle } from '@kbn/visualization-ui-components';
+import { AvailableAnnotationIcons } from '.';
+
+export type AvailableAnnotationIcon = $Values<typeof AvailableAnnotationIcons>;
+
+export type PointStyleProps = StyleSharedProps & {
+  icon?: AvailableAnnotationIcon;
+  lineWidth?: number;
+  lineStyle?: LineStyle;
+  textVisibility?: boolean;
+};
+
+export type PointInTimeEventAnnotationConfig = {
+  id: string;
+  type: ManualAnnotationType;
+  key: {
+    type: 'point_in_time';
+    timestamp: string;
+  };
+} & PointStyleProps;
+
+export type Fill = 'inside' | 'outside' | 'none';
+export type ManualAnnotationType = 'manual';
+export type QueryAnnotationType = 'query';
+export type KeyType = 'point_in_time' | 'range';
+
+interface StyleSharedProps {
+  label: string;
+  color?: string;
+  isHidden?: boolean;
+}
+
+export type RangeStyleProps = StyleSharedProps & {
+  outside?: boolean;
+};
+
+export type RangeEventAnnotationConfig = {
+  type: ManualAnnotationType;
+  id: string;
+  key: {
+    type: 'range';
+    timestamp: string;
+    endTimestamp: string;
+  };
+} & RangeStyleProps;
+
+export type StyleProps = PointStyleProps & RangeStyleProps;
+
+export type QueryPointEventAnnotationConfig = {
+  id: string;
+  type: QueryAnnotationType;
+  filter: KibanaQueryOutput;
+  timeField?: string;
+  textField?: string;
+  extraFields?: string[];
+  key: {
+    type: 'point_in_time';
+  };
+} & PointStyleProps;
+
+export type EventAnnotationConfig =
+  | PointInTimeEventAnnotationConfig
+  | RangeEventAnnotationConfig
+  | QueryPointEventAnnotationConfig;
+
+export interface EventAnnotationGroupConfig {
+  annotations: EventAnnotationConfig[];
+  indexPatternId: string;
+  ignoreGlobalFilters: boolean;
+  title: string;
+  description: string;
+  tags: string[];
+  dataViewSpec?: DataViewSpec;
+}
+
+export type EventAnnotationGroupContent = UserContentCommonSchema & {
+  attributes: { indexPatternId: string; dataViewSpec?: DataViewSpec };
+};

packages/kbn-event-annotation-common/util.ts

@@ -6,12 +6,14 @@
  * Side Public License, v 1.
  */
 import { euiLightVars } from '@kbn/ui-theme';
+import { i18n } from '@kbn/i18n';
 import {
   EventAnnotationConfig,
   RangeEventAnnotationConfig,
   PointInTimeEventAnnotationConfig,
   QueryPointEventAnnotationConfig,
-} from '../../common';
+} from './types';
+
 export const defaultAnnotationColor = euiLightVars.euiColorAccent;
 // Do not compute it live as dependencies will add tens of Kbs to the plugin
 export const defaultAnnotationRangeColor = `#F04E981A`; // defaultAnnotationColor with opacity 0.1
@@ -33,3 +35,57 @@ export const isQueryAnnotationConfig = (
 ): annotation is QueryPointEventAnnotationConfig => {
   return Boolean(annotation && annotation.type === 'query');
 };
+
+export const createCopiedAnnotation = (
+  newId: string,
+  timestamp: string,
+  source?: EventAnnotationConfig
+): EventAnnotationConfig => {
+  if (!source) {
+    return getDefaultManualAnnotation(newId, timestamp);
+  }
+  return {
+    ...source,
+    id: newId,
+  };
+};
+
+export const defaultAnnotationLabel = i18n.translate(
+  'eventAnnotationCommon.manualAnnotation.defaultAnnotationLabel',
+  {
+    defaultMessage: 'Event',
+  }
+);
+
+export const getDefaultManualAnnotation = (
+  id: string,
+  timestamp: string
+): EventAnnotationConfig => ({
+  label: defaultAnnotationLabel,
+  type: 'manual',
+  key: {
+    type: 'point_in_time',
+    timestamp,
+  },
+  icon: 'triangle',
+  id,
+});
+
+export const getDefaultQueryAnnotation = (
+  id: string,
+  fieldName: string,
+  timeField: string
+): EventAnnotationConfig => ({
+  filter: {
+    type: 'kibana_query',
+    query: `${fieldName}: *`,
+    language: 'kuery',
+  },
+  timeField,
+  type: 'query',
+  key: {
+    type: 'point_in_time',
+  },
+  id,
+  label: `${fieldName}: *`,
+});

packages/kbn-event-annotation-components/README.md

@@ -0,0 +1,3 @@
+# @kbn/event-annotation-components
+
+A collection of static components used for interacting with event annotations.

packages/kbn-event-annotation-components/components/annotation_editor_controls/annotation_editor_controls.tsx

@@ -7,7 +7,7 @@
  */
 
 import './index.scss';
-import { isFieldLensCompatible } from '@kbn/visualization-ui-components/public';
+import { isFieldLensCompatible } from '@kbn/visualization-ui-components';
 import React, { useCallback, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFormRow, EuiSwitch, EuiSwitchEvent, EuiButtonGroup, EuiSpacer } from '@elastic/eui';
@@ -21,19 +21,19 @@ import {
   FieldPicker,
   FieldOption,
   type QueryInputServices,
-} from '@kbn/visualization-ui-components/public';
-import type { FieldOptionValue } from '@kbn/visualization-ui-components/public';
+} from '@kbn/visualization-ui-components';
+import type { FieldOptionValue } from '@kbn/visualization-ui-components';
 import { DataView } from '@kbn/data-views-plugin/common';
 import { useExistingFieldsReader } from '@kbn/unified-field-list/src/hooks/use_existing_fields';
 import moment from 'moment';
 import { htmlIdGenerator } from '@elastic/eui';
-import { isQueryAnnotationConfig, isRangeAnnotationConfig } from '../..';
-import {
+import type {
   AvailableAnnotationIcon,
   EventAnnotationConfig,
   PointInTimeEventAnnotationConfig,
   QueryPointEventAnnotationConfig,
-} from '../../../common';
+} from '@kbn/event-annotation-common';
+import { isQueryAnnotationConfig, isRangeAnnotationConfig } from '../..';
 import {
   defaultAnnotationColor,
   defaultAnnotationLabel,
@@ -88,35 +88,38 @@ const AnnotationEditorControls = ({
   return (
     <>
       <DimensionEditorSection
-        title={i18n.translate('eventAnnotation.xyChart.placement', {
+        title={i18n.translate('eventAnnotationComponents.xyChart.placement', {
           defaultMessage: 'Placement',
         })}
       >
         <EuiFormRow
-          label={i18n.translate('eventAnnotation.xyChart.annotationDate.placementType', {
+          label={i18n.translate('eventAnnotationComponents.xyChart.annotationDate.placementType', {
             defaultMessage: 'Placement type',
           })}
           display="rowCompressed"
           fullWidth
         >
           <EuiButtonGroup
-            legend={i18n.translate('eventAnnotation.xyChart.annotationDate.placementType', {
-              defaultMessage: 'Placement type',
-            })}
+            legend={i18n.translate(
+              'eventAnnotationComponents.xyChart.annotationDate.placementType',
+              {
+                defaultMessage: 'Placement type',
+              }
+            )}
             data-test-subj="lns-xyAnnotation-placementType"
             name="placementType"
             buttonSize="compressed"
             options={[
               {
                 id: `lens_xyChart_annotation_manual`,
-                label: i18n.translate('eventAnnotation.xyChart.annotation.manual', {
+                label: i18n.translate('eventAnnotationComponents.xyChart.annotation.manual', {
                   defaultMessage: 'Static date',
                 }),
                 'data-test-subj': 'lnsXY_annotation_manual',
               },
               {
                 id: `lens_xyChart_annotation_query`,
-                label: i18n.translate('eventAnnotation.xyChart.annotation.query', {
+                label: i18n.translate('eventAnnotationComponents.xyChart.annotation.query', {
                   defaultMessage: 'Custom query',
                 }),
                 'data-test-subj': 'lnsXY_annotation_query',
@@ -183,7 +186,7 @@ const AnnotationEditorControls = ({
         )}
       </DimensionEditorSection>
       <DimensionEditorSection
-        title={i18n.translate('eventAnnotation.xyChart.appearance', {
+        title={i18n.translate('eventAnnotationComponents.xyChart.appearance', {
           defaultMessage: 'Appearance',
         })}
       >
@@ -276,14 +279,14 @@ const AnnotationEditorControls = ({
         )}
         {isRange && (
           <EuiFormRow
-            label={i18n.translate('eventAnnotation.xyChart.fillStyle', {
+            label={i18n.translate('eventAnnotationComponents.xyChart.fillStyle', {
               defaultMessage: 'Fill',
             })}
             display="columnCompressed"
             fullWidth
           >
             <EuiButtonGroup
-              legend={i18n.translate('eventAnnotation.xyChart.fillStyle', {
+              legend={i18n.translate('eventAnnotationComponents.xyChart.fillStyle', {
                 defaultMessage: 'Fill',
               })}
               data-test-subj="lns-xyAnnotation-fillStyle"
@@ -292,14 +295,14 @@ const AnnotationEditorControls = ({
               options={[
                 {
                   id: `lens_xyChart_fillStyle_inside`,
-                  label: i18n.translate('eventAnnotation.xyChart.fillStyle.inside', {
+                  label: i18n.translate('eventAnnotationComponents.xyChart.fillStyle.inside', {
                     defaultMessage: 'Inside',
                   }),
                   'data-test-subj': 'lnsXY_fillStyle_inside',
                 },
                 {
                   id: `lens_xyChart_fillStyle_outside`,
-                  label: i18n.translate('eventAnnotation.xyChart.fillStyle.outside', {
+                  label: i18n.translate('eventAnnotationComponents.xyChart.fillStyle.outside', {
                     defaultMessage: 'Outside',
                   }),
                   'data-test-subj': 'lnsXY_fillStyle_inside',
@@ -324,12 +327,12 @@ const AnnotationEditorControls = ({
           showAlpha={isRange}
           setConfig={update}
           disableHelpTooltip
-          label={i18n.translate('eventAnnotation.xyChart.lineColor.label', {
+          label={i18n.translate('eventAnnotationComponents.xyChart.lineColor.label', {
             defaultMessage: 'Color',
           })}
         />
         <ConfigPanelGenericSwitch
-          label={i18n.translate('eventAnnotation.xyChart.annotation.hide', {
+          label={i18n.translate('eventAnnotationComponents.xyChart.annotation.hide', {
             defaultMessage: 'Hide annotation',
           })}
           data-test-subj="lns-annotations-hide-annotation"
@@ -339,7 +342,7 @@ const AnnotationEditorControls = ({
       </DimensionEditorSection>
       {isQueryBased && currentAnnotation && (
         <DimensionEditorSection
-          title={i18n.translate('eventAnnotation.xyChart.tooltip', {
+          title={i18n.translate('eventAnnotationComponents.xyChart.tooltip', {
             defaultMessage: 'Tooltip',
           })}
         >
@@ -347,7 +350,7 @@ const AnnotationEditorControls = ({
             display="rowCompressed"
             className="lnsRowCompressedMargin"
             fullWidth
-            label={i18n.translate('eventAnnotation.xyChart.annotation.tooltip', {
+            label={i18n.translate('eventAnnotationComponents.xyChart.annotation.tooltip', {
               defaultMessage: 'Show additional fields',
             })}
           >

packages/kbn-event-annotation-components/components/annotation_editor_controls/helpers.ts

@@ -11,27 +11,27 @@ import { pick } from 'lodash';
 import { euiLightVars } from '@kbn/ui-theme';
 import { i18n } from '@kbn/i18n';
 import chroma from 'chroma-js';
-import { isQueryAnnotationConfig, isRangeAnnotationConfig } from '../..';
 import type {
   EventAnnotationConfig,
   RangeEventAnnotationConfig,
   PointInTimeEventAnnotationConfig,
   QueryPointEventAnnotationConfig,
-} from '../../../common';
+} from '@kbn/event-annotation-common';
+import { isQueryAnnotationConfig, isRangeAnnotationConfig } from '../..';
 
 export const defaultAnnotationColor = euiLightVars.euiColorAccent;
 // Do not compute it live as dependencies will add tens of Kbs to the plugin
 export const defaultAnnotationRangeColor = `#F04E981A`; // defaultAnnotationColor with opacity 0.1
 
 export const defaultAnnotationLabel = i18n.translate(
-  'eventAnnotation.xyChart.defaultAnnotationLabel',
+  'eventAnnotationComponents.xyChart.defaultAnnotationLabel',
   {
     defaultMessage: 'Event',
   }
 );
 
 export const defaultRangeAnnotationLabel = i18n.translate(
-  'eventAnnotation.xyChart.defaultRangeAnnotationLabel',
+  'eventAnnotationComponents.xyChart.defaultRangeAnnotationLabel',
   {
     defaultMessage: 'Event range',
   }

packages/kbn-event-annotation-components/components/annotation_editor_controls/icon_set.ts

@@ -8,43 +8,43 @@
 
 import { i18n } from '@kbn/i18n';
 import { IconTriangle, IconCircle } from '@kbn/chart-icons';
-import type { IconSet } from '@kbn/visualization-ui-components/public';
-import { AvailableAnnotationIcon } from '../../../common';
+import type { IconSet } from '@kbn/visualization-ui-components';
+import type { AvailableAnnotationIcon } from '@kbn/event-annotation-common';
 
 export const annotationsIconSet: IconSet<AvailableAnnotationIcon> = [
   {
     value: 'asterisk',
-    label: i18n.translate('eventAnnotation.xyChart.iconSelect.asteriskIconLabel', {
+    label: i18n.translate('eventAnnotationComponents.xyChart.iconSelect.asteriskIconLabel', {
       defaultMessage: 'Asterisk',
     }),
   },
   {
     value: 'alert',
-    label: i18n.translate('eventAnnotation.xyChart.iconSelect.alertIconLabel', {
+    label: i18n.translate('eventAnnotationComponents.xyChart.iconSelect.alertIconLabel', {
       defaultMessage: 'Alert',
     }),
   },
   {
     value: 'bell',
-    label: i18n.translate('eventAnnotation.xyChart.iconSelect.bellIconLabel', {
+    label: i18n.translate('eventAnnotationComponents.xyChart.iconSelect.bellIconLabel', {
       defaultMessage: 'Bell',
     }),
   },
   {
     value: 'bolt',
-    label: i18n.translate('eventAnnotation.xyChart.iconSelect.boltIconLabel', {
+    label: i18n.translate('eventAnnotationComponents.xyChart.iconSelect.boltIconLabel', {
       defaultMessage: 'Bolt',
     }),
   },
   {
     value: 'bug',
-    label: i18n.translate('eventAnnotation.xyChart.iconSelect.bugIconLabel', {
+    label: i18n.translate('eventAnnotationComponents.xyChart.iconSelect.bugIconLabel', {
       defaultMessage: 'Bug',
     }),
   },
   {
     value: 'circle',
-    label: i18n.translate('eventAnnotation.xyChart.iconSelect.circleIconLabel', {
+    label: i18n.translate('eventAnnotationComponents.xyChart.iconSelect.circleIconLabel', {
       defaultMessage: 'Circle',
     }),
     icon: IconCircle,
@@ -52,55 +52,55 @@ export const annotationsIconSet: IconSet<AvailableAnnotationIcon> = [
 
   {
     value: 'editorComment',
-    label: i18n.translate('eventAnnotation.xyChart.iconSelect.commentIconLabel', {
+    label: i18n.translate('eventAnnotationComponents.xyChart.iconSelect.commentIconLabel', {
       defaultMessage: 'Comment',
     }),
   },
   {
     value: 'flag',
-    label: i18n.translate('eventAnnotation.xyChart.iconSelect.flagIconLabel', {
+    label: i18n.translate('eventAnnotationComponents.xyChart.iconSelect.flagIconLabel', {
       defaultMessage: 'Flag',
     }),
   },
   {
     value: 'heart',
-    label: i18n.translate('eventAnnotation.xyChart.iconSelect.heartLabel', {
+    label: i18n.translate('eventAnnotationComponents.xyChart.iconSelect.heartLabel', {
       defaultMessage: 'Heart',
     }),
   },
   {
     value: 'mapMarker',
-    label: i18n.translate('eventAnnotation.xyChart.iconSelect.mapMarkerLabel', {
+    label: i18n.translate('eventAnnotationComponents.xyChart.iconSelect.mapMarkerLabel', {
       defaultMessage: 'Map Marker',
     }),
   },
   {
     value: 'pinFilled',
-    label: i18n.translate('eventAnnotation.xyChart.iconSelect.mapPinLabel', {
+    label: i18n.translate('eventAnnotationComponents.xyChart.iconSelect.mapPinLabel', {
       defaultMessage: 'Map Pin',
     }),
   },
   {
     value: 'starEmpty',
-    label: i18n.translate('eventAnnotation.xyChart.iconSelect.starLabel', {
+    label: i18n.translate('eventAnnotationComponents.xyChart.iconSelect.starLabel', {
       defaultMessage: 'Star',
     }),
   },
   {
     value: 'starFilled',
-    label: i18n.translate('eventAnnotation.xyChart.iconSelect.starFilledLabel', {
+    label: i18n.translate('eventAnnotationComponents.xyChart.iconSelect.starFilledLabel', {
       defaultMessage: 'Star filled',
     }),
   },
   {
     value: 'tag',
-    label: i18n.translate('eventAnnotation.xyChart.iconSelect.tagIconLabel', {
+    label: i18n.translate('eventAnnotationComponents.xyChart.iconSelect.tagIconLabel', {
       defaultMessage: 'Tag',
     }),
   },
   {
     value: 'triangle',
-    label: i18n.translate('eventAnnotation.xyChart.iconSelect.triangleIconLabel', {
+    label: i18n.translate('eventAnnotationComponents.xyChart.iconSelect.triangleIconLabel', {
       defaultMessage: 'Triangle',
     }),
     icon: IconTriangle,

packages/kbn-event-annotation-components/components/annotation_editor_controls/index.test.tsx

@@ -11,8 +11,11 @@ import AnnotationEditorControls from './annotation_editor_controls';
 
 import React from 'react';
 import { mount } from 'enzyme';
-import { EventAnnotationConfig, RangeEventAnnotationConfig } from '../../../common';
-import { QueryInputServices } from '@kbn/visualization-ui-components/public';
+import type {
+  EventAnnotationConfig,
+  RangeEventAnnotationConfig,
+} from '@kbn/event-annotation-common';
+import { QueryInputServices } from '@kbn/visualization-ui-components';
 import moment from 'moment';
 import { act } from 'react-dom/test-utils';
 import { EuiButtonGroup } from '@elastic/eui';

packages/kbn-event-annotation-components/components/annotation_editor_controls/manual_annotation_panel.tsx

@@ -35,7 +35,7 @@ export const ConfigPanelManualAnnotation = ({
           <ConfigPanelRangeDatePicker
             dataTestSubj="lns-xyAnnotation-fromTime"
             calendarClassName={calendarClassName}
-            prependLabel={i18n.translate('eventAnnotation.xyChart.annotationDate.from', {
+            prependLabel={i18n.translate('eventAnnotationComponents.xyChart.annotationDate.from', {
               defaultMessage: 'From',
             })}
             value={moment(annotation?.key.timestamp)}
@@ -62,14 +62,14 @@ export const ConfigPanelManualAnnotation = ({
                 }
               }
             }}
-            label={i18n.translate('eventAnnotation.xyChart.annotationDate', {
+            label={i18n.translate('eventAnnotationComponents.xyChart.annotationDate', {
               defaultMessage: 'Annotation date',
             })}
           />
           <ConfigPanelRangeDatePicker
             dataTestSubj="lns-xyAnnotation-toTime"
             calendarClassName={calendarClassName}
-            prependLabel={i18n.translate('eventAnnotation.xyChart.annotationDate.to', {
+            prependLabel={i18n.translate('eventAnnotationComponents.xyChart.annotationDate.to', {
               defaultMessage: 'To',
             })}
             value={moment(annotation?.key.endTimestamp)}
@@ -102,7 +102,7 @@ export const ConfigPanelManualAnnotation = ({
         <ConfigPanelRangeDatePicker
           dataTestSubj="lns-xyAnnotation-time"
           calendarClassName={calendarClassName}
-          label={i18n.translate('eventAnnotation.xyChart.annotationDate', {
+          label={i18n.translate('eventAnnotationComponents.xyChart.annotationDate', {
             defaultMessage: 'Annotation date',
           })}
           value={moment(annotation?.key.timestamp)}

packages/kbn-event-annotation-components/components/annotation_editor_controls/query_annotation_panel.tsx

@@ -16,11 +16,11 @@ import {
   FieldOptionValue,
   FieldPicker,
   FilterQueryInput,
+  isFieldLensCompatible,
   type QueryInputServices,
-} from '@kbn/visualization-ui-components/public';
+} from '@kbn/visualization-ui-components';
 import type { DataView } from '@kbn/data-views-plugin/common';
-import { isFieldLensCompatible } from '@kbn/visualization-ui-components/public';
-import type { QueryPointEventAnnotationConfig } from '../../../common';
+import type { QueryPointEventAnnotationConfig } from '@kbn/event-annotation-common';
 
 export const defaultQuery: Query = {
   query: '',
@@ -71,7 +71,7 @@ export const ConfigPanelQueryAnnotation = ({
         display="rowCompressed"
         className="lnsRowCompressedMargin"
         fullWidth
-        label={i18n.translate('eventAnnotation.xyChart.annotation.queryInput', {
+        label={i18n.translate('eventAnnotationComponents.xyChart.annotation.queryInput', {
           defaultMessage: 'Annotation query',
         })}
       >
@@ -92,7 +92,7 @@ export const ConfigPanelQueryAnnotation = ({
       <EuiFormRow
         display="rowCompressed"
         fullWidth
-        label={i18n.translate('eventAnnotation.xyChart.annotation.queryField', {
+        label={i18n.translate('eventAnnotationComponents.xyChart.annotation.queryField', {
           defaultMessage: 'Target date field',
         })}
       >

packages/kbn-event-annotation-components/components/annotation_editor_controls/range_annotation_panel.tsx

@@ -17,8 +17,11 @@ import {
   EuiDatePicker,
 } from '@elastic/eui';
 import moment from 'moment';
+import type {
+  PointInTimeEventAnnotationConfig,
+  RangeEventAnnotationConfig,
+} from '@kbn/event-annotation-common';
 import { isRangeAnnotationConfig } from '../..';
-import type { PointInTimeEventAnnotationConfig, RangeEventAnnotationConfig } from '../../../common';
 import { defaultRangeAnnotationLabel, defaultAnnotationLabel } from './helpers';
 import { toLineAnnotationColor, toRangeAnnotationColor } from './helpers';
 import type { ManualEventAnnotationType } from './types';
@@ -39,7 +42,7 @@ export const ConfigPanelApplyAsRangeSwitch = ({
         data-test-subj="lns-xyAnnotation-rangeSwitch"
         label={
           <EuiText size="xs">
-            {i18n.translate('eventAnnotation.xyChart.applyAsRange', {
+            {i18n.translate('eventAnnotationComponents.xyChart.applyAsRange', {
               defaultMessage: 'Apply as range',
             })}
           </EuiText>

packages/kbn-event-annotation-components/components/annotation_editor_controls/tooltip_annotation_panel.tsx

@@ -19,10 +19,10 @@ import {
   DragDropBuckets,
   DraggableBucketContainer,
   FieldsBucketContainer,
-} from '@kbn/visualization-ui-components/public';
+  isFieldLensCompatible,
+} from '@kbn/visualization-ui-components';
 import { DataView } from '@kbn/data-views-plugin/common';
-import { isFieldLensCompatible } from '@kbn/visualization-ui-components/public';
-import { QueryPointEventAnnotationConfig } from '../../../common';
+import type { QueryPointEventAnnotationConfig } from '@kbn/event-annotation-common';
 
 export const MAX_TOOLTIP_FIELDS_SIZE = 2;
 
@@ -98,7 +98,7 @@ export function TooltipSection({
       onClick={() => {
         handleInputChange([...localValues, { id: generateId(), value: undefined, isNew: true }]);
       }}
-      label={i18n.translate('eventAnnotation.xyChart.annotation.tooltip.addField', {
+      label={i18n.translate('eventAnnotationComponents.xyChart.annotation.tooltip.addField', {
         defaultMessage: 'Add field',
       })}
       isDisabled={localValues.length > MAX_TOOLTIP_FIELDS_SIZE}
@@ -115,7 +115,7 @@ export function TooltipSection({
             className="lnsConfigPanelAnnotations__noFieldsPrompt"
           >
             <EuiText color="subdued" size="s" textAlign="center">
-              {i18n.translate('eventAnnotation.xyChart.annotation.tooltip.noFields', {
+              {i18n.translate('eventAnnotationComponents.xyChart.annotation.tooltip.noFields', {
                 defaultMessage: 'None selected',
               })}
             </EuiText>
@@ -170,7 +170,7 @@ export function TooltipSection({
                 handleInputChange(arrayRef.filter((_, i) => i !== index));
               }}
               removeTitle={i18n.translate(
-                'eventAnnotation.xyChart.annotation.tooltip.deleteButtonLabel',
+                'eventAnnotationComponents.xyChart.annotation.tooltip.deleteButtonLabel',
                 {
                   defaultMessage: 'Delete',
                 }

packages/kbn-event-annotation-components/components/annotation_editor_controls/types.ts

@@ -6,7 +6,10 @@
  * Side Public License, v 1.
  */
 
-import type { PointInTimeEventAnnotationConfig, RangeEventAnnotationConfig } from '../../../common';
+import type {
+  PointInTimeEventAnnotationConfig,
+  RangeEventAnnotationConfig,
+} from '@kbn/event-annotation-common';
 
 export type ManualEventAnnotationType =
   | PointInTimeEventAnnotationConfig

packages/kbn-event-annotation-components/components/event_annotation_group_saved_object_finder.tsx

@@ -0,0 +1,135 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useEffect, useState } from 'react';
+import { i18n } from '@kbn/i18n';
+import type { CoreStart } from '@kbn/core/public';
+import { FormattedMessage } from '@kbn/i18n-react';
+import type { IUiSettingsClient } from '@kbn/core-ui-settings-browser';
+import type { SavedObjectCommon } from '@kbn/saved-objects-finder-plugin/common';
+import { SavedObjectFinder } from '@kbn/saved-objects-finder-plugin/public';
+import type { SavedObjectsManagementPluginStart } from '@kbn/saved-objects-management-plugin/public';
+import {
+  EuiButton,
+  EuiEmptyPrompt,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingSpinner,
+  EuiText,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
+import { EVENT_ANNOTATION_GROUP_TYPE } from '@kbn/event-annotation-common';
+
+export const EventAnnotationGroupSavedObjectFinder = ({
+  uiSettings,
+  http,
+  savedObjectsManagement,
+  fixedPageSize = 10,
+  checkHasAnnotationGroups,
+  onChoose,
+  onCreateNew,
+}: {
+  uiSettings: IUiSettingsClient;
+  http: CoreStart['http'];
+  savedObjectsManagement: SavedObjectsManagementPluginStart;
+  fixedPageSize?: number;
+  checkHasAnnotationGroups: () => Promise<boolean>;
+  onChoose: (value: {
+    id: string;
+    type: string;
+    fullName: string;
+    savedObject: SavedObjectCommon<unknown>;
+  }) => void;
+  onCreateNew: () => void;
+}) => {
+  const [hasAnnotationGroups, setHasAnnotationGroups] = useState<boolean | undefined>();
+
+  useEffect(() => {
+    checkHasAnnotationGroups().then(setHasAnnotationGroups);
+  }, [checkHasAnnotationGroups]);
+
+  return hasAnnotationGroups === undefined ? (
+    <EuiFlexGroup responsive={false} justifyContent="center">
+      <EuiFlexItem grow={0}>
+        <EuiLoadingSpinner />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  ) : hasAnnotationGroups === false ? (
+    <EuiFlexGroup
+      css={css`
+        height: 100%;
+      `}
+      direction="column"
+      justifyContent="center"
+    >
+      <EuiFlexItem>
+        <EuiEmptyPrompt
+          titleSize="xs"
+          title={
+            <h2>
+              <FormattedMessage
+                id="eventAnnotationComponents.eventAnnotationGroup.savedObjectFinder.emptyPromptTitle"
+                defaultMessage="Start by adding an annotation layer"
+              />
+            </h2>
+          }
+          body={
+            <EuiText size="s">
+              <p>
+                <FormattedMessage
+                  id="eventAnnotationComponents.eventAnnotationGroup.savedObjectFinder.emptyPromptDescription"
+                  defaultMessage="There are currently no annotations available to select from the library. Create a new layer to add annotations."
+                />
+              </p>
+            </EuiText>
+          }
+          actions={
+            <EuiButton onClick={() => onCreateNew()} size="s">
+              <FormattedMessage
+                id="eventAnnotationComponents.eventAnnotationGroup.savedObjectFinder.emptyCTA"
+                defaultMessage="Create annotation layer"
+              />
+            </EuiButton>
+          }
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  ) : (
+    <SavedObjectFinder
+      key="searchSavedObjectFinder"
+      fixedPageSize={fixedPageSize}
+      onChoose={(id, type, fullName, savedObject) => {
+        onChoose({ id, type, fullName, savedObject });
+      }}
+      showFilter={false}
+      noItemsMessage={
+        <FormattedMessage
+          id="eventAnnotationComponents.eventAnnotationGroup.savedObjectFinder.notFoundLabel"
+          defaultMessage="No matching annotation groups found."
+        />
+      }
+      savedObjectMetaData={savedObjectMetaData}
+      services={{
+        uiSettings,
+        http,
+        savedObjectsManagement,
+      }}
+    />
+  );
+};
+
+const savedObjectMetaData = [
+  {
+    type: EVENT_ANNOTATION_GROUP_TYPE,
+    getIconForSavedObject: () => 'annotation',
+    name: i18n.translate('eventAnnotationComponents.eventAnnotationGroup.metadata.name', {
+      defaultMessage: 'Annotations Groups',
+    }),
+    includeFields: ['*'],
+  },
+];

packages/kbn-event-annotation-components/components/get_annotation_accessor.ts

@@ -6,13 +6,13 @@
  * Side Public License, v 1.
  */
 
-import type { AccessorConfig } from '@kbn/visualization-ui-components/public';
-import { EventAnnotationConfig } from '../../common';
+import type { AccessorConfig } from '@kbn/visualization-ui-components';
+import type { EventAnnotationConfig } from '@kbn/event-annotation-common';
 import {
   defaultAnnotationColor,
   defaultAnnotationRangeColor,
   isRangeAnnotationConfig,
-} from '../event_annotation_service/helpers';
+} from '@kbn/event-annotation-common';
 import { annotationsIconSet } from './annotation_editor_controls/icon_set';
 
 export const getAnnotationAccessor = (annotation: EventAnnotationConfig): AccessorConfig => {

packages/kbn-event-annotation-components/components/group_editor_controls/annotation_list.tsx

@@ -17,12 +17,13 @@ import {
   DimensionButton,
   DimensionTrigger,
   EmptyDimensionButton,
-} from '@kbn/visualization-ui-components/public';
+} from '@kbn/visualization-ui-components';
 import React, { useCallback, useEffect, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { euiThemeVars } from '@kbn/ui-theme';
 import { i18n } from '@kbn/i18n';
-import { createCopiedAnnotation, EventAnnotationConfig } from '../../../common';
+import type { EventAnnotationConfig } from '@kbn/event-annotation-common';
+import { createCopiedAnnotation } from '@kbn/event-annotation-common';
 import { getAnnotationAccessor } from '..';
 
 export const AnnotationList = ({
@@ -39,7 +40,7 @@ export const AnnotationList = ({
     setNewAnnotationId(uuidv4());
   }, [annotations.length]);
 
-  const addAnnotationText = i18n.translate('eventAnnotation.annotationList.add', {
+  const addAnnotationText = i18n.translate('eventAnnotationComponents.annotationList.add', {
     defaultMessage: 'Add annotation',
   });
 
@@ -118,7 +119,7 @@ export const AnnotationList = ({
               }}
             >
               <DimensionButton
-                groupLabel={i18n.translate('eventAnnotation.groupEditor.addAnnotation', {
+                groupLabel={i18n.translate('eventAnnotationComponents.groupEditor.addAnnotation', {
                   defaultMessage: 'Annotations',
                 })}
                 onClick={() => selectAnnotation(annotation)}

packages/kbn-event-annotation-components/components/group_editor_controls/group_editor_controls.test.tsx

@@ -7,14 +7,15 @@
  */
 
 import React, { ChangeEvent, FormEvent } from 'react';
-import { EventAnnotationGroupConfig, getDefaultManualAnnotation } from '../../../common';
+import type { EventAnnotationGroupConfig } from '@kbn/event-annotation-common';
+import { getDefaultManualAnnotation } from '@kbn/event-annotation-common';
 import { ReactWrapper } from 'enzyme';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { GroupEditorControls } from './group_editor_controls';
 import { EuiTextAreaProps, EuiTextProps } from '@elastic/eui';
 import type { DataView } from '@kbn/data-views-plugin/common';
 import { act } from 'react-dom/test-utils';
-import type { QueryInputServices } from '@kbn/visualization-ui-components/public';
+import type { QueryInputServices } from '@kbn/visualization-ui-components';
 import { AnnotationEditorControls, ENABLE_INDIVIDUAL_ANNOTATION_EDITING } from '..';
 
 jest.mock('@elastic/eui', () => {

packages/kbn-event-annotation-components/components/group_editor_controls/group_editor_controls.tsx

@@ -19,12 +19,15 @@ import { css } from '@emotion/react';
 import type { DataView, DataViewSpec } from '@kbn/data-views-plugin/common';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { SavedObjectsTaggingApiUiComponent } from '@kbn/saved-objects-tagging-oss-plugin/public';
+import type { SavedObjectsTaggingApiUiComponent } from '@kbn/saved-objects-tagging-oss-plugin/public';
 import { euiThemeVars } from '@kbn/ui-theme';
-import { QueryInputServices } from '@kbn/visualization-ui-components/public';
+import { QueryInputServices } from '@kbn/visualization-ui-components';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { EVENT_ANNOTATION_APP_NAME } from '../../../common/constants';
-import { EventAnnotationConfig, EventAnnotationGroupConfig } from '../../../common';
+import type {
+  EventAnnotationConfig,
+  EventAnnotationGroupConfig,
+} from '@kbn/event-annotation-common';
+import { EVENT_ANNOTATION_APP_NAME } from '../../constants';
 import { AnnotationEditorControls } from '../annotation_editor_controls';
 import { AnnotationList } from './annotation_list';
 
@@ -99,16 +102,19 @@ export const GroupEditorControls = ({
         `}
       >
         <h4>
-          <FormattedMessage id="eventAnnotation.groupEditor.details" defaultMessage="Details" />
+          <FormattedMessage
+            id="eventAnnotationComponents.groupEditor.details"
+            defaultMessage="Details"
+          />
         </h4>
       </EuiTitle>
       <EuiForm>
         <EuiFormRow
-          label={i18n.translate('eventAnnotation.groupEditor.title', {
+          label={i18n.translate('eventAnnotationComponents.groupEditor.title', {
             defaultMessage: 'Title',
           })}
           isInvalid={showValidation && !isTitleValid(group.title)}
-          error={i18n.translate('eventAnnotation.groupEditor.titleRequired', {
+          error={i18n.translate('eventAnnotationComponents.groupEditor.titleRequired', {
             defaultMessage: 'A title is required.',
           })}
         >
@@ -125,13 +131,13 @@ export const GroupEditorControls = ({
           />
         </EuiFormRow>
         <EuiFormRow
-          label={i18n.translate('eventAnnotation.groupEditor.description', {
+          label={i18n.translate('eventAnnotationComponents.groupEditor.description', {
             defaultMessage: 'Description',
           })}
           labelAppend={
             <EuiText color="subdued" size="xs">
               <FormattedMessage
-                id="eventAnnotation.groupEditor.optional"
+                id="eventAnnotationComponents.groupEditor.optional"
                 defaultMessage="Optional"
               />
             </EuiText>
@@ -163,7 +169,7 @@ export const GroupEditorControls = ({
         {ENABLE_INDIVIDUAL_ANNOTATION_EDITING && (
           <>
             <EuiFormRow
-              label={i18n.translate('eventAnnotation.groupEditor.dataView', {
+              label={i18n.translate('eventAnnotationComponents.groupEditor.dataView', {
                 defaultMessage: 'Data view',
               })}
             >
@@ -185,7 +191,7 @@ export const GroupEditorControls = ({
               />
             </EuiFormRow>
             <EuiFormRow
-              label={i18n.translate('eventAnnotation.groupEditor.addAnnotation', {
+              label={i18n.translate('eventAnnotationComponents.groupEditor.addAnnotation', {
                 defaultMessage: 'Annotations',
               })}
             >

packages/kbn-event-annotation-components/components/group_editor_flyout.test.tsx

@@ -7,14 +7,15 @@
  */
 
 import { EuiButton, EuiFlyout } from '@elastic/eui';
-import { EventAnnotationGroupConfig, getDefaultManualAnnotation } from '../../common';
+import { getDefaultManualAnnotation } from '@kbn/event-annotation-common';
+import type { EventAnnotationGroupConfig } from '@kbn/event-annotation-common';
 import { taggingApiMock } from '@kbn/saved-objects-tagging-oss-plugin/public/api.mock';
 import { shallow, ShallowWrapper } from 'enzyme';
 import React from 'react';
 import { GroupEditorControls } from './group_editor_controls';
 import { GroupEditorFlyout } from './group_editor_flyout';
 import { DataView } from '@kbn/data-views-plugin/common';
-import type { QueryInputServices } from '@kbn/visualization-ui-components/public';
+import type { QueryInputServices } from '@kbn/visualization-ui-components';
 
 const simulateButtonClick = (component: ShallowWrapper, selector: string) => {
   (component.find(selector) as ShallowWrapper<Parameters<typeof EuiButton>[0]>).prop('onClick')!(

packages/kbn-event-annotation-components/components/group_editor_flyout.tsx

@@ -20,10 +20,13 @@ import {
 } from '@elastic/eui';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { SavedObjectsTaggingApi } from '@kbn/saved-objects-tagging-oss-plugin/public';
+import type { SavedObjectsTaggingApi } from '@kbn/saved-objects-tagging-oss-plugin/public';
 import { DataView, DataViewSpec } from '@kbn/data-views-plugin/common';
-import type { QueryInputServices } from '@kbn/visualization-ui-components/public';
-import { EventAnnotationConfig, EventAnnotationGroupConfig } from '../../common';
+import type { QueryInputServices } from '@kbn/visualization-ui-components';
+import type {
+  EventAnnotationConfig,
+  EventAnnotationGroupConfig,
+} from '@kbn/event-annotation-common';
 import { GroupEditorControls, isGroupValid } from './group_editor_controls';
 
 export const GroupEditorFlyout = ({
@@ -78,7 +81,7 @@ export const GroupEditorFlyout = ({
         <EuiTitle size="s">
           <h2 id={flyoutHeadingId}>
             <FormattedMessage
-              id="eventAnnotation.groupEditorFlyout.title"
+              id="eventAnnotationComponents.groupEditorFlyout.title"
               defaultMessage="Edit annotation group"
             />
           </h2>
@@ -108,14 +111,17 @@ export const GroupEditorFlyout = ({
                 data-test-subj="backToGroupSettings"
                 onClick={() => setSelectedAnnotation(undefined)}
               >
-                <FormattedMessage id="eventAnnotation.edit.back" defaultMessage="Back" />
+                <FormattedMessage id="eventAnnotationComponents.edit.back" defaultMessage="Back" />
               </EuiButtonEmpty>
             </EuiFlexItem>
           ) : (
             <>
               <EuiFlexItem grow={false}>
                 <EuiButtonEmpty data-test-subj="cancelGroupEdit" onClick={onClose}>
-                  <FormattedMessage id="eventAnnotation.edit.cancel" defaultMessage="Cancel" />
+                  <FormattedMessage
+                    id="eventAnnotationComponents.edit.cancel"
+                    defaultMessage="Cancel"
+                  />
                 </EuiButtonEmpty>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
@@ -132,7 +138,7 @@ export const GroupEditorFlyout = ({
                   }}
                 >
                   <FormattedMessage
-                    id="eventAnnotation.edit.save"
+                    id="eventAnnotationComponents.edit.save"
                     defaultMessage="Save annotation group"
                   />
                 </EuiButton>

packages/kbn-event-annotation-components/components/index.ts

@@ -6,8 +6,11 @@
  * Side Public License, v 1.
  */
 
+// TODO - is this file needed?
 export { AnnotationEditorControls, annotationsIconSet } from './annotation_editor_controls';
 
 export * from './group_editor_controls';
 
 export * from './get_annotation_accessor';
+
+export * from './table_list';

packages/kbn-event-annotation-components/components/table_list.test.tsx

@@ -16,16 +16,19 @@ import {
   TableListViewTable,
   type UserContentCommonSchema,
 } from '@kbn/content-management-table-list-view-table';
-import { EventAnnotationServiceType } from '../event_annotation_service/types';
+import type { EventAnnotationServiceType } from '../types';
 import { IUiSettingsClient } from '@kbn/core-ui-settings-browser';
 import { shallow, ShallowWrapper } from 'enzyme';
-import { EventAnnotationGroupConfig, EVENT_ANNOTATION_GROUP_TYPE } from '../../common';
+import {
+  EventAnnotationGroupConfig,
+  EVENT_ANNOTATION_GROUP_TYPE,
+} from '@kbn/event-annotation-common';
 import { taggingApiMock } from '@kbn/saved-objects-tagging-oss-plugin/public/mocks';
 
 import { act } from 'react-dom/test-utils';
 import { GroupEditorFlyout } from './group_editor_flyout';
 import { DataView } from '@kbn/data-views-plugin/common';
-import { QueryInputServices } from '@kbn/visualization-ui-components/public';
+import { QueryInputServices } from '@kbn/visualization-ui-components';
 import { toastsServiceMock } from '@kbn/core-notifications-browser-mocks/src/toasts_service.mock';
 import { IToasts } from '@kbn/core-notifications-browser';
 

packages/kbn-event-annotation-components/components/table_list.tsx

@@ -11,16 +11,18 @@ import { TableListViewTable } from '@kbn/content-management-table-list-view-tabl
 import type { TableListTabParentProps } from '@kbn/content-management-tabbed-table-list-view';
 import { i18n } from '@kbn/i18n';
 import type { IUiSettingsClient } from '@kbn/core-ui-settings-browser';
-import { SavedObjectsFindOptionsReference } from '@kbn/core-saved-objects-api-browser';
-import { SavedObjectsTaggingApi } from '@kbn/saved-objects-tagging-oss-plugin/public';
+import type { SavedObjectsFindOptionsReference } from '@kbn/core-saved-objects-api-browser';
+import type { SavedObjectsTaggingApi } from '@kbn/saved-objects-tagging-oss-plugin/public';
 import { DataView, DataViewSpec } from '@kbn/data-views-plugin/common';
-import type { QueryInputServices } from '@kbn/visualization-ui-components/public';
+import type { QueryInputServices } from '@kbn/visualization-ui-components';
 import { IToasts } from '@kbn/core-notifications-browser';
 import { EuiButton, EuiEmptyPrompt, EuiTitle } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EventAnnotationGroupConfig } from '../../common';
-import type { EventAnnotationServiceType } from '../event_annotation_service/types';
-import { EventAnnotationGroupContent } from '../../common/types';
+import type {
+  EventAnnotationGroupConfig,
+  EventAnnotationGroupContent,
+} from '@kbn/event-annotation-common';
+import type { EventAnnotationServiceType } from '../types';
 import { GroupEditorFlyout } from './group_editor_flyout';
 
 export const SAVED_OBJECTS_LIMIT_SETTING = 'savedObjects:listingLimit';
@@ -33,7 +35,7 @@ const getCustomColumn = (dataViews: DataView[]) => {
 
   return {
     field: 'dataView',
-    name: i18n.translate('eventAnnotation.tableList.dataView', {
+    name: i18n.translate('eventAnnotationComponents.tableList.dataView', {
       defaultMessage: 'Data view',
     }),
     sortable: false,
@@ -144,7 +146,7 @@ export const EventAnnotationGroupTableList = ({
     <>
       <TableListViewTable<EventAnnotationGroupContent>
         refreshListBouncer={refreshListBouncer}
-        tableCaption={i18n.translate('eventAnnotation.tableList.listTitle', {
+        tableCaption={i18n.translate('eventAnnotationComponents.tableList.listTitle', {
           defaultMessage: 'Annotation Library',
         })}
         findItems={fetchItems}
@@ -164,7 +166,7 @@ export const EventAnnotationGroupTableList = ({
               <EuiTitle>
                 <h2>
                   <FormattedMessage
-                    id="eventAnnotation.tableList.emptyPrompt.title"
+                    id="eventAnnotationComponents.tableList.emptyPrompt.title"
                     defaultMessage="Create your first annotation in Lens"
                   />
                 </h2>
@@ -173,7 +175,7 @@ export const EventAnnotationGroupTableList = ({
             body={
               <p>
                 <FormattedMessage
-                  id="eventAnnotation.tableList.emptyPrompt.body"
+                  id="eventAnnotationComponents.tableList.emptyPrompt.body"
                   defaultMessage="You can create and save annotations for use across multiple visualization in the
                     Lens visualization editor."
                 />
@@ -182,7 +184,7 @@ export const EventAnnotationGroupTableList = ({
             actions={
               <EuiButton onClick={navigateToLens}>
                 <FormattedMessage
-                  id="eventAnnotation.tableList.emptyPrompt.cta"
+                  id="eventAnnotationComponents.tableList.emptyPrompt.cta"
                   defaultMessage="Create new annotation in Lens"
                 />
               </EuiButton>
@@ -190,10 +192,10 @@ export const EventAnnotationGroupTableList = ({
             iconType="flag"
           />
         }
-        entityName={i18n.translate('eventAnnotation.tableList.entityName', {
+        entityName={i18n.translate('eventAnnotationComponents.tableList.entityName', {
           defaultMessage: 'annotation group',
         })}
-        entityNamePlural={i18n.translate('eventAnnotation.tableList.entityNamePlural', {
+        entityNamePlural={i18n.translate('eventAnnotationComponents.tableList.entityNamePlural', {
           defaultMessage: 'annotation groups',
         })}
         onClickTitle={editItem}

packages/kbn-event-annotation-components/constants.ts

@@ -6,4 +6,4 @@
  * Side Public License, v 1.
  */
 
-export type LineStyle = 'solid' | 'dashed' | 'dotted';
+export const EVENT_ANNOTATION_APP_NAME = 'event-annotations';

packages/kbn-event-annotation-components/index.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export {
+  AnnotationEditorControls,
+  annotationsIconSet,
+} from './components/annotation_editor_controls';
+export { EventAnnotationGroupTableList, getAnnotationAccessor } from './components';
+export {
+  defaultAnnotationColor,
+  defaultAnnotationRangeColor,
+  defaultAnnotationLabel,
+  createCopiedAnnotation,
+  isRangeAnnotationConfig,
+  isManualPointAnnotationConfig,
+  isQueryAnnotationConfig,
+} from '@kbn/event-annotation-common';
+export { EVENT_ANNOTATION_APP_NAME } from './constants';
+export type { EventAnnotationServiceType } from './types';

packages/kbn-event-annotation-components/jest.config.js

@@ -6,4 +6,8 @@
  * Side Public License, v 1.
  */
 
-export {};
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-event-annotation-components'],
+};

packages/kbn-event-annotation-components/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-browser",
+  "id": "@kbn/event-annotation-components",
+  "owner": "@elastic/kibana-visualizations"
+}

packages/kbn-event-annotation-components/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@kbn/event-annotation-components",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0",
+  "sideEffects": [
+    "*.scss"
+  ]
+}

packages/kbn-event-annotation-components/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": [
+      "jest",
+      "node",
+      "@emotion/react/types/css-prop",
+    ]
+  },
+  "include": [
+    "**/*",
+  ],
+  "exclude": [
+    "target/**/*"
+  ],
+  "kbn_references": [
+    "@kbn/i18n", 
+    "@kbn/visualization-ui-components", 
+    "@kbn/ui-theme", 
+    "@kbn/chart-icons", 
+    "@kbn/unified-field-list",
+    "@kbn/data-views-plugin",
+    "@kbn/data-plugin",
+    "@kbn/test-jest-helpers",
+    "@kbn/saved-objects-tagging-oss-plugin",
+    "@kbn/core-ui-settings-browser",
+    "@kbn/dom-drag-drop",
+    "@kbn/content-management-table-list-view-table",
+    "@kbn/content-management-tabbed-table-list-view",
+    "@kbn/event-annotation-common",
+    "@kbn/core",
+    "@kbn/i18n-react",
+    "@kbn/saved-objects-finder-plugin",
+    "@kbn/saved-objects-management-plugin",
+    "@kbn/core-notifications-browser-mocks",
+    "@kbn/core-notifications-browser",
+    "@kbn/core-saved-objects-api-browser",
+    "@kbn/expressions-plugin",
+  ]
+}

packages/kbn-event-annotation-components/types.ts

@@ -6,10 +6,13 @@
  * Side Public License, v 1.
  */
 
-import { ExpressionAstExpression } from '@kbn/expressions-plugin/common/ast';
-import type { SavedObjectCommon } from '@kbn/saved-objects-finder-plugin/common';
-import { EventAnnotationGroupContent } from '../../common/types';
-import { EventAnnotationConfig, EventAnnotationGroupConfig } from '../../common';
+import { ExpressionAstExpression } from '@kbn/expressions-plugin/common';
+import { SavedObjectCommon } from '@kbn/saved-objects-finder-plugin/common';
+import type {
+  EventAnnotationConfig,
+  EventAnnotationGroupConfig,
+  EventAnnotationGroupContent,
+} from '@kbn/event-annotation-common';
 
 export interface EventAnnotationServiceType {
   loadAnnotationGroup: (savedObjectId: string) => Promise<EventAnnotationGroupConfig>;

packages/kbn-optimizer/limits.yml

@@ -161,5 +161,4 @@ pageLoadAssetSize:
   visTypeVislib: 242838
   visTypeXy: 46868
   visualizations: 90000
-  visualizationUiComponents: 76424
   watcher: 43598

packages/kbn-visualization-ui-components/README.md

@@ -0,0 +1,3 @@
+# @kbn/visualization-ui-components
+
+A set of components for interacting with visualizations. In practice, this is a place to put Lens components we want available outside of Lens.

packages/kbn-visualization-ui-components/components/dimension_buttons/dimension_button.test.tsx

@@ -7,7 +7,6 @@
  */
 
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
 import { DimensionButton, DimensionButtonProps } from './dimension_button';
 

packages/kbn-visualization-ui-components/components/dimension_buttons/trigger.test.tsx

@@ -7,7 +7,6 @@
  */
 
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
 import { DimensionTrigger } from './trigger';
 

packages/kbn-visualization-ui-components/components/line_style_settings.tsx

@@ -15,7 +15,7 @@ import {
   EuiFlexItem,
   EuiFormRow,
 } from '@elastic/eui';
-import { LineStyle } from '../../common/types';
+import { LineStyle } from '../types';
 
 interface LineStyleConfig {
   lineStyle?: LineStyle;

packages/kbn-visualization-ui-components/components/query_input/query_input.tsx

@@ -10,8 +10,10 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { isEqual } from 'lodash';
 import type { Query } from '@kbn/es-query';
-import { QueryStringInput } from '@kbn/unified-search-plugin/public';
-import type { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
+import {
+  type UnifiedSearchPublicPluginStart,
+  QueryStringInput,
+} from '@kbn/unified-search-plugin/public';
 import type { HttpStart } from '@kbn/core-http-browser';
 import type { IStorageWrapper } from '@kbn/kibana-utils-plugin/public';
 import type { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';

packages/kbn-visualization-ui-components/index.ts

@@ -6,8 +6,6 @@
  * Side Public License, v 1.
  */
 
-import { VisualizationUiComponentsPlugin } from './plugin';
-
 export {
   FieldPicker,
   TruncatedLabel,
@@ -46,8 +44,4 @@ export type {
   QueryInputServices,
 } from './components';
 
-export type { FormatFactory } from './types';
-
-export function plugin() {
-  return new VisualizationUiComponentsPlugin();
-}
+export type { FormatFactory, LineStyle } from './types';

packages/kbn-visualization-ui-components/jest.config.js

@@ -0,0 +1,14 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-visualization-ui-components'],
+  setupFiles: ['jest-canvas-mock'],
+};

packages/kbn-visualization-ui-components/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-browser",
+  "id": "@kbn/visualization-ui-components",
+  "owner": "@elastic/kibana-visualizations"
+}

packages/kbn-visualization-ui-components/package.json

@@ -2,5 +2,8 @@
   "name": "@kbn/visualization-ui-components",
   "private": true,
   "version": "1.0.0",
-  "license": "SSPL-1.0 OR Elastic License 2.0"
+  "license": "SSPL-1.0 OR Elastic License 2.0",
+  "sideEffects": [
+    "*.scss"
+  ]
 }

packages/kbn-visualization-ui-components/tsconfig.json

@@ -1,13 +1,19 @@
 {
-  "extends": "../../../tsconfig.base.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "target/types",
+    "types": [
+      "jest",
+      "node",
+      "@emotion/react/types/css-prop",
+      "@testing-library/jest-dom"
+    ]
   },
   "include": [
-    "../../typings/**/*",
-    "common/**/*",
-    "public/**/*",
-    "server/**/*",
+    "**/*",
+  ],
+  "exclude": [
+    "target/**/*"
   ],
   "kbn_references": [
     "@kbn/i18n",
@@ -21,14 +27,9 @@
     "@kbn/core-ui-settings-browser",
     "@kbn/core-notifications-browser",
     "@kbn/core-doc-links-browser",
-    "@kbn/core",
     "@kbn/ui-theme",
     "@kbn/coloring",
     "@kbn/field-formats-plugin",
-    "@kbn/unified-field-list"
+    "@kbn/unified-field-list",
   ],
-  "exclude": [
-    "target/**/*",
-  ]
 }
-

packages/kbn-visualization-ui-components/types.ts

@@ -9,3 +9,5 @@
 import type { IFieldFormat, SerializedFieldFormat } from '@kbn/field-formats-plugin/common';
 
 export type FormatFactory = (mapping?: SerializedFieldFormat) => IFieldFormat;
+
+export type LineStyle = 'solid' | 'dashed' | 'dotted';

src/plugins/chart_expressions/expression_xy/common/types/expression_renderers.ts

@@ -8,10 +8,8 @@
 
 import { CustomAnnotationTooltip } from '@elastic/charts';
 import type { AllowedChartOverrides, AllowedSettingsOverrides } from '@kbn/charts-plugin/common';
-import {
-  AvailableAnnotationIcon,
-  ManualPointEventAnnotationArgs,
-} from '@kbn/event-annotation-plugin/common';
+import { ManualPointEventAnnotationArgs } from '@kbn/event-annotation-plugin/common';
+import type { AvailableAnnotationIcon } from '@kbn/event-annotation-common';
 import { XY_VIS_RENDERER } from '../constants';
 import type { AllowedXYOverrides, XYProps } from './expression_functions';
 

src/plugins/chart_expressions/expression_xy/public/components/annotations.tsx

@@ -34,10 +34,7 @@ import type {
   ManualRangeEventAnnotationRow,
 } from '@kbn/event-annotation-plugin/common';
 import type { FieldFormat, FormatFactory } from '@kbn/field-formats-plugin/common';
-import {
-  defaultAnnotationColor,
-  defaultAnnotationRangeColor,
-} from '@kbn/event-annotation-plugin/public';
+import { defaultAnnotationColor, defaultAnnotationRangeColor } from '@kbn/event-annotation-common';
 import { Datatable, DatatableColumn, DatatableRow } from '@kbn/expressions-plugin/common';
 import { PointEventAnnotationRow } from '@kbn/event-annotation-plugin/common/manual_event_annotation/types';
 import { FormattedMessage } from '@kbn/i18n-react';

src/plugins/chart_expressions/expression_xy/tsconfig.json

@@ -31,6 +31,7 @@
     "@kbn/analytics",
     "@kbn/kibana-react-plugin",
     "@kbn/chart-expressions-common",
+    "@kbn/event-annotation-common",
   ],
   "exclude": [
     "target/**/*",

src/plugins/event_annotation/common/constants.ts

@@ -6,26 +6,7 @@
  * Side Public License, v 1.
  */
 
-export const AvailableAnnotationIcons = {
-  ASTERISK: 'asterisk',
-  ALERT: 'alert',
-  BELL: 'bell',
-  BOLT: 'bolt',
-  BUG: 'bug',
-  CIRCLE: 'circle',
-  EDITOR_COMMENT: 'editorComment',
-  FLAG: 'flag',
-  HEART: 'heart',
-  MAP_MARKER: 'mapMarker',
-  PIN_FILLED: 'pinFilled',
-  STAR_EMPTY: 'starEmpty',
-  STAR_FILLED: 'starFilled',
-  TAG: 'tag',
-  TRIANGLE: 'triangle',
-} as const;
-
-export const EVENT_ANNOTATION_GROUP_TYPE = 'event-annotation-group';
-
+// TODO - deduplicate with event_annotation_application
 export const ANNOTATIONS_LISTING_VIEW_ID = 'annotations';
 
 export const EVENT_ANNOTATION_APP_NAME = 'event-annotations';

src/plugins/event_annotation/common/content_management/v1/types.ts

@@ -20,8 +20,8 @@ import {
 } from '@kbn/content-management-plugin/common';
 
 import type { DataViewSpec } from '@kbn/data-views-plugin/common';
+import type { EventAnnotationConfig } from '@kbn/event-annotation-common';
 import { EventAnnotationGroupContentType } from '../types';
-import { EventAnnotationConfig } from '../../types';
 
 export interface Reference {
   type: string;

src/plugins/event_annotation/common/create_copied_annotation.ts

@@ -1,24 +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 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import { getDefaultManualAnnotation } from './manual_event_annotation';
-import { EventAnnotationConfig } from './types';
-
-export const createCopiedAnnotation = (
-  newId: string,
-  timestamp: string,
-  source?: EventAnnotationConfig
-): EventAnnotationConfig => {
-  if (!source) {
-    return getDefaultManualAnnotation(newId, timestamp);
-  }
-  return {
-    ...source,
-    id: newId,
-  };
-};