Improve UI of the environment selection

[melck]

Hi,

I fixed an old issue which concerns the selection of environments. When you have many environments, display and selection are quite difficult.

I changed the location to the right of the menu and used the Semantic UI select search dropdown to make it easier to search and select.

However I had to add some javascript to do the redirection and css to fix dropdown / loading icon.

The only inconvenience of this solution is that you can no longer right click > open in new tab on an environment.

I tested this fix in the latest chrome and firefox browsers.

Example of the issue :

Results after fix :

[codecov]

Codecov Report

Merging #705 (1ce089d) into master (2b7500b) will decrease coverage by 0.01%.
The diff coverage is 90.47%.

@@            Coverage Diff             @@
##           master     #705      +/-   ##
==========================================
- Coverage   85.45%   85.44%   -0.02%     
==========================================
  Files          19       19              
  Lines        1045     1058      +13     
==========================================
+ Hits          893      904      +11     
- Misses        152      154       +2     

Impacted Files	Coverage Δ
puppetboard/core.py	86.04% <87.50%> (-0.80%)	⬇️
puppetboard/default_settings.py	100.00% <100.00%> (ø)
puppetboard/docker_settings.py	100.00% <100.00%> (ø)
puppetboard/errors.py	100.00% <100.00%> (ø)
puppetboard/utils.py	92.85% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[gdubicki]

Hi @melck!

Thank you for your contribution! It does make choosing an env easier when you have a long list of them and it looks really nice.

However I don't think that it fixes #368 as that ticket is - in my opinion - about something a bit different. I think that #368 is a request to add a configuration setting that will allow to permanently limit the elements shown in the environment chooser, f.e. to show only your main environments like: ["production", "staging", "dev"].

I am not trying to downplay your work, of course, I just want to put the right info in the changelog when we merge and release this. :)

What do you think?

[gdubicki]

(The force push above was to rebase to include a fix from v4.0.2)

Can we make the new dropdown also expand up to the height of the screen, @melck? Because if you have a long list of envs and want to use the old way of just clicking on the right env, without using the search, it now requires you to do an extra scroll.

[melck]

Reading it again, I see what you mean for ticket #368. I will rebase to change my commit message. What do you prefer @gdubicki as commit message for the changelog ?

Conerning the old ways for the dropdown and in my case, we have so many envs that we need to scroll down to get env and sometime the scroll down make disapear the dropdown. So we modify url directly to see specific env.

I will try to surchage the CSS for this dropdown and do a mix of two world by changing max height of visible dropdown menu.

[gdubicki]

Thanks for a quick response!

In the meantime I did some hacking to try to implement what I consider the gist of #368: to make selected envs shown as the first on the list.

Please check out the result of this hacking, my draft PR to your branch here: melck#1. (It's a draft as it would require completing the migration from Semantic to Fomantic in the offline mode and some more testing to make sure that all views work and look fine after the migration.) Let me know what you think! :)

[melck]

@gdubicki I have made some changes from you proposals. I have refactor some code to have a better front visibility beetween using Formantic dropdown divider.

I force order of environments by first using current env, then envs from settings, then others envs. This allow to always see first envs and avoid to scroll for a simple usage.

Like you made me update to Fomantic. I updated all js dependencies and i dropped c3js for billboard (who seems maintained). I fix dailycharts to use billboard and remove some code to avoid multiple call of the script.

What do you think ?

[gdubicki]

Wow @melck, that's a fantastic contribution! Frankly I didn't expect you to update all those dependencies, I assumed that I would have to do it... It's great that I didn't have to. 😅

Let me run some tests and review the code.

[bastelfreak]

@melck can you please provide f108e1c as a dedicated PR and maybe document the update process (is there maybe a bot that we could use for that)

[melck]

@melck can you please provide f108e1c as a dedicated PR and maybe document the update process (is there maybe a bot that we could use for that)

Ok for that i was thinking of making a separate jinja template for css / js and creating a setup subcommand, what do you think ?

[gdubicki]

@melck: I think that the new env dropdown would look even nicer if it would not introduce yet another color to the UI.

Do you know how to change the background color of the selected dropdown to the same as active main menu tab? I have tried that and failed, my frontend skills are not that great...

[melck]

@melck: I think that the new env dropdown would look even nicer if it would not introduce yet another color to the UI.

Do you know how to change the background color of the selected dropdown to the same as active main menu tab? I have tried that and failed, my frontend skills are not that great...

Yeah last Fomantic UI added a color when menu gained state :hover. I have fixed this issue for inverted menu.

[melck]

@gdubicki I have another suggestion for the python part, do you know Black?

It is a Python code formatter that allows you to always have the same rendering. It's easier to read python code formatted by Black when you adopted it. I think it could be interresting at some time to apply it everywhere.

What do you think ?

[gdubicki]

I force order of environments by first using current env, then envs from settings, then others envs. This allow to always see first envs and avoid to scroll for a simple usage.

Actually I am not a fan of changing the dropdown content based on what is selected. I think it results in bad UX as the user doesn't expect that...

How about we always show:

1. All Envs
2. (divider)
3. First envs (as configured)
4. (divider)
5. Other envs (sorted)

?

Also I like the idea of adding icons, but let's make them meaningful. For example use a different one for all envs, first envs and the rest.

It could look like this:

What do you think?

[gdubicki]

@gdubicki I have another suggestion for the python part, do you know Black?

It is a Python code formatter that allows you to always have the same rendering. It's easier to read python code formatted by Black when you adopted it. I think it could be interresting at some time to apply it everywhere.

What do you think ?

I am totally for but definitely in a separate PR. 😅

[melck]

I force order of environments by first using current env, then envs from settings, then others envs. This allow to always see first envs and avoid to scroll for a simple usage.

Actually I am not a fan of changing the dropdown content based on what is selected. I think it results in bad UX as the user doesn't expect that...

How about we always show:

1. All Envs
2. (divider)
3. First envs (as configured)
4. (divider)
5. Other envs (sorted)

?

Also I like the idea of adding icons, but let's make them meaningful. For example use a different one for all envs, first envs and the rest.

What do you think?

Yes it was an hacking way to avoid autoscroll to environment selected and not seeing the fixed one, but i have another idea to try. I think dropdown can have fixed headers and the scroll will be only on "others envs", what do you think ?

[gdubicki]

Yes it was an hacking way to avoid autoscroll to environment selected and not seeing the fixed one, but i have another idea to try. I think dropdown can have fixed headers and the scroll will be only on "others envs", what do you think ?

Sounds good, feel free to check if it will work.

I have pushed my proposal to your branch to not lose my work on it if we agree that it’s a good approach, but don’t hesitate to revert or change it as you work on your solution.

[melck]

@gdubicki I have rebased code with master since you merge my other PR.

[gdubicki]

Thank you for all your work on this @melck and for your review, @bastelfreak! After adding basic docs I think it's ready to merge. :)