show saved title in layer panel header

x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.test.tsx

@@ -0,0 +1,73 @@
+/*
+ * 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 from 'react';
+
+import { FramePublicAPI } from '../../../types';
+import { mountWithIntl } from '@kbn/test-jest-helpers';
+import { LayerHeader } from './layer_header';
+import {
+  XYByReferenceAnnotationLayerConfig,
+  XYByValueAnnotationLayerConfig,
+  XYLayerConfig,
+  XYState,
+} from '../types';
+
+describe('layer header', () => {
+  describe('annotation layer header', () => {
+    it('should inject annotation title for by-reference layer', () => {
+      const byRefGroupTitle = 'My group title!';
+
+      const byRefLayer: XYByReferenceAnnotationLayerConfig = {
+        layerId: 'layer-123',
+        layerType: 'annotations',
+        annotationGroupId: 'some-group',
+        annotations: [],
+        indexPatternId: '',
+        ignoreGlobalFilters: false,
+        __lastSaved: {
+          title: byRefGroupTitle,
+          annotations: [],
+          indexPatternId: '',
+        },
+      };
+
+      const byValueLayer: XYByValueAnnotationLayerConfig = {
+        layerId: 'layer-123',
+        layerType: 'annotations',
+        annotations: [],
+        indexPatternId: '',
+        ignoreGlobalFilters: false,
+      };
+
+      const getStateWithLayers = (layers: XYLayerConfig[]): XYState => ({
+        preferredSeriesType: 'area',
+        legend: { isVisible: false, position: 'left' },
+        layers,
+      });
+
+      const props: Omit<Parameters<typeof LayerHeader>[0], 'state'> = {
+        layerId: 'layer-123',
+        frame: {} as FramePublicAPI,
+        onChangeIndexPattern: () => {},
+        setState: () => {},
+      };
+
+      expect(
+        mountWithIntl(<LayerHeader {...props} state={getStateWithLayers([byValueLayer])} />)
+          .text()
+          .trim()
+      ).toBe('Annotations');
+
+      expect(
+        mountWithIntl(<LayerHeader {...props} state={getStateWithLayers([byRefLayer])} />)
+          .text()
+          .trim()
+      ).toBe(byRefGroupTitle);
+    });
+  });
+});

x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/layer_header.tsx

@@ -19,7 +19,12 @@ import { State, visualizationTypes, SeriesType, XYAnnotationLayerConfig } from '
 import { isHorizontalChart, isHorizontalSeries } from '../state_helpers';
 import { ChangeIndexPattern, StaticHeader } from '../../../shared_components';
 import { updateLayer } from '.';
-import { isAnnotationsLayer, isDataLayer, isReferenceLayer } from '../visualization_helpers';
+import {
+  isAnnotationsLayer,
+  isByReferenceAnnotationsLayer,
+  isDataLayer,
+  isReferenceLayer,
+} from '../visualization_helpers';
 
 export function LayerHeader(props: VisualizationLayerWidgetProps<State>) {
   const layer = props.state.layers.find((l) => l.layerId === props.layerId);
@@ -30,7 +35,11 @@ export function LayerHeader(props: VisualizationLayerWidgetProps<State>) {
     return <ReferenceLayerHeader />;
   }
   if (isAnnotationsLayer(layer)) {
-    return <AnnotationsLayerHeader />;
+    return (
+      <AnnotationsLayerHeader
+        title={isByReferenceAnnotationsLayer(layer) ? layer.__lastSaved.title : undefined}
+      />
+    );
   }
   return <DataLayerHeader {...props} />;
 }
@@ -54,13 +63,16 @@ function ReferenceLayerHeader() {
   );
 }
 
-function AnnotationsLayerHeader() {
+function AnnotationsLayerHeader({ title }: { title: string | undefined }) {
   return (
     <StaticHeader
       icon={IconChartBarAnnotations}
-      label={i18n.translate('xpack.lens.xyChart.layerAnnotationsLabel', {
-        defaultMessage: 'Annotations',
-      })}
+      label={
+        title ||
+        i18n.translate('xpack.lens.xyChart.layerAnnotationsLabel', {
+          defaultMessage: 'Annotations',
+        })
+      }
     />
   );
 }