[Security Solution] [Onboarding] Cards content update #198761
Assignees
Comments
|
Pinging @elastic/security-threat-hunting-explore (Team:Threat Hunting:Explore) |
1 task
|
@agusruidiazgd some questions regarding this new functionality:
|
|
Checked with a role without
Screen.Recording.2024-12-10.at.12.27.19.mov |
|
@angorayc lots of thanks for your replay, is there any reason why the behaviour of the cards is different? From a user perspective I would expect for both to behave the same. Can you please provide some insights regarding the 2 other queries? Thanks!! :) |
|
@MadameSheema We usually use
So it's expected in the test scenario above that the user
Summary of privilege and license required:
|
The card complete status are stored in the browser local storage per space, e.g.: |
|
If user don't have the |
@angorayc view alerts and enable rules requires some priviliges at the elasticsearch level, are we going to check those? |
|
@agusruidiazgd @MadameSheema , For View alerts and Enable rules: |
agusruidiazgd
added a commit
that referenced
this issue
Jan 16, 2025
#199311) ## Summary This PR addresses [#198761](#198761), which enhance onboarding card layouts for better usability and engagement. The following updates have been implemented: - New Card Layouts: Applied to `alerts`, `dashboards`, and `rules` cards. Previously, each card displayed a description on the left and a static asset on the right. The updated design introduces a list of selectable items on the left side. Selecting an item updates the right-side content to display a corresponding video. - New Components: `OnboardingCardContentAssetPanel`: A reusable component designed to render children and display an asset, supporting both image and video types. `CardSelectorList`: A flexible component for rendering a list of selectable items provided to it, enabling the new card interaction behavior. - Persistent Selection: The current selection for each card is now saved in localStorage using keys specific to each card type (alerts, dashboards, and rules). This ensures the last selection is remembered, and when the card is expanded (on initial render or later), the component will automatically scroll to and highlight the saved selection. https://github.com/user-attachments/assets/ffc02c3c-625f-46ec-aff0-1bb1e9b73bb3 ### Checklist Delete any items that are not applicable to this PR. - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Sergi Massaneda <sergi.massaneda@gmail.com>
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this issue
Jan 16, 2025
elastic#199311) ## Summary This PR addresses [elastic#198761](elastic#198761), which enhance onboarding card layouts for better usability and engagement. The following updates have been implemented: - New Card Layouts: Applied to `alerts`, `dashboards`, and `rules` cards. Previously, each card displayed a description on the left and a static asset on the right. The updated design introduces a list of selectable items on the left side. Selecting an item updates the right-side content to display a corresponding video. - New Components: `OnboardingCardContentAssetPanel`: A reusable component designed to render children and display an asset, supporting both image and video types. `CardSelectorList`: A flexible component for rendering a list of selectable items provided to it, enabling the new card interaction behavior. - Persistent Selection: The current selection for each card is now saved in localStorage using keys specific to each card type (alerts, dashboards, and rules). This ensures the last selection is remembered, and when the card is expanded (on initial render or later), the component will automatically scroll to and highlight the saved selection. https://github.com/user-attachments/assets/ffc02c3c-625f-46ec-aff0-1bb1e9b73bb3 ### Checklist Delete any items that are not applicable to this PR. - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Sergi Massaneda <sergi.massaneda@gmail.com> (cherry picked from commit 0926703)
kibanamachine
added a commit
that referenced
this issue
Jan 16, 2025
…g cards (#199311) (#206910) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution] Adding selector list component to onboarding cards (#199311)](#199311) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Agustina Nahir Ruidiaz","email":"61565784+agusruidiazgd@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-01-16T09:19:52Z","message":"[Security Solution] Adding selector list component to onboarding cards (#199311)\n\n## Summary\r\n\r\nThis PR addresses\r\n[#198761](#198761), which\r\nenhance onboarding card layouts for better usability and engagement.\r\n\r\nThe following updates have been implemented:\r\n\r\n- New Card Layouts:\r\n\r\nApplied to `alerts`, `dashboards`, and `rules` cards.\r\nPreviously, each card displayed a description on the left and a static\r\nasset on the right.\r\nThe updated design introduces a list of selectable items on the left\r\nside. Selecting an item updates the right-side content to display a\r\ncorresponding video.\r\n\r\n- New Components:\r\n\r\n`OnboardingCardContentAssetPanel`: A reusable component designed to\r\nrender children and display an asset, supporting both image and video\r\ntypes.\r\n`CardSelectorList`: A flexible component for rendering a list of\r\nselectable items provided to it, enabling the new card interaction\r\nbehavior.\r\n\r\n- Persistent Selection:\r\n\r\nThe current selection for each card is now saved in localStorage using\r\nkeys specific to each card type (alerts, dashboards, and rules).\r\nThis ensures the last selection is remembered, and when the card is\r\nexpanded (on initial render or later), the component will automatically\r\nscroll to and highlight the saved selection.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/ffc02c3c-625f-46ec-aff0-1bb1e9b73bb3\r\n\r\n### Checklist\r\n\r\nDelete any items that are not applicable to this PR.\r\n\r\n- [ ] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\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: Sergi Massaneda <sergi.massaneda@gmail.com>","sha":"0926703db3088d96e40b545ebb26535644530ebe","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat Hunting:Explore","ci:cloud-deploy","ci:cloud-redeploy","backport:version","v8.18.0"],"title":"[Security Solution] Adding selector list component to onboarding cards","number":199311,"url":"https://github.com/elastic/kibana/pull/199311","mergeCommit":{"message":"[Security Solution] Adding selector list component to onboarding cards (#199311)\n\n## Summary\r\n\r\nThis PR addresses\r\n[#198761](#198761), which\r\nenhance onboarding card layouts for better usability and engagement.\r\n\r\nThe following updates have been implemented:\r\n\r\n- New Card Layouts:\r\n\r\nApplied to `alerts`, `dashboards`, and `rules` cards.\r\nPreviously, each card displayed a description on the left and a static\r\nasset on the right.\r\nThe updated design introduces a list of selectable items on the left\r\nside. Selecting an item updates the right-side content to display a\r\ncorresponding video.\r\n\r\n- New Components:\r\n\r\n`OnboardingCardContentAssetPanel`: A reusable component designed to\r\nrender children and display an asset, supporting both image and video\r\ntypes.\r\n`CardSelectorList`: A flexible component for rendering a list of\r\nselectable items provided to it, enabling the new card interaction\r\nbehavior.\r\n\r\n- Persistent Selection:\r\n\r\nThe current selection for each card is now saved in localStorage using\r\nkeys specific to each card type (alerts, dashboards, and rules).\r\nThis ensures the last selection is remembered, and when the card is\r\nexpanded (on initial render or later), the component will automatically\r\nscroll to and highlight the saved selection.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/ffc02c3c-625f-46ec-aff0-1bb1e9b73bb3\r\n\r\n### Checklist\r\n\r\nDelete any items that are not applicable to this PR.\r\n\r\n- [ ] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\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: Sergi Massaneda <sergi.massaneda@gmail.com>","sha":"0926703db3088d96e40b545ebb26535644530ebe"}},"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/199311","number":199311,"mergeCommit":{"message":"[Security Solution] Adding selector list component to onboarding cards (#199311)\n\n## Summary\r\n\r\nThis PR addresses\r\n[#198761](#198761), which\r\nenhance onboarding card layouts for better usability and engagement.\r\n\r\nThe following updates have been implemented:\r\n\r\n- New Card Layouts:\r\n\r\nApplied to `alerts`, `dashboards`, and `rules` cards.\r\nPreviously, each card displayed a description on the left and a static\r\nasset on the right.\r\nThe updated design introduces a list of selectable items on the left\r\nside. Selecting an item updates the right-side content to display a\r\ncorresponding video.\r\n\r\n- New Components:\r\n\r\n`OnboardingCardContentAssetPanel`: A reusable component designed to\r\nrender children and display an asset, supporting both image and video\r\ntypes.\r\n`CardSelectorList`: A flexible component for rendering a list of\r\nselectable items provided to it, enabling the new card interaction\r\nbehavior.\r\n\r\n- Persistent Selection:\r\n\r\nThe current selection for each card is now saved in localStorage using\r\nkeys specific to each card type (alerts, dashboards, and rules).\r\nThis ensures the last selection is remembered, and when the card is\r\nexpanded (on initial render or later), the component will automatically\r\nscroll to and highlight the saved selection.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/ffc02c3c-625f-46ec-aff0-1bb1e9b73bb3\r\n\r\n### Checklist\r\n\r\nDelete any items that are not applicable to this PR.\r\n\r\n- [ ] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\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: Sergi Massaneda <sergi.massaneda@gmail.com>","sha":"0926703db3088d96e40b545ebb26535644530ebe"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Agustina Nahir Ruidiaz <61565784+agusruidiazgd@users.noreply.github.com>
viduni94
pushed a commit
to viduni94/kibana
that referenced
this issue
Jan 23, 2025
elastic#199311) ## Summary This PR addresses [elastic#198761](elastic#198761), which enhance onboarding card layouts for better usability and engagement. The following updates have been implemented: - New Card Layouts: Applied to `alerts`, `dashboards`, and `rules` cards. Previously, each card displayed a description on the left and a static asset on the right. The updated design introduces a list of selectable items on the left side. Selecting an item updates the right-side content to display a corresponding video. - New Components: `OnboardingCardContentAssetPanel`: A reusable component designed to render children and display an asset, supporting both image and video types. `CardSelectorList`: A flexible component for rendering a list of selectable items provided to it, enabling the new card interaction behavior. - Persistent Selection: The current selection for each card is now saved in localStorage using keys specific to each card type (alerts, dashboards, and rules). This ensures the last selection is remembered, and when the card is expanded (on initial render or later), the component will automatically scroll to and highlight the saved selection. https://github.com/user-attachments/assets/ffc02c3c-625f-46ec-aff0-1bb1e9b73bb3 ### Checklist Delete any items that are not applicable to this PR. - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Sergi Massaneda <sergi.massaneda@gmail.com>
|
Update: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the feature:
Figma File
Update the content of the following cards to enhance interactivity.
Currently, each card displays a description on the left and an asset on the right. The updated design will feature a list of selectable items on the left side. When an item is selected, a corresponding video will be displayed on the right side, aligning with the chosen item. This change aims to create a more dynamic and tailored user experience.
Example:
Current design:
Proposed design:
Behavior:
The selection should remain when user refresh.
Example: if the url has the hash
#rulesthe expected behavior is to automatically scroll torulesCardand show the selected item.The text was updated successfully, but these errors were encountered: