Sidebar feedback round 2

[clarafu]

The new sidebar looks great!!

Feedback 1: It might help to use a different colour (maybe darker) font for the team names within the sidebar so that at a quick glance it's easy to differentiate between the teams and pipelines?

Feedback 2: j/k keybindings for switching between pipelines would be diggity dope.

Feedback 3: Drag to reorder would be nice but maybe that should be a separate issue?

Thx!!

@vito and @clarafu

[jamieklassen]

Love these ideas. Mildly concerned about overloading j/k on the build page, unless there's a hotkey to focus/expand the sidebar too...

[StevenArmstrong]

Having deployed 5.2 yesterday the two main features that would really enhance useability would be a search filter at the top of the sidebar like the dashboard view that could generate a list of matching pipelines based on regex. Also nesting pipeline groups as a collapsable links under a pipeline. So the drill through is team -> pipeline -> pipeline groups would also be awesome.

[clarafu]

@StevenArmstrong Those are great ideas!

@pivotal-jamie-klassen Oh I totally didn't know j/k was used in the build page already, you're right it would only make sense if there was a hotkey for opening the sidebar.

[jamieklassen]

@vito I don't recall where we settled for the scope of this. Which of the following do we expect to achieve during the course of this issue?

1. [ ] Color of team vs pipeline text in sidebar
2. [ ] keyboard shortcuts
3. [ ] drag to reorder
4. [ ] drill into groups
5. [ ] filter input

[Lindsayauchin]

UI Feedback:

1. Active State team name:

   • [x] no opacity on any element

2. Active State pipeline:

• [x] background of the container should be: HEX 272727
• [x] outline of the container should be:
• [x] no opacity on any element

2. Hover:

   • [x] opacity of the container should be 40%
   • [x] pipeline name, team name

3. Inactive pipeline name

   • [x] reduce the opacity of the pipeline names to 30%

4. Inactive team name

   • [x] keep team names at 60% opacity

5. Active toggle on team name

   • [x] chevron at 70% opacity when the team expanded, 100% when there is a pipeline selected in that list

Additional:

• [x] only display tooltip on long names that are truncated

• [x] The border at the top of the panel is creating a tiny misalignment in contrast to the Lower nav (L2). A border should be added to the top nav container (L1) bottom to even this out.

Current:

Expected:

[jomsie]

@Lindsayauchin Hi! You have a task outline of the container should be: but didn't put in a colour. I looked at the screenshot and it looks like it should be #979797. Let me know if that's not right!

[jamieklassen]

For

only display tooltip on long names that are truncated

here's what I'm thinking:

1. Add id attributes to each of the team names and pipeline names in the sidebar. This will involve one of two strategies:
   • create an injective function DomID -> String that generates valid HTML id strings (see below). This could in principle be reused for any element that has event listeners, including clicks and inputs, etc.
   • create two injective functions, PipelineIdentifier -> String for the sidebar pipelines and and String -> String for the teams, that both generate valid HTML id strings. Narrower scope, but also less reusable.
2. Add a new Effect that calls getViewportOf with the above IDs, and the corresponding Callback just contains the relevant Result Viewport of the element in question.
3. Any time the list of pipelines might change (which is probably just whenever Application.handleCallback (PipelinesFetched _) happens), run the above effect for each sidebar team and pipeline.
4. Referring to https://github.com/concourse/concourse/blob/master/web/public/index.html#L164, handle the abovementioned Result View callback as follows: ensure that the title attribute only gets set on those sidebar teams and pipelines for which offsetWidth < scrollWidth.

potential concern

When the pipelines refresh, the view will re-render, but at maybe the same time, the side effects that ask the browser for the viewports for each of the sidebar entities will run. I'm not sure exactly how the Elm runtime will sequence rendering the view and running the commands, so if there is a race condition here let's figure out a decent way to exercise it, or carefully study the Elm source code to be confident.

improvements

1. Bring existing dashboard functionality in line with the above changes
   • Refactor these to use the Effect described above instead of a port.
   • Convert the dashboard tooltips to use inline styles; cover them with tests.
2. Extract some kind of reusable tooltip functionality from the above, and use it instead of the title attribute on the sidebar teams and pipelines.

notes

HTML ID strings:

must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

https://www.w3.org/TR/html4/types.html#type-id

[jomsie]

@pivotal-jamie-klassen just a quick question, looks like html5 id spec stipulates that "The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters."

https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

we're good with good ol' html5, right?

[jomsie]

With our current implementation, you can click/hover on the team icon and some action happens, but hovering/clicking the pipeline icon does nothing. (Mostly a note for myself to follow up with @Lindsayauchin)

[jomsie]

As it stands, the sidebar overflow team/pipeline names use the title attribute. I'm starting to think there should be a separate issue for:

1. switching the data-tooltip styles to be inline. (currently they are in web/assets/css/dashboard/less)
2. switching the sidebar title title to data-tooltip.

[jomsie]

@pivotal-jamie-klassen some of your fears (or potential concerns) might be true with the current implementation... with lots of big ol' pipeline names and hovering across many of them REALLY quick, we get this:

the text updated properly, but the hover isn't on the proper name.

this comment is partially just letting you know, and partially making sure i don't forget about it!

[jomsie]

Just talked to @Lindsayauchin and there are a couple more changes to make

• [x] Add some space to the bottom of the sidebar (10px for now)
• [x] Fix the z-index of the higher sidebar items tooltips with respect to the fixed header on job pages

Additional (maybe break into a new issue) Scrollbar:

• [ ] Investigate scrollbar colours (transparent background with dark grey/black scroll progress)
• [ ] Get it to 'auto-hide'