[SIEM][Exceptions] - ExceptionsViewer UI component part 2

[yctercero]

Summary

This PR is a follow up to #68027 . It brings it all together to complete the exceptions viewer component. This component is meant to display all exception items and allow a user to create, edit, delete, and search these exception items.

• Moves ExceptionItem (from part 1) into its own folder
• Adds exceptions_viewer_header component that includes the search, list toggle, and add exception buttons
• Adds actual ExceptionViewer component
• Updates the useExceptionList hook refresh function logic. Noticed that the previous version was creating some issues

Note

• There's a bit of funkiness right now as the exception list hook returns the existing exception list schema and the viewer is relying on the new exception list schema. Not too big a deal, should be easy cleanup once new schemas are ready. You'll see some TODOs in areas I'll have to update.
• There's some filler code for where the add and edit exception modal logic will go. It's likely some of the logic around that will need to be updated.
• Made an assumption that rule.exceptionLists would be an array of { id: '', type: 'detections', namespaceType: 'single' }. I can update once that final structure is figured out as well.
• The file x-pack/plugins/security_solution/public/alerts/pages/detection_engine/rules/details/index.tsx is due for a refactor, as this PR is already getting big, should be a follow up

To Do

• add unit tests for main ExceptionViewer component
• cleanup after new schemas are in
• update logic to allow 3 views (all items, detection items, endpoint items)
• update empty page title and description text
• update loading states
• determine best pagination user experience
• should the KQL search bar be hidden for the Exceptions tab?
• add transition animation on item delete
• test pagination once _find endpoint updated

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:

1. Create detection type list ./post_exception_list.sh ./exception_lists/new/exception_list_detection.json
2. 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
3. Create endpoint list ./post_exception_list.sh
4. 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
5. Run ./find_exception_lists.sh to get the id of the two lists you created
6. 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!

Screenshots

Empty

Items exist

Checklist

• 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

[yctercero]

NOTE: As mentioned in the 'part 1' PR, these types will get cleaned once the exceptions structure is updated.

[spong]

Nice way of exposing the list API's! Makes for a clean separation of concerns between usage in hooks, and exposing the plugin's API as a whole 🙂

[yctercero]

Yea, the other way felt strange and saw this pattern elsewhere.

[spong]

Checked out and tested locally, and also performed a code review -- looking good here! 😀 Thanks for the continued cleanup, updates to tests, and new auto_id exception list json's for testing -- they really help getting set up and quickly testing out the UI!

Also.... 👏 👏 👏 on leveraging storybooks! We haven't used them much on the SIEM side, but I've heard great things. It was nice to be able to click through and test all the different states.

LGTM! Thanks @yctercero! 👍 🚀

🎉 🎉

[yctercero]

@elasticmachine merge upstream

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 77fd167

History

• 💔 Build #52853 failed 2f8eb18
• 💔 Build #52616 failed 6027cbb
• 💔 Build #52572 failed 5303cc9
• 💔 Build #52555 failed 854892a
• 💔 Build #52527 failed aea3b16

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[yctercero]

Thanks @peluja1012 and @spong for the in depth review. I added follow ups to your comments in this pr #68739

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)