[Lens] warn user before leaving editor after creating new library ann…

…otation group (#161307)
elastic · Jul 7, 2023 · e9e5c3c · e9e5c3c
1 parent 2774812
commit e9e5c3c
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 20 deletions.
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx
@@ -246,6 +246,11 @@ export function LayerPanels(
     setNextFocusedLayerId(layerId);
   };
 
+  const registerLibraryAnnotationGroupFunction = useCallback(
+    (groupInfo) => dispatchLens(registerLibraryAnnotationGroup(groupInfo)),
+    [dispatchLens]
+  );
+
   const hideAddLayerButton = query && isOfAggregateQueryType(query);
 
   return (
@@ -261,6 +266,7 @@ export function LayerPanels(
           !hidden && (
             <LayerPanel
               {...props}
+              registerLibraryAnnotationGroup={registerLibraryAnnotationGroupFunction}
               dimensionGroups={groups}
               activeVisualization={activeVisualization}
               registerNewLayerRef={registerNewLayerRef}
@@ -369,8 +375,7 @@ export function LayerPanels(
               );
             }
           },
-          registerLibraryAnnotationGroup: (groupInfo) =>
-            dispatchLens(registerLibraryAnnotationGroup(groupInfo)),
+          registerLibraryAnnotationGroup: registerLibraryAnnotationGroupFunction,
         })}
     </EuiForm>
   );

