[Security solution] Mocks and Unit tests for Alert Page controls + Ha…

…ndles #155414 and #155481  (#155508)

## Summary

This PR 
- Adds unit tests and mocks for the Alert Page Controls.
- Adds feature - [Security Solution] New Alert Page Controls should have
a blank placeholder + only string controls #155414
1. For newly added controls placeholder should be blank instead of `Any`
    2. Do not allow number fields to be added as controls. 
    
    | Before | After |
    |--|--|
| <video
src="https://user-images.githubusercontent.com/7485038/233952385-79fdae88-d3a1-4bf2-abd7-a6a0fa8fb12d.mov"
/> | <video
src="https://user-images.githubusercontent.com/7485038/233955823-5b8d11f5-c3f0-409b-82ba-d50c645ca16e.mov"
/> |

- Handles [Security Solution] Alerts filters are automatically changed
#155481 and adds unit tests for the same.
   | Before | After |
   |--|--|
| <video
src="https://user-images.githubusercontent.com/7485038/233944949-7c4dac7e-4b31-46a3-9737-296729437ca0.mov"/>
| <video
src="https://user-images.githubusercontent.com/7485038/233944528-d1ddcb1a-a61d-4a96-9a19-aaa2646765e7.mov"/>
|

x-pack/plugins/security_solution/public/common/components/filter_group/buttons.tsx

@@ -13,9 +13,10 @@ import { useFilterGroupInternalContext } from './hooks/use_filters';
 import {
   ADD_CONTROLS,
   ADD_CONTROLS_MAX_LIMIT,
-  DISCARD_CHANGES,
   PENDING_CHANGES_REMINDER,
+  SAVE_CHANGES,
 } from './translations';
