Skip to content

Migrate "View Deployment" dropdown away from deprecated component

What does this MR do and why?

For #424761 (closed)

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

Loading