diff --git a/...k/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/...k/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
@@ -115,6 +115,7 @@ describe('LayerPanel', () => {
       toggleFullscreen: jest.fn(),
       onEmptyDimensionAdd: jest.fn(),
       onChangeIndexPattern: jest.fn(),
+      registerLibraryAnnotationGroup: jest.fn(),
       indexPatternService: createIndexPatternServiceMock(),
       getUserMessages: () => [],
       displayLayerSettings: true,

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
@@ -34,6 +34,7 @@ import {
   VisualizationDimensionGroupConfig,
   UserMessagesGetter,
   AddLayerFunction,
+  RegisterLibraryAnnotationGroupFunction,
 } from '../../../types';
 import { LayerSettings } from './layer_settings';
 import { LayerPanelProps, ActiveDimensionState } from './types';
@@ -63,6 +64,7 @@ export function LayerPanel(
     layerIndex: number;
     isOnlyLayer: boolean;
     addLayer: AddLayerFunction;
+    registerLibraryAnnotationGroup: RegisterLibraryAnnotationGroupFunction;
     updateVisualization: StateSetter<unknown>;
     updateDatasource: (
       datasourceId: string | undefined,
@@ -352,6 +354,7 @@ export function LayerPanel(
             layerId,
             visualizationState,
             updateVisualization,
+            props.registerLibraryAnnotationGroup,
             isSaveable
           )
           .map((action) => ({
@@ -385,18 +388,19 @@ export function LayerPanel(
       ].filter((i) => i.isCompatible),
     [
       activeVisualization,
+      layerId,
+      visualizationState,
+      updateVisualization,
+      props.registerLibraryAnnotationGroup,
+      isSaveable,
       core,
+      layerIndex,
       isOnlyLayer,
       isTextBasedLanguage,
+      visualizationLayerSettings,
       layerDatasource?.renderLayerSettings,
-      layerId,
-      layerIndex,
       onCloneLayer,
       onRemoveLayer,
-      updateVisualization,
-      visualizationLayerSettings,
-      visualizationState,
-      isSaveable,
     ]
   );
   const layerActionsFlyoutRef = useRef<HTMLDivElement | null>(null);

diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts
@@ -1027,6 +1027,11 @@ export interface VisualizationLayerDescription {
     autoTimeField?: boolean;
   }>;
 }
+
+export type RegisterLibraryAnnotationGroupFunction = (groupInfo: {
+  id: string;
+  group: EventAnnotationGroupConfig;
+}) => void;
 export interface Visualization<T = unknown, P = T, ExtraAppendLayerArg = unknown> {
   /** Plugin ID, such as "lnsXY" */
   id: string;
@@ -1115,6 +1120,7 @@ export interface Visualization<T = unknown, P = T, ExtraAppendLayerArg = unknown
     layerId: string,
     state: T,
     setState: StateSetter<T>,
+    registerLibraryAnnotationGroup: RegisterLibraryAnnotationGroupFunction,
     isSaveable?: boolean
   ) => LayerAction[];
 
@@ -1251,10 +1257,7 @@ export interface Visualization<T = unknown, P = T, ExtraAppendLayerArg = unknown
     supportedLayers: VisualizationLayerDescription[];
     addLayer: AddLayerFunction;
     ensureIndexPattern: (specOrId: DataViewSpec | string) => Promise<void>;
-    registerLibraryAnnotationGroup: (groupInfo: {
-      id: string;
-      group: EventAnnotationGroupConfig;
-    }) => void;
+    registerLibraryAnnotationGroup: RegisterLibraryAnnotationGroupFunction;
   }) => JSX.Element | null;
   /**
    * Creates map of columns ids and unique lables. Used only for noDatasource layers

diff --git a/x-pack/plugins/lens/public/visualizations/xy/annotations/actions/index.ts b/x-pack/plugins/lens/public/visualizations/xy/annotations/actions/index.ts
@@ -12,7 +12,11 @@ import type { ThemeServiceStart } from '@kbn/core/public';
 import { DataViewsContract } from '@kbn/data-views-plugin/public';
 import { VISUALIZE_APP_NAME } from '@kbn/visualizations-plugin/common/constants';
 import { ANNOTATIONS_LISTING_VIEW_ID } from '@kbn/event-annotation-plugin/common';
-import type { LayerAction, StateSetter } from '../../../../types';
+import type {
+  LayerAction,
+  RegisterLibraryAnnotationGroupFunction,
+  StateSetter,
+} from '../../../../types';
 import { XYState, XYAnnotationLayerConfig } from '../../types';
 import { getUnlinkLayerAction } from './unlink_action';
 import { getSaveLayerAction } from './save_action';
@@ -23,6 +27,7 @@ export const createAnnotationActions = ({
   state,
   layer,
   setState,
+  registerLibraryAnnotationGroup,
   core,
   isSaveable,
   eventAnnotationService,
@@ -33,6 +38,7 @@ export const createAnnotationActions = ({
   state: XYState;
   layer: XYAnnotationLayerConfig;
   setState: StateSetter<XYState, unknown>;
+  registerLibraryAnnotationGroup: RegisterLibraryAnnotationGroupFunction;
   core: CoreStart;
   isSaveable?: boolean;
   eventAnnotationService: EventAnnotationServiceType;
@@ -52,6 +58,7 @@ export const createAnnotationActions = ({
         state,
         layer,
         setState,
+        registerLibraryAnnotationGroup,
         eventAnnotationService,
         toasts: core.notifications.toasts,
         savedObjectsTagging,

diff --git a/x-pack/plugins/lens/public/visualizations/xy/annotations/actions/save_action.test.tsx b/x-pack/plugins/lens/public/visualizations/xy/annotations/actions/save_action.test.tsx
@@ -16,7 +16,10 @@ import {
 } from '../../types';
 import { onSave, SaveModal } from './save_action';
 import { shallowWithIntl } from '@kbn/test-jest-helpers';
-import { PointInTimeEventAnnotationConfig } from '@kbn/event-annotation-plugin/common';
+import {
+  EventAnnotationGroupConfig,
+  PointInTimeEventAnnotationConfig,
+} from '@kbn/event-annotation-plugin/common';
 import { SavedObjectSaveModal } from '@kbn/saved-objects-plugin/public';
 import { taggingApiMock } from '@kbn/saved-objects-tagging-plugin/public/mocks';
 import { dataViewPluginMocks } from '@kbn/data-views-plugin/public/mocks';
@@ -145,6 +148,7 @@ describe('annotation group save action', () => {
           layers: [{ layerId } as XYAnnotationLayerConfig],
         } as XYState,
         layer: byValueLayer,
+        registerLibraryAnnotationGroup: jest.fn(),
         setState: jest.fn(),
         eventAnnotationService: {
           createAnnotationGroup: jest.fn(() => Promise.resolve({ id: savedId })),
@@ -178,13 +182,22 @@ describe('annotation group save action', () => {
     test('successful initial save', async () => {
       await onSave(props);
 
-      expect(props.eventAnnotationService.createAnnotationGroup).toHaveBeenCalledWith({
+      const expectedConfig: EventAnnotationGroupConfig = {
         annotations: props.layer.annotations,
         indexPatternId: props.layer.indexPatternId,
         ignoreGlobalFilters: props.layer.ignoreGlobalFilters,
         title: props.modalOnSaveProps.newTitle,
         description: props.modalOnSaveProps.newDescription,
         tags: props.modalOnSaveProps.newTags,
+      };
+
+      expect(props.eventAnnotationService.createAnnotationGroup).toHaveBeenCalledWith(
+        expectedConfig
+      );
+
+      expect(props.registerLibraryAnnotationGroup).toHaveBeenCalledWith({
+        id: savedId,
+        group: expectedConfig,
       });
 
       expect(props.modalOnSaveProps.closeModal).toHaveBeenCalled();
@@ -206,14 +219,23 @@ describe('annotation group save action', () => {
 
       await onSave(props);
 
-      expect(props.eventAnnotationService.createAnnotationGroup).toHaveBeenCalledWith({
+      const expectedConfig: EventAnnotationGroupConfig = {
         annotations: props.layer.annotations,
         indexPatternId: props.layer.indexPatternId,
         ignoreGlobalFilters: props.layer.ignoreGlobalFilters,
         title: props.modalOnSaveProps.newTitle,
         description: props.modalOnSaveProps.newDescription,
         tags: props.modalOnSaveProps.newTags,
         dataViewSpec,
+      };
+
+      expect(props.eventAnnotationService.createAnnotationGroup).toHaveBeenCalledWith(
+        expectedConfig
+      );
+
+      expect(props.registerLibraryAnnotationGroup).toHaveBeenCalledWith({
+        id: savedId,
+        group: expectedConfig,
       });
 
       expect(props.modalOnSaveProps.closeModal).toHaveBeenCalled();
@@ -241,6 +263,8 @@ describe('annotation group save action', () => {
 
       expect(props.toasts.addError).toHaveBeenCalledTimes(1);
 
+      expect(props.registerLibraryAnnotationGroup).not.toHaveBeenCalled();
+
       expect(props.modalOnSaveProps.closeModal).not.toHaveBeenCalled();
 
       expect(props.setState).not.toHaveBeenCalled();
@@ -307,13 +331,22 @@ describe('annotation group save action', () => {
 
       expect(props.eventAnnotationService.updateAnnotationGroup).not.toHaveBeenCalled();
 
-      expect(props.eventAnnotationService.createAnnotationGroup).toHaveBeenCalledWith({
+      const expectedConfig: EventAnnotationGroupConfig = {
         annotations: props.layer.annotations,
         indexPatternId: props.layer.indexPatternId,
         ignoreGlobalFilters: props.layer.ignoreGlobalFilters,
         title: props.modalOnSaveProps.newTitle,
         description: props.modalOnSaveProps.newDescription,
         tags: props.modalOnSaveProps.newTags,
+      };
+
+      expect(props.eventAnnotationService.createAnnotationGroup).toHaveBeenCalledWith(
+        expectedConfig
+      );
+
+      expect(props.registerLibraryAnnotationGroup).toHaveBeenCalledWith({
+        id: savedId,
+        group: expectedConfig,
       });
 
       expect(props.modalOnSaveProps.closeModal).toHaveBeenCalled();

diff --git a/x-pack/plugins/lens/public/visualizations/xy/annotations/actions/save_action.tsx b/x-pack/plugins/lens/public/visualizations/xy/annotations/actions/save_action.tsx
@@ -22,7 +22,11 @@ import { EventAnnotationGroupConfig } from '@kbn/event-annotation-plugin/common'
 import { EuiIcon, EuiLink } from '@elastic/eui';
 import { type SavedObjectTaggingPluginStart } from '@kbn/saved-objects-tagging-plugin/public';
 import { DataViewsContract } from '@kbn/data-views-plugin/public';
-import type { LayerAction, StateSetter } from '../../../../types';
+import type {
+  LayerAction,
+  RegisterLibraryAnnotationGroupFunction,
+  StateSetter,
+} from '../../../../types';
 import { XYByReferenceAnnotationLayerConfig, XYAnnotationLayerConfig, XYState } from '../../types';
 import { isByReferenceAnnotationsLayer } from '../../visualization_helpers';
 
@@ -160,6 +164,7 @@ export const onSave = async ({
   state,
   layer,
   setState,
+  registerLibraryAnnotationGroup,
   eventAnnotationService,
   toasts,
   modalOnSaveProps: {
@@ -177,6 +182,10 @@ export const onSave = async ({
   state: XYState;
   layer: XYAnnotationLayerConfig;
   setState: StateSetter<XYState, unknown>;
+  registerLibraryAnnotationGroup: (props: {
+    id: string;
+    group: EventAnnotationGroupConfig;
+  }) => void;
   eventAnnotationService: EventAnnotationServiceType;
   toasts: ToastsStart;
   modalOnSaveProps: ModalOnSaveProps;
@@ -202,6 +211,12 @@ export const onSave = async ({
       eventAnnotationService,
       dataViews
     );
+
+    // add new group to state
+    registerLibraryAnnotationGroup({
+      id: savedInfo.id,
+      group: savedInfo.config,
+    });
   } catch (err) {
     toasts.addError(err, {
       title: i18n.translate(
@@ -275,6 +290,7 @@ export const getSaveLayerAction = ({
   state,
   layer,
   setState,
+  registerLibraryAnnotationGroup,
   eventAnnotationService,
   toasts,
   savedObjectsTagging,
@@ -285,6 +301,7 @@ export const getSaveLayerAction = ({
   state: XYState;
   layer: XYAnnotationLayerConfig;
   setState: StateSetter<XYState, unknown>;
+  registerLibraryAnnotationGroup: RegisterLibraryAnnotationGroupFunction;
   eventAnnotationService: EventAnnotationServiceType;
   toasts: ToastsStart;
   savedObjectsTagging?: SavedObjectTaggingPluginStart;
@@ -320,6 +337,7 @@ export const getSaveLayerAction = ({
                     state,
                     layer,
                     setState,
+                    registerLibraryAnnotationGroup,
                     eventAnnotationService,
                     toasts,
                     modalOnSaveProps: props,

diff --git a/x-pack/plugins/lens/public/visualizations/xy/visualization.test.tsx b/x-pack/plugins/lens/public/visualizations/xy/visualization.test.tsx
@@ -3633,7 +3633,7 @@ describe('xy_visualization', () => {
   describe('getSupportedActionsForLayer', () => {
     it('should return no actions for a data layer', () => {
       expect(
-        xyVisualization.getSupportedActionsForLayer?.('first', exampleState(), jest.fn())
+        xyVisualization.getSupportedActionsForLayer?.('first', exampleState(), jest.fn(), jest.fn())
       ).toHaveLength(0);
     });
 
@@ -3655,6 +3655,7 @@ describe('xy_visualization', () => {
               ...baseState,
               layers: [annotationLayer],
             },
+            jest.fn(),
             jest.fn()
           )
         ).toEqual([]);
@@ -3688,6 +3689,7 @@ describe('xy_visualization', () => {
                 layers: [annotationLayer],
               },
               jest.fn(),
+              jest.fn(),
               true
             )
           ).toMatchInlineSnapshot(`
@@ -3736,6 +3738,7 @@ describe('xy_visualization', () => {
                   layers: [annotationLayer],
                 },
                 jest.fn(),
+                jest.fn(),
                 false
               )
               .some((action) => action['data-test-subj'] === 'lnsXY_annotationLayer_saveToLibrary')
@@ -3758,6 +3761,7 @@ describe('xy_visualization', () => {
                   ],
                 },
                 jest.fn(),
+                jest.fn(),
                 false
               )
               .find((action) => action['data-test-subj'] === 'lnsXY_annotationLayer_revertChanges')

diff --git a/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx b/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx
@@ -298,7 +298,13 @@ export const getXyVisualization = ({
     ];
   },
 
-  getSupportedActionsForLayer(layerId, state, setState, isSaveable) {
+  getSupportedActionsForLayer(
+    layerId,
+    state,
+    setState,
+    registerLibraryAnnotationGroup,
+    isSaveable
+  ) {
     const layerIndex = state.layers.findIndex((l) => l.layerId === layerId);
     const layer = state.layers[layerIndex];
     const actions = [];
@@ -308,6 +314,7 @@ export const getXyVisualization = ({
           state,
           layer,
           setState,
+          registerLibraryAnnotationGroup,
           core,
           isSaveable,
           eventAnnotationService,