Add project section graphQL CI variables

Context

This work is in a series of MR to create a new application in CI/CD settings for variable. Before diving in, there are a few important point on both the structure of the MRs and the code itself.

MR	Link
Add Modal and dropdown component	!94238 (merged)
Add Table and Settings components	!94244 (merged)
Add Admin specific code	!94267 (merged)
Add group specific code	!94385 (merged)
Add project specific code	You are here

MRs structure

The total refactor was around 3k diff, which was too big. Therefore, we are going to ship smaller pieces like some refactored components and their tests in sequence. These components are not used anywhere unless the feature flag ci_variable_settings_graphql is enabled. To make sure that each little piece of application that gets merged with passing specs, we start by the smallest possible component and we move up to the larger application components all the way to the root where we fetch the new Apollo data.

At any point, please feel free to consult: !91710 (closed) for additional code context. That MR has all the changes we are aiming to have merged with this series f MR

The work

Note that all older components that use vuex have been prefixed with legacy_.

The ci_variable_settings, which used to be the root of the variable settings application, is used in 3 different pages:

• Project Variables: /$user/$Project/-/settings/ci_cd
• Group Variables /groups/$my_group_name/-/settings/ci_cd
• Admin Variables /admin/application_settings/ci_cd

Here are some key details on some small differences between each of them regarding environment scopes (which means, in which environment is that variable available):

• Project variables always have a possible list of environment scopes
• Group variable can have a list of environment scopes if the feature flag group_scoped_ci_variables is turned on (which it is by default)
• Admin variables can never have an environment scope

At the end of this chain of MR, we are going to have 3 top level components (one for each section) to use the right queries and mutations based on which page we are on. It also allow children components to simply get props and emit events and can be agnostic to where their data is coming from.

As for feature specs, they will be enabled in the very last MR.

What does this MR do and why?

This part adds the project vue app, the resolvers and the feature specs related to the project settings page.

Screenshots or screen recordings

None for now

How to set up and validate locally

1. Enable the feature flag

Feature.enable(:ci_variable_settings_graphql)

1. Visit /$user/$Project/-/settings/ci_cd
2. Make sure you can add a variable
3. Make sure can edit a variable
4. Make sure that you can delete a variable
5. Make sure that any changes to variables is reflected in the table -->

MR acceptance checklist

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

• I have evaluated the MR acceptance checklist for this MR.

changed milestone to %15.3

added frontend grouppipeline authoring typemaintenance labels

assigned to @f_caplette

changed the description

mentioned in merge request !94267 (merged)

mentioned in merge request !94238 (merged)

mentioned in merge request !94244 (merged)

added backend label

	1 Warning
	This merge request is quite big (552 lines changed), please consider splitting it into multiple merge requests.

Reviewer roulette

Changes that require review have been detected!

Please refer to the table below for assigning reviewers and maintainers suggested by Danger in the specified category:

