Summary

• Adds missing unit tests for relevant files missing them
• Changes filter search to fire request on 'Enter'
• Breaks out the main ExceptionViewer component into smaller components to make more readable and better tested
• Updates utility bar to have the specific list description text next to it as proposed by @spong in [SIEM][Exceptions] - ExceptionsViewer UI component part 2 #68294 (comment)
• Adds loading state any time async request occurs
• Now fetches list on list type toggle (if user selects to view either only detections or endpoint items), before was simply filtering already fetched items

To do

• integration tests
• exceptions get a bit funky on small screen sizes
• modify areas using moment to use the FormattedDate instead

Screenshots & Gifs

Empty state

Only one type of list allowed

List toggles hidden, no popover for add exception.

Exceptions search

Exceptions list toggle

Delete exception

Testing

To turn on lists plugin - in kibana.dev.yml

# Enable lists feature
xpack.lists.enabled: true
xpack.lists.listIndex: '.lists-yara'
xpack.lists.listItemIndex: '.items-yara'

Use the scripts in x-pack/plugins/lists/server/scripts to create some sample exception lists and items. You can use the following:

• Create detection type list ./post_exception_list.sh ./exception_lists/new/exception_list_detection.json
• Create detection type list items ./post_exception_list_item.sh ./exception_lists/new/exception_list_item_detection_auto_id.json - this script auto generates the item_id so you can run it as many times as you like to create multiple items associated with the list generated in step 1
• Create endpoint list ./post_exception_list.sh
• Create endpoint type list items ./post_exception_list_item.sh ./exception_lists/new/exception_list_item_auto_id.json - this script auto generates the item_id so you can run it as many times as you like to create multiple items associated with the list generated in step 3
• Run ./find_exception_lists.sh to get the id of the two lists you created
• Update the ExceptionsViewer component in x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/details/index.tsx to something like the following:

 <ExceptionsViewer
       commentsAccordionId={'someId'}
       exceptionLists={[
         {
            id: [DETECTION_LIST_ID],  // `id` not `list_id`
            type: 'detection',
            namespaceType: 'single',
         },
         {
            id: [ENDPOINT_LIST_ID],  // `id` not `list_id`
             type: 'endpoint',
             namespaceType: 'single',
           },
         ]}  />

Navigate to the rules details page and click on the 'Exceptions' tab. Voila!

To check storybook elements, run yarn storybook security_solution from ./kibana/.

Checklist

Delete any items that are not applicable to this PR.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for keyboard-only and screenreader accessibility
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
• This was checked for cross-browser compatibility, including a check against IE11