[Security Solution] Enable actions in document details preview footer

[christineweng]

Summary

Updated document details preview footer to also show actions

Before

After

• Users can perform alert/event actions in a preview
  

• In analyzer, when examining an event, event actions are also available
  

• No change to flyout in rule creation workflow, action is not available in preview nor non-preview

Checklist

• Unit or functional tests were updated or added to match the most common scenarios

[elasticmachine]

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

[elasticmachine]

Pinging @elastic/security-threat-hunting-investigations (Team:Threat Hunting:Investigations)

[PhilippeOberti]

a couple of comments we can discuss on Monday:

• do we want to have the action left aligned? Have you tried centered or right aligned (next to the Take action button)

• I'm not a fan of using the footer.tsx file from the right folder inside the preview folder. What I had in mind for this feature was to duplicate some code and have the preview footer do everything itself, or move some of the logic to the shared folder (either the entire footer code or some of its content

• while I understand why you named the property additionalActions (I'm guessing to be more flexible in the future?) I feel like it's also a bit vague and we could name it a bit more specifically (related to navigating to the full flyout). Granted that we want to keep this strucutre (see my second point above).

[christineweng]

@PhilippeOberti thanks for the review!

a couple of comments we can discuss on Monday:

• do we want to have the action left aligned? Have you tried centered or right aligned (next to the Take action button)

Frankly I can do any design, but I didn't get specific directions from UIUX. I can try a couple alignments

• I'm not a fan of using the footer.tsx file from the right folder inside the preview folder. What I had in mind for this feature was to duplicate some code and have the preview footer do everything itself, or move some of the logic to the shared folder (either the entire footer code or some of its content

Me neither, I think the biggest thing is the right footer has all the take actions hooks, so direct copy and paste feels redundant to me. Ideally we should extract all the hooks into a separate component and call it takeActions?

Another consideration is how there is stuff outside of the EuiFlyoutFooter component (do you know why??) I didn't want to make this PR more complicated than it has to be, hence landing on re-using the right footer

<>
  <EuiFlyoutFooter data-test-subj={FLYOUT_FOOTER_TEST_ID}>
     <EuiPanel color="transparent">
          ...
      </EuiPanel>
   </EuiFlyoutFooter>
   
  {openAddExceptionFlyout &&
        ....
        <AddExceptionFlyoutWrapper
         ....
        />
  )}
</>

[PhilippeOberti]

Briefly summarizing a Zoom meeting discussion:

• do we want to have the action left aligned? Have you tried centered or right aligned (next to the Take action button)

Frankly I can do any design, but I didn't get specific directions from UIUX. I can try a couple alignments

let's see how having the action right aligned looks!

• I'm not a fan of using the footer.tsx file from the right folder inside the preview folder. What I had in mind for this feature was to duplicate some code and have the preview footer do everything itself, or move some of the logic to the shared folder (either the entire footer code or some of its content

Me neither, I think the biggest thing is the right footer has all the take actions hooks, so direct copy and paste feels redundant to me. Ideally we should extract all the hooks into a separate component and call it takeActions?

Let's see if extracting all the Take Action logic in its own component would work. This way we would have the Take Action logic self contained and we would use that component in both footers (the one in preview and the one in right). The one in preview would have some extra logic, a simple button to navigate to the full flyout.

If this does not work, happens to be too complex or too much code change, what you have no works @christineweng. We can just move the footer.tsx file from right to shared and we should be good!

[PhilippeOberti]

thank you for implementing the suggested change related to the Take Action button, I really like this implementation.

Code LGTM and I desk tested everything looks good!

[elasticmachine]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: d6b1842

Failed CI Steps

• Jest Tests #4

Test Failures

• [job] [logs] Jest Tests #4 / EQL Tab rendering should render the timeline table

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
securitySolution	6410	6411	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
securitySolution	14.7MB	14.7MB	+899.0B

History

• 💔 Build #261043 failed 7baacc2
• 💔 Build #259994 failed f88716e

cc @christineweng

[kibanamachine]

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/12363189364

[kibanamachine]

💚 All backports created successfully

Status	Branch	Result
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation