Skip to content

Do not wrap flex parent of verified badge and commit copy button

What does this MR do and why?

In the "Add or remove previously merged commits" modal, if the author of the commit committed with a verified ssh key and the commit message is long, then this can cause the verified badge and the commit copy button to have an undesirable layout. This is easily fixed by making the flex parent of the badge and the commit hash copy button not wrap.

Screenshots or screen recordings

Before After
gdk.test_3000_flightjs_Flight_-_merge_requests_29_commits gdk.test_3000_flightjs_Flight_-merge_requests_29_commits__2

How to set up and validate locally

  1. Check out this branch locally
  2. Create an MR in a project or visit an existing one
  3. Visit the Commits tab
  4. Click the "Add previously merged commits" button
  5. You should see that all the commits with a Verified badge have the badge and the hash copy button side by side, and none of them have the two arrayed vertically

If you do not have any commits that are verified on your GDK, you can use this patch to fake it:

diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue
index 6d576d3ec448..95c9d203b98f 100644
--- a/app/assets/javascripts/diffs/components/commit_item.vue
+++ b/app/assets/javascripts/diffs/components/commit_item.vue
@@ -8,6 +8,10 @@ import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
+const TEST_SIGNATURE_HTML = `<a class="signature-badge" data-content="signature-content" data-html="true" data-placement="top" data-title="signature-title" data-toggle="popover" role="button" tabindex="0">
+  <span class="gl-badge badge badge-pill badge-success md">Verified</span>
+</a>`;
+
 /**
  * CommitItem
  *
@@ -85,6 +89,7 @@ export default {
   safeHtmlConfig: {
     ADD_TAGS: ['gl-emoji'],
   },
+  TEST_SIGNATURE_HTML,
 };
 </script>
 
@@ -96,10 +101,7 @@ export default {
       <div
         class="commit-actions flex-row gl-hidden sm:gl-flex gl-align-items-center justify-content-end"
       >
-        <div
-          v-if="commit.signature_html"
-          v-html="commit.signature_html /* eslint-disable-line vue/no-v-html */"
-        ></div>
+        <div v-html="$options.TEST_SIGNATURE_HTML"></div>
         <commit-pipeline-status
           v-if="commit.pipeline_status_path"
           :endpoint="commit.pipeline_status_path"

Related to #457239 (closed)

Edited by Chad Lavimoniere

Merge request reports