APP Bar implementation.

[scures]

According to the design of #8418 related to the redesign of the side navigation, we would like to split the implementation into multiple parts since each part requires a bit of work.

Tasks

• Always visible, icons only & expandable
  Implement the always visible, icons only & expanded functionality. While collapsed, the menu will show just the icons, clicking on the burger menu should expand the menu.

  Important: there's a conversation around extracting the navigation into its component, the description of this step will be filled up once there's more information.

• Auto-generated icon-like box, cluster type icon & custom color.
  Implement the new, auto-generated icon-like box functionality for the short name & allowing custom (or from a map of colors) color tags.

AC:

• The app bar menu should be always visible & collapsed
• It should only show the icons and expand while clicking on the burger menu
• hide the section's text while collapsed, show while expanded (we'll remove those in the follow-up)
• the width of the elements should fit in a wrapper according to the design specs.
• position the filter, search, and See all > link which will take you to the Cluster Management
• Custom icons for cluster names should be shorted in a 3 letters format.

Resources

Specs: https://xd.adobe.com/view/04a2e3b8-4895-405d-a067-5f2c88e83738-51f1/specs/
Design Conversation: #8418

---

Screenshot (edited to display the correct ones)

[gaktive]

Product will get a presentation for this on Aug 4th so let's see what comes out of that before we start work here.

[richard-cox]

This might have been discussed in one of the calls, but did we have a way to support favouriting clusters? Basically any way to determine which clusters appear in the list when there are more than there's vertical height to show. In theory there could be 2k clusters where a user might wish to keep a few at the top

[scures]

@richard-cox The last conversation I can remember had a pin (and some other features such as last visited..) functionality, I cannot find that in the latest design which makes me think it might have been moved for some later implementation.
I'll look into Confluence and see if I can find a comment related to it, if not once Eden is back.

[scures]

Remove the EPIC label since we managed to get all the work in a single PR;

[richard-cox]

I've tagged this with release-note. We need to come up with a nice, short description of this change. This should include information on any setting that is now obsolete / superseded by the change.

[susesgartner]

I have been doing some testing for navigation sidebar in 2.8 and I noticed that there is a header for "Global Settings" and "Configuration" but there isn't a header for clusters. It may be a good idea to delineate downstream clusters in a similar way to the other 2 sections see the line in the below image. (the local cluster might also belong in that section)

[scures]

Hello, @susesgartner, thanks for the comment!
With the re-design, we removed the label for the cluster list but it's true there's one part that is missing, the search should be always visible even when fewer items are present (like in your case). I created an issue for follow-up #9930

With that change the separation it's more clear: