Skip to content

[Security Solution] Onboarding redesign#192247

Merged
semd merged 87 commits intoelastic:mainfrom
semd:refactor/onboarding_hub_new_architecture
Oct 11, 2024
Merged

[Security Solution] Onboarding redesign#192247
semd merged 87 commits intoelastic:mainfrom
semd:refactor/onboarding_hub_new_architecture

Conversation

@semd
Copy link
Copy Markdown
Contributor

@semd semd commented Sep 6, 2024 •
edited by kibanamachine
Loading

Summary

Issue: #189487

This PR is the final implementation of the Onboarding page redesign.

It has been developed in collaboration with @angorayc and @agusruidiazgd, using this branch as a feature branch.
It already includes 2 smaller PRs that have already been reviewed and approved by the @elastic/security-threat-hunting-explore team:

Changes

  • The progress bar has been removed
progress bar
  • Card styles updated:
    • Icons updated to custom SVGs to have the correct color
    • Icon with circle background
    • Card internal content border removed
Old New
Old styles New styles
  • Completed card styles updated:
    • Icon with green circle background
Old New
Old styles complete New styles complete
  • Improved "Add data with integrations" card
Old New
old integrations card new integrations card
  • New "Configure AI assistant" card in a new "Discover Elastic AI" group
new_ai_assistant_connectors_card.mov

@semd
Copy link
Copy Markdown
Contributor Author

semd commented Sep 13, 2024

/ci

@semd
Copy link
Copy Markdown
Contributor Author

semd commented Sep 16, 2024

@elasticmachine merge upstream

@kibana-ci
Copy link
Copy Markdown

kibana-ci commented Sep 19, 2024

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
securitySolution 5799 5783 -16

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
securitySolution 124 119 -5

Async chunks

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

id before after diff
securitySolution 20.4MB 20.4MB -33.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
securitySolution 34 33 -1

Page load bundle

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

id before after diff
securitySolution 87.0KB 84.4KB -2.6KB
securitySolutionEss 16.5KB 16.1KB -402.0B
securitySolutionServerless 21.6KB 20.8KB -799.0B
total -3.8KB
Unknown metric groups

API count

id before after diff
securitySolution 193 188 -5

async chunk count

id before after diff
securitySolution 95 96 +1

ESLint disabled line counts

id before after diff
securitySolution 541 543 +2

miscellaneous assets size

id before after diff
securitySolution 6.3MB 6.1MB -237.1KB

Total ESLint disabled count

id before after diff
securitySolution 626 628 +2

History

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

@angorayc angorayc mentioned this pull request Sep 30, 2024
Closed
wayneseymour
wayneseymour approved these changes Oct 11, 2024
View reviewed changes
Copy link
Copy Markdown
Contributor

@wayneseymour wayneseymour left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CR only, LGTM

kapral18
kapral18 reviewed Oct 11, 2024
View reviewed changes
Comment thread x-pack/plugins/security_solution/public/onboarding/constants.ts Outdated
kapral18
kapral18 reviewed Oct 11, 2024
View reviewed changes
Comment thread x-pack/plugins/security_solution/public/onboarding/types.ts Outdated
@semd semd enabled auto-merge (squash) October 11, 2024 15:40
kapral18
kapral18 approved these changes Oct 11, 2024
View reviewed changes
Copy link
Copy Markdown
Contributor

@kapral18 kapral18 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, good job.

@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Oct 11, 2024 •
edited
Loading

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
securitySolution 5950 5967 +17

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
securitySolution 122 117 -5

Async chunks

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

id before after diff
securitySolution 20.7MB 20.7MB +10.2KB

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
securitySolution 33 32 -1

Page load bundle

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

id before after diff
securitySolution 88.7KB 86.4KB -2.3KB
securitySolutionEss 11.7KB 11.4KB -378.0B
securitySolutionServerless 21.9KB 21.1KB -777.0B
total -3.4KB
Unknown metric groups

API count

id before after diff
securitySolution 190 185 -5

async chunk count

id before after diff
securitySolution 95 99 +4

ESLint disabled line counts

id before after diff
securitySolution 538 545 +7

miscellaneous assets size

id before after diff
securitySolution 6.3MB 6.2MB -101.8KB

Total ESLint disabled count

id before after diff
securitySolution 623 630 +7

History

cc @semd

@semd semd merged commit d39c75a into elastic:main Oct 11, 2024
@kibanamachine
Copy link
Copy Markdown
Contributor

kibanamachine commented Oct 11, 2024

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/11297862076

kibanamachine added a commit to kibanamachine/kibana that referenced this pull request Oct 11, 2024
@semd @elasticmachine
@kibanamachine @angorayc @agusruidiazgd
[Security Solution] Onboarding redesign (elastic#192247)
c4e8a3d 
## Summary

Issue: elastic#189487

This PR is the final implementation of the Onboarding page redesign.

It has been developed in collaboration with @angorayc and
@agusruidiazgd, using this branch as a feature branch.
It already includes 2 smaller PRs that have already been reviewed and
approved by the @elastic/security-threat-hunting-explore team:
- semd#8
- semd#9

### Changes
- Onboarding page architecture refactor
([issue](elastic#174766))
- Fixes elastic#183765 (from [this Meta
issue](elastic#183760))

---

- The progress bar has been removed
<img width="903" alt="progress bar"
src="https://github.com/user-attachments/assets/f16f3b6d-609f-4178-b83e-3b2106ba56ea">

---

- Card styles updated:
  - Icons updated to custom SVGs to have the correct color
  - Icon with circle background
  - Card internal content border removed

| Old | New |
| - | - |
|<img width="1172" alt="Old styles"
src="https://github.com/user-attachments/assets/5a75cd84-a30d-4621-88e3-17d837165016">|<img
width="1172" alt="New styles"
src="https://github.com/user-attachments/assets/8059bcbc-2f3d-4c7e-ba4f-041a58b51372">|

---

- Completed card styles updated:
  - Icon with green circle background

| Old | New |
| - | - |
|<img width="1172" alt="Old styles complete"
src="https://github.com/user-attachments/assets/3258c7be-4ffe-4d25-9cdb-d4fce66ce451">|<img
width="1172" alt="New styles complete"
src="https://github.com/user-attachments/assets/7dac6ec0-d78d-4881-ae84-3b46562c6d7d">|

---

- Improved "Add data with integrations" card

| Old | New |
| - | - |
|<img width="1174" alt="old integrations card"
src="https://github.com/user-attachments/assets/3c65c4f5-004b-4619-aa92-26ec0656a8e5">|<img
width="1174" alt="new integrations card"
src="https://github.com/user-attachments/assets/634e5249-b169-4c93-865e-b82453db90bf">|

---

- New "Configure AI assistant" card in a new "Discover Elastic AI" group

https://github.com/user-attachments/assets/39bd0dd4-88ba-47df-a77b-6b9b2a185cef

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Angela Chuang <yi-chun.chuang@elastic.co>
Co-authored-by: Agustina Nahir Ruidiaz <agustina.ruidiaz@elastic.co>
(cherry picked from commit d39c75a)
@kibanamachine kibanamachine mentioned this pull request Oct 11, 2024
Merged
@kibanamachine
Copy link
Copy Markdown
Contributor

kibanamachine commented Oct 11, 2024

💚 All backports created successfully

Status Branch Result
✅ 8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Oct 11, 2024
@kibanamachine @semd
[8.x] [Security Solution] Onboarding redesign (#192247) (#195979)
a75861e 
# Backport

This will backport the following commits from `main` to `8.x`:
- [[Security Solution] Onboarding redesign
(#192247)](#192247)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Sergi
Massaneda","email":"sergi.massaneda@elastic.co"},"sourceCommit":{"committedDate":"2024-10-11T19:00:26Z","message":"[Security
Solution] Onboarding redesign (#192247)\n\n## Summary\r\n\r\nIssue:
#189487
PR is the final implementation of the Onboarding page
redesign.\r\n\r\nIt has been developed in collaboration with @angorayc
and\r\n@agusruidiazgd, using this branch as a feature branch.\r\nIt
already includes 2 smaller PRs that have already been reviewed
and\r\napproved by the @elastic/security-threat-hunting-explore
team:\r\n- https://github.com/semd/kibana/pull/8\r\n-
https://github.com/semd/kibana/pull/9\r\n\r\n### Changes\r\n- Onboarding
page architecture
refactor\r\n([issue](https://github.com/elastic/kibana/issues/174766))\r\n-
Fixes #183765 (from [this
Meta\r\nissue](https://github.com/elastic/kibana/issues/183760))\r\n\r\n---\r\n\r\n-
The progress bar has been removed\r\n<img width=\"903\" alt=\"progress
bar\"\r\nsrc=\"https://github.com/user-attachments/assets/f16f3b6d-609f-4178-b83e-3b2106ba56ea\">\r\n\r\n---\r\n\r\n-
Card styles updated:\r\n - Icons updated to custom SVGs to have the
correct color\r\n - Icon with circle background\r\n - Card internal
content border removed\r\n\r\n| Old | New |\r\n| - | - |\r\n|<img
width=\"1172\" alt=\"Old
styles\"\r\nsrc=\"https://github.com/user-attachments/assets/5a75cd84-a30d-4621-88e3-17d837165016\">|<img\r\nwidth=\"1172\"
alt=\"New
styles\"\r\nsrc=\"https://github.com/user-attachments/assets/8059bcbc-2f3d-4c7e-ba4f-041a58b51372\">|\r\n\r\n---\r\n\r\n-
Completed card styles updated:\r\n - Icon with green circle
background\r\n\r\n| Old | New |\r\n| - | - |\r\n|<img width=\"1172\"
alt=\"Old styles
complete\"\r\nsrc=\"https://github.com/user-attachments/assets/3258c7be-4ffe-4d25-9cdb-d4fce66ce451\">|<img\r\nwidth=\"1172\"
alt=\"New styles
complete\"\r\nsrc=\"https://github.com/user-attachments/assets/7dac6ec0-d78d-4881-ae84-3b46562c6d7d\">|\r\n\r\n---\r\n\r\n-
Improved \"Add data with integrations\" card\r\n\r\n| Old | New |\r\n| -
| - |\r\n|<img width=\"1174\" alt=\"old integrations
card\"\r\nsrc=\"https://github.com/user-attachments/assets/3c65c4f5-004b-4619-aa92-26ec0656a8e5\">|<img\r\nwidth=\"1174\"
alt=\"new integrations
card\"\r\nsrc=\"https://github.com/user-attachments/assets/634e5249-b169-4c93-865e-b82453db90bf\">|\r\n\r\n---\r\n\r\n-
New \"Configure AI assistant\" card in a new \"Discover Elastic AI\"
group\r\n\r\n\r\nhttps://github.com/user-attachments/assets/39bd0dd4-88ba-47df-a77b-6b9b2a185cef\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Angela Chuang <yi-chun.chuang@elastic.co>\r\nCo-authored-by: Agustina
Nahir Ruidiaz
<agustina.ruidiaz@elastic.co>","sha":"d39c75a837e705637adc329887bc3b30ad90e79c","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:enhancement","v9.0.0","Team:
SecuritySolution","Team:Threat
Hunting:Explore","backport:prev-minor","ci:cloud-deploy","ci:cloud-persist-deployment","v8.16.0"],"title":"[Security
Solution] Onboarding
redesign","number":192247,"url":"https://github.com/elastic/kibana/pull/192247","mergeCommit":{"message":"[Security
Solution] Onboarding redesign (#192247)\n\n## Summary\r\n\r\nIssue:
#189487
PR is the final implementation of the Onboarding page
redesign.\r\n\r\nIt has been developed in collaboration with @angorayc
and\r\n@agusruidiazgd, using this branch as a feature branch.\r\nIt
already includes 2 smaller PRs that have already been reviewed
and\r\napproved by the @elastic/security-threat-hunting-explore
team:\r\n- https://github.com/semd/kibana/pull/8\r\n-
https://github.com/semd/kibana/pull/9\r\n\r\n### Changes\r\n- Onboarding
page architecture
refactor\r\n([issue](https://github.com/elastic/kibana/issues/174766))\r\n-
Fixes #183765 (from [this
Meta\r\nissue](https://github.com/elastic/kibana/issues/183760))\r\n\r\n---\r\n\r\n-
The progress bar has been removed\r\n<img width=\"903\" alt=\"progress
bar\"\r\nsrc=\"https://github.com/user-attachments/assets/f16f3b6d-609f-4178-b83e-3b2106ba56ea\">\r\n\r\n---\r\n\r\n-
Card styles updated:\r\n - Icons updated to custom SVGs to have the
correct color\r\n - Icon with circle background\r\n - Card internal
content border removed\r\n\r\n| Old | New |\r\n| - | - |\r\n|<img
width=\"1172\" alt=\"Old
styles\"\r\nsrc=\"https://github.com/user-attachments/assets/5a75cd84-a30d-4621-88e3-17d837165016\">|<img\r\nwidth=\"1172\"
alt=\"New
styles\"\r\nsrc=\"https://github.com/user-attachments/assets/8059bcbc-2f3d-4c7e-ba4f-041a58b51372\">|\r\n\r\n---\r\n\r\n-
Completed card styles updated:\r\n - Icon with green circle
background\r\n\r\n| Old | New |\r\n| - | - |\r\n|<img width=\"1172\"
alt=\"Old styles
complete\"\r\nsrc=\"https://github.com/user-attachments/assets/3258c7be-4ffe-4d25-9cdb-d4fce66ce451\">|<img\r\nwidth=\"1172\"
alt=\"New styles
complete\"\r\nsrc=\"https://github.com/user-attachments/assets/7dac6ec0-d78d-4881-ae84-3b46562c6d7d\">|\r\n\r\n---\r\n\r\n-
Improved \"Add data with integrations\" card\r\n\r\n| Old | New |\r\n| -
| - |\r\n|<img width=\"1174\" alt=\"old integrations
card\"\r\nsrc=\"https://github.com/user-attachments/assets/3c65c4f5-004b-4619-aa92-26ec0656a8e5\">|<img\r\nwidth=\"1174\"
alt=\"new integrations
card\"\r\nsrc=\"https://github.com/user-attachments/assets/634e5249-b169-4c93-865e-b82453db90bf\">|\r\n\r\n---\r\n\r\n-
New \"Configure AI assistant\" card in a new \"Discover Elastic AI\"
group\r\n\r\n\r\nhttps://github.com/user-attachments/assets/39bd0dd4-88ba-47df-a77b-6b9b2a185cef\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Angela Chuang <yi-chun.chuang@elastic.co>\r\nCo-authored-by: Agustina
Nahir Ruidiaz
<agustina.ruidiaz@elastic.co>","sha":"d39c75a837e705637adc329887bc3b30ad90e79c"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/192247","number":192247,"mergeCommit":{"message":"[Security
Solution] Onboarding redesign (#192247)\n\n## Summary\r\n\r\nIssue:
#189487
PR is the final implementation of the Onboarding page
redesign.\r\n\r\nIt has been developed in collaboration with @angorayc
and\r\n@agusruidiazgd, using this branch as a feature branch.\r\nIt
already includes 2 smaller PRs that have already been reviewed
and\r\napproved by the @elastic/security-threat-hunting-explore
team:\r\n- https://github.com/semd/kibana/pull/8\r\n-
https://github.com/semd/kibana/pull/9\r\n\r\n### Changes\r\n- Onboarding
page architecture
refactor\r\n([issue](https://github.com/elastic/kibana/issues/174766))\r\n-
Fixes #183765 (from [this
Meta\r\nissue](https://github.com/elastic/kibana/issues/183760))\r\n\r\n---\r\n\r\n-
The progress bar has been removed\r\n<img width=\"903\" alt=\"progress
bar\"\r\nsrc=\"https://github.com/user-attachments/assets/f16f3b6d-609f-4178-b83e-3b2106ba56ea\">\r\n\r\n---\r\n\r\n-
Card styles updated:\r\n - Icons updated to custom SVGs to have the
correct color\r\n - Icon with circle background\r\n - Card internal
content border removed\r\n\r\n| Old | New |\r\n| - | - |\r\n|<img
width=\"1172\" alt=\"Old
styles\"\r\nsrc=\"https://github.com/user-attachments/assets/5a75cd84-a30d-4621-88e3-17d837165016\">|<img\r\nwidth=\"1172\"
alt=\"New
styles\"\r\nsrc=\"https://github.com/user-attachments/assets/8059bcbc-2f3d-4c7e-ba4f-041a58b51372\">|\r\n\r\n---\r\n\r\n-
Completed card styles updated:\r\n - Icon with green circle
background\r\n\r\n| Old | New |\r\n| - | - |\r\n|<img width=\"1172\"
alt=\"Old styles
complete\"\r\nsrc=\"https://github.com/user-attachments/assets/3258c7be-4ffe-4d25-9cdb-d4fce66ce451\">|<img\r\nwidth=\"1172\"
alt=\"New styles
complete\"\r\nsrc=\"https://github.com/user-attachments/assets/7dac6ec0-d78d-4881-ae84-3b46562c6d7d\">|\r\n\r\n---\r\n\r\n-
Improved \"Add data with integrations\" card\r\n\r\n| Old | New |\r\n| -
| - |\r\n|<img width=\"1174\" alt=\"old integrations
card\"\r\nsrc=\"https://github.com/user-attachments/assets/3c65c4f5-004b-4619-aa92-26ec0656a8e5\">|<img\r\nwidth=\"1174\"
alt=\"new integrations
card\"\r\nsrc=\"https://github.com/user-attachments/assets/634e5249-b169-4c93-865e-b82453db90bf\">|\r\n\r\n---\r\n\r\n-
New \"Configure AI assistant\" card in a new \"Discover Elastic AI\"
group\r\n\r\n\r\nhttps://github.com/user-attachments/assets/39bd0dd4-88ba-47df-a77b-6b9b2a185cef\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Angela Chuang <yi-chun.chuang@elastic.co>\r\nCo-authored-by: Agustina
Nahir Ruidiaz
<agustina.ruidiaz@elastic.co>","sha":"d39c75a837e705637adc329887bc3b30ad90e79c"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Sergi Massaneda <sergi.massaneda@elastic.co>
@angorayc angorayc mentioned this pull request Oct 31, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@kapral18 kapral18 kapral18 approved these changes

+1 more reviewer

@wayneseymour wayneseymour wayneseymour approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@semd semd

Labels

ci:cloud-deploy Create or update a Cloud deployment ci:cloud-persist-deployment Persist cloud deployment indefinitely release_note:enhancement Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. v8.16.0 v9.0.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Security Solution][Onboarding] Fix broken "add integrations" links

8 participants

@semd @kibana-ci @elasticmachine @kibanamachine @kapral18 @wayneseymour @angorayc @agusruidiazgd