[KibanaPageTemplate] Adds collapsibility to `solutionNav` #103192

cchaos · 2021-06-23T23:17:05Z

Adds the ability to collapse the sidenav. This should work in all solutions. It also adds breakpoints that turn it into a flyout at lower screen widths.

Screen.Recording.2021-06-23.at.07.16.09.PM.mp4

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
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)
(https://github.com/elastic/kibana/blob/c29adfef29e921cc447d2a5ed06ac2047ceab552/src/dev/build/tasks/os_packages/docker_generator/resources/bin/kibana-docker)
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/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx

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

- Moved location of nav in header.tsx to wrap the button to fix the toggle behavior - No more locking/docking (only commented out the ability, JIC) - Skinnier overall flyout - Smaller solution icons - Hiding the whole “Recently viewed” section if empty - No overlay mask - Added stub in for an “Add Data” button

…psible_nav

snide · 2021-06-28T13:13:21Z

@myasonik I cleaned up some i18n I saw as well as updated the snapshots / merged master. I'll be in meetings most of today, if anything else pops up on the tests can you take a look today?

mdefazio · 2021-06-28T16:01:03Z

I'm wondering if we can align the menu button more with the other elements? When collapsed, it would mean increasing the width of the empty space by a bit. I think they are close to being aligned which makes it look more like a bug.

I also felt the dark background behind the button when it was collapsed was heavy. While I understand the rationale, would simply using the empty style button work well enough and not be as much a distraction?

Thirdly, did we try using the solution avatar when collapsed?

I know I'm late to the game here, so my apologies if these have already been discussed

Open Original	Open Updated
.

Open Original	Open Updated

snide · 2021-06-28T16:20:49Z

@mdefazio I'll give it a shot on a couple of those. For the dark background, we decided to go "heavy" and obvious because we were worried about it not being obvious what it was if you came to it in the collapsed state. Similar reasoning for not using the logo, which might be taken as a signifier for the app rather than a menu element.

…psible_nav

kibanamachine · 2021-06-29T19:29:18Z

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.

kibanamachine · 2021-07-01T19:28:07Z

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.

kibanamachine · 2021-07-02T19:38:07Z

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.

kibanamachine · 2021-07-05T19:48:06Z

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.

kibanamachine · 2021-07-06T19:58:06Z

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.

…3192) Adds the ability to collapse the sidenav. This should work in all solutions. It also adds breakpoints that turn it into a flyout at lower screen widths.

…104856) Adds the ability to collapse the sidenav. This should work in all solutions. It also adds breakpoints that turn it into a flyout at lower screen widths. Co-authored-by: Caroline Horn <[email protected]>

…104867) Adds the ability to collapse the sidenav. This should work in all solutions. It also adds breakpoints that turn it into a flyout at lower screen widths. Co-authored-by: Caroline Horn <[email protected]>

kibanamachine · 2021-07-08T16:58:06Z

Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync.

kibanamachine · 2021-07-09T17:08:07Z

Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync.

kibanamachine · 2021-07-12T17:09:54Z

Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync.

kibanamachine · 2021-07-13T17:11:47Z

Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync.

cchaos · 2021-07-13T18:00:17Z

Forcing kibanamachine to stop checking for backport with the backport:skip label. They have successfully been merged.

