[KibanaPageLayout] Solution Nav specific styles & props #100089

cchaos · 2021-05-13T21:15:21Z

Added `solutionNav` prop to populate EuiSideNav and create an embellished navigation title

See Docs Tutorial section for details.

Including mobile version

Checklist

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)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
- Ensures all page content is contained by landmarks is caused by the <h2> not being contained in the <nav> element. But they are hooked up via aria-labelledby. So for now, it's ok. If we want to fix this properly, we'll have to change the way EuiSideNav renders.
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

# Conflicts: # src/core/public/rendering/_base.scss

myasonik

A few small things but otherwise LGTM

dev_docs/tutorials/kibana_page_template.mdx

src/plugins/kibana_react/public/page_template/page_template.tsx

src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss

Co-authored-by: Michail Yasonik <michail@yasonik.com>

cchaos · 2021-05-18T16:09:30Z

@elasticmachine merge upstream

…l CSS

cchaos · 2021-05-19T17:43:56Z

@elastic/kibana-operations , I used the --update-limits command to increase the limit for kibanaReact because of the additional CSS added in this PR.

jbudz

limits.yml LGTM

spalger · 2021-05-19T18:51:17Z

@elasticmachine merge upstream

Confirmed by diffing the bundles that the only change in core.entry.js is the media query CSS.

cchaos · 2021-05-25T13:37:39Z

@elasticmachine merge upstream

mattkime · 2021-05-25T15:13:22Z

@cchaos Is there anything I should do to test this? As best I can tell, the implementation isn't consumed anywhere.

cchaos · 2021-05-25T15:42:13Z

@mattkime Correct, it isn't consumed anywhere, yet. If you want to test it, you can change the render of table_list_view.tsx to this: https://gist.github.com/cchaos/e0a9b461c4ba58847c03c13fd8a85d47

mattkime

changes lgtm, work well

kibanamachine · 2021-05-25T17:23:58Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`kibanaReact`	338	367	+29

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
`kibanaReact`	219	218	-1

Async chunks

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

id	before	after	diff
`kibanaReact`	312.0KB	312.0KB	+4.0B

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
`kibanaReact`	3	4	+1

Page load bundle

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

id	before	after	diff
`core`	400.8KB	408.0KB	+7.2KB
`kibanaReact`	119.9KB	133.7KB	+13.8KB
total			+21.0KB

Unknown metric groups

References to deprecated APIs

id	before	after	diff
`canvas`	29	25	-4
`crossClusterReplication`	8	6	-2
`fleet`	22	20	-2
`globalSearch`	4	2	-2
`indexManagement`	12	7	-5
`infra`	261	149	-112
`lens`	67	45	-22
`licensing`	18	15	-3
`lists`	239	236	-3
`maps`	286	208	-78
`ml`	121	115	-6
`monitoring`	109	56	-53
`securitySolution`	386	342	-44
`stackAlerts`	101	95	-6
total			-342

History

💚 Build #127153 succeeded 3be61ec
💚 Build #127119 succeeded 3be61ec
💚 Build #126617 succeeded 33547c8
💔 Build #126589 failed 21bc8d7
💔 Build #126401 failed ab81161

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

* Fixing sticky nav * Adding some side bar styles * Added a built-in solution nav title with avatar icon * Adding tutorial docs * Added KibanaPageTemplateSolutionNavAvatar * Added KibanaPageTemplateSolutionNav * Increased limit to `core` / `kibanaReact` plugin because of additional CSS # Conflicts: # packages/kbn-optimizer/limits.yml

…00576) * Fixing sticky nav * Adding some side bar styles * Added a built-in solution nav title with avatar icon * Adding tutorial docs * Added KibanaPageTemplateSolutionNavAvatar * Added KibanaPageTemplateSolutionNav * Increased limit to `core` / `kibanaReact` plugin because of additional CSS # Conflicts: # packages/kbn-optimizer/limits.yml

