Environment folders in index page cause various UI misbehaviours

Summary

This relates to the environments view within 'operations' in a project.

Various bugs occur rendering the lists of environments when switching between 'stopped' and 'available' views. Noticed on Firefox.

six environments:

  • dev
  • uat/1/fe
  • uat/1/be
  • uat2
  • qa/1
  • qa/2

Sometimes 'uat' and 'qa' don't show qualifying the environment, eg '1/fe' shows when 'uat/1/fe' should show, '1' when 'qa/1' should show, other times, '1/fe', '2/fe' show when they should be showing within a folder with twisty.

Additionally, when the views are empty, because all environments are in the other view, they state 'You don't have any environments right now'.

This message would be more accurate if either

  • The text did not refer to whether or not environments were in use or
  • The text was different when environments were in use.
  • Nothing was shown. This would be consisten with the folders/foo viewed, where if there's no 'available' environment, the tab is just empty.
Screenshot - No environments available image
Screenshot - All environments stopped image

Steps to reproduce

Example project deploys projects as described above.

Operations/Environments screenshot with all environments expanded. image
  1. Accurate text in empty environment tabs
  • Select 'stopped' tab
  • Stopped tab incorrectly states there are no environments.
  • Similarly, if all environments are stopped, the 'Available' tabs states no environments exist.
Text in 'stopped' view is incorrect. I don't have any *stopped* environments right now. image
  1. Folder twisties vanish when switching between tabs
  • Switch back to 'available'.
Screenshot: folders missing, and nested environments not showing qualified Screenshot_from_2020-09-14_11-47-32
  • shift-reload recreates the folders.
  1. root folder names vanish when they should be there to qualify the environments

  • This shows how, even when there's not enough environments to render the folder/twisty, environments will still show as not-fully-qualified until shift-reload is performed.

  • Stop nested environments, eg: qa/2, uat/1/be.

  • Available view only shows folders when there's more than one environment to display, so UI correctly shows the remaining uat/1 environments fully qualified.

Screenshot: available. image
  • Navigate to stopped tabs.
Screenshot: stopped tab - no folders, and not fully qualified image
  • shift reload
Screenshot: stopped tab - now fully qualified image

Any tab switching drops the views back to missing elements.

  • select available tab, select stopped tab
Screenshots: first folder not showing for available environments image
Screenshots: first folder not showing for stopped environments image
  1. Problem with folders in stop view.
  • third environment added - uat/1/db. All environments are 'restarted' by the CI, none are stopped
  • not sure if this happens with two environments, I've only noticed it when a third environment is in the folder
Screenshot: third environment, all envs running image

  • stop all three uat/1 environments.

  • navigate to stop view, and per earlier steps, it doesn't render the folder and twisty, and environments don't list with the first folder name. Shift reload, and the folder twisty appears. But, it's empty.

Screenshot: closed image
Screenshot: open image

Example Project

https://gitlab.com/bprescott-support/testing/issue249118-envsdash

What is the current bug behavior?

as described in 'steps to reproduce'

At each point, shift-reload causes a view to render correctly.

The folder views for environments, such as the uat environments view in the test project does not qualify with 'uat' because that's implied by viewing the 'uat' environments.

Perhaps it's these two code paths getting mixed up?

What is the expected correct behavior?

environments show qualified or within folders.

Relevant logs and/or screenshots

Output of checks

  • Initially identified on 13.3.5 self managed.
  • Gitlab.com 13.4.0-pre f2982a31

Possible fixes

Edited by Jackie Porter