Improve the Environment List Page's Folder Experience

Problem

While tackling #505770 (closed) for Beautifying our UI - it came to our attention the folder experience within the environment list view is less than ideal. It's hard to understand why there are so few environments showing, and the CTA to view all environments is very hidden within the information.

Proposed first iteration without updating the folder experience:

Design Proposal Expanded Folder
Screenshot_2024-12-09_at_1.55.23_PM Screenshot_2024-12-09_at_3.21.27_PM

Solution

Remove folders from the environments list. Show only the folder name with a link to the folder page.

Design:
Screenshot_2025-01-15_at_18.07.39

Implementation guide

  1. Update environment_folder.vue to render a GlLink pointing to the folderPath. Use the folder icon. Add a bottom border and a padding gl-p-4 to ensure it looks consistent with other items on the environment list page.
  2. Update /environment_folder_spec.js to reflect the changes.
Edited by Anna Vovchenko