+import { TEST_IDS } from './constants';
 
 interface AddControlProps extends Partial<EuiButtonIconProps> {
   onClick: () => void;
@@ -29,10 +30,11 @@ export const AddControl: FC<AddControlProps> = ({ onClick, ...rest }) => {
         size="s"
         iconSize="m"
         display="base"
-        data-test-subj={'filter-group__add-control'}
+        aria-label={isDisabled ? ADD_CONTROLS_MAX_LIMIT : ADD_CONTROLS}
+        data-test-subj={TEST_IDS.ADD_CONTROL}
         onClick={onClick}
         {...rest}
-        iconType={'plusInCircle'}
+        iconType="plusInCircle"
       />
     </EuiToolTip>
   );
@@ -54,12 +56,13 @@ export const SaveControls: FC<SaveControlsProps> = ({ onClick }) => {
     <EuiPopover
       button={
         <EuiButtonIcon
+          aria-label={SAVE_CHANGES}
           size="s"
           iconSize="m"
           display="base"
-          color={'primary'}
-          iconType={'save'}
-          data-test-subj={'filter-group__save'}
+          color="primary"
+          iconType="save"
+          data-test-subj={TEST_IDS.SAVE_CONTROL}
           onClick={onClick}
           onFocus={openPendingChangesPopover}
           onBlur={closePendingChangesPopover}
@@ -69,11 +72,11 @@ export const SaveControls: FC<SaveControlsProps> = ({ onClick }) => {
         />
       }
       isOpen={pendingChangesPopoverOpen}
-      anchorPosition={'upCenter'}
+      anchorPosition="upCenter"
       panelPaddingSize="none"
       closePopover={closePendingChangesPopover}
       panelProps={{
-        'data-test-subj': 'filter-group__save-popover',
+        'data-test-subj': TEST_IDS.SAVE_CHANGE_POPOVER,
       }}
     >
       <div style={{ maxWidth: '200px' }}>
@@ -82,23 +85,3 @@ export const SaveControls: FC<SaveControlsProps> = ({ onClick }) => {
     </EuiPopover>
   );
 };
-
-interface DiscardChangesProps {
-  onClick: () => void;
-}
-
-export const DiscardChanges: FC<DiscardChangesProps> = ({ onClick }) => {
-  return (
-    <EuiToolTip content={DISCARD_CHANGES} position="top" display="block">
-      <EuiButtonIcon
-        size="s"
-        iconSize="m"
-        display="base"
-        color="danger"
-        iconType={'minusInCircle'}
-        data-test-subj={'filter-group__discard'}
-        onClick={onClick}
-      />
-    </EuiToolTip>
-  );
-};

x-pack/plugins/security_solution/public/common/components/filter_group/constants.ts

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+
+export const TEST_IDS = {
+  FILTER_CONTROLS: 'filter-group__items',
+  FILTER_LOADING: 'filter-group__loading',
+  MOCKED_CONTROL: 'mocked_control_group',
+  ADD_CONTROL: 'filter-group__add-control',
+  SAVE_CONTROL: 'filter-group__save',
+  SAVE_CHANGE_POPOVER: 'filter-group__save-popover',
+  FILTERS_CHANGED_BANNER: 'filter-group--changed-banner',
+  FILTERS_CHANGED_BANNER_SAVE: 'filter-group__save',
+  FILTERS_CHANGED_BANNER_DISCARD: 'filter-group__discard',
+  CONTEXT_MENU: {
+    BTN: 'filter-group__context',
+    MENU: 'filter-group__context-menu',
+    RESET: 'filter-group__context--reset',
+    EDIT: 'filter-group__context--edit',
+    DISCARD: `filter-group__context--discard`,
+  },
+};

x-pack/plugins/security_solution/public/common/components/filter_group/context_menu.tsx

@@ -7,6 +7,7 @@
 
 import { EuiButtonIcon, EuiContextMenuItem, EuiContextMenuPanel, EuiPopover } from '@elastic/eui';
 import React, { useCallback, useMemo, useState } from 'react';
+import { TEST_IDS } from './constants';
 import { useFilterGroupInternalContext } from './hooks/use_filters';
 import {
   CONTEXT_MENU_RESET,
@@ -84,9 +85,11 @@ export const FilterGroupContextMenu = () => {
   const resetButton = useMemo(
     () => (
       <EuiContextMenuItem
+        key="reset"
         icon="eraser"
+        aria-label={CONTEXT_MENU_RESET}
         onClick={withContextMenuAction(resetSelection)}
-        data-test-subj="filter-group__context--reset"
+        data-test-subj={TEST_IDS.CONTEXT_MENU.RESET}
         toolTipContent={CONTEXT_MENU_RESET_TOOLTIP}
       >
         {CONTEXT_MENU_RESET}
@@ -98,15 +101,15 @@ export const FilterGroupContextMenu = () => {
   const editControlsButton = useMemo(
     () => (
       <EuiContextMenuItem
+        key="edit"
         icon={isViewMode ? 'pencil' : 'minusInCircle'}
+        aria-label={isViewMode ? EDIT_CONTROLS : DISCARD_CHANGES}
         onClick={
           isViewMode
             ? withContextMenuAction(switchToEditMode)
             : withContextMenuAction(discardChangesHandler)
         }
-        data-test-subj={
-          isViewMode ? `filter_group__context--edit` : `filter_group__context--discard`
-        }
+        data-test-subj={isViewMode ? TEST_IDS.CONTEXT_MENU.EDIT : TEST_IDS.CONTEXT_MENU.DISCARD}
       >
         {isViewMode ? EDIT_CONTROLS : DISCARD_CHANGES}
       </EuiContextMenuItem>
@@ -121,15 +124,15 @@ export const FilterGroupContextMenu = () => {
 
   return (
     <EuiPopover
-      id="filter-group__context-menu"
+      id={TEST_IDS.CONTEXT_MENU.MENU}
       button={
         <EuiButtonIcon
           aria-label={FILTER_GROUP_MENU}
           display="empty"
           size="s"
           iconType="boxesHorizontal"
           onClick={toggleContextMenu}
-          data-test-subj="filter-group__context"
+          data-test-subj={TEST_IDS.CONTEXT_MENU.BTN}
         />
       }
       isOpen={isContextMenuVisible}