Skip to content

Migrate "View Deployment" dropdown away from deprecated component

What does this MR do and why?

For #424761

Migrates a GlDropdown to a GlCollapsibleListbox.

Please note that some style differences - the blue text color and the underline - come from our <a> and gl-link styles.
If these are considered blockers, we should address that in our UI library and stylesheets as alternative options to gl-link (presumably turn-off-accessibility).

Screenshots or screen recordings

Before After
RecApp-2024-04-16-17_19_02 RecApp-2024-04-16-17_20_52

How to set up and validate locally

  1. Have an MR that has successfully deployed with more than one changeset
  2. Open the deployment dropdown to view non-latest deploys

(I do not actually know how to trigger this in the UI, I am using the patch below)

A patch that will cause this UI to appear
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
index 010c172c7106..b588bfb2d13c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
@@ -47,7 +47,19 @@ export default {
       return this.isPostMerge ? sanitize(this.mr.targetBranch) : this.mr.sourceBranchLink;
     },
     deployments() {
-      return this.isPostMerge ? this.mr.postMergeDeployments : this.mr.deployments;
+      return [
+        {
+          status: 'created',
+          environment_available: true,
+          external_url: 'foo',
+          external_url_formatted: 'foo',
+          changes: [
+            { path: 'foo', external_url: 'foo' },
+            { path: 'bar', external_url: 'bar' },
+          ],
+        },
+      ];
+      // return this.isPostMerge ? this.mr.postMergeDeployments : this.mr.deployments;
     },
     deploymentClass() {
       return this.isPostMerge ? 'js-post-deployment' : 'js-pre-deployment';

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 Thomas Randolph

Merge request reports