Contributes to: elastic#194817 Why I assigned them: Assigned advanced_settings due to elastic#175255 Assigned dashboard_controls due to elastic#190797 Assigned dashboard_links due to elastic#174772 Assigned dashboard_panel_options due to elastic#178596 Assigned grok_debugger due to https://github.com/elastic/kibana/blob/main/x-pack/plugins/grokdebugger/kibana.jsonc#L4 Assigned helpers due to elastic#164341 (call site) Assigned home due to elastic#103192 Assigned index_lifecycle_management due to elastic#116207 Assigned ingest_node_pipelines due to elastic#113783 Assigned kibana_overview due to https://github.com/elastic/kibana/blob/f00ac7a8a21463e6bb4a2784c3a3884f36c62900/x-pack/plugins/grokdebugger/kibana.jsonc#L4 Assigned management due to elastic#165705 Assigned painless_lab due to https://github.com/elastic/kibana/blob/main/x-pack/plugins/painless_lab/kibana.jsonc#L4 Assigned search_profiler due to elastic#195343 Assigned uptime due to https://github.com/elastic/kibana/blob/main/x-pack/plugins/observability_solution/uptime/kibana.jsonc#L4 Assigned lens due to elastic#175893 Assigned ml_anomaly_detection due to elastic#162126 Assigned canvas due to elastic#164376 Assigned cc replication due to elastic#149069 Assigned enterpise search due to elastic#79359 Assigned graph to due elastic#190797 Assigned license_management due to https://github.com/elastic/kibana/blob/main/x-pack/plugins/license_management/kibana.jsonc#L4 Assigned maps due to elastic#155161 Assigned observability due to https://github.com/elastic/kibana/blob/main/x-pack/plugins/observability_solution/observability/kibana.jsonc#L4 Assigned remote clusters due to elastic#96989 Assigned reporting due to elastic#121435 Assigned rollup_jobs due to https://github.com/elastic/kibana/blob/d57bc9a5d7d64f86b550eff7997605a3090aee9a/x-pack/plugins/rollup/kibana.jsonc#L4 Assigned watcher due to elastic#119717

## Summary Assign files within `x-pack/test/accessibility/apps/group[1|2|3]` ### Why I assigned them: Assigned advanced_settings due to #175255 Assigned dashboard_controls due to #190797 Assigned dashboard_links due to #174772 Assigned dashboard_panel_options due to #178596 Assigned grok_debugger due to https://github.com/elastic/kibana/blob/main/x-pack/plugins/grokdebugger/kibana.jsonc#L4 Assigned helpers due to #164341 (call site) Assigned home due to #103192 Assigned index_lifecycle_management due to #116207 Assigned ingest_node_pipelines due to #113783 Assigned kibana_overview due to https://github.com/elastic/kibana/blob/f00ac7a8a21463e6bb4a2784c3a3884f36c62900/x-pack/plugins/grokdebugger/kibana.jsonc#L4 Assigned management due to #165705 Assigned painless_lab due to https://github.com/elastic/kibana/blob/main/x-pack/plugins/painless_lab/kibana.jsonc#L4 Assigned search_profiler due to #195343 Assigned uptime due to https://github.com/elastic/kibana/blob/main/x-pack/plugins/observability_solution/uptime/kibana.jsonc#L4 Assigned lens due to #175893 Assigned ml_anomaly_detection due to #162126 Assigned canvas due to #164376 Assigned cc replication due to #149069 Assigned enterpise search due to #79359 Assigned graph to due #190797 Assigned license_management due to https://github.com/elastic/kibana/blob/main/x-pack/plugins/license_management/kibana.jsonc#L4 Assigned maps due to #155161 Assigned observability due to https://github.com/elastic/kibana/blob/main/x-pack/plugins/observability_solution/observability/kibana.jsonc#L4 Assigned remote clusters due to #96989 Assigned reporting due to #121435 Assigned rollup_jobs due to https://github.com/elastic/kibana/blob/d57bc9a5d7d64f86b550eff7997605a3090aee9a/x-pack/plugins/rollup/kibana.jsonc#L4 Assigned watcher due to #119717 Contributes to: #194817 --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Rodney Norris <[email protected]>

cchaos added 7 commits June 23, 2021 17:14

Updating Solution nav to use new props of EuiSideNav

8afec43

# Conflicts: # src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx

Added a collapse button component

ed3041c

Remove hack for bottom bar types

ed7d476

Medium breakpoint puts side nav in a flyout

f0d2721

Collapsibility is working on larger screens

fbff416

Adding transitions and delays to button

0bd71bd

localStorage

373e368

cchaos requested a review from myasonik June 23, 2021 23:17

Fix position of button

92b5f45

snide reviewed Jun 24, 2021

View reviewed changes

src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss Outdated Show resolved Hide resolved

cchaos mentioned this pull request Jun 24, 2021

[META] 7.14 Solution Nav implementation #98359

Closed

22 tasks

