Value list UI and telemetry (elastic#180929)

## Add telemetry and change UI copy for value list: <img width="1469" alt="Screenshot 2024-04-17 at 15 09 47" src="https://github.com/elastic/kibana/assets/7609147/6c69c7ed-f8ac-49d0-9a9c-ede199993aaa"> <img width="1432" alt="Screenshot 2024-04-17 at 15 09 41" src="https://github.com/elastic/kibana/assets/7609147/a5641217-61b0-40a5-afc8-6f1a936be007"> <img width="1576" alt="Screenshot 2024-04-17 at 15 09 30" src="https://github.com/elastic/kibana/assets/7609147/fd26254e-fc69-4565-85df-8621f6ba7c7a"> <img width="804" alt="Screenshot 2024-04-17 at 15 09 24" src="https://github.com/elastic/kibana/assets/7609147/0bb76536-3388-41d1-b6cb-9c00992b361e"> <img width="1484" alt="Screenshot 2024-04-17 at 15 09 18" src="https://github.com/elastic/kibana/assets/7609147/5bf6fcee-01fe-408f-b923-b5824dde7394"> --------- Co-authored-by: Nastasha Solomon <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
kibanamachine · Apr 24, 2024 · 18e6bf2 · 18e6bf2
1 parent d635c6d
commit 18e6bf2
Show file tree

Hide file tree

Showing 11 changed files with 37 additions and 21 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/lib/telemetry/constants.ts b/x-pack/plugins/security_solution/public/common/lib/telemetry/constants.ts
@@ -34,6 +34,13 @@ export enum TELEMETRY_EVENT {
   // Landing page - dashboard
   DASHBOARD = 'navigate_to_dashboard',
   CREATE_DASHBOARD = 'create_dashboard',
+
+  // value list
+  OPEN_VALUE_LIST_MODAL = 'open_value_list_modal',
+  CREATE_VALUE_LIST_ITEM = 'create_value_list_item',
+  DELETE_VALUE_LIST_ITEM = 'delete_value_list_item',
+  EDIT_VALUE_LIST_ITEM = 'edit_value_list_item',
+  ADDITIONAL_UPLOAD_VALUE_LIST_ITEM = 'additinonal_upload_value_list_item',
 }
 
 export enum TelemetryEventTypes {

diff --git a/...urity_solution/public/detections/components/value_lists_management_flyout/translations.ts b/...urity_solution/public/detections/components/value_lists_management_flyout/translations.ts
@@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n';
 export const VALUE_LISTS_FLYOUT_TITLE = i18n.translate(
   'xpack.securitySolution.lists.importValueListTitle',
   {
-    defaultMessage: 'Import value lists',
+    defaultMessage: 'Manage value lists',
   }
 );
 

diff --git a/.../plugins/security_solution/public/detections/pages/detection_engine/rules/translations.ts b/.../plugins/security_solution/public/detections/pages/detection_engine/rules/translations.ts
@@ -23,7 +23,7 @@ export const IMPORT_RULE = i18n.translate(
 export const IMPORT_VALUE_LISTS = i18n.translate(
   'xpack.securitySolution.lists.detectionEngine.rules.importValueListsButton',
   {
-    defaultMessage: 'Import value lists',
+    defaultMessage: 'Manage value lists',
   }
 );
 

diff --git a/x-pack/plugins/security_solution/public/value_list/components/add_list_item_popover.tsx b/x-pack/plugins/security_solution/public/value_list/components/add_list_item_popover.tsx
@@ -23,10 +23,10 @@ import {
   SUCCESSFULLY_ADDED_ITEM,
   VALUE_REQUIRED,
   VALUE_LABEL,
-  ADD_VALUE_LIST_PLACEHOLDER,
   ADDING_LIST_ITEM_BUTTON,
   ADD_LIST_ITEM_BUTTON,
 } from '../translations';
+import { METRIC_TYPE, TELEMETRY_EVENT, track } from '../../common/lib/telemetry';
 
 export const AddListItemPopover = ({ listId }: { listId: string }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -53,6 +53,7 @@ export const AddListItemPopover = ({ listId }: { listId: string }) => {
       }
     },
     onSubmit: async (values) => {
+      track(METRIC_TYPE.COUNT, TELEMETRY_EVENT.CREATE_VALUE_LIST_ITEM);
       await createListItemMutation.mutateAsync({ listId, value: values.value, http });
       setIsPopoverOpen(false);
       formik.resetForm();
@@ -93,7 +94,6 @@ export const AddListItemPopover = ({ listId }: { listId: string }) => {
                   name="value"
                   icon="listAdd"
                   data-test-subj="value-list-item-add-input"
-                  placeholder={ADD_VALUE_LIST_PLACEHOLDER}
                   isInvalid={!!formik.errors.value}
                 />
               </EuiFormRow>

diff --git a/x-pack/plugins/security_solution/public/value_list/components/delete_list_item.tsx b/x-pack/plugins/security_solution/public/value_list/components/delete_list_item.tsx
@@ -11,6 +11,7 @@ import { useDeleteListItemMutation } from '@kbn/securitysolution-list-hooks';
 import { useAppToasts } from '../../common/hooks/use_app_toasts';
 import { useKibana } from '../../common/lib/kibana';
 import { SUCCESSFULLY_DELETED_ITEM } from '../translations';
+import { METRIC_TYPE, TELEMETRY_EVENT, track } from '../../common/lib/telemetry';
 
 const toastOptions = {
   toastLifeTimeMs: 5000,
@@ -32,6 +33,7 @@ export const DeleteListItem = ({ id, value }: { id: string; value: string }) =>
   });
 
   const deleteListItem = useCallback(() => {
+    track(METRIC_TYPE.COUNT, TELEMETRY_EVENT.DELETE_VALUE_LIST_ITEM);
     deleteListItemMutation.mutate({ id, http });
   }, [deleteListItemMutation, id, http]);
 

diff --git a/...ck/plugins/security_solution/public/value_list/components/inline_edit_list_item_value.tsx b/...ck/plugins/security_solution/public/value_list/components/inline_edit_list_item_value.tsx
@@ -12,6 +12,7 @@ import { usePatchListItemMutation } from '@kbn/securitysolution-list-hooks';
 import { useAppToasts } from '../../common/hooks/use_app_toasts';
 import { useKibana } from '../../common/lib/kibana/kibana_react';
 import { EDIT_TEXT_INLINE_LABEL, SUCCESSFULLY_UPDATED_LIST_ITEM } from '../translations';
+import { METRIC_TYPE, TELEMETRY_EVENT, track } from '../../common/lib/telemetry';
 
 const toastOptions = {
   toastLifeTimeMs: 5000,
@@ -41,6 +42,7 @@ export const InlineEditListItemValue = ({ listItem }: { listItem: ListItemSchema
 
   const onSave = useCallback(
     async (newValue) => {
+      track(METRIC_TYPE.COUNT, TELEMETRY_EVENT.EDIT_VALUE_LIST_ITEM);
       await patchListItemMutation.mutateAsync({
         id: listItem.id,
         value: newValue,

diff --git a/x-pack/plugins/security_solution/public/value_list/components/list_item_table.tsx b/x-pack/plugins/security_solution/public/value_list/components/list_item_table.tsx
@@ -20,6 +20,7 @@ import {
   FAILED_TO_FETCH_LIST_ITEM,
   DELETE_LIST_ITEM,
   DELETE_LIST_ITEM_DESCRIPTION,
+  NOT_FOUND_ITEMS,
 } from '../translations';
 
 export const ListItemTable = ({
@@ -80,6 +81,7 @@ export const ListItemTable = ({
       error={isError ? FAILED_TO_FETCH_LIST_ITEM : undefined}
       loading={loading}
       onChange={onChange}
+      noItemsMessage={NOT_FOUND_ITEMS}
     />
   );
 };
diff --git a/x-pack/plugins/security_solution/public/value_list/components/show_value_list_modal.tsx b/x-pack/plugins/security_solution/public/value_list/components/show_value_list_modal.tsx
@@ -10,6 +10,7 @@ import React, { useState, useCallback } from 'react';
 import { useListsPrivileges } from '../../detections/containers/detection_engine/lists/use_lists_privileges';
 import { useIsExperimentalFeatureEnabled } from '../../common/hooks/use_experimental_features';
 import { ValueListModal } from './value_list_modal';
+import { METRIC_TYPE, TELEMETRY_EVENT, track } from '../../common/lib/telemetry';
 
 export const ShowValueListModal = ({
   listId,
@@ -27,7 +28,10 @@ export const ShowValueListModal = ({
   );
 
   const onCloseModal = useCallback(() => setShowModal(false), []);
-  const onShowModal = useCallback(() => setShowModal(true), []);
+  const onShowModal = useCallback(() => {
+    track(METRIC_TYPE.CLICK, TELEMETRY_EVENT.OPEN_VALUE_LIST_MODAL);
+    setShowModal(true);
+  }, []);
 
   if (loading) return null;
 

diff --git a/x-pack/plugins/security_solution/public/value_list/components/upload_list_item.tsx b/x-pack/plugins/security_solution/public/value_list/components/upload_list_item.tsx
@@ -20,6 +20,7 @@ import {
   FAILED_TO_UPLOAD_LIST_ITEM,
   SUCCESSFULY_UPLOAD_LIST_ITEMS,
 } from '../translations';
+import { METRIC_TYPE, TELEMETRY_EVENT, track } from '../../common/lib/telemetry';
 
 const validFileTypes = ['text/csv', 'text/plain'];
 
@@ -45,6 +46,7 @@ export const UploadListItem = ({ listId, type }: { listId: string; type: ListTyp
   const handleImport = useCallback(() => {
     if (!importState.loading && file) {
       ctrl.current = new AbortController();
+      track(METRIC_TYPE.COUNT, TELEMETRY_EVENT.ADDITIONAL_UPLOAD_VALUE_LIST_ITEM);
       importList({
         file,
         listId,

diff --git a/x-pack/plugins/security_solution/public/value_list/translations.ts b/x-pack/plugins/security_solution/public/value_list/translations.ts
@@ -8,7 +8,7 @@
 import { i18n } from '@kbn/i18n';
 
 export const ADD_LIST_ITEM = i18n.translate('xpack.securitySolution.listItems.addListItem', {
-  defaultMessage: 'Add list item',
+  defaultMessage: 'Create list item',
 });
 
 export const SUCCESSFULLY_ADDED_ITEM = i18n.translate(
@@ -23,20 +23,13 @@ export const VALUE_REQUIRED = i18n.translate('xpack.securitySolution.listItems.v
 });
 
 export const VALUE_LABEL = i18n.translate('xpack.securitySolution.listItems.valueLabel', {
-  defaultMessage: 'Value',
+  defaultMessage: 'Enter a new value for the list',
 });
 
-export const ADD_VALUE_LIST_PLACEHOLDER = i18n.translate(
-  'xpack.securitySolution.listItems.addValueListPlaceholder',
-  {
-    defaultMessage: 'Add list item..',
-  }
-);
-
 export const ADD_LIST_ITEM_BUTTON = i18n.translate(
   'xpack.securitySolution.listItems.addListItemButton',
   {
-    defaultMessage: 'Add',
+    defaultMessage: 'Add list item',
   }
 );
 
@@ -75,19 +68,19 @@ export const COLUMN_VALUE = i18n.translate('xpack.securitySolution.listItems.col
 export const COLUMN_UPDATED_AT = i18n.translate(
   'xpack.securitySolution.listItems.columnUpdatedAt',
   {
-    defaultMessage: 'Updated At',
+    defaultMessage: 'Updated at',
   }
 );
 
 export const COLUMN_UPDATED_BY = i18n.translate(
   'xpack.securitySolution.listItems.columnUpdatedBy',
   {
-    defaultMessage: 'Updated By',
+    defaultMessage: 'Updated by',
   }
 );
 
 export const COLUMN_ACTIONS = i18n.translate('xpack.securitySolution.listItems.columnActions', {
-  defaultMessage: 'Actions',
+  defaultMessage: 'Action',
 });
 
 export const FAILED_TO_FETCH_LIST_ITEM = i18n.translate(
@@ -131,7 +124,7 @@ export const FAILED_TO_UPLOAD_LIST_ITEM_TITLE = i18n.translate(
 );
 
 export const UPLOAD_TOOLTIP = i18n.translate('xpack.securitySolution.listItems.uploadTooltip', {
-  defaultMessage: 'All items from the file will be added as new items',
+  defaultMessage: 'All items from the file will be added to the value list.',
 });
 
 export const UPLOAD_FILE_PICKER_INITAL_PROMT_TEXT = i18n.translate(
@@ -163,6 +156,10 @@ export const INFO_TOTAL_ITEMS = i18n.translate('xpack.securitySolution.listItems
 
 export const getInfoTotalItems = (listType: string) =>
   i18n.translate('xpack.securitySolution.listItems.searchBar', {
-    defaultMessage: 'Filter your data using KQL syntax - {listType}:*',
+    defaultMessage: 'Filter your data using KQL syntax, for example: {listType}:*',
     values: { listType },
   });
+
+export const NOT_FOUND_ITEMS = i18n.translate('xpack.securitySolution.listItems.notFoundItems', {
+  defaultMessage: '0 list items match your search criteria.',
+});
diff --git a/...ypress/cypress/e2e/detection_response/detection_engine/value_lists/value_list_items.cy.ts b/...ypress/cypress/e2e/detection_response/detection_engine/value_lists/value_list_items.cy.ts
@@ -88,7 +88,7 @@ describe(
       getValueListItemsTableRow().should('have.length', perPage);
       searchValueListItemsModal('keyword:not_exists');
       getValueListItemsTableRow().should('have.length', 1);
-      cy.get(VALUE_LIST_ITEMS_MODAL_TABLE).contains('No items found');
+      cy.get(VALUE_LIST_ITEMS_MODAL_TABLE).contains('0 list items match your search criteria.');
 
       searchValueListItemsModal('keyword:*or*');
       getValueListItemsTableRow().should('have.length', 4);