Category	Reviewer	Maintainer
frontend	Stanislav Lashmanov (@slashmanov) (UTC+4, 8 hours ahead of @f_caplette)	Kushal Pandya (@kushalpandya) (UTC+5.5, 9.5 hours ahead of @f_caplette)
test for spec/features/*	Aleksandr Lyubenkov (@alyubenkov) (UTC+2, 6 hours ahead of @f_caplette)	Maintainer review is optional for test for spec/features/*

To spread load more evenly across eligible reviewers, Danger has picked a candidate for each review slot, based on their timezone. Feel free to override these selections if you think someone else would be better-suited or use the GitLab Review Workload Dashboard to find other available reviewers.

To read more on how to use the reviewer roulette, please take a look at the Engineering workflow and code review guidelines. Please consider assigning a reviewer or maintainer who is a domain expert in the area of the merge request.

Once you've decided who will review this merge request, assign them as a reviewer! Danger does not automatically notify them for you.

If needed, you can retry the danger-review job that generated this comment.

Generated by Danger

mentioned in issue #364375 (closed)

Setting label(s) devopsverify sectionops based on grouppipeline authoring.

added devopsverify sectionops labels

added 4496 commits

• 48f7f86c...ac2dfa3c - 4495 commits from branch master
• 200850ea - Add graphql CI/CD project variables

Compare with previous version

Suggested Reviewers (beta)

The individuals below may be good candidates to participate in the review based on various factors.

You can use slash commands in comments to quickly assign /assign_reviewer @user1.

Suggested Reviewers
@kushalpandya, @shampton, @jivanvl, @afontaine, @mikegreiling

If you do not believe these suggestions are useful, please apply the label Bad Suggested Reviewer. You can also provide feedback for this feature on this issue: https://gitlab.com/gitlab-org/gitlab/-/issues/357923.

Automatically generated by Suggested Reviewers Bot - an experimental ML-based recommendation engine created by ~"group::applied ml".

@f_caplette - please see the following guidance and update this merge request.

	1 Warning
	Please add a subtype label to this merge request.

If you have added a type label and do not feel the purpose of this merge request matches one of the subtypes labels, please resolve this discussion.

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits 1a315560 and e7b837ef

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	3.6 MB	3.5 MB	-96.78 KB	-2.6 %
mainChunk	1.98 MB	1.9 MB	-82.75 KB	-4.1 %

Significant Growth: 5

Expand

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
pages.admin.application_settings	1.31 MB	1.34 MB	+27.68 KB	2.1 %
pages.admin.application_settings.advanced_search	1.31 MB	1.34 MB	+27.68 KB	2.1 %
pages.admin.application_settings.metrics_and_profiling	1.32 MB	1.34 MB	+27.68 KB	2.1 %
pages.admin.application_settings.service_usage_data	1.32 MB	1.34 MB	+27.68 KB	2.1 %
pages.admin.application_settings.ci_cd	1.32 MB	1.35 MB	+27.16 KB	2.0 %

Significant Reduction: 38

Expand

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
pages.profiles.keys	673.78 KB	345.65 KB	-328.13 KB	-48.7 %
pages.projects.merge_requests.show	5.69 MB	5.52 MB	-175.58 KB	-3.0 %
pages.projects.issues.designs	4.67 MB	4.56 MB	-108.65 KB	-2.3 %
pages.projects.issues.show	4.67 MB	4.56 MB	-108.65 KB	-2.3 %
pages.projects.incidents.show	4.62 MB	4.52 MB	-106.47 KB	-2.2 %
pages.projects.issues.edit	4.55 MB	4.46 MB	-101.15 KB	-2.2 %
pages.projects.issues.new	4.55 MB	4.46 MB	-101.15 KB	-2.2 %
pages.projects.issues.service_desk	4.51 MB	4.42 MB	-98.97 KB	-2.1 %
pages.projects.security.vulnerabilities.show	3.03 MB	2.96 MB	-70.14 KB	-2.3 %
pages.projects.pipelines.builds	3.21 MB	3.15 MB	-67.26 KB	-2.0 %

The table above is limited to 10 entries. Please look at the full report for more details

---

Your MR has at least one entrypoint growing significantly (more > 1 KB or 2%). If you write new or extend existing features, this is expected and there is nothing to worry about.

Please consider pinging someone from the FE Foundations (@dmishunov, @justin_ho, @mikegreiling or @nmezzopera) for review, if you are unsure about the size increase.

Note: We do not have exact data for 1a315560. So we have used data from: 9f0445b8.
The intended commit has no webpack pipeline, so we chose the last commit with one before it.

Please look at the full report for more details

---

Read more about how this report works.

Generated by Danger

added 1 commit

• 120d4a2a - Add graphql CI/CD project variables

Compare with previous version

added 1 commit

• 26f86e5f - Add graphql CI/CD project variables

Compare with previous version

@mgandres Could you take a look at the last MR here for project queries? Thanks!

@treagitlab Pinging you here for specs since I am copy/pasting some of the test so we cane haave them with and without the feature flag, but they shall be removed once the flag is enabled by default. Thanls!

requested review from @mgandres and @treagitlab

Allure report

allure-report-publisher generated test report!

review-qa-blocking: test report for e7b837ef

expand test summary

+-----------------------------------------------------------------------------------------+
|                                     suites summary                                      |
+------------------------------------+--------+--------+---------+-------+-------+--------+
|                                    | passed | failed | skipped | flaky | total | result |
+------------------------------------+--------+--------+---------+-------+-------+--------+
| Plan                               | 47     | 0      | 1       | 47    | 48    | ❗     |
| Create                             | 28     | 0      | 1       | 28    | 29    | ❗     |
| Manage                             | 46     | 0      | 3       | 36    | 49    | ❗     |
| Verify                             | 12     | 0      | 1       | 12    | 13    | ❗     |
| Package                            | 0      | 0      | 1       | 0     | 1     | ➖     |
| Secure                             | 2      | 0      | 0       | 2     | 2     | ❗     |
| Protect                            | 2      | 0      | 0       | 2     | 2     | ❗     |
| Configure                          | 0      | 0      | 1       | 0     | 1     | ➖     |
| Version sanity check               | 0      | 0      | 1       | 0     | 1     | ➖     |
| Feature flag handler sanity checks | 9      | 0      | 0       | 9     | 9     | ❗     |
+------------------------------------+--------+--------+---------+-------+-------+--------+
| Total                              | 146    | 0      | 9       | 136   | 155   | ❗     |
+------------------------------------+--------+--------+---------+-------+-------+--------+

package-and-qa: test report for e7b837ef

expand test summary

+-------------------------------------------------------------+
|                       suites summary                        |
+--------+--------+--------+---------+-------+-------+--------+
|        | passed | failed | skipped | flaky | total | result |
+--------+--------+--------+---------+-------+-------+--------+
| Verify | 182    | 0      | 12      | 2     | 194   | ❗     |
+--------+--------+--------+---------+-------+-------+--------+
| Total  | 182    | 0      | 12      | 2     | 194   | ❗     |
+--------+--------+--------+---------+-------+-------+--------+

added maintenancerefactor label

resolved all threads

approved this merge request

@f_caplette Just a small comment from me, but this is approved.

Great job on this MR series! I learned a lot as well in collaborating with this.

@ntepluhina could you take over again please? We're at the final stretch!

@mgandres, thanks for approving this merge request.

This is the first time the merge request is approved. To ensure full test coverage, a new pipeline has been started.

For more info, please refer to the following links:

• rspec minimal jobs
• jest minimal jobs
• merging a merge request.

requested review from @ntepluhina

removed review request for @ntepluhina

added 1 commit

• e7b837ef - Remove deprecated localVue

Compare with previous version

requested review from @ntepluhina

approved this merge request

removed review request for @ntepluhina

approved this merge request

• The gitlab-qa-mirror downstream pipeline for !94388 (e7b837ef) passed.

requested review from @ntepluhina

resolved all threads

enabled an automatic merge when the pipeline for e8c7e2f9 succeeds

merged

mentioned in commit 9311efdf

added workflowstaging-canary label

added workflowcanary label and removed workflowstaging-canary label

added workflowstaging label and removed workflowcanary label

added workflowproduction label and removed workflowstaging label

mentioned in issue gitlab-com/www-gitlab-com#13767 (closed)

added workflowpost-deploy-db-staging label and removed workflowproduction label

added workflowpost-deploy-db-production label and removed workflowpost-deploy-db-staging label

added releasedcandidate label