Pipeline MiniGraph: Migrate dropdown to GlDisclosureDropdown (Pt. 2)

What does this MR do and why?

Pipeline MiniGraph: Migrate dropdowns to GlDisclosureDropdown (Pt. 2)

!142427 (merged) got reverted as the job action was somewhat broken. This MR includes all the changes from the original MR and fixes the Job action.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Before	After

How to set up and validate locally

1. Go to a MR with pipelines (e.g. http://gdk.test:3000/flightjs/Flight/-/merge_requests/3)

Related to ✂️ UX Paper Cuts 16.9 → Pajamas Migrations (#430246 - closed), #393672 (closed), !142427 (merged)

changed milestone to %16.10

assigned to @seggenberger

added UX UX Paper Cuts frontend groupux paper cuts maintenanceusability sectiondev severity4 typemaintenance labels

@stanhu as you discovered the regression initially, would you mind testing this now with this new MR? !142427 (comment 1756274604)

TY in advance!

requested review from @stanhu

	4 Warnings
	This MR changes code in ee/, but its Changelog commit is missing the EE: true trailer. Consider adding it to your Changelog commits.
	b4ad540f: The commit subject must contain at least 3 words. For more information, take a look at our Commit message guidelines.
	d3c8477c: The commit subject must contain at least 3 words. For more information, take a look at our Commit message guidelines.
	This merge request contains lines with testid selectors. Please ensure e2e:package-and-test job is run.

testid selectors

The following changed lines in this MR contain testid selectors:

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

+    testid() {
+    :data-testid="testid"
-      data-testid="job-with-link"
-      data-testid="job-without-link"
+          data-testid="job-name"

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

+        data-testid="mini-pipeline-graph-dropdown-toggle"
-    <div v-if="isLoading" class="gl--flex-center gl-p-2" data-testid="pipeline-stage-loading-state">
+        <span data-testid="pipeline-stage-dropdown-menu-title">{{ stageName }}</span>
+      data-testid="pipeline-stage-loading-state"
-        <span data-testid="pipeline-stage-dropdown-menu-title">{{ stageName }}</span>
-            data-testid="warning-message-merge-trains"
+        data-testid="warning-message-merge-trains"

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 trigger-omnibus-and-follow-up-e2e job in the qa 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
frontend	@lcallahan (UTC-7, 8 hours behind author)	@jivanvl (UTC-6, 7 hours behind author)
test for spec/features/*	@j_lar (UTC+1, same timezone as author)	Maintainer review is optional for test for spec/features/*
UX	@cam.x (UTC+0, 1 hour behind author)	Maintainer review is optional for UX
~"Verify"	Reviewer review is optional for ~"Verify"	@jivanvl (UTC-6, 7 hours behind author)

Please check reviewer's status!

• Reviewer is available!
• Reviewer is unavailable!

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

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits 4e8df37c and b4ad540f

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	4.22 MB	4.22 MB	-	0.0 %
mainChunk	3.22 MB	3.22 MB	-	0.0 %

---

Note: We do not have exact data for 4e8df37c. So we have used data from: 175df218.
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

E2E Test Result Summary

allure-report-publisher generated test report!

e2e-test-on-gdk: test report for b4ad540f

expand test summary

+------------------------------------------------------------------+
|                          suites summary                          |
+-------------+--------+--------+---------+-------+-------+--------+
|             | passed | failed | skipped | flaky | total | result |
+-------------+--------+--------+---------+-------+-------+--------+
| Create      | 57     | 0      | 12      | 0     | 69    | ✅     |
| Plan        | 53     | 0      | 0       | 0     | 53    | ✅     |
| Govern      | 65     | 0      | 1       | 0     | 66    | ✅     |
| Verify      | 31     | 0      | 0       | 0     | 31    | ✅     |
| Package     | 24     | 0      | 2       | 0     | 26    | ✅     |
| Data Stores | 29     | 0      | 3       | 0     | 32    | ✅     |
| Manage      | 0      | 0      | 1       | 0     | 1     | ➖     |
| Release     | 5      | 0      | 0       | 0     | 5     | ✅     |
| Monitor     | 7      | 0      | 0       | 0     | 7     | ✅     |
| Analytics   | 2      | 0      | 0       | 0     | 2     | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+
| Total       | 273    | 0      | 19      | 0     | 292   | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+

requested review from @annabeldunstone

removed review request for @annabeldunstone

@seggenberger Unfortunately there are conflicts at the moment.

Is there a feature spec we need to add to cover the broken case?

For my own edification, I did a diff between this merge request and !142427 (merged):

0a1,15
> diff --git a/app/assets/javascripts/ci/common/private/job_action_component.vue b/app/assets/javascripts/ci/common/private/job_action_component.vue
> index c266e061513c49796475fafa804ee48004f46956..0c9d195aa85233723be74279e39bb28d6c3237ca 100644
> --- a/app/assets/javascripts/ci/common/private/job_action_component.vue
> +++ b/app/assets/javascripts/ci/common/private/job_action_component.vue
> @@ -80,7 +80,9 @@ export default {
>       * different apps it avoids repetition & complexity.
>       *
>       */
> -    onClickAction() {
> +    onClickAction(e) {
> +      e.preventDefault();
> +
>        if (this.withConfirmationModal) {
>          this.$emit('showActionConfirmationModal');
>        } else {
360c375
< index 9c052b150bec8b346c2a50678c467668c8a3dd0b..f5d3f10dcfcb82c76f1b850d31246141df5983df 100644
---
> index 00bb9141aa0424a7608be96607c1b0b7d812c041..360c48918f4a617be8d230e1a48a347484a62217 100644
385c400
< -            find('[data-testid="pipelines-manual-actions-dropdown"]').click
---
> -            find('[data-testid="pipelines-manual-actions-dropdown"] button').click
401c416
< -          find('[data-testid="pipelines-manual-actions-dropdown"]').click
---
> -          find('[data-testid="pipelines-manual-actions-dropdown"] button').click
412c427
< -            find('[data-testid="pipelines-manual-actions-dropdown"]').click
---
> -            find('[data-testid="pipelines-manual-actions-dropdown"] button').click
418c433
< @@ -534,15 +536,20 @@
---
> @@ -535,15 +537,20 @@
442c457
< @@ -550,16 +557,18 @@
---
> @@ -551,16 +558,18 @@
567c582
< index 851665497711e5aa2ed45af7bd772d1d38e436d6..bc569550f0520110254edaed48405149dd2c3d18 100644
---
> index 44454ea8a477e2b0e4ca70fc1eb97e1b7f9b6c0b..2f51c552714fe035ced89c4f329a96e91e0cb5a0 100644

added 391 commits

• b772df11...84928887 - 387 commits from branch master
• 39a1a4f3 - Pipeline MiniGraph: Migrate dropdown to GlDisclosureDropdown
• 1f046da0 - Fixed failing Jest specs
• d3c8477c - Fix specs
• d0d879b5 - Fix job action

Compare with previous version

removed review request for @stanhu

Hey @jmiocene can you do the UX review?

FYI this is just a re-roll of Pipeline MiniGraph: Migrate dropdown to GlDiscl... (!142427 - merged) as there was an issue we detected post merge.

TY!

requested review from @jmiocene

added 1 commit

• 3949755d - Add more test coverage

Compare with previous version

added 1 commit

• b4ad540f - Update spec

Compare with previous version

approved this merge request

@jmiocene, thanks for approving this merge request.

This is the first time the merge request has been approved. To ensure we don't only run predictive pipelines, and we don't break master, a new pipeline will be started shortly.

Please wait for the pipeline to start before resolving this discussion and set auto-merge for the new pipeline. See merging a merge request for more details.