Merge branch '211762-show-full-commit-message-by-default-in-merge-request-diff' into 'master'

Resolve "Show full commit message by default in merge request diff"

Closes #211762

See merge request gitlab-org/gitlab!27981

app/assets/javascripts/diffs/components/app.vue

@@ -441,7 +441,7 @@ export default {
             [CENTERED_LIMITED_CONTAINER_CLASSES]: isLimitedContainer,
           }"
         >
-          <commit-widget v-if="commit" :commit="commit" />
+          <commit-widget v-if="commit" :commit="commit" :collapsible="false" />
           <div v-if="isBatchLoading" class="loading"><gl-loading-icon size="lg" /></div>
           <template v-else-if="renderDiffFiles">
             <diff-file

app/assets/javascripts/diffs/components/commit_item.vue

@@ -56,6 +56,11 @@ export default {
       type: Object,
       required: true,
     },
+    collapsible: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     author() {
@@ -104,7 +109,7 @@ export default {
 </script>
 
 <template>
-  <li class="commit flex-row js-toggle-container">
+  <li :class="{ 'js-toggle-container': collapsible }" class="commit flex-row">
     <user-avatar-link
       :link-href="authorUrl"
       :img-src="authorAvatar"
@@ -123,7 +128,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,7 +149,8 @@ export default {
 
         <pre
           v-if="commit.description_html"
-          class="commit-row-description js-toggle-content gl-mb-3"
+          :class="{ 'js-toggle-content': collapsible, 'd-block': !collapsible }"
+          class="commit-row-description gl-mb-3 text-dark"
           v-html="commit.description_html"
         ></pre>
       </div>

app/assets/javascripts/diffs/components/commit_widget.vue

@@ -23,15 +23,20 @@ export default {
       type: Object,
       required: true,
     },
+    collapsible: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
 };
 </script>
 
 <template>
-  <div class="info-well w-100">
+  <div class="info-well mw-100 mx-0">
     <div class="well-segment">
       <ul class="blob-commit-info">
-        <commit-item :commit="commit" />
+        <commit-item :commit="commit" :collapsible="collapsible" />
       </ul>
     </div>
   </div>

app/views/projects/commits/_commit.html.haml

@@ -10,12 +10,13 @@
 - ref           = local_assigns.fetch(:ref) { merge_request&.source_branch }
 - commit        = commit.present(current_user: current_user)
 - commit_status = commit.status_for(ref)
+- collapsible = local_assigns.fetch(:collapsible, true)
 
 - link = commit_path(project, commit, merge_request: merge_request)
 
 - show_project_name = local_assigns.fetch(:show_project_name, false)
 
-%li.commit.flex-row.js-toggle-container{ id: "commit-#{commit.short_id}" }
+%li{ class: ["commit flex-row", ("js-toggle-container" if collapsible)], id: "commit-#{commit.short_id}" }
 
   .avatar-cell.d-none.d-sm-block
     = author_avatar(commit, size: 40, has_tooltip: false)
@@ -29,7 +30,7 @@
       %span.commit-row-message.d-inline.d-sm-none
         ·
         = commit.short_id
-      - if commit.description?
+      - if commit.description? && collapsible
         %button.text-expander.js-toggle-button
           = sprite_icon('ellipsis_h', size: 12)
 
@@ -41,7 +42,7 @@
       = render_if_exists 'projects/commits/project_namespace', show_project_name: show_project_name, project: project
 
       - if commit.description?
-        %pre.commit-row-description.js-toggle-content.gl-mb-3
+        %pre{ class: ["commit-row-description gl-mb-3", (collapsible ? "js-toggle-content" : "d-block")] }
           = preserve(markdown_field(commit, :description))
 
     .commit-actions.flex-row

app/views/projects/merge_requests/diffs/_commit_widget.html.haml

@@ -2,8 +2,10 @@
   WARNING: Please keep changes up-to-date with the following files:
   - `assets/javascripts/diffs/components/commit_widget.vue`
 -#-----------------------------------------------------------------
+- collapsible = local_assigns.fetch(:collapsible, true)
+
 - if @commit
-  .info-well.d-none.d-sm-block.gl-mt-3
+  .info-well.mw-100.mx-0
     .well-segment
       %ul.blob-commit-info
-        = render 'projects/commits/commit', commit: @commit, merge_request: @merge_request, view_details: true
+        = render 'projects/commits/commit', commit: @commit, merge_request: @merge_request, view_details: true, collapsible: collapsible

changelogs/unreleased/211762-show-full-commit-message-by-default-in-merge-request-diff.yml

+---
+title: Show full commit message by default in merge request diff
+merge_request: 27981
+author: Gilang Gumilar
+type: changed

spec/features/merge_requests/user_views_diffs_commit_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'User views diff by commit', :js do
+  let(:merge_request) do
+    create(:merge_request_with_diffs, source_project: project, target_project: project, source_branch: 'merge-test')
+  end
+  let(:project) { create(:project, :public, :repository) }
+
+  before do
+    stub_feature_flags(diffs_batch_load: false)
+    visit(diffs_project_merge_request_path(project, merge_request, commit_id: merge_request.diff_head_sha))
+  end
+
+  it 'shows full commit description by default' do
+    expect(page).to have_selector('.commit-row-description', visible: true)
+  end
+end