[Guided onboarding] Added Guided onboarding to the Fleet plugin #142185

yuliacech · 2022-09-29T08:03:08Z

Summary

Fixes #140610, #138646
Partially addresses #139712

This PR is a part of the Guided onboarding work for 8.6, specifically these changes are important for the Security guide, the "Add data" step. When this step is active, the Integrations detail page for Elastic Defend will display a EUI tour pointing out the "Add integration" button. Also this button will redirect the user to the new Agent flow not only for the first agent install, but for repeat install as well. Other conditions for the new Agent flow are unchanged and it seems safe to redirect the user to the new flow even if they already have an Agent installed. The last change is on the data confirmation page. If the data step is active, the confirmation page will send a signal to the Guided onboarding plugin to mark the step as completed when the incoming data is detected.

The e2e UI tests will be addressed in a follow up PR (see #138568).

How to test

1. Add this code to the `KIBANA/config/kibana.dev.yml` file

# needed for the Fleet server
server.host: 0.0.0.0
xpack.fleet.agents.enabled: true
xpack.fleet.packages:
  - name: fleet_server
    version: latest
xpack.fleet.agentPolicies:
  - name: Fleet Server policy
    id: fleet-server-policy
    description: Fleet server policy
    namespace: default
    package_policies:
      - name: Fleet Server
        package:
          name: fleet_server

# needed to imitate Cloud deployments
xpack.cloud.id: 'testID'

# needed to enable guided onboarding plugin
guidedOnboarding.ui: true

Start ES with this command

yarn es snapshot --license trial -E xpack.security.authc.api_key.enabled=true -E xpack.security.authc.token.enabled=true -E path.data=/tmp/es-data -E http.host=0.0.0.0

Start Kibana with this command

yarn start --run-examples

Start your docker app
Start the Fleet server with this command (I was testing with the version 8.4.2)

docker run -e KIBANA_HOST=http://192.168.65.2:5601 -e KIBANA_USERNAME=elastic -e KIBANA_PASSWORD=changeme -e ELASTICSEARCH_HOST=http://192.168.65.2:9200 -e KIBANA_FLEET_SETUP=1 -e FLEET_SERVER_ENABLE=1 -e FLEET_SERVER_POLICY_ID=fleet-server-policy -p 8220:8220 docker.elastic.co/beats/elastic-agent:8.4.2

In Kibana, navigate to http://localhost:5601/app/guidedOnboardingExample and start the Security guide. Make sure the green guided onboarding button is displayed in the header and the first step is active.
In the guided onboarding checklist panel, click the "Start" button in the first step. Or alternatively navigate to http://localhost:5601/app/integrations/browse/security. Click the Elastic Defend card to open the details page.
On the Elastic Defend details page, make sure the EUI tour is displayed.
When clicking on the "Add integration" button, make sure the new Agent flow is used.
Complete the flow and make sure, when the incoming data is detected, the guided onboarding step is marked completed.
Delete the integration and restart the Security guide, but don't delete the installed Agent. Make sure the new flow is still used when installing the integration.

Screenshots

EUI tour on the details page

The data step is marked completed

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support

elasticmachine · 2022-10-03T08:42:40Z

Pinging @elastic/platform-onboarding (Team:Journey/Onboarding)

alisonelizabeth

Nice work @yuliacech! It's so exciting to start seeing this come together 🎉. I tested following the steps you provided and everything worked as expected.

I left a couple nits in the code, and one question around the footer button label for the tour. Otherwise, I'm happy with the changes once CI is green. Going to approve to not block you.

alisonelizabeth · 2022-10-03T15:26:01Z

src/plugins/guided_onboarding/public/mocks.tsx

@@ -0,0 +1,27 @@
+/*


👍 thanks for adding this mock!

alisonelizabeth · 2022-10-03T15:28:28Z

src/plugins/guided_onboarding/public/services/api.ts

+   * An observable with the boolean value if the guided onboarding is currently active for the integration.
+   * Returns true, if the passed integration is used in the current guide's step.
+   * Returns false otherwise.
+   * @param {string} guideID the integration ID (package key) to check for in the guided onboarding config


typo here I think

Suggested change

* @param {string} guideID the integration ID (package key) to check for in the guided onboarding config

* @param {string} the integration ID (package key) to check for in the guided onboarding config

alisonelizabeth · 2022-10-03T15:35:24Z

x-pack/plugins/fleet/public/hooks/use_is_guided_onboarding_active.ts

+      : of(false)
+  );
+  useEffect(() => {
+    setResult(!!isGuidedOnboardingActiveForIntegration);


Is the !! necessary? Shouldn't this always return a boolean?

I think useObservable adds an undefined to the types even when the original Observable is of type boolean.

alisonelizabeth · 2022-10-03T15:40:22Z

...ications/integrations/sections/epm/screens/detail/components/with_guided_onboarding_tour.tsx

+      footerAction={
+        <EuiButton onClick={() => setIsGuidedOnboardingTourOpen(false)} size="s" color="success">
+          {i18n.translate('xpack.fleet.guidedOnboardingTour.nextButtonLabel', {
+            defaultMessage: 'Next',


Should this be "End tour" or "Complete" instead when there is only one step?

I would need to confirm with design and copy, but given that the tour doesn't complete the step but helps the user to move along, I think 'Next' could work here.

If clicking the button returns them to the setup guide, then I think "Next" makes perfect sense here.

Thanks a lot, @kellyemurphy! Yes, the tour is used to point out the button. If it's closed, the guide stays in the same step until the user clicks the "Add integration" button and competes the installation.

elasticmachine · 2022-10-03T15:41:55Z

Pinging @elastic/fleet (Team:Fleet)

…ions

…t available in fleet

…older in the fleet plugin, also fixed tests

…-ref HEAD~1..HEAD --fix'

…-fix'

yuliacech · 2022-10-04T19:15:39Z

Thanks a lot for the review, @alisonelizabeth 🎉

...ications/integrations/sections/epm/screens/detail/components/with_guided_onboarding_tour.tsx

hop-dev

Tested locally and the code looks great. Thanks for this! 🚀

…/epm/screens/detail/components/with_guided_onboarding_tour.tsx Co-authored-by: Kelly Murphy <[email protected]>

yuliacech · 2022-10-05T11:14:11Z

Thanks a lot for your review, @hop-dev! 👍

…-ref HEAD~1..HEAD --fix'

kibana-ci · 2022-10-05T12:20:05Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`fleet`	764	766	+2

Async chunks

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

id	before	after	diff
`fleet`	915.0KB	915.9KB	+960.0B

Page load bundle

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

id	before	after	diff
`fleet`	111.8KB	112.5KB	+760.0B
`guidedOnboarding`	16.0KB	16.6KB	+662.0B
total			+1.4KB

History

💚 Build #78103 succeeded c1fd07e
💔 Build #78070 failed 852bd97
💔 Build #77903 failed 493462e
💔 Build #77890 failed df972f8
💔 Build #77389 failed 016e6bbe93ec6a3ce2c899c38b97abb4eaac4739
💔 Build #77382 failed 0ee198c0f005bb6fd461ee26cfe91511577007b1

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

…tic#142185) * [Guided onboarding] Added a EuiTour for guided onboarding in Integrations * [Guided onboarding] Added data step completion for Elastic Defend * [Guided onboarding] Added tests for api * [Guided onboarding] Fixed jest tests * [Guided onboarding] Added a fail safe for guided onboarding plugin not available in fleet * [Guided onboarding] Moved the guided onboarding hook to a different folder in the fleet plugin, also fixed tests * [CI] Auto-commit changed files from 'node scripts/precommit_hook.js --ref HEAD~1..HEAD --fix' * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * [Guided onboarding] Updates after the merge conflicts * [Guided onboarding] Fixed typos * [Guided onboarding] Fixed types error * Update x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/components/with_guided_onboarding_tour.tsx Co-authored-by: Kelly Murphy <[email protected]> Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Kelly Murphy <[email protected]>

yuliacech changed the title ~~[Guided onboarding] Added Eui tour to Integrations detail page~~ [Guided onboarding] Added Guided onboarding to the Fleet plugin Oct 3, 2022

yuliacech marked this pull request as ready for review October 3, 2022 08:40

yuliacech requested review from a team as code owners October 3, 2022 08:40

yuliacech added release_note:skip Skip the PR/issue when compiling release notes Team:Journey/Onboarding Platform Journey Onboarding team v8.6.0 labels Oct 3, 2022

alisonelizabeth approved these changes Oct 3, 2022

View reviewed changes

botelastic bot added the Team:Fleet Team label for Observability Data Collection Fleet team label Oct 3, 2022

nchaulet requested review from nchaulet and removed request for nchaulet October 4, 2022 00:32

yuliacech added 6 commits October 4, 2022 13:18

[Guided onboarding] Added a EuiTour for guided onboarding in Integrat…

142e57b

…ions

[Guided onboarding] Added data step completion for Elastic Defend

d4569f1

[Guided onboarding] Added tests for api

ff0036c

[Guided onboarding] Fixed jest tests

27521cb

[Guided onboarding] Added a fail safe for guided onboarding plugin no…

696196d

…t available in fleet

[Guided onboarding] Moved the guided onboarding hook to a different f…

e74b69c

…older in the fleet plugin, also fixed tests

yuliacech force-pushed the guided_onboarding/8.6_integrations_tours branch from 016e6bb to e74b69c Compare October 4, 2022 11:31

kibanamachine and others added 4 commits October 4, 2022 11:38

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

df972f8

…-ref HEAD~1..HEAD --fix'

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

493462e

…-fix'

[Guided onboarding] Updates after the merge conflicts

795c6ec

[Guided onboarding] Fixed typos

852bd97

jen-huang requested a review from hop-dev October 4, 2022 19:36

[Guided onboarding] Fixed types error

c1fd07e

kellyemurphy reviewed Oct 4, 2022

View reviewed changes

...ications/integrations/sections/epm/screens/detail/components/with_guided_onboarding_tour.tsx Outdated Show resolved Hide resolved

hop-dev approved these changes Oct 5, 2022

View reviewed changes

Update x-pack/plugins/fleet/public/applications/integrations/sections…

dd6b92d

…/epm/screens/detail/components/with_guided_onboarding_tour.tsx Co-authored-by: Kelly Murphy <[email protected]>

yuliacech enabled auto-merge (squash) October 5, 2022 11:14

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

01daf38

…-ref HEAD~1..HEAD --fix'

yuliacech merged commit 27ac4fc into elastic:main Oct 5, 2022

kibanamachine added the backport:skip This commit does not require backporting label Oct 5, 2022

alisonelizabeth mentioned this pull request Oct 6, 2022

[Guided onboarding] [Security] Detect "Add data" step completion #138646

Closed

yuliacech mentioned this pull request Oct 19, 2022

[Guided onboarding] [Security] Add EUI tour to Integrations pages #139712

Closed

alisonelizabeth mentioned this pull request Nov 3, 2022

[Meta] [Guided onboarding] Open issues #144458

Closed

6 tasks

yuliacech deleted the guided_onboarding/8.6_integrations_tours branch November 22, 2022 09:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Guided onboarding] Added Guided onboarding to the Fleet plugin #142185

[Guided onboarding] Added Guided onboarding to the Fleet plugin #142185

yuliacech commented Sep 29, 2022 •

edited

Loading

elasticmachine commented Oct 3, 2022

alisonelizabeth left a comment

alisonelizabeth Oct 3, 2022

alisonelizabeth Oct 3, 2022

alisonelizabeth Oct 3, 2022

yuliacech Oct 4, 2022

alisonelizabeth Oct 3, 2022

yuliacech Oct 4, 2022

kellyemurphy Oct 4, 2022

yuliacech Oct 5, 2022

elasticmachine commented Oct 3, 2022

yuliacech commented Oct 4, 2022

hop-dev left a comment

yuliacech commented Oct 5, 2022

kibana-ci commented Oct 5, 2022

	* @param {string} guideID the integration ID (package key) to check for in the guided onboarding config
	* @param {string} the integration ID (package key) to check for in the guided onboarding config

[Guided onboarding] Added Guided onboarding to the Fleet plugin #142185

[Guided onboarding] Added Guided onboarding to the Fleet plugin #142185

Conversation

yuliacech commented Sep 29, 2022 • edited Loading

Summary

How to test

Screenshots

EUI tour on the details page

The data step is marked completed

Checklist

elasticmachine commented Oct 3, 2022

alisonelizabeth left a 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

Choose a reason for hiding this comment

elasticmachine commented Oct 3, 2022

yuliacech commented Oct 4, 2022

hop-dev left a comment

Choose a reason for hiding this comment

yuliacech commented Oct 5, 2022

kibana-ci commented Oct 5, 2022

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

yuliacech commented Sep 29, 2022 •

edited

Loading