[Event annotations] Individual annotation editing from library (#163346)

## Summary Resolve #158774 Part of #159053 <img width="1920" alt="Screenshot 2023-09-13 at 2 00 25 PM" src="https://github.com/elastic/kibana/assets/315764/69cfe07e-d442-462b-91c5-395d6040c383"> <img width="1920" alt="Screenshot 2023-09-13 at 2 00 09 PM" src="https://github.com/elastic/kibana/assets/315764/260aedbe-31d0-415a-b387-10a9b13bf9a6"> <img width="1920" alt="Screenshot 2023-09-13 at 2 01 07 PM" src="https://github.com/elastic/kibana/assets/315764/9672010b-d49b-4041-acf1-33d3baec1e9a"> ### Known issues - [ ] ~Responsive layout~ **Proposal:** don't optimize for mobile - [x] Recovering embeddable from problematic data view state - [x] margin around dimension buttons - [x] Functional test coverage ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Stratoula Kalafateli <[email protected]>
elastic · Sep 20, 2023 · 172de68 · 172de68
1 parent f94b4c2
commit 172de68
Show file tree

Hide file tree

Showing 59 changed files with 2,735 additions and 550 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -364,6 +364,7 @@ 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_listing @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

diff --git a/.i18nrc.json b/.i18nrc.json
@@ -6,17 +6,12 @@
     "apmOss": "src/plugins/apm_oss",
     "autocomplete": "packages/kbn-securitysolution-autocomplete/src",
     "bfetch": "src/plugins/bfetch",
-    "cases": [
-      "packages/kbn-cases-components"
-    ],
+    "cases": ["packages/kbn-cases-components"],
     "cellActions": "packages/kbn-cell-actions",
     "charts": "src/plugins/charts",
     "console": "src/plugins/console",
     "contentManagement": "packages/content-management",
-    "core": [
-      "src/core",
-      "packages/core"
-    ],
+    "core": ["src/core", "packages/core"],
     "customIntegrations": "src/plugins/custom_integrations",
     "customIntegrationsPackage": "packages/kbn-custom-integrations",
     "dashboard": "src/plugins/dashboard",
@@ -27,10 +22,7 @@
     "dataViews": "src/plugins/data_views",
     "defaultNavigation": "packages/default-nav",
     "devTools": "src/plugins/dev_tools",
-    "discover": [
-      "src/plugins/discover",
-      "packages/kbn-discover-utils"
-    ],
+    "discover": ["src/plugins/discover", "packages/kbn-discover-utils"],
     "savedSearch": "src/plugins/saved_search",
     "embeddableApi": "src/plugins/embeddable",
     "embeddableExamples": "examples/embeddable_examples",
@@ -52,6 +44,7 @@
     "expressionShape": "src/plugins/expression_shape",
     "expressionTagcloud": "src/plugins/chart_expressions/expression_tagcloud",
     "eventAnnotation": "src/plugins/event_annotation",
+    "eventAnnotationListing": "src/plugins/event_annotation_listing",
     "eventAnnotationCommon": "packages/kbn-event-annotation-common",
     "eventAnnotationComponents": "packages/kbn-event-annotation-components",
     "fieldFormats": "src/plugins/field_formats",
@@ -110,17 +103,9 @@
     "languageDocumentationPopover": "packages/kbn-language-documentation-popover/src",
     "textBasedLanguages": "src/plugins/text_based_languages",
     "statusPage": "src/legacy/core_plugins/status_page",
-    "telemetry": [
-      "src/plugins/telemetry",
-      "src/plugins/telemetry_management_section"
-    ],
-    "timelion": [
-      "src/plugins/vis_types/timelion"
-    ],
-    "uiActions": [
-      "src/plugins/ui_actions",
-      "packages/kbn-ui-actions-browser"
-    ],
+    "telemetry": ["src/plugins/telemetry", "src/plugins/telemetry_management_section"],
+    "timelion": ["src/plugins/vis_types/timelion"],
+    "uiActions": ["src/plugins/ui_actions", "packages/kbn-ui-actions-browser"],
     "uiActionsEnhanced": "src/plugins/ui_actions_enhanced",
     "uiActionsExamples": "examples/ui_action_examples",
     "usageCollection": "src/plugins/usage_collection",
@@ -140,10 +125,7 @@
     "visTypeXy": "src/plugins/vis_types/xy",
     "visualizations": "src/plugins/visualizations",
     "visualizationUiComponents": "packages/kbn-visualization-ui-components",
-    "unifiedDocViewer": [
-      "src/plugins/unified_doc_viewer",
-      "packages/kbn-unified-doc-viewer"
-    ],
+    "unifiedDocViewer": ["src/plugins/unified_doc_viewer", "packages/kbn-unified-doc-viewer"],
     "unifiedSearch": "src/plugins/unified_search",
     "unifiedFieldList": "packages/kbn-unified-field-list",
     "unifiedHistogram": "src/plugins/unified_histogram",

diff --git a/docs/developer/plugin-list.asciidoc b/docs/developer/plugin-list.asciidoc
@@ -102,6 +102,10 @@ This API doesn't support angular, for registering angular dev tools, bootstrap a
 |The Event Annotation service contains expressions for event annotations
 
 
+|{kib-repo}blob/{branch}/src/plugins/event_annotation_listing/README.md[eventAnnotationListing]
+|This plugin contains the library listing page for event annotation groups.
+
+
 |{kib-repo}blob/{branch}/src/plugins/expression_error/README.md[expressionError]
 |Expression Error plugin adds an error renderer to the expression plugin. The renderer will display the error image.
 

diff --git a/docs/user/dashboard/images/lens_saveAnnotationLayerButton_8.9.0.png b/docs/user/dashboard/images/lens_saveAnnotationLayerButton_8.9.0.png
diff --git a/docs/user/dashboard/lens.asciidoc b/docs/user/dashboard/lens.asciidoc
@@ -222,9 +222,11 @@ Annotations support two placement types:
 
 * *Custom query* &mdash; Displays annotations based on custom {es} queries. For detailed information about queries, check <<semi-structured-search>>. 
 
-Create the annotation layer. 
+Any annotation layer can be saved as an annotation group to the *Visualize Library* in order to reuse it in other visualizations. Any changes made to the annotation group will be reflected in all visualizations to which it is added.
 
-. In the layer pane, click *Add layer > Annotations*.
+Create a new annotation layer. 
+
+. In the layer pane, click *Add layer > Annotations > New annotation*.
 
 . Select the {data-source} for the annotation.
 
@@ -263,6 +265,20 @@ Specify the annotation appearance.
 
 . To close, click *X*.
 
+Save the annotation group to the library. 
+
+. In the layer pane, on your annotation layer, click image:images/lens_saveAnnotationLayerButton_8.9.0.png[Save button on annotations layer].
+
+. Enter the *Title*, *Description*, and add any applicable <<managing-tags,*Tags*>>.
+
+. Click *Save group*.
+
+Add a library annotation group to a visualization.
+
+. In the layer pane, click *Add layer > Annotations > Load from library*.
+
+. Select the annotation group you want to use.
+
 [float]
 [[add-reference-lines]]
 ==== Add reference lines

diff --git a/package.json b/package.json
@@ -401,6 +401,7 @@
     "@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-listing-plugin": "link:src/plugins/event_annotation_listing",
     "@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",

diff --git a/packages/content-management/table_list_view_table/src/table_list_view_table.tsx b/packages/content-management/table_list_view_table/src/table_list_view_table.tsx
@@ -946,7 +946,7 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
 
   if (!showFetchError && hasNoItems) {
     return (
-      <PageTemplate panelled isEmptyState={true}>
+      <PageTemplate isEmptyState={true}>
         <KibanaPageTemplate.Section
           aria-labelledby={hasInitialFetchReturned ? headingId : undefined}
         >

diff --git a/...nnotation-components/components/annotation_editor_controls/annotation_editor_controls.tsx b/...nnotation-components/components/annotation_editor_controls/annotation_editor_controls.tsx
@@ -322,7 +322,6 @@ const AnnotationEditorControls = ({
         )}
 
         <ColorPicker
-          overwriteColor={currentAnnotation.color}
           defaultColor={isRange ? defaultAnnotationRangeColor : defaultAnnotationColor}
           showAlpha={isRange}
           setConfig={update}

diff --git a/...nt-annotation-components/components/annotation_editor_controls/query_annotation_panel.tsx b/...nt-annotation-components/components/annotation_editor_controls/query_annotation_panel.tsx
@@ -97,6 +97,7 @@ export const ConfigPanelQueryAnnotation = ({
         })}
       >
         <FieldPicker
+          compressed
           options={options}
           selectedOptions={
             selectedField

diff --git a/...-annotation-components/components/annotation_editor_controls/tooltip_annotation_panel.tsx b/...-annotation-components/components/annotation_editor_controls/tooltip_annotation_panel.tsx
@@ -181,6 +181,7 @@ export function TooltipSection({
               data-test-subj={`lnsXY-annotation-tooltip-${index}`}
             >
               <FieldPicker
+                compressed
                 selectedOptions={
                   value
                     ? [

diff --git a/packages/kbn-event-annotation-components/components/group_editor_flyout.tsx b/packages/kbn-event-annotation-components/components/group_editor_flyout.tsx
diff --git a/packages/kbn-event-annotation-components/components/index.ts b/packages/kbn-event-annotation-components/components/index.ts
@@ -9,8 +9,4 @@
 // 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';
diff --git a/packages/kbn-event-annotation-components/index.ts b/packages/kbn-event-annotation-components/index.ts
@@ -10,7 +10,7 @@ export {
   AnnotationEditorControls,
   annotationsIconSet,
 } from './components/annotation_editor_controls';
-export { EventAnnotationGroupTableList, getAnnotationAccessor } from './components';
+export { getAnnotationAccessor } from './components';
 export {
   defaultAnnotationColor,
   defaultAnnotationRangeColor,

diff --git a/packages/kbn-event-annotation-components/jest.config.js b/packages/kbn-event-annotation-components/jest.config.js
@@ -10,4 +10,5 @@ module.exports = {
   preset: '@kbn/test',
   rootDir: '../..',
   roots: ['<rootDir>/packages/kbn-event-annotation-components'],
+  setupFiles: ['jest-canvas-mock'],
 };
diff --git a/packages/kbn-event-annotation-components/tsconfig.json b/packages/kbn-event-annotation-components/tsconfig.json
@@ -22,19 +22,11 @@
     "@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/content-management-plugin",
     "@kbn/event-annotation-common",
     "@kbn/i18n-react",
     "@kbn/saved-objects-finder-plugin",
-    "@kbn/core-notifications-browser-mocks",
-    "@kbn/core-notifications-browser",
-    "@kbn/core-saved-objects-api-browser",
     "@kbn/expressions-plugin",
-    "@kbn/content-management-plugin",
   ]
 }
diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
@@ -40,7 +40,8 @@ pageLoadAssetSize:
   embeddableEnhanced: 22107
   enterpriseSearch: 50858
   esUiShared: 326654
-  eventAnnotation: 48565
+  eventAnnotation: 30000
+  eventAnnotationListing: 25841
   exploratoryView: 74673
   expressionError: 22127
   expressionGauge: 25000

diff --git a/packages/kbn-visualization-ui-components/components/color_picker.tsx b/packages/kbn-visualization-ui-components/components/color_picker.tsx
@@ -97,12 +97,12 @@ export const ColorPicker = ({
       onChange={handleColor}
       color={isDisabled ? '' : colorText}
       disabled={isDisabled}
-      placeholder={
-        defaultColor?.toUpperCase() ||
-        i18n.translate('visualizationUiComponents.colorPicker.seriesColor.auto', {
-          defaultMessage: 'Auto',
-        })
-      }
+      placeholder={' '}
+      onBlur={() => {
+        if (!colorText) {
+          setColorText(overwriteColor ?? defaultColor);
+        }
+      }}
       aria-label={inputLabel}
       showAlpha={showAlpha}
       swatches={