…deprecation-ilm-policy * 'master' of github.com:elastic/kibana: (101 commits) [ftr] migrate "docTable" service to FtrService class (elastic#100595) [ftr] migrate "listingTable" service to FtrService class (elastic#100606) Fixed comparing real value with formatted according to mode. (elastic#100456) [ftr] migrate "dataGrid" service to FtrService class (elastic#100593) [ftr] migrate "fieldEditor" to FtrService class (elastic#100597) [ftr] migrate "filterBar" service to FtrService class (elastic#100601) [triggersActionsUi] Reduce page load bundle to under 100kB (elastic#97770) [build] Clean jest configs (elastic#100594) refact(NA): remove extra pkg_npm target and add specific target folders for @kbn/analytics on Bazel (elastic#100569) Update dependency @elastic/charts to v29.2.0 (elastic#100587) [Maps] convert LayerPanel to typescript (elastic#100481) [Upgrade Assistant] Address copy feedback (elastic#99632) Open/Closed filter for observability alerts page (elastic#99217) One liner to expose the EQL query for debugging for users (elastic#100565) [KibanaPageLayout] Solution Nav specific styles & props (elastic#100089) [ftr] implement FtrService classes and migrate common services (elastic#99546) [XY] [Lens] Adds opacity slider (elastic#100453) [Reporting] ILM policy for managing reporting indices (elastic#100130) [Reporting] ILM policy for managing reporting indices (elastic#100130) [DOCS] Remove redundant maps attribute (elastic#100426) ... # Conflicts: # x-pack/plugins/reporting/server/lib/store/report_ilm_policy.ts # x-pack/plugins/reporting/server/lib/store/store.test.ts # x-pack/plugins/reporting/server/lib/store/store.ts

* Fixing sticky nav * Adding some side bar styles * Added a built-in solution nav title with avatar icon * Adding tutorial docs * Added KibanaPageTemplateSolutionNavAvatar * Added KibanaPageTemplateSolutionNav * Increased limit to `core` / `kibanaReact` plugin because of additional CSS

cchaos added 5 commits May 13, 2021 17:01

Fixing sticky nav

f6c6ca4

# Conflicts: # src/core/public/rendering/_base.scss

A few fixes

a7e8b76

Adding some side bar styles

917b8f4

Added a built-in solution nav title with avatar icon

d4dee9d

Adding tutorial docs

6c9ed06

cchaos mentioned this pull request May 13, 2021

Page layouts/stage 2/stack management #100085

Closed

9 tasks

cchaos added 5 commits May 14, 2021 12:38

Added KibanaPageTemplateSolutionNavAvatar

4b8b4ee

Added KibanaPageTemplateSolutionNav

3e20bb8

exports

ec3a7d6

Updated page template with new solution nav components

72aea8e

Updated docs

9e4051b

cchaos requested a review from myasonik May 14, 2021 17:39

cchaos added release_note:skip Skip the PR/issue when compiling release notes v7.14.0 labels May 14, 2021

cchaos mentioned this pull request May 14, 2021

[META] 7.14 Solution Nav implementation #98359

Closed

22 tasks

cchaos and others added 2 commits May 14, 2021 15:26

Merge branch 'master' into pageLayouts/stage_1/solution_nav

6bb4777

doc fix

ad682e2

myasonik approved these changes May 14, 2021

View reviewed changes

Apply suggestions from code review

720b68d

Co-authored-by: Michail Yasonik <michail@yasonik.com>

cchaos marked this pull request as ready for review May 14, 2021 20:01

cchaos requested review from a team as code owners May 14, 2021 20:01

ryankeairns approved these changes May 18, 2021

View reviewed changes

kibanamachine and others added 2 commits May 18, 2021 12:09

Merge branch 'master' into pageLayouts/stage_1/solution_nav

ab81161

Increased limit to core / kibanaReact plugin because of additiona…

21bc8d7

…l CSS

cchaos requested a review from a team as a code owner May 19, 2021 17:42

jbudz approved these changes May 19, 2021

View reviewed changes

kibanamachine added 2 commits May 19, 2021 14:51

Merge branch 'master' into pageLayouts/stage_1/solution_nav

1ec76a0

Merge branch 'master' into pageLayouts/stage_1/solution_nav

33547c8

Merge branch 'master' into pageLayouts/stage_1/solution_nav

3be61ec

mattkime approved these changes May 25, 2021

View reviewed changes

cchaos merged commit bca1c14 into elastic:master May 25, 2021

cchaos mentioned this pull request May 25, 2021

[7.x] [KibanaPageLayout] Solution Nav specific styles & props (#100089) #100576

Merged

cchaos deleted the pageLayouts/stage_1/solution_nav branch May 25, 2021 17:39

weltenwort mentioned this pull request May 25, 2021

[Logs UI] Add shared observability page template and navigation #99380

Merged

24 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[KibanaPageLayout] Solution Nav specific styles & props #100089

[KibanaPageLayout] Solution Nav specific styles & props #100089

cchaos commented May 13, 2021 •

edited

Loading

myasonik left a comment

cchaos commented May 18, 2021

cchaos commented May 19, 2021

jbudz left a comment

spalger commented May 19, 2021 •

edited

Loading

cchaos commented May 25, 2021

mattkime commented May 25, 2021

cchaos commented May 25, 2021

mattkime left a comment

kibanamachine commented May 25, 2021

References to deprecated APIs

[KibanaPageLayout] Solution Nav specific styles & props #100089

[KibanaPageLayout] Solution Nav specific styles & props #100089

Conversation

cchaos commented May 13, 2021 • edited Loading

Added solutionNav prop to populate EuiSideNav and create an embellished navigation title

Including mobile version

Checklist

myasonik left a comment

Choose a reason for hiding this comment

cchaos commented May 18, 2021

cchaos commented May 19, 2021

jbudz left a comment

Choose a reason for hiding this comment

spalger commented May 19, 2021 • edited Loading

cchaos commented May 25, 2021

mattkime commented May 25, 2021

cchaos commented May 25, 2021

mattkime left a comment

Choose a reason for hiding this comment

kibanamachine commented May 25, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Public APIs missing exports

Page load bundle

References to deprecated APIs

History

cchaos commented May 13, 2021 •

edited

Loading

Added `solutionNav` prop to populate EuiSideNav and create an embellished navigation title

spalger commented May 19, 2021 •

edited

Loading