[Cases] Refactor: Move cases action buttons out of timelines #126265

academo · 2022-02-23T15:59:45Z

Summary

Follow up to #125782 and #125782
Closes #126069 and #126070

After #125782 and #125782 it is now required to remove the cases "add to new case" and "add to existing case" out of timelines.

No visual or ux changes.

Changes:

Removes the usage of the timelines hook useAddToCase and replace them for the new cases hooks
Implements the button UI inside each cases consumer plugin (security and observability)

Missing in this PR for follow up PRs:

[Cases] Cleanup: Remove old APIs after refactors (once completed and merged) #126264
[Cases] Cleanup: Delete dead code for timelines add to new case flyout display and hide logic #125761

Visually this is how the new flow for timelines action buttons related to cases work.

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

…5931) * showing agent policy creation error message on UI * mapping the error instead of showing from the backend Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

…lyout (elastic#125764)

peteharverson

Tested and LGTM. Just left a question about a TODO comment.

...ution/public/detections/components/alerts_table/timeline_actions/use_add_to_case_actions.tsx

x-pack/plugins/cases/public/common/use_cases_toast.test.tsx

cnasikas

Great job 🚀 ! Amazing as always. I tested and everything is working as expected.

kqualters-elastic

regardless of the ongoing context and plugin api discussion, this is still another step in the right direction. once @cnasikas 's suggestion about moving toaster usage into cases is done, lgtm 👍

academo · 2022-03-02T08:25:28Z

regardless of the ongoing context and plugin api discussion, this is still another step in the right direction. once @cnasikas 's suggestion about moving toaster usage into cases is done, lgtm +1

The toast had been moved :)

…on-buttons-out-of-timelines

mgiota

Changes look good in the Observability Alerts page. Recently we integrated Alerts in the Overview page as well. Currently Overview page is broken

mgiota · 2022-03-02T14:37:45Z

@academo Also make sure to add proper labelling to the these tickets #126069 and #126070 so that they are properly linked with this PR

…on-buttons-out-of-timelines

mgiota · 2022-03-02T14:56:34Z

...ins/observability/public/pages/alerts/containers/alerts_table_t_grid/alerts_table_t_grid.tsx

  const ruleId = alert.fields['kibana.alert.rule.uuid'] ?? null;
  const linkToRule = ruleId ? prepend(paths.management.ruleDetails(ruleId)) : null;

