[8.9] [Event annotations] Lens design improvements (#159057) (#161116)

# Backport

This will backport the following commits from `main` to `8.9`:
- [[Event annotations] Lens design improvements
(#159057)](#159057)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Drew
Tate","email":"drew.tate@elastic.co"},"sourceCommit":{"committedDate":"2023-07-03T14:16:47Z","message":"[Event
annotations] Lens design improvements
(#159057)","sha":"1d82d2cb612483e96793d3b53669e19438bce28f","branchLabelMapping":{"^v8.10.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Visualizations","release_note:skip","Feature:Lens","backport:prev-minor","v8.9.0","v8.10.0"],"number":159057,"url":"#159057
annotations] Lens design improvements
(#159057)","sha":"1d82d2cb612483e96793d3b53669e19438bce28f"}},"sourceBranch":"main","suggestedTargetBranches":["8.9"],"targetPullRequestStates":[{"branch":"8.9","label":"v8.9.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.10.0","labelRegex":"^v8.10.0$","isSourceBranch":true,"state":"MERGED","url":"#159057
annotations] Lens design improvements
(#159057)","sha":"1d82d2cb612483e96793d3b53669e19438bce28f"}}]}]
BACKPORT-->

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

@@ -120,6 +120,9 @@ export interface EventAnnotationGroupSearchQuery {
   searchFields?: string[];
 }
 
-export type EventAnnotationGroupSearchIn = SearchIn<EventAnnotationGroupContentType, {}>;
+export type EventAnnotationGroupSearchIn = SearchIn<
+  EventAnnotationGroupContentType,
+  EventAnnotationGroupSearchQuery
+>;
 
 export type EventAnnotationGroupSearchOut = SearchResult<EventAnnotationGroupSavedObject>;

src/plugins/event_annotation/public/components/event_annotation_group_saved_object_finder.tsx

@@ -67,35 +67,37 @@ export const EventAnnotationGroupSavedObjectFinder = ({
       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>
+      <EuiFlexItem>
+        <EuiEmptyPrompt
+          titleSize="xs"
+          title={
+            <h2>
               <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."
+                id="eventAnnotation.eventAnnotationGroup.savedObjectFinder.emptyPromptTitle"
+                defaultMessage="Start by adding an annotation layer"
               />
-            </p>
-          </EuiText>
-        }
-        actions={
-          <EuiButton onClick={() => onCreateNew()} size="s">
-            <FormattedMessage
-              id="eventAnnotation.eventAnnotationGroup.savedObjectFinder.emptyCTA"
-              defaultMessage="Create annotation layer"
-            />
-          </EuiButton>
-        }
-      />
+            </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>
+          }
+        />
+      </EuiFlexItem>
     </EuiFlexGroup>
   ) : (
     <SavedObjectFinder

src/plugins/event_annotation/public/event_annotation_service/service.tsx

@@ -34,7 +34,8 @@ import {
   isQueryAnnotationConfig,
 } from './helpers';
 import { EventAnnotationGroupSavedObjectFinder } from '../components/event_annotation_group_saved_object_finder';
-import {
+import { CONTENT_ID } from '../../common/content_management';
+import type {
   EventAnnotationGroupCreateIn,
   EventAnnotationGroupCreateOut,
   EventAnnotationGroupDeleteIn,
@@ -106,7 +107,7 @@ export function getEventAnnotationService(
     savedObjectId: string
   ): Promise<EventAnnotationGroupConfig> => {
     const savedObject = await client.get<EventAnnotationGroupGetIn, EventAnnotationGroupGetOut>({
-      contentTypeId: EVENT_ANNOTATION_GROUP_TYPE,
+      contentTypeId: CONTENT_ID,
       id: savedObjectId,
     });
 
@@ -117,6 +118,29 @@ export function getEventAnnotationService(
     return mapSavedObjectToGroupConfig(savedObject.item);
   };
 
+  const groupExistsWithTitle = async (title: string): Promise<boolean> => {
+    const { hits } = await client.search<
+      EventAnnotationGroupSearchIn,
+      EventAnnotationGroupSearchOut
+    >({
+      contentTypeId: CONTENT_ID,
+      query: {
+        text: title,
+      },
+      options: {
+        searchFields: ['title'],
+      },
+    });
+
+    for (const hit of hits) {
+      if (hit.attributes.title.toLowerCase() === title.toLowerCase()) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+
   const findAnnotationGroupContent = async (
     searchTerm: string,
     pageSize: number,
@@ -138,7 +162,7 @@ export function getEventAnnotationService(
       EventAnnotationGroupSearchIn,
       EventAnnotationGroupSearchOut
     >({
-      contentTypeId: EVENT_ANNOTATION_GROUP_TYPE,
+      contentTypeId: CONTENT_ID,
       query: {
         text: searchOptions.search,
       },
@@ -153,7 +177,7 @@ export function getEventAnnotationService(
   const deleteAnnotationGroups = async (ids: string[]): Promise<void> => {
     for (const id of ids) {
       await client.delete<EventAnnotationGroupDeleteIn, EventAnnotationGroupDeleteOut>({
-        contentTypeId: EVENT_ANNOTATION_GROUP_TYPE,
+        contentTypeId: CONTENT_ID,
         id,
       });
     }
@@ -223,7 +247,7 @@ export function getEventAnnotationService(
 
     const groupSavedObjectId = (
       await client.create<EventAnnotationGroupCreateIn, EventAnnotationGroupCreateOut>({
-        contentTypeId: EVENT_ANNOTATION_GROUP_TYPE,
+        contentTypeId: CONTENT_ID,
         data: {
           ...attributes,
         },
@@ -243,7 +267,7 @@ export function getEventAnnotationService(
     const { attributes, references } = getAnnotationGroupAttributesAndReferences(group);
 
     await client.update<EventAnnotationGroupUpdateIn, EventAnnotationGroupUpdateOut>({
-      contentTypeId: EVENT_ANNOTATION_GROUP_TYPE,
+      contentTypeId: CONTENT_ID,
       id: annotationGroupId,
       data: {
         ...attributes,
@@ -259,7 +283,7 @@ export function getEventAnnotationService(
       EventAnnotationGroupSearchIn,
       EventAnnotationGroupSearchOut
     >({
-      contentTypeId: EVENT_ANNOTATION_GROUP_TYPE,
+      contentTypeId: CONTENT_ID,
       query: {
         text: '*',
       },
@@ -270,6 +294,7 @@ export function getEventAnnotationService(
 
   return {
     loadAnnotationGroup,
+    groupExistsWithTitle,
     updateAnnotationGroup,
     createAnnotationGroup,
     deleteAnnotationGroups,

src/plugins/event_annotation/public/event_annotation_service/types.ts

@@ -14,6 +14,7 @@ import { EventAnnotationConfig, EventAnnotationGroupConfig } from '../../common'
 
 export interface EventAnnotationServiceType {
   loadAnnotationGroup: (savedObjectId: string) => Promise<EventAnnotationGroupConfig>;
+  groupExistsWithTitle: (title: string) => Promise<boolean>;
   findAnnotationGroupContent: (
     searchTerm: string,
     pageSize: number,

src/plugins/event_annotation/server/content_management/event_annotation_group_storage.ts

@@ -268,9 +268,11 @@ export class EventAnnotationGroupStorage
       EventAnnotationGroupSearchQuery,
       EventAnnotationGroupSearchQuery
     >(options);
+
     if (optionsError) {
       throw Boom.badRequest(`Invalid payload. ${optionsError.message}`);
     }
+
     const { searchFields = ['title^3', 'description'], types = [SO_TYPE] } = optionsToLatest;
 
     const { included, excluded } = query.tags ?? {};