[Security Solution] Modal for saving timeline #81802

angorayc · 2020-10-27T16:24:37Z

Summary

This is a button and modal to edit / update timeline's title / description.
This shouldn't change the existing behaviour of title and description field.

Please go to x-pack/plugins/security_solution/common/constants.ts Line 183 and change enableNewTimeline to true.
There will be a pencil icon appears next to description field. A modal appears after clicking on the button.
https://github.com/elastic/security-team/issues/426

Auto save is disabled when typing the name / description in the modal.
Timeline is only saved by clicking on the button.

showWarning in x-pack/plugins/security_solution/public/timelines/components/timeline/header/title_and_description.tsx line 66
is to reserve for using the modal as a prompt, incase user navigating away before saving the timeline.
Trigger the modal for an unsaved timeline before navigating away is not included in this PR, but the layout and the action is there:

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

angorayc · 2020-10-28T17:33:53Z

@elasticmachine merge upstream

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

x-pack/plugins/security_solution/public/timelines/components/timeline/header/save_timeline.tsx

patrykkopycinski · 2020-10-29T10:10:15Z

x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx

+  }) => {
+    const onDescriptionChanged = useCallback(
+      (e) => {
+        updateDescription({ id: timelineId, description: e.target.value, disableAutoSave });


maybe we should add debounce to don't dispatch updateDescription on every key press?

It seems that there's already a delay 500ms in x-pack/plugins/security_solution/public/timelines/store/timeline/epic.ts Line 500, so I think it's ok here

patrykkopycinski · 2020-10-29T10:10:55Z

x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx

+export const Name = React.memo<NameProps>(
+  ({
+    autoFocus = false,
+    className = TIMELINE_TITLE_CLASSNAME,


why do we need this className?

yeah, I'm using that to auto focus the input field.

@patrykkopycinski you're right! useRef works well for autoFocus, I've removed classname accordingly. Thank you 👍

patrykkopycinski · 2020-10-29T10:11:26Z

x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx

+    marginRight,
+  }) => {
+    const handleChange = useCallback(
+      (e) => updateTitle({ id: timelineId, title: e.target.value, disableAutoSave }),


maybe we should add debounce to don't dispatch updateTitle on every key press?

It seems that there's already a delay 500ms in x-pack/plugins/security_solution/public/timelines/store/timeline/epic.ts Line 500, so I think it's ok here

…timeline

andrew-goldstein · 2020-10-29T15:40:39Z

...gins/security_solution/public/timelines/components/timeline/header/title_and_description.tsx

+              </EuiFlexItem>
+              <EuiFlexItem grow={false} component="span">
+                <EuiButton
+                  isDisabled={title.trim().length === 0 || isSaving}


Thanks for adding these checks! 😄

Would you be willing to consider adding a condition that disables the button when the modal is launched in "edit" mode, but no changes have been made?

The rational for this change is clicking save when no mutations have been made (in edit mode) kicks off IO that updates the saved object, per the gif below:

Even though nothing really changed, updating the saved object effects, for example, the Recent timelines widget on the Overview:

Recent Timelines before save

Recent Timelines after save

Yup, no problem. I'll open another PR for this.

...ugins/security_solution/public/timelines/components/timeline/header/save_timeline_button.tsx

x-pack/plugins/security_solution/public/timelines/components/timeline/header/translations.ts

andrew-goldstein

Thanks for this enhancement as part of the Timeline Evolution @angorayc! 🙏

Desk tested locally, including the following a11y goals:

The pencil icon buttons (located next to the timeline name and description labels) shall be accessible via keyboard
The Save Timeline / Name Timeline modal shall focus the Name field when the modal is launched
All inputs and buttons in the modal shall be keyboard focusable
Changes to the modal contents may be discarded by pressing the Escape key (note: this can't be fully tested until the old inputs are removed, but I confirmed it doesn't make a network call when Escape is pressed)

I left a few minor comments, but it looks great overall!

LGTM 🚀

kibanamachine · 2020-10-30T13:39:03Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: d770bcf

Metrics [docs]

@kbn/optimizer bundle module count

id	before	after	diff
`securitySolution`	2063	2065	+2

async chunks size

id	before	after	diff
`securitySolution`	8.1MB	8.2MB	+18.1KB

page load bundle size

id	before	after	diff
`securitySolution`	263.1KB	263.3KB	+260.0B

History

💚 Build #84586 succeeded 44a6cac
💚 Build #84551 succeeded 43104b5
💚 Build #84367 succeeded 6530242
💔 Build #84321 failed cbf08e7
💔 Build #84297 failed acc014b

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

* init modal for saving timeline * disable auto save * unit test * fix type error * update translation * add unit tests * rename constant * break components into files * autoFocus and close modal on finish * rename constant * fix description label * update wording * review * fix dependency * remove classname * update wording Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

* master: (71 commits) [Chrome] Extension to append an element to the last breadcrumb (elastic#82015) [Monitoring] Thread pool rejections alert (elastic#79433) [Actions] Fix actionType type on registerType function (elastic#82125) [Security Solution] Modal for saving timeline (elastic#81802) add tests for index pattern switching (elastic#81987) TS project references for share plugin (elastic#82051) [Graph] Fix problem with duplicate ids (elastic#82109) skip 'returns a single bucket if array has 1'. related elastic#81460 Add a link to documentation in the alerts and actions management UI (elastic#81909) [Fleet] fix duplicate ingest pipeline refs (elastic#82078) Context menu trigger for URL Drilldown (elastic#81158) SO management: fix legacy import index pattern selection being reset when switching page (elastic#81621) Fixed dead links (elastic#78696) [Search] Add "restore" to session service (elastic#81924) fix Lens heading structure (elastic#81752) [ML] Data Frame Analytics: Fix feature importance cell value and decision path chart (elastic#82011) Remove legacy app arch items from codeowners. (elastic#82084) [TSVB] Renamed 'positive rate' to 'counter rate' (elastic#80939) Expressions/migrations2 (elastic#81281) [Telemetry] [Schema] remove number type and support all es number types (elastic#81774) ...

* init modal for saving timeline * disable auto save * unit test * fix type error * update translation * add unit tests * rename constant * break components into files * autoFocus and close modal on finish * rename constant * fix description label * update wording * review * fix dependency * remove classname * update wording Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

angorayc added 10 commits October 27, 2020 15:07

init modal for saving timeline

f6ac479

disable auto save

75b0f65

unit test

16e35a5

fix type error

952c036

update translation

6483597

add unit tests

0e8dc51

rename constant

d7686f6

break components into files

b707677

autoFocus and close modal on finish

899336b

rename constant

aa33e3f

angorayc requested review from a team as code owners October 27, 2020 16:24

angorayc added release_note:skip Skip the PR/issue when compiling release notes Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting Security Solution Threat Hunting Team v7.11 v7.11.0 and removed v7.11 labels Oct 27, 2020

angorayc mentioned this pull request Oct 27, 2020

[Security Solution] Modal for saving timeline #81205

Closed

2 tasks

angorayc changed the title ~~Save timeline~~ [Security Solution] Modal for saving timeline Oct 27, 2020

angorayc added 2 commits October 28, 2020 14:46

fix description label

acc014b

update wording

cbf08e7

Merge branch 'master' into save-timeline

6530242

patrykkopycinski reviewed Oct 29, 2020

View reviewed changes

angorayc added 3 commits October 29, 2020 12:51

review

d453fa2

Merge branch 'save-timeline' of github.com:angorayc/kibana into save-…

f272e1c

…timeline

fix dependency

43104b5

andrew-goldstein reviewed Oct 29, 2020

View reviewed changes

remove classname

44a6cac

andrew-goldstein reviewed Oct 29, 2020

View reviewed changes

...ugins/security_solution/public/timelines/components/timeline/header/save_timeline_button.tsx Outdated Show resolved Hide resolved

andrew-goldstein reviewed Oct 29, 2020

View reviewed changes

x-pack/plugins/security_solution/public/timelines/components/timeline/header/translations.ts Outdated Show resolved Hide resolved

andrew-goldstein approved these changes Oct 29, 2020

View reviewed changes

update wording

d770bcf

angorayc merged commit 04c8a5d into elastic:master Oct 30, 2020

angorayc mentioned this pull request Oct 30, 2020

[7.x] [Security Solution] Modal for saving timeline (#81802) #82137

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution] Modal for saving timeline #81802

[Security Solution] Modal for saving timeline #81802

angorayc commented Oct 27, 2020 •

edited

Loading

angorayc commented Oct 28, 2020

patrykkopycinski Oct 29, 2020

angorayc Oct 29, 2020

patrykkopycinski Oct 29, 2020

angorayc Oct 29, 2020

angorayc Oct 29, 2020

patrykkopycinski Oct 29, 2020

angorayc Oct 29, 2020

andrew-goldstein Oct 29, 2020

angorayc Oct 30, 2020

andrew-goldstein left a comment

kibanamachine commented Oct 30, 2020

[Security Solution] Modal for saving timeline #81802

[Security Solution] Modal for saving timeline #81802

Conversation

angorayc commented Oct 27, 2020 • edited Loading

Summary

Checklist

angorayc commented Oct 28, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Recent Timelines before save

Recent Timelines after save

Choose a reason for hiding this comment

andrew-goldstein left a comment

Choose a reason for hiding this comment

kibanamachine commented Oct 30, 2020

💚 Build Succeeded

Metrics [docs]

@kbn/optimizer bundle module count

async chunks size

page load bundle size

History

angorayc commented Oct 27, 2020 •

edited

Loading