[Security Solution] Side navigation package #152924

semd · 2023-03-08T15:40:17Z

Summary

Security navigation moved to its own package.
This migration is needed in order to reuse the same component for the navigation in the Serverless Security plugin PoC

previous location: x-pack/plugins/security_solution/public/common/components/navigation/solution_grouped_nav
new location: packages/kbn-security-solution-side-nav

Implementation changes:

Custom icons removed in favor of new EUI iconType.
Custom SideNavItem (for "Get Started" item) removed in favor of more configuration properties.
Generic nomenclature.
Header banner offset special case logic extracted from the navigation component, new panelTopOffset prop added to customize the top position of the floating panel.

Screenshot

Test

yarn storybook security_solution_side_nav

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
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

…fix'

…ibana into security_side_nav_package

…fix'

…ibana into security_side_nav_package

elasticmachine · 2023-03-09T13:02:04Z

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

clintandrewhall · 2023-03-09T14:06:01Z

I can review in depth, but outright I would recommend scoping this side nav component to security, for now: @kbn/security-solution-side-nav.

You can also place it in a scoped directory: packages/security_solution/side_nav.

The biggest reason is it is fairly specific to security, at least at the moment. It will prevent confusion with components like *PageLayout.

jbudz

src/dev/storybook/aliases.ts LGTM

angorayc

Thanks for moving this to a package 👍

…fix'

clintandrewhall

Just some comments on general structure... I can demonstrate with this with a pull, if you like.

I would just be sure to replace solutionSideNav with securitySolutionSideNav wherever necessary.

.i18nrc.json

clintandrewhall · 2023-03-09T16:24:50Z

packages/kbn-security-solution-side-nav/README.mdx

@@ -0,0 +1,50 @@
+## Security Solution Side Nav


nit: I would consider packages/security_solution/side_nav to make it easier to find/organize.

clintandrewhall · 2023-03-09T16:26:03Z

packages/kbn-security-solution-side-nav/.storybook/main.js

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


nit: I would consider creating a package for security storybooks - packages/security_solution/storybook, @kbn/security-solution-storybook.

It also makes it easier to group all of your storybook stories into a single storybook.

see: https://github.com/elastic/kibana/tree/main/packages/shared-ux/storybook/config

clintandrewhall · 2023-03-09T16:28:09Z

packages/kbn-security-solution-side-nav/src/beta_badge.tsx

