[7.0] Adds new K7 side navigation #28940

ryankeairns · 2019-01-17T18:08:47Z

Summary

Adds new side navigation to K7 design (see gif below), thus replacing the current app drawer button in the current K7 header. The side nav is always visible, expands upon hover, and overlays plugin/page content as opposed to pushing it over.

One notable addition is the placement of 'Recent activity' atop the navigation making it more easily accessible. Future plans include potentially adding search, pinning, and favorites to this new navigation.

There has been discussion of grouping a few 'Admin' apps together into a flyout similar to 'Recent activity', but more discussion is needed on the technical side.

Lastly, the Uptime app is awaiting a new icon, so you'll see an empty slot in the collapsed navigation.

Demo

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
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
This was checked for keyboard-only and screenreader accessibility

For maintainers

This was checked for breaking API changes and was labeled appropriately
This includes a feature addition or change that requires a release note and was labeled appropriately

To-do items

elasticmachine · 2019-01-17T18:24:57Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

ryankeairns · 2019-01-17T18:56:57Z

retest

elasticmachine · 2019-01-17T18:58:44Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-01-17T19:15:11Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

src/ui/public/chrome/directives/header_global_nav/_header_global_nav.scss

cchaos

1. I'm still seeing the K logo section wider than the nav drawer:

2. Thoughts on allowing wrapping of recent items?

Also, was there any discussion over showing the app icon as well?

3. I found a bug where clicking on Graph keeps redirecting to the homepage

I'm guessing this has to do with the license of the user and it's somehow not getting hidden for the basic license.

4. Speaking of recent, can we go ahead and drop the recently viewed section on the homepage?

ryankeairns · 2019-01-17T20:42:49Z

@cchaos

1. I'm still seeing the K logo section wider than the nav drawer:

This will be fixed in the next build of EUI, these changes occurred after 6.4.0

2. Thoughts on allowing wrapping of recent items?

Also, was there any discussion over showing the app icon as well?

I need to talk about this with Spencer. Upon a quick look, I don't see any values in the recent activity data that we could use to determine the source app other than the url, but that would be messy. I suspect we'd need to somehow capture this info at the time the object is viewed and stored.

3. I found a bug where clicking on Graph keeps redirecting to the homepage

I'm guessing this has to do with the license of the user and it's somehow not getting hidden for the basic license.

That makes sense! There is a 'hidden' value in the link data, but I it's not being handled in terms of actually hiding the link. I'll dig into this.

4. Speaking of recent, can we go ahead and drop the recently viewed section on the homepage?

Good question. The new homepage does display the recent items (in the keypad/icon list), so maybe we should keep it here for now. @alexf thoughts on this?

cchaos · 2019-01-17T20:46:43Z

2. Thoughts on allowing wrapping of recent items?

These item names can be quite long, but we can make it a flag that only recent items can wrap text but the app links can't.

snide · 2019-01-17T20:54:56Z

Speaking of recent, can we go ahead and drop the recently viewed section on the homepage?

We can drop it. It's duplicative at this point. Anything we can do to unclutter that already crowded screen is a good idea in my book.

elasticmachine · 2019-01-17T21:34:23Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-01-18T03:31:53Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-01-18T17:24:28Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

alexfrancoeur · 2019-01-18T19:20:47Z

Looking good! Just took the PR for a spin, some feedback from my end.

Where'd we land with moving dev console, management, stack monitoring, etc. into an admin subgroup? I have a scroll on my macbook today, it'd be nice to avoid if possible. I believe (but am not certain) that code search will also be available in 7.0 but need to find out soon. @AlonaNadler @yaronp68 thoughts?

For recently viewed, I think we need to find a way to better showcase long names. In the homepage today, on hover you'll get the full string. What can we do to improve this experience?

Looks like we are no longer persisting the side bar if the window shrinks. At what size does this happen? And are we OK with this icon?

This hover affect seems just a little to slow to react in my opinion. I think this is going to be key to the experience so would really like others feedback to tweak it right.

Also, I think ordering will be important here. Did we end up removing the different "sections"?

Great work @ryankeairns!!

cjcenizal · 2019-01-18T20:24:06Z

Took a quick look. This is looking really great! I agree with Alex about the animation though. As a user, I just want to get from X to Y, and I'm going to need to do it often. In this case, I think less is more -- the less the animation gets in my face, the less distracting it is, and the more quickly I can use the navigation. A few suggestions come to mind for making the animation feel snappier:

Removing the fade-in from each item will make then feel more responsive.
I really think the transition-delay should be dropped.
You could try removing the animation altogether, so the drawer just snaps open and shut.
If you really want to keep a flourish, maybe try snapping it open with a slight bounce back?

