Skip to content

Fix loading icon for environment scope dropdown

Mireya Andres requested to merge ma/env-scope-loading-icon into master

What does this MR do and why?

Resolves #396990 (closed)

When the ci_limit_environment_scope feature flag is enabled, the environment scope dropdown in the CI variable form will fetch at most 30 environments via GraphQL. Searching an environment also uses this GraphQL query. When the feature flag is disabled, searching is done on the client side since the all environments are fetched on the initial load.

This MR fixes the bug where the CI variables table shows a loading icon whenever the user searches for an environment when the ci_limit_environment_scope feature flag is enabled. We don't need to show the loading icon on the table since we can just show it on the dropdown itself.

No changelog added since this behavior affects changes behind an existing feature flag.

Screenshots or screen recordings

Before After
before Screen_Recording_2023-06-27_at_12.42.02

Notice that the variables table (background, behind the modal) does not change or show a loading icon when searching for an environment.

When the feature flag is disabled, no loading icon issue exists (since we're not re-fetching during a search).

no_ff

How to set up and validate locally

  1. Enable the feature flag.
    Feature.enable(:ci_limit_environment_scope)
  2. If your project doesn't have environments, you can use this rake task to seed a project with environments.
    bundle exec rake "gitlab:seed:project_environments[project_path, seed_count]"
    
    # Example:
    bundle exec rake "gitlab:seed:project_environments[flightjs/Flight]"
  3. Go to your project's CI/CD Variable settings. Settings > CI/CD > Variables.
  4. Click on the Add Variable button.
  5. Verify above behavior with the environment scope dropdown by searching for an environment. The variables table should not show a loading icon during the search.

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 Mireya Andres

Merge request reports