[Security solution] Guided onboarding, alerts & cases design updates by stephmilovic · Pull Request #144249 · elastic/kibana

stephmilovic · 2022-10-31T15:37:19Z

Summary

Makes updates to the guided onboarding design for the alerts and cases tour as requested here.

Adds a "Next" button to all tour steps. Adds an onClick property to SecurityTourStep to accomplish this. When next is click, either incrementStep if no onClick provided or call the onClick. Therefore, any provided onClick should handle incrementing the tour step
Focuses on Next buttons throughout tour (removes hideNextButton)
Pre-populates a sample case
Next button on create case step implements to a new step that scrolls down and calls attention to the create case button
Implements a new last step that has user click through to case details, where the case tour ends
Fixes bug with expanded rule name cell
Fix a few places where the step number was still being used instead of AlertsCasesTourSteps

Here is what all of that looks like:

flow-wednesday2.mov

To test

add feature flag to kibana.dev.yml: xpack.securitySolution.enableExperimental: ['guidedOnboarding']
add cloud test feature flag: xpack.cloud.id: 'test'
Run kibana with examples: yarn start --run-examples
Ensure you have alerts
Go to /app/guidedOnboardingExample
Use the "Set guide state" section to set Guide to security and Step ID to alertsCases
The Setup guide menu will automatically open to Security step 3. Hit the "Start" button
You will be redirected to the alerts page and at this point, we will start on the Alerts and cases tour. Click through the steps to complete the tour and check the fixes mentioned above

Changes to the `cases` app

For the cases tour step, our designer requested that when the create case flyout opens, the form is pre-populated.

To achieve the pre-populated form, I added a new property to the CreateCaseFlyout of initialValue: Partial<Case>. This value is piped to the form context and spread with in the definition of the create form: defaultValue: { ...initialCaseValue, ...initialValue }
Added tour-step properties to Eui elements to use as references for anchors and focus() instead of data-test-subj

x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_config.ts

kellyemurphy

One change and some questions.

x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_config.ts

kellyemurphy

Ok, better suggestions this time.

x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_config.ts

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

stephmilovic · 2022-11-08T17:19:38Z

...ins/security_solution/public/common/components/event_details/insights/related_cases.test.tsx

