[RAC][Security Solution] Add to case actions in detail flyout #108057

kqualters-elastic · 2021-08-10T15:02:35Z

Summary

This pr breaks the existing add to case "action," the button, popover to select new or existing case, select existing case modal, and create new case flyout into 4 separate components. One for the existing case icon and popover, one for the button to launch the add to new case popover, one button to launch the add to existing case modal, and a component to render said modal or popover. State is shared between these 4 components via redux and the timelines plugin store. Note these changes are just to add the new functionality to the flyout, using in observability and the ux changes to the security solution table to be done in a forthcoming pr.

Checklist

Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)

monina-n · 2021-08-10T19:42:46Z

We will keep the flyout open when a modal appears on top of to keep it consistent with the add exception actions. However, when a user completes the action, the flyout should close and the confirmation toast should be standalone

User clicks take action
User selects add to existing case
Modal opens on top of flyout
User selects existing case
Modal closes, alert flyout closes, toast confirmation appears

Screen.Recording.2021-08-10.at.11.37.11.AM.mov

angorayc · 2021-08-11T10:53:31Z

Hey @kqualters-elastic , thanks for the PR. I pulled and played around locally. Here are some observation I found:

At the beginning, I set tGridEnabled to false, and the security solution wasn't working.
After clicking on add to new case, are we opening the CreateCaseFlyout from timeline/body/actions/index.tsx line 188? Are we able to check if Observability would work? Would it be better to create a specific export for CreateCaseFlyout from timeline plugin, so Observability can use if from there if they haven't had one on the page?

kqualters-elastic · 2021-08-11T11:27:06Z

Hey @kqualters-elastic , thanks for the PR. I pulled and played around locally. Here are some observation I found:

At the beginning, I set tGridEnabled to false, and the security solution wasn't working.

After clicking on add to new case, are we opening the CreateCaseFlyout from timeline/body/actions/index.tsx line 188? Are we able to check if Observability would work? Would it be better to create a specific export for CreateCaseFlyout from timeline plugin, so Observability can use if from there if they haven't had one on the page?

Thanks for checking it out. Yes, for #1 we just need to add a conditional check like in x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx#L137 . For #2, I'm working on how best to do this, the modal will have the same problem.

…-hooks

elasticmachine · 2021-08-12T04:12:12Z

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

michaelolo24 · 2021-08-12T04:28:41Z

x-pack/plugins/security_solution/public/detections/components/take_action_dropdown/index.tsx

+                  useInsertTimeline: insertTimelineHook,
+                  casePermissions,
+                  appId: 'securitySolution',
+                  onClose: onCaseSelection,


nit: maybe naming: onCaseSelection: closePopoverHandler or afterCaseSelection

michaelolo24 · 2021-08-12T04:34:38Z

x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx

+        savedObjects: {
+          client: {},
+        },
+        timelines: {


we can put this in a common timelines mock file so this and events_viewer can share it

michaelolo24 · 2021-08-12T04:37:26Z

x-pack/plugins/timelines/public/components/actions/timeline/cases/add_to_case_action.tsx

+    createCaseUrl,
+    isAllCaseModalOpen,
+    isCreateCaseFlyoutOpen,
+  } = useAddToCase({ ecsRowData, useInsertTimeline, casePermissions, appId, onClose });


michaelolo24 · 2021-08-12T04:42:16Z

x-pack/plugins/timelines/public/components/actions/timeline/cases/add_to_case_action.tsx