Michail Yasonik and others added 3 commits June 24, 2021 17:58

solution nav a11y fixes

b9d8e1b

Merge remote-tracking branch 'upstream/master' into pageLayouts/colla…

a2ac1d2

…psible_nav

cleanup jest tests, change animation, fix some i18n

5b4ebcd

snide added release_note:skip Skip the PR/issue when compiling release notes v7.14.0 v8.0.0 labels Jun 28, 2021

snide marked this pull request as ready for review June 28, 2021 13:10

snide requested review from a team as code owners June 28, 2021 13:10

fix id for i18n

0e56c80

Michail Yasonik added 2 commits June 28, 2021 10:52

test fixes

c06a241

i18n fix

d4254ea

snide added 2 commits June 28, 2021 12:55

address feedback

fc1ccee

Merge remote-tracking branch 'upstream/master' into pageLayouts/colla…

f280a33

…psible_nav

snide mentioned this pull request Jun 30, 2021

Remove add data button from nav #103810

Merged

michaelolo24 mentioned this pull request Jun 30, 2021

[Security Solution] Collapse side navigation icon is not aligned properly under security navigation. #103837

Closed

kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Jul 1, 2021

spalger added the v7.15.0 label Jul 7, 2021

snide mentioned this pull request Jul 8, 2021

[7.14] [KibanaPageTemplate] Adds collapsibility to solutionNav (#103192) #104856

Merged

snide mentioned this pull request Jul 8, 2021

[7.x] [KibanaPageTemplate] Adds collapsibility to solutionNav (#103192) #104867

Merged

cchaos removed the backport missing Added to PRs automatically when the are determined to be missing a backport. label Jul 12, 2021

kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Jul 13, 2021

cchaos added backport:skip This commit does not require backporting and removed auto-backport Deprecated - use backport:version if exact versions are needed backport missing Added to PRs automatically when the are determined to be missing a backport. labels Jul 13, 2021

cchaos mentioned this pull request Jul 16, 2021

Unexpected header menu button interaction (via Kibana) elastic/eui#4963

Closed

wayneseymour mentioned this pull request Oct 11, 2024

[FTR][Ownership] Assign ally/grps 1,2 & 3 #195964

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[KibanaPageTemplate] Adds collapsibility to `solutionNav` #103192

[KibanaPageTemplate] Adds collapsibility to `solutionNav` #103192

cchaos commented Jun 23, 2021 •

edited by snide

Loading

snide commented Jun 28, 2021

mdefazio commented Jun 28, 2021

snide commented Jun 28, 2021

kibanamachine commented Jun 29, 2021

kibanamachine commented Jul 1, 2021

kibanamachine commented Jul 2, 2021

kibanamachine commented Jul 5, 2021

kibanamachine commented Jul 6, 2021

kibanamachine commented Jul 8, 2021

kibanamachine commented Jul 9, 2021

kibanamachine commented Jul 12, 2021

kibanamachine commented Jul 13, 2021

cchaos commented Jul 13, 2021 •

edited

Loading

[KibanaPageTemplate] Adds collapsibility to solutionNav #103192

[KibanaPageTemplate] Adds collapsibility to solutionNav #103192

Conversation

cchaos commented Jun 23, 2021 • edited by snide Loading

Checklist

snide commented Jun 28, 2021

mdefazio commented Jun 28, 2021

snide commented Jun 28, 2021

kibanamachine commented Jun 29, 2021

💚 Backport successful

kibanamachine commented Jul 1, 2021

kibanamachine commented Jul 2, 2021

kibanamachine commented Jul 5, 2021

kibanamachine commented Jul 6, 2021

kibanamachine commented Jul 8, 2021

kibanamachine commented Jul 9, 2021

kibanamachine commented Jul 12, 2021

kibanamachine commented Jul 13, 2021

cchaos commented Jul 13, 2021 • edited Loading

[KibanaPageTemplate] Adds collapsibility to `solutionNav` #103192

[KibanaPageTemplate] Adds collapsibility to `solutionNav` #103192

cchaos commented Jun 23, 2021 •

edited by snide

Loading

cchaos commented Jul 13, 2021 •

edited

Loading