Skip to content

Add environments_folder_app component

Andrei Zubov requested to merge azubov-431900-implement-folder-page into master

What does this MR do and why?

This MR implements #431900 (closed) and is a part of a bigger effort to refactor the Folder page of Environments area.

In the scope of this MR we add the data-fetching logic and use the existing EnvironmentItem component that is already present on Environments page to achieve a uniform user experience for these two pages.

Implementation of environment actions and pagination will come in the following MRs.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Loading state Loaded state
Screenshot_2023-11-28_at_18.24.09 Screenshot_2023-11-28_at_18.35.14

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Enable a feature toggle:
Feature.enable(:environments_folder_new_look)
  1. Navigate to a project that has environments with folders. If you don't have one, use the following gitlab-ci configuration:
deploy:dev/static-files-1:
  stage: deploy
  script: echo "done"
  environment: dev/static-files-1

deploy:dev/static-files-2:
  stage: deploy
  script: echo "done"
  environment: dev/static-files-2

deploy:stg/static-files-1:
  stage: deploy
  script: echo "done"
  environment: stg/static-files-1
  
deploy:stg/static-files-2:
  stage: deploy
  script: echo "done"
  environment: stg/static-files-2

deploy:prd/static-files-1:
  stage: deploy
  script: echo "done"
  environment: prd/static-files-1

deploy:prd/static-files-2:
  stage: deploy
  script: echo "done"
  environment: prd/static-files-2
  1. Navigate to Environments page
  2. Expand an environment folder and click Show All link Screenshot_2023-11-16_at_12.33.44
  3. Check that the new folder page contains environments located in that folder.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Andrei Zubov

Merge request reports