+window.HTMLElement.prototype.scrollIntoView = scrollToMock;

 describe('Related Cases', () => {
+  beforeEach(() => {


These tests needed improvement. Also, the async call in related_cases had side effects that the tests were yelling about, so I fixed the side effects. The last 2 tests in this file are what you should pay attention to

stephmilovic · 2022-11-08T17:22:07Z

.../plugins/security_solution/public/common/components/event_details/insights/related_cases.tsx

+    if (!shouldFetch) {
+      return;
    }
-    setRelatedCases(relatedCaseList);


The unit tests were yelling about this being called when the component was unmounted. Therefore, I refactored the async call to avoid this side effect

stephmilovic · 2022-11-08T17:50:29Z

...ugins/security_solution/public/common/components/guided_onboarding_tour/cases_tour_steps.tsx

+  document.querySelector(`[data-test-subj="create-case-submit"]`);
+
+export const CasesTourSteps = () => {
+  const [activeStep, setActiveStep] = useState(AlertsCasesTourSteps.createCase);


since this component is passed to Cases to render, it needs to manage its own activeStep state as the activeStep managed by security solution useTourContext is out of context

stephmilovic · 2022-11-08T18:15:23Z

x-pack/plugins/cases/public/components/create/flyout/create_case_flyout.tsx

        <GlobalStyle />
        <StyledFlyout
          onClose={onClose}
+          tour-step="create-case-flyout"


These are labels for my tour step anchor. Previously I was using data-test-subj="create-case-flyout" but it makes me nervous to call on a test ref in production.

stephmilovic · 2022-11-08T18:52:47Z

...urity_solution/public/detections/components/endpoint_responder/use_responder_action_item.tsx

    if (isResponseActionsConsoleEnabled && !isAuthzLoading && canAccessResponseConsole && isAlert) {
      actions.push(
        <ResponderContextMenuItem
+          key="endpointResponseActions-action-item"


error in tests pointed out that all members of the context menu did not have keys

stephmilovic · 2022-11-08T18:53:29Z

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

        <EuiContextMenuItem
          aria-label={ariaLabel}
          data-test-subj="add-to-existing-case-action"
+          key="add-to-existing-case-action"


error in tests pointed out that all members of the context menu did not have keys

jonathan-buttner

Cases changes look good 👍

x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/README.md

YulNaumenko

Tested locally and all the functionality work as expected.
Suggesting to improve the naming for the properties for GuidedOnboardingTourStep, incrementStep and remove "Allow me to explain some weirdness"

semd · 2022-11-09T09:49:37Z

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

    if (isTourShown(SecurityStepId.alertsCases)) {
-      endTourStep(SecurityStepId.alertsCases);
+      // user could be on step 5 or 6 at this point, increment to 7 no matter what
+      incrementStep(SecurityStepId.alertsCases, AlertsCasesTourSteps.viewCase);


Maybe we could create a new setStep for this one, using incrementStep may seem we are incrementing by 7, but we are not incrementing, we are setting a specific step value. If we change the function name we won't need the comment explaining what it does.

x-pack/plugins/cases/public/components/create/form_context.tsx

x-pack/plugins/cases/public/components/create/form.test.tsx

...ins/security_solution/public/common/components/event_details/insights/related_cases.test.tsx

semd

LGTM!
Thanks Steph this is awesome 🚀

kibana-ci · 2022-11-09T19:00:08Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`securitySolution`	3224	3225	+1

Async chunks

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

id	before	after	diff
`cases`	344.2KB	344.4KB	+151.0B
`securitySolution`	9.6MB	9.6MB	-58.4KB
total			-58.3KB

Page load bundle

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

id	before	after	diff
`securitySolution`	50.8KB	50.7KB	-8.0B

Unknown metric groups

async chunk count

id	before	after	diff
`securitySolution`	36	35	-1

ESLint disabled in files

id	before	after	diff
`osquery`	1	2	+1

ESLint disabled line counts

id	before	after	diff
`enterpriseSearch`	19	21	+2
`fleet`	59	65	+6
`osquery`	108	113	+5
`securitySolution`	440	447	+7
total			+20

Total ESLint disabled count

id	before	after	diff
`enterpriseSearch`	20	22	+2
`fleet`	67	73	+6
`osquery`	109	115	+6
`securitySolution`	517	524	+7
total			+21

History

💔 Build #86740 failed 1a0c157
💔 Build #86730 failed b37e65c
💔 Build #86691 failed c7615c6
💔 Build #86687 failed 02b28b1
💚 Build #86412 succeeded 2df8a1c

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

stephmilovic added 3 commits October 28, 2022 14:06

next buttons

636d34e

set initial value and expose submit function from getCreateCaseFlyout

c48c2ca

Merge branch 'main' into guided_onboarding_design

50fddb9

stephmilovic added release_note:skip Skip the PR/issue when compiling release notes Team:Threat Hunting Security Solution Threat Hunting Team Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting:Explore v8.6.0 labels Oct 31, 2022

gavinwye reviewed Oct 31, 2022

View reviewed changes

x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_config.ts Outdated Show resolved Hide resolved

gavinwye reviewed Oct 31, 2022

View reviewed changes

x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_config.ts Outdated Show resolved Hide resolved

kellyemurphy reviewed Oct 31, 2022

View reviewed changes

x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_config.ts Outdated Show resolved Hide resolved

x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_config.ts Outdated Show resolved Hide resolved

stephmilovic added 2 commits October 31, 2022 14:35

push

a19b090

button focus

50fe19c

kellyemurphy reviewed Oct 31, 2022

View reviewed changes

x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_config.ts Outdated Show resolved Hide resolved

x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_config.ts Outdated Show resolved Hide resolved

stephmilovic added 7 commits November 1, 2022 08:29

Merge branch 'main' into guided_onboarding_design

dea3873

fixing

095a436

merge main

b17c725

fix a couple tests

bbe2a1d

fix

17e8c0e

ok

d1932bc

useAddToCaseActions tests

bdc4cb4

stephmilovic commented Nov 1, 2022

View reviewed changes

x-pack/plugins/security_solution/public/detections/components/take_action_dropdown/index.tsx Outdated Show resolved Hide resolved

stephmilovic added 6 commits November 1, 2022 14:39

make sure AlertsCasesTourSteps is used everywhere

810f0ea

add tests to cases area

b1d12e4

rm comment

80ec3c1

add import

c969319

add test in cases

47eb7e0

Merge branch 'main' into guided_onboarding_design

a134f3f

stephmilovic marked this pull request as ready for review November 2, 2022 14:56

stephmilovic requested a review from a team as a code owner November 2, 2022 14:56

stephmilovic added 3 commits November 8, 2022 09:50

fix side effects and tests

b26a7bc

just a fix up

3dcb219

adds tests for tour context in related_cases

5f9c56d

stephmilovic commented Nov 8, 2022

View reviewed changes

data-test-subj to tour-step

3cc0718

stephmilovic commented Nov 8, 2022

View reviewed changes

tests for cases_tour_steps

3b91a69

stephmilovic commented Nov 8, 2022

View reviewed changes

more test

2df8a1c

jonathan-buttner approved these changes Nov 8, 2022

View reviewed changes

YulNaumenko reviewed Nov 9, 2022

View reviewed changes

x-pack/plugins/security_solution/public/common/components/guided_onboarding_tour/README.md Show resolved Hide resolved

YulNaumenko approved these changes Nov 9, 2022

View reviewed changes

semd reviewed Nov 9, 2022

View reviewed changes

cnasikas reviewed Nov 9, 2022

View reviewed changes

x-pack/plugins/cases/public/components/create/form_context.tsx Outdated Show resolved Hide resolved

cnasikas reviewed Nov 9, 2022

View reviewed changes

x-pack/plugins/cases/public/components/create/form.test.tsx Outdated Show resolved Hide resolved

semd reviewed Nov 9, 2022

View reviewed changes

...ins/security_solution/public/common/components/event_details/insights/related_cases.test.tsx Show resolved Hide resolved

stephmilovic added 5 commits November 9, 2022 08:29

pr fixes

02b28b1

fix type

c7615c6

Merge branch 'main' into guided_onboarding_design

92d0ac8

setStep function added and type fix

b37e65c

fix whoops

1a0c157

semd approved these changes Nov 9, 2022

View reviewed changes

stephmilovic added 2 commits November 9, 2022 11:27

Merge branch 'main' into guided_onboarding_design

4156066

fix test

48b739a

stephmilovic merged commit b721fdc into elastic:main Nov 9, 2022

kibanamachine added the backport:skip This PR does not require backporting label Nov 9, 2022

Conversation

stephmilovic commented Oct 31, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

To test

Changes to the cases app

Uh oh!

Uh oh!

Uh oh!

kellyemurphy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

kellyemurphy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

stephmilovic Nov 8, 2022

Choose a reason for hiding this comment

Uh oh!

stephmilovic Nov 8, 2022

Choose a reason for hiding this comment

Uh oh!

stephmilovic Nov 8, 2022

Choose a reason for hiding this comment

Uh oh!

stephmilovic Nov 8, 2022

Choose a reason for hiding this comment

Uh oh!

stephmilovic Nov 8, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

stephmilovic Nov 8, 2022

Choose a reason for hiding this comment

Uh oh!

jonathan-buttner left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

YulNaumenko left a comment

Choose a reason for hiding this comment

Uh oh!

semd Nov 9, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

semd left a comment

Choose a reason for hiding this comment

Uh oh!

kibana-ci commented Nov 9, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

async chunk count

ESLint disabled in files

ESLint disabled line counts

Total ESLint disabled count

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

11 participants

stephmilovic commented Oct 31, 2022 •

edited

Loading

Changes to the `cases` app

stephmilovic Nov 8, 2022 •

edited

Loading

kibana-ci commented Nov 9, 2022 •

edited

Loading