1 files changed, 40 insertions, 11 deletions

diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue
index 99bc1b5c040..274a4027e62 100644
--- a/app/assets/javascripts/diffs/components/commit_item.vue
+++ b/app/assets/javascripts/diffs/components/commit_item.vue
@@ -52,10 +52,25 @@ export default {
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
+    isSelectable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     commit: {
       type: Object,
       required: true,
     },
+    checked: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    collapsible: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     author() {
@@ -78,6 +93,10 @@ export default {
     authorAvatar() {
       return this.author.avatar_url || this.commit.author_gravatar_url;
     },
+    commitDescription() {
+      // Strip the newline at the beginning
+      return this.commit.description_html.replace(/^
/, '');
+    },
     nextCommitUrl() {
       return this.commit.next_commit_id
         ? setUrlParams({ commit_id: this.commit.next_commit_id })
@@ -104,14 +123,23 @@ export default {
 </script>
 
 <template>
-  <li class="commit flex-row js-toggle-container">
-    <user-avatar-link
-      :link-href="authorUrl"
-      :img-src="authorAvatar"
-      :img-alt="authorName"
-      :img-size="40"
-      class="avatar-cell d-none d-sm-block"
-    />
+  <li :class="{ 'js-toggle-container': collapsible }" class="commit flex-row">
+    <div class="d-flex align-items-center align-self-start">
+      <input
+        v-if="isSelectable"
+        class="mr-2"
+        type="checkbox"
+        :checked="checked"
+        @change="$emit('handleCheckboxChange', $event.target.checked)"
+      />
+      <user-avatar-link
+        :link-href="authorUrl"
+        :img-src="authorAvatar"
+        :img-alt="authorName"
+        :img-size="40"
+        class="avatar-cell d-none d-sm-block"
+      />
+    </div>
     <div class="commit-detail flex-list">
       <div class="commit-content qa-commit-content">
         <a
@@ -123,7 +151,7 @@ export default {
         <span class="commit-row-message d-block d-sm-none">&middot; {{ commit.short_id }}</span>
 
         <button
-          v-if="commit.description_html"
+          v-if="commit.description_html && collapsible"
           class="text-expander js-toggle-button"
           type="button"
           :aria-label="__('Toggle commit description')"
@@ -144,8 +172,9 @@ export default {
 
         <pre
           v-if="commit.description_html"
-          class="commit-row-description js-toggle-content gl-mb-3"
-          v-html="commit.description_html"
+          :class="{ 'js-toggle-content': collapsible, 'd-block': !collapsible }"
+          class="commit-row-description gl-mb-3 text-dark"
+          v-html="commitDescription"
         ></pre>
       </div>
       <div class="commit-actions flex-row d-none d-sm-flex">