[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

…#126265) * WIP * WIP2 * Use new cases context hooks to open and close the flyout * Update timelines to use new hooks * CLose flyout on create success * Add back sucess toast * Move code to a dedicated component * Add CasesContext to observability * Remove dependency * Small refactor * Use observabilityAppId instead of observabilityFeatureId for buttons * Add CasesContext to timetable * Fix detection engine test cases * Fix broken tests * Fix broken tests * Rename hook * Add test cases for cases context ui * Add test for new hook * Remove state from the provider context * Remove basevalue * apply suggested renaming * Add usecallback * Add reducer types, fix test type, remove redundant check * Accept attachments as a prop for the cases select modal * Expose useCasesAddToExistingCase hook, reducer code and global component * use the new hook to open the select cases modasl * Fix tests and types * Add tests for cases global components * [Fleet] showing agent policy creation error message on UI (elastic#125931) * 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 flyout (elastic#125764) * [Lens] Allow detaching from global time range (elastic#125563) * allow detaching from global time range * add test * fix time field recognition * fix tests Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> * [Fleet] refactor auto upgrade package policies logic (elastic#125909) * refactor upgrade package policies * fixed tests * code cleanup * review improvements * added api test Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> * skip flaky suite (elastic#126027) * Remove deprecated api (elastic#125524) * [Fleet] Remove deprecated kibana APIs - License * Remove basePath from FleetApp * Replace AsyncPlugin with Plugin * Get fieldFormats from fieldFormats plugin rather than data plugin * Fix ts errors * Attempt fixing wrong type * Move licenseService to FleetStartDeps * Fix types and mocks Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> * Upgrade `markdown-it` dependency (`10.0.0` → `12.3.2`). (elastic#125526) * skipping failing tests (elastic#126039) * remove unused deprecated code and use field format plugin directly for data view field editor (elastic#126029) * [data views] Improve preview pane (elastic#126013) * fix preview pane * fix preview pane * one less span tag Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> * [Alerting] Provide services to set context for recovered alerts (elastic#124972) * Rename alert instance to alert and add create fn to alert factory * Rename alert instance to alert and add create fn to alert factory * Fixing types * Fixing types * Adding flag for rule types to opt into setting recovery context * Only showing context in action variable menu if flag set to true * Adding recovery functions to createAlertFactory * Setting recovery in index threshold and fixing types * Fixing lint issues and some refactoring * Cleanup * Functional tests for index threshold rule recovery context * Return array of recovered alerts instead of record * Fixing types * Fixing types * Cleanup * Handling nulls and more tests * Updating developer docs * Making getRecoveryAlerts non-optional * Setting unknown in index threshold recovery value * PR feedback * Adding a test Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> * [Discover] Re-introduce saved_searches test (elastic#126059) * [Archive Migration] index pattern without timefield (elastic#125870) * kbn_archive date_nanos * kbn_archive date_nanos in context and discover * kbn_archiver more date_nanos tests * split out kbnArchiver for index_pattern_without_timefield * remove date_nanos files from a different PR * update another test for usage of the same archives * set default index pattern for test * remove duplicate const kibanaServer Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> * delete unused es_archive visualize_embedding (elastic#126001) * delete unused es_archive * remove other unused es_archive * more unused es_archives Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> * Bump packages (elastic#126119) * url-parse 1.5.3 -> 1.5.9 * follow-redirects 1.y.z -> 1.14.9 * Add tests for all cases selector and attachments * Add tests for use add to existing case hook * First version of the cases timeline actions * export add alert to new case button from cases plugin * Make Cases ECS compatible with timelines and security_solution * Delete new case button * Add helpers * Use the cases hook directly for add to new case * Remov unused dependencies * Rename callbacks, remove timelines calls * Fixing tests for the dropdown * Fix broken test * mocking cases for tests * Fix detectiosn tests * Observability now uses the new cases hooks * Wrap events viewer into cases context * Open the create case flyout if create case was selected in the modal * Fix cases mocks for security_solution * Update tests * Add tests for use cases toast * Improve cases mock * delete security mock * replace tests mocks for cases * fix import mock * Do not require onRowClick * Show the toast inside the modal * show the toast inside the flyout * remove toast logic from the consumer plugin * fix typescript types * Rename type * Fix broken test * Fix file name and broken test * Use internal navigation hook * Update hook dependencies * Move useCaseToast * Fix mock paths * fix eslint * Add test cases for the toast content * Add cases context to the overview page Co-authored-by: Julia Bardi <90178898+juliaElastic@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: István Zoltán Szabó <szabosteve@gmail.com> Co-authored-by: Joe Reuter <johannes.reuter@elastic.co> Co-authored-by: Tiago Costa <tiago.costa@elastic.co> Co-authored-by: Cristina Amico <criamico@users.noreply.github.com> Co-authored-by: Aleh Zasypkin <aleh.zasypkin@elastic.co> Co-authored-by: Gloria Hornero <gloria.hornero@elastic.co> Co-authored-by: Matthew Kime <matt@mattki.me> Co-authored-by: Ying Mao <ying.mao@elastic.co> Co-authored-by: Maja Grubic <maja.grubic@elastic.co> Co-authored-by: Lee Drengenberg <lee.drengenberg@elastic.co> Co-authored-by: Joe Portner <5295965+jportner@users.noreply.github.com>

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