@@ -263,6 +71,8 @@ const AddToCaseActionComponent: React.FC<AddToCaseActionProps> = ({
      updateCase: onCaseSuccess,
      userCanCrud: casePermissions?.crud ?? false,
      owner: [appId],
+      onClose: () =>
+        dispatch(tGridActions.setOpenAddToExistingCase({ id: eventId, isOpen: false })),


Any issue with moving closeCaseFlyoutOpen up and using it here? And maybe we can keep the name a bit simpler with closeCaseFlyout?

these are 2 different actions, setOpenAddToExistingCase here and setOpenAddToNewCase below

michaelolo24 · 2021-08-12T04:46:34Z

...k/plugins/timelines/public/components/actions/timeline/cases/add_to_existing_case_button.tsx

+import { AddToCaseActionProps } from './add_to_case_action';
+import * as i18n from './translations';
+
+const AddToCaseActionComponent: React.FC<AddToCaseActionProps> = ({


~~I think you meant this to be AddtoExistingCaseActionComponent~~ Ignore me, I see the exports at the bottom. 👍🏾

kibanamachine · 2021-08-12T17:31:27Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`securitySolution`	2360	2361	+1
`timelines`	242	246	+4
total			+5

Async chunks

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

id	before	after	diff
`cases`	579.7KB	579.7KB	+44.0B
`securitySolution`	6.5MB	6.5MB	+1.2KB
`timelines`	267.6KB	308.6KB	+41.0KB
total			+42.2KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`timelines`	306.8KB	309.5KB	+2.8KB

Unknown metric groups

API count

id	before	after	diff
`cases`	451	452	+1
`timelines`	930	936	+6
total			+7

API count missing comments

id	before	after	diff
`cases`	409	410	+1
`timelines`	810	816	+6
total			+7

async chunk count

id	before	after	diff
`timelines`	12	15	+3

History

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

…c#108057) * add to case action in flyout * Fix most type errors * Use context menu item instead of empty button for popover items * Remove unused import * Fire action on case modal close * Update tests to use both components and remove console.log * Update mocks in unit tests * Use an onClose prop instead of closeCallbacks * Pr feedback, create shared mock and rename handler * Make app usable when timelines is not enabled * Remove unused translations

… (#108422) * add to case action in flyout * Fix most type errors * Use context menu item instead of empty button for popover items * Remove unused import * Fire action on case modal close * Update tests to use both components and remove console.log * Update mocks in unit tests * Use an onClose prop instead of closeCallbacks * Pr feedback, create shared mock and rename handler * Make app usable when timelines is not enabled * Remove unused translations

kqualters-elastic added 4 commits August 10, 2021 11:02

WIP add to case action in flyout

72498c6

Fix most type errors

20712f7

Use context menu item instead of empty button for popover items

f3bde4f

Remove unused import

9ca8915

jasonrhodes mentioned this pull request Aug 11, 2021

[RAC] 7.15 Observability Checklist #107933

Closed

52 tasks

michaelolo24 mentioned this pull request Aug 11, 2021

[Security Solution][RAC] - 7.15 Checklist #108071

Closed

48 tasks

kqualters-elastic added 5 commits August 11, 2021 12:29

Fire action on case modal close

cfbe236

Update tests to use both components and remove console.log

22b1d5f

Merge remote-tracking branch 'upstream/master' into timelines-actions…

40f1286

…-hooks

Merge remote-tracking branch 'upstream/master' into timelines-actions…

a8e72a6

…-hooks

Update mocks in unit tests

6a5c482

kqualters-elastic added Feature:RAC label obsolete release_note:skip Skip the PR/issue when compiling release notes Team:Threat Hunting Security Solution Threat Hunting Team Theme: rac label obsolete v7.15.0 v8.0.0 labels Aug 12, 2021

kqualters-elastic changed the title ~~WIP add to case action in flyout~~ [RAC][Security Solution] Add to case actions in detail flyout Aug 12, 2021

kqualters-elastic marked this pull request as ready for review August 12, 2021 04:12

kqualters-elastic requested review from a team as code owners August 12, 2021 04:12

Use an onClose prop instead of closeCallbacks

635a9ff

michaelolo24 reviewed Aug 12, 2021

View reviewed changes

kqualters-elastic added 2 commits August 12, 2021 03:01

Pr feedback, create shared mock and rename handler

99bf0fa

Make app usable when timelines is not enabled

bb9f696

angorayc approved these changes Aug 12, 2021

View reviewed changes

Remove unused translations

6a87de5

michaelolo24 approved these changes Aug 12, 2021

View reviewed changes

kqualters-elastic merged commit 1b88880 into elastic:master Aug 12, 2021

kqualters-elastic deleted the timelines-actions-hooks branch August 12, 2021 17:45

kqualters-elastic mentioned this pull request Aug 12, 2021

[7.x] [RAC][Security Solution] Add to case actions in detail flyout (#108057) #108422

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[RAC][Security Solution] Add to case actions in detail flyout #108057

[RAC][Security Solution] Add to case actions in detail flyout #108057

kqualters-elastic commented Aug 10, 2021 •

edited

Loading

monina-n commented Aug 10, 2021

angorayc commented Aug 11, 2021

kqualters-elastic commented Aug 11, 2021

elasticmachine commented Aug 12, 2021

michaelolo24 Aug 12, 2021

michaelolo24 Aug 12, 2021

michaelolo24 Aug 12, 2021

michaelolo24 Aug 12, 2021

kqualters-elastic Aug 12, 2021 •

edited

Loading

michaelolo24 Aug 12, 2021 •

edited

Loading

kibanamachine commented Aug 12, 2021

API count

API count missing comments

async chunk count

[RAC][Security Solution] Add to case actions in detail flyout #108057

[RAC][Security Solution] Add to case actions in detail flyout #108057

Conversation

kqualters-elastic commented Aug 10, 2021 • edited Loading

Summary

Checklist

monina-n commented Aug 10, 2021

angorayc commented Aug 11, 2021

kqualters-elastic commented Aug 11, 2021

elasticmachine commented Aug 12, 2021

michaelolo24 Aug 12, 2021

Choose a reason for hiding this comment

michaelolo24 Aug 12, 2021

Choose a reason for hiding this comment

michaelolo24 Aug 12, 2021

Choose a reason for hiding this comment

michaelolo24 Aug 12, 2021

Choose a reason for hiding this comment

kqualters-elastic Aug 12, 2021 • edited Loading

Choose a reason for hiding this comment

michaelolo24 Aug 12, 2021 • edited Loading

Choose a reason for hiding this comment

kibanamachine commented Aug 12, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

API count

API count missing comments

async chunk count

History

kqualters-elastic commented Aug 10, 2021 •

edited

Loading

kqualters-elastic Aug 12, 2021 •

edited

Loading

michaelolo24 Aug 12, 2021 •

edited

Loading