Add GraphQL PMG to MR widget

What does this MR do and why?

This is the first task for #419725

We are adding the GraphQL version of the pipeline mini graph to the MR widget in anticipation of the full migration coming up.

Screenshots or screen recordings

How to set up and validate locally

Prerequisites

• An enabled feature flag: Feature.enable(:ci_graphql_pipeline_mini_graph)
• A working runner

Steps

1. Navigate to a project (this example uses the flightjs group)
2. Navigate to the Pipeline Editor (Build > Pipeline editor)
3. Update the gitlab-ci.yml and enter a new branch name. Check the "start a new merge request with these changes" boxes
4. Create a merge request
5. You should see the graphql pipeline mini graph widget on the merge request page

changed milestone to %17.3

assigned to @bsandlin

added feature flag frontend grouppipeline authoring typemaintenance labels

added Category:Pipeline Composition devopsverify sectionci labels

added pipelinetier-1 label

added backend label

	3 Warnings
	This MR changes code in ee/, but its Changelog commit is missing the EE: true trailer. Consider adding it to your Changelog commits.
	This merge request changed files with disabled eslint rules. Please consider fixing them.
	This merge request contains lines with testid selectors. Please ensure e2e:package-and-test job is run.

Disabled eslint rules

The following files have disabled eslint rules. Please consider fixing them:

• app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue

Run the following command for more details

node_modules/.bin/eslint --report-unused-disable-directives --no-inline-config \
  'app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue'

testid selectors

The following changed lines in this MR contain testid selectors:

app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_mini_graph/legacy_pipeline_stage.vue

-    data-testid="mini-pipeline-graph-dropdown"
+    data-testid="pipeline-mini-graph-dropdown"
-        data-testid="mini-pipeline-graph-dropdown-toggle"
+        data-testid="pipeline-mini-graph-dropdown-toggle"
-      data-testid="mini-pipeline-graph-dropdown-menu-list"
+      data-testid="pipeline-mini-graph-dropdown-menu-list"

app/assets/javascripts/ci/pipeline_mini_graph/pipeline_stage.vue

-    data-testid="pipeline-stage"
+    data-testid="pipeline-mini-graph-dropdown"
+        data-testid="pipeline-mini-graph-dropdown-toggle"
-      data-testid="pipeline-stage-dropdown-menu-list"
+      data-testid="pipeline-mini-graph-dropdown-menu-list"

If the e2e:package-and-test job in the qa stage has run automatically, please ensure the tests are passing. If the job has not run, please start the manual:e2e-test-pipeline-generate job in the prepare stage and ensure the tests in follow-up:e2e:package-and-test-ee pipeline are passing.

For the list of known failures please refer to the latest pipeline triage issue.

If your changes are under a feature flag, please check our Testing with feature flags documentation for instructions.

Reviewer roulette

Category	Reviewer	Maintainer
backend	@syarynovskyi (UTC+3, 8 hours ahead of author)	@lma-git (UTC-7, 2 hours behind author)
frontend	@aalakkad (UTC+3, 8 hours ahead of author)	@dpisek (UTC+2, 7 hours ahead of author)
test for spec/features/*	@syarynovskyi (UTC+3, 8 hours ahead of author)	Maintainer review is optional for test for spec/features/*

Please refer to documentation page for guidance on how you can benefit from the Reviewer Roulette, or use the GitLab Review Workload Dashboard to find other available reviewers.

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

Generated by Danger

Hey @jivanvl could you please review this one for frontend? We are plugging in the graphql version to the MR widget

marked this merge request as ready

mentioned in task #473904 (closed)

added feature flagexists label

resolved all threads

@rkadam3 Could you please have a look at this for backend? I've just added the feature flag.

requested review from @rkadam3

approved this merge request

added pipeline:mr-approved label