+  const caseAttachments: CaseAttachments = useMemo(() => {


@academo As discussed I will create a separate ticket to move all these in a separate file once this PR is merged

@mgiota of course I can help you move that code out when you start working on it. We can make it a custom hook.

academo · 2022-03-02T15:34:34Z

Changes look good in the Observability Alerts page. Recently we integrated Alerts in the Overview page as well. Currently Overview page is broken

Thanks for the report @mgiota This is now fixed.

mgiota

@academo I confirm that Overview page is fixed after your latest changes!

peteharverson

Tested latest changes and confirmed the actions work on the Observability Overview page for me too.

mgiota · 2022-03-02T19:03:00Z

x-pack/plugins/observability/public/pages/overview/old_overview_page.tsx

-                  rangeTo={relativeTime.end}
-                  indexNames={indexNames}
-                />
+                <CasesContext


@academo Thanks for the fix. We will make sure to create a wrapper component that contains cases context so that both alerts and overview page can share

@mgiota I was thinking on putting the CasesContext all the way up in the observability plugin. To have it available everywhere. What do you think?

Yep exactly that was my thought as well. This will avoid us having to repeat the same code in multiple places

why not take this line of reasoning 1 step further? 😬

kibana-ci · 2022-03-02T19:09:27Z

💛 Build succeeded, but was flaky

Test Failures

[job] [logs] Security Solution Tests / Detections > Callouts indicating read-only access to resources On Detections home page We show one primary callout
[job] [logs] Security Solution Tests / Detections > Callouts indicating read-only access to resources On Detections home page When a user clicks Dismiss on the callout We hide it and persist the dismissal
[job] [logs] Security Solution Tests / Detections > Need Admin Callouts indicating an admin is needed to migrate the alert data set The users index_mapping_outdated is "false" and their admin callouts should not show up On Rule Details page "before each" hook for "We show 1 primary callout"
[job] [logs] Security Solution Tests / Detections > Need Admin Callouts indicating an admin is needed to migrate the alert data set The users index_mapping_outdated is "true" and their admin callouts should show up On Detections home page We show the need admin primary callout
[job] [logs] Security Solution Tests / Row renderers Suricata Signature tooltips do not overlap

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`cases`	391	393	+2
`observability`	360	361	+1
total			+3

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`cases`	59	61	+2

Async chunks

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

id	before	after	diff
`cases`	295.6KB	289.7KB	-6.0KB
`observability`	394.7KB	395.6KB	+896.0B
`securitySolution`	4.7MB	4.7MB	+693.0B
total			-4.4KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`cases`	20	19	-1

Page load bundle

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

id	before	after	diff
`cases`	74.1KB	82.6KB	+8.5KB
`observability`	87.3KB	87.5KB	+135.0B
total			+8.6KB

Unknown metric groups

API count

id	before	after	diff
`cases`	82	84	+2

History

💛 Build #27067 was flaky 115998c
💚 Build #26850 succeeded 9294657
💔 Build #26831 failed cf47c49
💔 Build #26790 failed c322fa1
💚 Build #26717 succeeded 9ba06da
💛 Build #26557 was flaky a8485ba

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

cc @academo

Esteban Beltran and others added 30 commits February 22, 2022 10:59

WIP

bcfad7e

WIP2

905abb5

Use new cases context hooks to open and close the flyout

dc424af

Update timelines to use new hooks

143d99d

CLose flyout on create success

6959d73

Add back sucess toast

0b40092

Move code to a dedicated component

e3f4133

Add CasesContext to observability

f14fdaf

Remove dependency

7e1e92f

Small refactor

352ca84

Use observabilityAppId instead of observabilityFeatureId for buttons

0ff9cbb

Add CasesContext to timetable

49b2985

Fix detection engine test cases

4db364e

Fix broken tests

0c1d07c

Fix broken tests

b48bdb1

Rename hook

05ad4c4

Add test cases for cases context ui

ac2c745

Add test for new hook

8df4ff9

Remove state from the provider context

c48e33f

Remove basevalue

74a5fa3

apply suggested renaming

49387de

Add usecallback

1ca5435

Add reducer types, fix test type, remove redundant check

0573285

Accept attachments as a prop for the cases select modal

2114d79

Expose useCasesAddToExistingCase hook, reducer code and global component

2e6307a

use the new hook to open the select cases modasl

cd78b3c

Fix tests and types

a2c0428

Add tests for cases global components

5b48b85

[Fleet] showing agent policy creation error message on UI (elastic#12…

9ecb270

…5931) * showing agent policy creation error message on UI * mapping the error instead of showing from the backend Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

[ResponseOps] Adds tooltip to time window selector in ES query rule f…

09154c2

…lyout (elastic#125764)

peteharverson approved these changes Mar 1, 2022

View reviewed changes

...ution/public/detections/components/alerts_table/timeline_actions/use_add_to_case_actions.tsx Show resolved Hide resolved

cnasikas reviewed Mar 1, 2022

View reviewed changes

x-pack/plugins/cases/public/common/use_cases_toast.test.tsx Show resolved Hide resolved

Esteban Beltran added 2 commits March 1, 2022 16:41

Fix mock paths

f80a1b7

fix eslint

9294657

cnasikas approved these changes Mar 1, 2022

View reviewed changes

kqualters-elastic approved these changes Mar 1, 2022

View reviewed changes

Esteban Beltran added 2 commits March 2, 2022 09:44

Merge remote-tracking branch 'upstream/main' into refactor/cases-acti…

5147ade

…on-buttons-out-of-timelines

Add test cases for the toast content

115998c

mgiota self-requested a review March 2, 2022 11:34

mgiota requested changes Mar 2, 2022

View reviewed changes

Merge remote-tracking branch 'upstream/main' into refactor/cases-acti…

fbee51e

…on-buttons-out-of-timelines

mgiota reviewed Mar 2, 2022

View reviewed changes

Add cases context to the overview page

8878fa1

academo requested a review from a team as a code owner March 2, 2022 15:23

mgiota self-requested a review March 2, 2022 16:10

mgiota approved these changes Mar 2, 2022

View reviewed changes

academo enabled auto-merge (squash) March 2, 2022 16:15

peteharverson approved these changes Mar 2, 2022

View reviewed changes

mgiota reviewed Mar 2, 2022

View reviewed changes

estermv approved these changes Mar 3, 2022

View reviewed changes

academo merged commit 83105bd into elastic:main Mar 3, 2022

cnasikas added the backport:skip This commit does not require backporting label Mar 3, 2022

This was referenced Mar 7, 2022

Refactor "Add to existing case" timeline action button to move it out of timelines. #126070

Closed

Remove all cases related code from timelines #127003

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Cases] Refactor: Move cases action buttons out of timelines #126265

[Cases] Refactor: Move cases action buttons out of timelines #126265

academo commented Feb 23, 2022 •

edited

Loading

peteharverson left a comment

cnasikas left a comment

kqualters-elastic left a comment

academo commented Mar 2, 2022

mgiota left a comment

mgiota commented Mar 2, 2022

mgiota Mar 2, 2022

academo Mar 2, 2022

academo commented Mar 2, 2022

mgiota left a comment

peteharverson left a comment

mgiota Mar 2, 2022

academo Mar 2, 2022

mgiota Mar 2, 2022 •

edited

Loading

kqualters-elastic Mar 2, 2022

kibana-ci commented Mar 2, 2022

API count

[Cases] Refactor: Move cases action buttons out of timelines #126265

[Cases] Refactor: Move cases action buttons out of timelines #126265

Conversation

academo commented Feb 23, 2022 • edited Loading

Summary

Checklist

peteharverson left a comment

Choose a reason for hiding this comment

cnasikas left a comment

Choose a reason for hiding this comment

kqualters-elastic left a comment

Choose a reason for hiding this comment

academo commented Mar 2, 2022

mgiota left a comment

Choose a reason for hiding this comment

mgiota commented Mar 2, 2022

mgiota Mar 2, 2022

Choose a reason for hiding this comment

academo Mar 2, 2022

Choose a reason for hiding this comment

academo commented Mar 2, 2022

mgiota left a comment

Choose a reason for hiding this comment

peteharverson left a comment

Choose a reason for hiding this comment

mgiota Mar 2, 2022

Choose a reason for hiding this comment

academo Mar 2, 2022

Choose a reason for hiding this comment

mgiota Mar 2, 2022 • edited Loading

Choose a reason for hiding this comment

kqualters-elastic Mar 2, 2022

Choose a reason for hiding this comment

kibana-ci commented Mar 2, 2022

💛 Build succeeded, but was flaky

Test Failures

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Public APIs missing exports

Page load bundle

API count

History

academo commented Feb 23, 2022 •

edited

Loading

mgiota Mar 2, 2022 •

edited

Loading