ryankeairns · 2019-01-18T20:48:31Z

@alexfrancoeur

There is a change coming on the EUI side to make the long title under 'Recently viewed' wrap.
While the EUI component can handle the sections, we don't have currently have an available flag in the recent links data to differentiate those. There are ways to make that work, but I need to chat with an engineer about how best to approach that.
The drawer hides on 575px and down, which is narrower than a tablet (e.g. iPad) when in portrait mode. Additional breakpoints can be added, but we are comfortable with this for now given the current state of mobile-readiness for the apps themselves.
I'll play around with the current animations settings and alternatives shared by @cjcenizal

Thank you both for your feedback!

…ions

cjcenizal · 2019-01-30T02:56:42Z

Thanks @ryankeairns and @snide!

…-nav

spalger · 2019-01-31T04:35:39Z

I think the chrome should be hidden on the welcome screen

spalger · 2019-01-31T04:49:40Z

@ryankeairns @cchaos I added the icons to the recently accessed items by matching them to navLinks the same way we do for "last url" handling

spalger · 2019-01-31T04:51:53Z

Tooltips that are close to the nav go underneath it, but maybe not all of them? Maybe we can get them to overlay the chrome even though that might look a little Escher due of the drop shadows.

…s width

ryankeairns · 2019-01-31T05:21:53Z

@spalger Thanks for pointing those out and continuing to chip away at this PR. I’ll take a look at both, though they may need to be follow up PRs just given time (and that we’ll have a longer QA period).

I’ll poke around tomorrow and see what these might entail. One way or another, we’ll address them. Thanks!

elasticmachine · 2019-01-31T07:44:27Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

snide

Just giving the OK for this, with the understanding we have some follow up issues around:

locking the minimized state
dealing with the login chrome
trying to think up somthing for tooltips. my guess is the container pattern will help here but we'll be SOL for non EUI tooltips, which is ok.

cchaos

SHIP IT! 😄

elasticmachine · 2019-01-31T22:07:28Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

ryankeairns added release_note:enhancement WIP Work in progress v7.0.0 labels Jan 17, 2019

ryankeairns requested a review from a team as a code owner January 17, 2019 18:08

ryankeairns force-pushed the rk/25736-side-nav branch from 5ce895b to 0098ac9 Compare January 17, 2019 18:36

cchaos reviewed Jan 17, 2019

View reviewed changes

src/ui/public/chrome/directives/header_global_nav/_header_global_nav.scss Outdated Show resolved Hide resolved

ryankeairns requested a review from snide January 17, 2019 19:27

cchaos suggested changes Jan 17, 2019

View reviewed changes

ryankeairns removed the WIP Work in progress label Jan 17, 2019

ryankeairns changed the title ~~[WIP] [7.0] Adds new K7 side navigation~~ [7.0] Adds new K7 side navigation Jan 17, 2019

ryankeairns force-pushed the rk/25736-side-nav branch from 4c12549 to addc724 Compare January 18, 2019 03:16

This comment has been minimized.

Sign in to view

ryankeairns force-pushed the rk/25736-side-nav branch from 6cd65f1 to ad81e74 Compare January 18, 2019 23:27

This comment has been minimized.

Sign in to view

ryankeairns force-pushed the rk/25736-side-nav branch from ad81e74 to be202c0 Compare January 23, 2019 15:29

This comment has been minimized.

Sign in to view

ryankeairns force-pushed the rk/25736-side-nav branch from be202c0 to ecffa5e Compare January 23, 2019 15:45

spalger and others added 6 commits January 29, 2019 18:30

[ftr/discover] tweak size of discover tests and size-dependent assert…

95d0d39

…ions

[chrome] disable offsets in embed mode

97639d1

[ftr/discover] try sticking with original screen width

36c1aad

[ftr/discover] try to force screensize before checking axis labels

261b98d

[ftr/services/appMenu] ensure menu closed after clicking app

46c25f4

uptime app icon, mobile header size removed

bdd551c

ryankeairns force-pushed the rk/25736-side-nav branch from 4de5a5f to bdd551c Compare January 30, 2019 00:31

This comment has been minimized.

Sign in to view

spalger mentioned this pull request Jan 30, 2019

Remove k7design setting #29565

Merged

15 tasks

spalger mentioned this pull request Jan 30, 2019

test #29650

Closed

spalger added 2 commits January 30, 2019 19:41

Merge branch 'master' of github.com:elastic/kibana into rk/25736-side…

795b0fa

…-nav

[ftr/discover] make assertion resilient to minor changes in vis width

f882845

This comment has been minimized.

Sign in to view

spalger added 2 commits January 30, 2019 20:47

[chrome] add types for nav apis

5ef930d