+import { css } from '@emotion/react';
+import { EuiBetaBadge, useEuiTheme } from '@elastic/eui';
+
+export const BETA_LABEL = i18n.translate('solutionSideNav.betaBadge.label', {


nit:

Suggested change

export const BETA_LABEL = i18n.translate('solutionSideNav.betaBadge.label', {

export const BETA_LABEL = i18n.translate('securitySolutionSideNav.betaBadge.label', {

Co-authored-by: Clint Andrew Hall <[email protected]>

…ibana into security_side_nav_package

kibana-ci · 2023-03-10T14:08:25Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`securitySolution`	3752	3751	-1

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
`@kbn/security-solution-side-nav`	-	30	+30

Async chunks

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

id	before	after	diff
`securitySolution`	15.7MB	15.7MB	-2.7KB

Unknown metric groups

API count

id	before	after	diff
`@kbn/security-solution-side-nav`	-	30	+30
`@kbn/security-solution-storybook-config`	-	2	+2
total			+32

async chunk count

id	before	after	diff
`securitySolution`	42	43	+1

ESLint disabled in files

id	before	after	diff
`@kbn/security-solution-side-nav`	-	1	+1
`@kbn/security-solution-storybook-config`	-	1	+1
total			+2

ESLint disabled line counts

id	before	after	diff
`@kbn/security-solution-side-nav`	-	1	+1
`securitySolution`	428	429	+1
total			+2

Total ESLint disabled count

id	before	after	diff
`@kbn/security-solution-side-nav`	-	2	+2
`@kbn/security-solution-storybook-config`	-	1	+1
`securitySolution`	505	506	+1
total			+4

History

💔 Build #113265 failed 7e6fc9f
💔 Build #113091 failed 4864c1f
💔 Build #113061 failed e86b194
💚 Build #112995 succeeded 2491969
💔 Build #112962 failed 256b61b
💔 Build #112774 failed c43c881

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

cc @semd

## Summary Security navigation moved to its own package. This migration is needed in order to reuse the same component for the navigation in the Serverless Security plugin [PoC](elastic#152172) previous location: `x-pack/plugins/security_solution/public/common/components/navigation/solution_grouped_nav` new location: `packages/kbn-security-solution-side-nav` Implementation changes: - Custom icons removed in favor of new EUI `iconType`. - Custom `SideNavItem` (for "Get Started" item) removed in favor of more configuration properties. - Generic nomenclature. - Header banner offset special case logic extracted from the navigation component, new `panelTopOffset` prop added to customize the top position of the floating panel. ### Screenshot ![Solution_side_nav](https://user-images.githubusercontent.com/17747913/224022078-2c6b6d20-8f9d-4917-bd6e-800a596ed718.png) ## Test `yarn storybook security_solution_side_nav` ### Checklist Delete any items that are not applicable to this PR. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [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 - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Clint Andrew Hall <[email protected]>

semd added 2 commits March 8, 2023 16:37

kbn-solution-side-nav package created

1b39930

use solution-side-nav package in Security Solution

d20a4ab

semd added release_note:skip Skip the PR/issue when compiling release notes Team:Threat Hunting Security Solution Threat Hunting Team Team:Threat Hunting:Explore v8.8.0 labels Mar 8, 2023

semd self-assigned this Mar 8, 2023

kibanamachine and others added 8 commits March 8, 2023 15:46

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

85df61a

…fix'

[CI] Auto-commit changed files from 'node scripts/generate codeowners'

c43c881

test selectors updated

09833cd

Merge branch 'security_side_nav_package' of https://github.com/semd/k…

256b61b

…ibana into security_side_nav_package

storybook and documentation

ea226eb

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

9d57076

…fix'

storybook links

ea29ed0

Merge branch 'security_side_nav_package' of https://github.com/semd/k…

2491969

…ibana into security_side_nav_package

semd marked this pull request as ready for review March 9, 2023 13:02

semd requested review from a team as code owners March 9, 2023 13:02

clintandrewhall added the ci:build-storybooks label Mar 9, 2023

jbudz approved these changes Mar 9, 2023

View reviewed changes

angorayc approved these changes Mar 9, 2023

View reviewed changes

rename package

e86b194

semd requested a review from clintandrewhall March 9, 2023 15:37

kibanamachine added 2 commits March 9, 2023 15:39

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

8133669

…fix'

[CI] Auto-commit changed files from 'node scripts/generate codeowners'

712a591

clintandrewhall approved these changes Mar 9, 2023

View reviewed changes

Update .i18nrc.json

4864c1f

Co-authored-by: Clint Andrew Hall <[email protected]>

semd and others added 5 commits March 10, 2023 12:51

relocate package into security_solution

5abdd36

i18n

041d764

[CI] Auto-commit changed files from 'node scripts/generate codeowners'

7e6fc9f

fix jest rootdit

95956e7

Merge branch 'security_side_nav_package' of https://github.com/semd/k…

a883c23

…ibana into security_side_nav_package

semd merged commit 2fa877b into elastic:main Mar 10, 2023

kibanamachine added the backport:skip This commit does not require backporting label Mar 10, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution] Side navigation package #152924

[Security Solution] Side navigation package #152924

semd commented Mar 8, 2023 •

edited

Loading

elasticmachine commented Mar 9, 2023

clintandrewhall commented Mar 9, 2023

jbudz left a comment

angorayc left a comment

clintandrewhall left a comment

clintandrewhall Mar 9, 2023

clintandrewhall Mar 9, 2023

clintandrewhall Mar 9, 2023

kibana-ci commented Mar 10, 2023

API count

async chunk count

ESLint disabled in files

ESLint disabled line counts

Total ESLint disabled count

	export const BETA_LABEL = i18n.translate('solutionSideNav.betaBadge.label', {
	export const BETA_LABEL = i18n.translate('securitySolutionSideNav.betaBadge.label', {

[Security Solution] Side navigation package #152924

[Security Solution] Side navigation package #152924

Conversation

semd commented Mar 8, 2023 • edited Loading

Summary

Screenshot

Test

Checklist

elasticmachine commented Mar 9, 2023

clintandrewhall commented Mar 9, 2023

jbudz left a comment

Choose a reason for hiding this comment

angorayc left a comment

Choose a reason for hiding this comment

clintandrewhall left a comment

Choose a reason for hiding this comment

clintandrewhall Mar 9, 2023

Choose a reason for hiding this comment

clintandrewhall Mar 9, 2023

Choose a reason for hiding this comment

clintandrewhall Mar 9, 2023

Choose a reason for hiding this comment

kibana-ci commented Mar 10, 2023

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

API count

async chunk count

ESLint disabled in files

ESLint disabled line counts

Total ESLint disabled count

History

semd commented Mar 8, 2023 •

edited

Loading