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
- Have an MR that has successfully deployed with more than one changeset
- 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.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by Thomas Randolph