[Security Solution] Modal for saving timeline #81205

angorayc · 2020-10-20T16:47:14Z

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.

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

patrykkopycinski · 2020-10-26T10:56:26Z

x-pack/plugins/security_solution/common/constants.ts

@@ -179,3 +179,5 @@ export const showAllOthersBucket: string[] = [
  'destination.ip',
  'user.name',
 ];
+
+export const enableNewTimeline = false;


can use uppercase for the variable name?

yup, renamed it to ENABLE_NEW_TIMELINE

patrykkopycinski · 2020-10-26T10:57:20Z

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

+
+export const TimelineTitleAndDescription = React.memo<TimelineTitleAndDescriptionProps>(
+  ({ timelineId, toggleSaveTimeline, onSaveTimeline, updateTitle, updateDescription }) => {
+    const timeline = useShallowEqualSelector((state) =>


const { description, isSaving, savedObjectId, title, timelineType } = ...

I send the entire timeline to onSaveTimeline below, so I'm keeping this atm.

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

patrykkopycinski · 2020-10-26T11:01:13Z

x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx

@@ -39,6 +40,7 @@ const StatefulFlyoutHeader = React.memo<Props>(
    noteIds,
    notesById,
    status,
+    saveTimeline,


can we move saveTimeline action binding to the destination component to avoid unnecessary props drilling?

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

andrew-goldstein · 2020-10-26T16:36:33Z

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

+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup justifyContent="flexEnd">
+              <EuiFlexItem grow={false} component="span">
+                {savedObjectId == null ? (


I'm wondering if the behavior shown in the gif below, where the Discard Timeline button is displayed for a new, non-mutated timeline, is a product of Timeline being in the current "in between" state, where we're just starting to implement the new design, or potentially a bug:

I think the intent of the Discard Timeline button shown in the gif above is to address the case when a user has performed an action that will result in unsaved changes being discarded, because the timeline was never given a name. I'm not sure if the Discard Timeline button should appear in the scenario shown above, because we created a new timeline, with no mutations.

@angorayc would you be willing to confirm the expected behavior with @marrasherrier?

@angorayc @andrew-goldstein I think it's best to keep the 'discard' option for consistency.

@monina-n looping you in as well for transparency!

From what we've talked about before, this is the same modal that will also appear when you click 'X' to close an unsaved timeline. I agree with @andrew-goldstein that having "Discard timeline" would be an unexpected option when you click the pencil icon to add a name/description? If I click the pencil icon, I would expect the options to be "Save" and "Cancel" with cancel closing the modal instead of deleting the entire timeline.

I think we can potentially go with @andrew-goldstein's suggestion of not having the "discard button" on the pencil and only when we're closing the timeline. Another possible solution is having two modals: (1) clicking the pencil icon and having the options be "Save Timeline" and "Cancel" and (2) clicking the 'X' to close a timeline and having the options be "Save Timeline" and "Discard Timeline" with the "discard" button being in red and maybe having a note that if you don't save the timeline, it will delete it.

@marrasherrier @andrew-goldstein @angorayc what do you guys think?

@monina-n thanks for clarifying, that makes sense to me. @angorayc here is the separate interaction more clearly mocked out: https://www.figma.com/file/QVxq6M4TFDJlcgFHGe9wYT/Timeline-Evolution?node-id=1034%3A27036

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

elasticmachine · 2020-10-27T14:55:00Z

Pinging @elastic/ingest-management (Team:Ingest Management)

elasticmachine · 2020-10-27T14:55:00Z

Pinging @elastic/apm-ui (Team:apm)

elasticmachine · 2020-10-27T14:55:00Z

Pinging @elastic/uptime (Team:uptime)

cjcenizal · 2020-10-27T16:13:55Z

@angorayc In past cases where multiple teams have been accidentally pinged on a PR, I've seen authors close the PR and reopen a new one in order to avoid all of the pinged team-members having to manually unsubscribe from the PR. Otherwise those team-members will just keep getting pinged due to comments, reviews, stuff like that. Would you mind doing that in this case, too please?

angorayc · 2020-10-27T16:28:20Z

Follow up in #81802

kibanamachine · 2020-10-27T17:26:16Z

💚 Build Succeeded

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

Metrics [docs]

@kbn/optimizer bundle module count

id	before	after	diff
`securitySolution`	2063	2066	+3

async chunks size

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

page load bundle size

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

History

💚 Build #83971 succeeded 899336b
💚 Build #83431 succeeded 1b8fdad
💚 Build #83398 succeeded 5cca47a
💔 Build #83386 failed a0afcaa
💔 Build #83364 failed 28ea916

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

angorayc self-assigned this Oct 22, 2020

angorayc added release_note:skip Skip the PR/issue when compiling release notes Team:Threat Hunting Security Solution Threat Hunting Team v7.11.0 labels Oct 22, 2020

angorayc marked this pull request as ready for review October 22, 2020 16:02

angorayc requested review from a team as code owners October 22, 2020 16:02

patrykkopycinski reviewed Oct 26, 2020

View reviewed changes

andrew-goldstein reviewed Oct 26, 2020

View reviewed changes

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

andrew-goldstein reviewed Oct 26, 2020

View reviewed changes

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

angorayc requested a review from a team as a code owner October 27, 2020 14:54

angorayc requested a review from a team October 27, 2020 14:54

angorayc requested a review from a team as a code owner October 27, 2020 14:54

angorayc requested a review from a team October 27, 2020 14:54

angorayc requested a review from a team as a code owner October 27, 2020 14:54

angorayc requested a review from a team October 27, 2020 14:54

angorayc requested review from a team as code owners October 27, 2020 14:54

botelastic bot added Feature:Embedding Embedding content via iFrame Team:APM All issues that need APM UI Team support Team:Fleet Team label for Observability Data Collection Fleet team Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability labels Oct 27, 2020

init modal for saving timeline

f6ac479

angorayc added 8 commits October 27, 2020 15:07

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

angorayc force-pushed the save-timeline branch from 9919a3c to 899336b Compare October 27, 2020 15:08

angorayc removed request for a team October 27, 2020 15:09

angorayc removed Feature:Embedding Embedding content via iFrame Team:Fleet Team label for Observability Data Collection Fleet team Team:APM All issues that need APM UI Team support Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability labels Oct 27, 2020

rename constant

aa33e3f

angorayc closed this Oct 27, 2020

MindyRS added the Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. label Oct 27, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution] Modal for saving timeline #81205

[Security Solution] Modal for saving timeline #81205

angorayc commented Oct 20, 2020 •

edited

Loading

patrykkopycinski Oct 26, 2020

angorayc Oct 27, 2020 •

edited

Loading

patrykkopycinski Oct 26, 2020

angorayc Oct 27, 2020

patrykkopycinski Oct 26, 2020

andrew-goldstein Oct 26, 2020

marrasherrier Oct 27, 2020

marrasherrier Oct 27, 2020

monina-n Oct 27, 2020

marrasherrier Oct 27, 2020

elasticmachine commented Oct 27, 2020

elasticmachine commented Oct 27, 2020

elasticmachine commented Oct 27, 2020

cjcenizal commented Oct 27, 2020

angorayc commented Oct 27, 2020

kibanamachine commented Oct 27, 2020

[Security Solution] Modal for saving timeline #81205

[Security Solution] Modal for saving timeline #81205

Conversation

angorayc commented Oct 20, 2020 • edited Loading

Summary

Checklist

Choose a reason for hiding this comment

angorayc Oct 27, 2020 • edited Loading

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

Choose a reason for hiding this comment

elasticmachine commented Oct 27, 2020

elasticmachine commented Oct 27, 2020

elasticmachine commented Oct 27, 2020

cjcenizal commented Oct 27, 2020

angorayc commented Oct 27, 2020

kibanamachine commented Oct 27, 2020

💚 Build Succeeded

Metrics [docs]

@kbn/optimizer bundle module count

async chunks size

page load bundle size

History

angorayc commented Oct 20, 2020 •

edited

Loading

angorayc Oct 27, 2020 •

edited

Loading