Improve Usability of Environment Folders

Problem

When environments are foldered on the environment list page, we see a preview number of how many environments are in that folder. When the folder is expanded, we see 3 environments with a very hidden Show all CTA. At first glance it looks like there are only 3 environments in the folder.

Solution

Move the Show all CTA to the bottom of the folder:

Implementation guide

1. Update environment_folder.vue:
   • add the new element
   • remove the existing 'show all' button
2. For the new element
   • use gl-border-gray-100 gl-border-t-solid gl-border-1 gl-py-5 gl-md-pl-7 gl-bg-gray-10 gl-text-center CSS classes
   • only render the element if there are more environments in the folder (environment.length < count)
   • use the GlSprintf component to render the text. s__('Environments|Showing %{environmentsLength} of %{environmentsCount} environments in this folder.'
   • use the GlLink component to render the link with text s__('Environments|See all environments.') and href set to folderPath.
3. Update the related spec:
   • check if the element is rendered when there are more environments to show
   • check the correct text is rendered
   • check the correct link is rendered
   • check if the element is not rendered when all environments are shown
4. Update translations - run tooling/bin/gettext_extractor locale/gitlab.pot command and commit the result.