new annotation from empty annotation library

elastic · May 30, 2023 · 91c2db4 · 91c2db4
1 parent f8cdd41
commit 91c2db4
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 33 deletions.
diff --git a/...plugins/event_annotation/public/components/event_annotation_group_saved_object_finder.tsx b/...plugins/event_annotation/public/components/event_annotation_group_saved_object_finder.tsx
@@ -14,7 +14,15 @@ import { 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 { SavedObjectsManagementPluginStart } from '@kbn/saved-objects-management-plugin/public';
-import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiEmptyPrompt,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingSpinner,
+  EuiText,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
 import { EVENT_ANNOTATION_GROUP_TYPE } from '../../common';
 
 export const EventAnnotationGroupSavedObjectFinder = ({
@@ -24,6 +32,7 @@ export const EventAnnotationGroupSavedObjectFinder = ({
   fixedPageSize = 10,
   checkHasAnnotationGroups,
   onChoose,
+  onCreateNew,
 }: {
   uiSettings: IUiSettingsClient;
   http: CoreStart['http'];
@@ -36,6 +45,7 @@ export const EventAnnotationGroupSavedObjectFinder = ({
     fullName: string;
     savedObject: SavedObjectCommon<unknown>;
   }) => void;
+  onCreateNew: () => void;
 }) => {
   const [hasAnnotationGroups, setHasAnnotationGroups] = useState<boolean | undefined>();
 
@@ -50,14 +60,43 @@ export const EventAnnotationGroupSavedObjectFinder = ({
       </EuiFlexItem>
     </EuiFlexGroup>
   ) : hasAnnotationGroups === false ? (
-    <EuiEmptyPrompt
-      title={
-        <FormattedMessage
-          id="eventAnnotation.eventAnnotationGroup.savedObjectFinder.emptyPrompt"
-          defaultMessage="No library annotation groups found."
-        />
-      }
-    />
+    <EuiFlexGroup
+      css={css`
+        height: 100%;
+      `}
+      direction="column"
+      justifyContent="center"
+    >
+      <EuiEmptyPrompt
+        titleSize="xs"
+        title={
+          <h2>
+            <FormattedMessage
+              id="eventAnnotation.eventAnnotationGroup.savedObjectFinder.emptyPromptTitle"
+              defaultMessage="Start by adding an annotation layer"
+            />
+          </h2>
+        }
+        body={
+          <EuiText size="s">
+            <p>
+              <FormattedMessage
+                id="eventAnnotation.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="eventAnnotation.eventAnnotationGroup.savedObjectFinder.emptyCTA"
+              defaultMessage="Create annotation layer"
+            />
+          </EuiButton>
+        }
+      />
+    </EuiFlexGroup>
   ) : (
     <SavedObjectFinder
       key="searchSavedObjectFinder"

diff --git a/src/plugins/event_annotation/public/event_annotation_service/types.ts b/src/plugins/event_annotation/public/event_annotation_service/types.ts
@@ -32,5 +32,6 @@ export interface EventAnnotationServiceType {
       fullName: string;
       savedObject: SavedObjectCommon<unknown>;
     }) => void;
+    onCreateNew: () => void;
   }) => JSX.Element;
 }
diff --git a/x-pack/plugins/lens/public/visualizations/xy/add_layer.tsx b/x-pack/plugins/lens/public/visualizations/xy/add_layer.tsx
@@ -24,15 +24,13 @@ import type { ExtraAppendLayerArg } from './visualization';
 
 interface AddLayerButtonProps {
   supportedLayers: VisualizationLayerDescription[];
-  addLayer: AddLayerFunction;
-  onAddLayerFromAnnotationGroup: (arg: ExtraAppendLayerArg) => void;
+  addLayer: AddLayerFunction<ExtraAppendLayerArg>;
   eventAnnotationService: EventAnnotationServiceType;
 }
 
 export function AddLayerButton({
   supportedLayers,
   addLayer,
-  onAddLayerFromAnnotationGroup,
   eventAnnotationService,
 }: AddLayerButtonProps) {
   const [showLayersChoice, toggleLayersChoice] = useState(false);
@@ -164,7 +162,9 @@ export function AddLayerButton({
           isLoadLibraryVisible={isLoadLibraryVisible}
           setLoadLibraryFlyoutVisible={setLoadLibraryFlyoutVisible}
           eventAnnotationService={eventAnnotationService}
-          addLayer={onAddLayerFromAnnotationGroup}
+          addLayer={(extraArg) => {
+            addLayer(LayerTypes.ANNOTATIONS, extraArg);
+          }}
         />
       )}
     </>

diff --git a/x-pack/plugins/lens/public/visualizations/xy/load_annotation_library_flyout.tsx b/x-pack/plugins/lens/public/visualizations/xy/load_annotation_library_flyout.tsx
@@ -21,7 +21,7 @@ export function LoadAnnotationLibraryFlyout({
   isLoadLibraryVisible: boolean;
   setLoadLibraryFlyoutVisible: (visible: boolean) => void;
   eventAnnotationService: EventAnnotationServiceType;
-  addLayer: (argument: ExtraAppendLayerArg) => void;
+  addLayer: (argument?: ExtraAppendLayerArg) => void;
 }) {
   const {
     renderEventAnnotationGroupSavedObjectFinder: EventAnnotationGroupSavedObjectFinder,
@@ -65,16 +65,18 @@ export function LoadAnnotationLibraryFlyout({
         return true;
       }}
     >
-      <div className="lnsIndexPatternDimensionEditor--padded">
-        <EventAnnotationGroupSavedObjectFinder
-          onChoose={({ id }) => {
-            loadAnnotationGroup(id).then((loadedGroup) => {
-              addLayer({ ...loadedGroup, annotationGroupId: id });
-              setLoadLibraryFlyoutVisible(false);
-            });
-          }}
-        />
-      </div>
+      <EventAnnotationGroupSavedObjectFinder
+        onChoose={({ id }) => {
+          loadAnnotationGroup(id).then((loadedGroup) => {
+            addLayer({ ...loadedGroup, annotationGroupId: id });
+            setLoadLibraryFlyoutVisible(false);
+          });
+        }}
+        onCreateNew={() => {
+          addLayer();
+          setLoadLibraryFlyoutVisible(false);
+        }}
+      />
     </FlyoutContainer>
   );
 }
diff --git a/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx b/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx
@@ -723,17 +723,19 @@ export const getXyVisualization = ({
       <AddLayerButton
         {...props}
         eventAnnotationService={eventAnnotationService}
-        onAddLayerFromAnnotationGroup={async (loadedGroupInfo) => {
-          await props.ensureIndexPattern(
-            loadedGroupInfo.dataViewSpec ?? loadedGroupInfo.indexPatternId
-          );
+        addLayer={async (type, loadedGroupInfo) => {
+          if (type === LayerTypes.ANNOTATIONS && loadedGroupInfo) {
+            await props.ensureIndexPattern(
+              loadedGroupInfo.dataViewSpec ?? loadedGroupInfo.indexPatternId
+            );
 
-          props.registerLibraryAnnotationGroup({
-            id: loadedGroupInfo.annotationGroupId,
-            group: loadedGroupInfo,
-          });
+            props.registerLibraryAnnotationGroup({
+              id: loadedGroupInfo.annotationGroupId,
+              group: loadedGroupInfo,
+            });
+          }
 
-          props.addLayer(LayerTypes.ANNOTATIONS, loadedGroupInfo, true);
+          props.addLayer(type, loadedGroupInfo, !!loadedGroupInfo);
         }}
       />
     );