[chrome/recentlyAccessed] display app icons when possible

c6268ee

[ftr/discover] make a little wider so scroll doesn't interfer with vi…

57dbb1c

…s width

This comment has been minimized.

Sign in to view

[ftr/services/globalNav] fix test subject

bbdee21

snide approved these changes Jan 31, 2019

View reviewed changes

cchaos approved these changes Jan 31, 2019

View reviewed changes

ryankeairns merged commit bbc68b0 into elastic:master Jan 31, 2019

This was referenced Jan 31, 2019

Hide chrome/nav on the welcome screen #29761

Closed

Refresh tooltip, on Discover, goes under K7 side nav #29767

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[7.0] Adds new K7 side navigation #28940

[7.0] Adds new K7 side navigation #28940

ryankeairns commented Jan 17, 2019 •

edited

Loading

elasticmachine commented Jan 17, 2019

ryankeairns commented Jan 17, 2019

elasticmachine commented Jan 17, 2019

elasticmachine commented Jan 17, 2019

cchaos left a comment

ryankeairns commented Jan 17, 2019 •

edited

Loading

1. I'm still seeing the K logo section wider than the nav drawer:

2. Thoughts on allowing wrapping of recent items?

3. I found a bug where clicking on Graph keeps redirecting to the homepage

4. Speaking of recent, can we go ahead and drop the recently viewed section on the homepage?

cchaos commented Jan 17, 2019

snide commented Jan 17, 2019

elasticmachine commented Jan 17, 2019

elasticmachine commented Jan 18, 2019

elasticmachine commented Jan 18, 2019

alexfrancoeur commented Jan 18, 2019

cjcenizal commented Jan 18, 2019 •

edited

Loading

ryankeairns commented Jan 18, 2019 •

edited

Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

cjcenizal commented Jan 30, 2019

spalger commented Jan 31, 2019

This comment has been minimized.

spalger commented Jan 31, 2019 •

edited

Loading

spalger commented Jan 31, 2019

ryankeairns commented Jan 31, 2019

This comment has been minimized.

elasticmachine commented Jan 31, 2019

snide left a comment

cchaos left a comment

elasticmachine commented Jan 31, 2019

[7.0] Adds new K7 side navigation #28940

[7.0] Adds new K7 side navigation #28940

Conversation

ryankeairns commented Jan 17, 2019 • edited Loading

Summary

Demo

Checklist

For maintainers

To-do items

elasticmachine commented Jan 17, 2019

💔 Build Failed

ryankeairns commented Jan 17, 2019

elasticmachine commented Jan 17, 2019

💔 Build Failed

elasticmachine commented Jan 17, 2019

💔 Build Failed

cchaos left a comment

Choose a reason for hiding this comment

1. I'm still seeing the K logo section wider than the nav drawer:

2. Thoughts on allowing wrapping of recent items?

3. I found a bug where clicking on Graph keeps redirecting to the homepage

4. Speaking of recent, can we go ahead and drop the recently viewed section on the homepage?

ryankeairns commented Jan 17, 2019 • edited Loading

1. I'm still seeing the K logo section wider than the nav drawer:

2. Thoughts on allowing wrapping of recent items?

3. I found a bug where clicking on Graph keeps redirecting to the homepage

4. Speaking of recent, can we go ahead and drop the recently viewed section on the homepage?

cchaos commented Jan 17, 2019

2. Thoughts on allowing wrapping of recent items?

snide commented Jan 17, 2019

elasticmachine commented Jan 17, 2019

💔 Build Failed

elasticmachine commented Jan 18, 2019

💔 Build Failed

elasticmachine commented Jan 18, 2019

💔 Build Failed

alexfrancoeur commented Jan 18, 2019

cjcenizal commented Jan 18, 2019 • edited Loading

ryankeairns commented Jan 18, 2019 • edited Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

cjcenizal commented Jan 30, 2019

spalger commented Jan 31, 2019

This comment has been minimized.

spalger commented Jan 31, 2019 • edited Loading

spalger commented Jan 31, 2019

ryankeairns commented Jan 31, 2019

This comment has been minimized.

elasticmachine commented Jan 31, 2019

💚 Build Succeeded

snide left a comment

Choose a reason for hiding this comment

cchaos left a comment

Choose a reason for hiding this comment

elasticmachine commented Jan 31, 2019

💚 Build Succeeded

ryankeairns commented Jan 17, 2019 •

edited

Loading

ryankeairns commented Jan 17, 2019 •

edited

Loading

cjcenizal commented Jan 18, 2019 •

edited

Loading

ryankeairns commented Jan 18, 2019 •

edited

Loading

spalger commented Jan 31, 2019 •

edited

Loading