Resolve "Commit details are not displayed when reviewing an MR commit by commit"

3 files changed, 166 insertions, 0 deletions

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index bfb992340bc..fc41ee4b777 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -9,6 +9,7 @@ import ChangedFiles from './changed_files.vue';
 import DiffFile from './diff_file.vue';
 import NoChanges from './no_changes.vue';
 import HiddenFilesWarning from './hidden_files_warning.vue';
+import CommitWidget from './commit_widget.vue';
 
 export default {
   name: 'DiffsApp',
@@ -19,6 +20,7 @@ export default {
     DiffFile,
     NoChanges,
     HiddenFilesWarning,
+    CommitWidget,
   },
   props: {
     endpoint: {
@@ -208,6 +210,11 @@ export default {
         </div>
       </div>
 
+      <commit-widget
+        v-if="commit"
+        :commit="commit"
+      />
+
       <changed-files
         :diff-files="diffFiles"
       />
diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue
new file mode 100644
index 00000000000..5758588e82e
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/commit_item.vue
@@ -0,0 +1,119 @@
+<script>
+import tooltip from '~/vue_shared/directives/tooltip';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import CIIcon from '~/vue_shared/components/ci_icon.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+
+/**
+ * CommitItem
+ *
+ * -----------------------------------------------------------------
+ * WARNING: Please keep changes up-to-date with the following files:
+ * - `views/projects/commits/_commit.html.haml`
+ * -----------------------------------------------------------------
+ *
+ * This Component was cloned from a HAML view. For the time being they
+ * coexist, but there is an issue to remove the duplication.
+ * https://gitlab.com/gitlab-org/gitlab-ce/issues/51613
+ *
+ */
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    UserAvatarLink,
+    Icon,
+    ClipboardButton,
+    CIIcon,
+    TimeAgoTooltip,
+  },
+  props: {
+    commit: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    authorName() {
+      return (this.commit.author && this.commit.author.name) || this.commit.authorName;
+    },
+    authorUrl() {
+      return (this.commit.author && this.commit.author.webUrl) || `mailto:${this.commit.authorEmail}`;
+    },
+    authorAvatar() {
+      return (this.commit.author && this.commit.author.avatarUrl) || this.commit.authorGravatarUrl;
+    },
+  },
+};
+</script>
+
+<template>
+  <li class="commit flex-row js-toggle-container">
+    <user-avatar-link
+      :link-href="authorUrl"
+      :img-src="authorAvatar"
+      :img-alt="authorName"
+      :img-size="36"
+      class="avatar-cell d-none d-sm-block"
+    />
+    <div class="commit-detail flex-list">
+      <div class="commit-content qa-commit-content">
+        <a
+          :href="commit.commitUrl"
+          class="commit-row-message item-title"
+          v-html="commit.titleHtml"
+        ></a>
+
+        <span class="commit-row-message d-block d-sm-none">
+          &middot;
+          {{ commit.shortId }}
+        </span>
+
+        <button
+          v-if="commit.descriptionHtml"
+          class="text-expander js-toggle-button"
+          type="button"
+          :aria-label="__('Toggle commit description')"
+        >
+          <icon
+            :size="12"
+            name="ellipsis_h"
+          />
+        </button>
+
+        <div class="commiter">
+          <a
+            :href="authorUrl"
+            v-text="authorName"
+          ></a>
+          {{ s__('CommitWidget|authored') }}
+          <time-ago-tooltip
+            :time="commit.authoredDate"
+          />
+        </div>
+
+        <pre
+          v-if="commit.descriptionHtml"
+          class="commit-row-description js-toggle-content append-bottom-8"
+          v-html="commit.descriptionHtml"
+        ></pre>
+      </div>
+      <div class="commit-actions flex-row d-none d-sm-flex">
+        <div class="commit-sha-group">
+          <div
+            class="label label-monospace"
+            v-text="commit.shortId"
+          ></div>
+          <clipboard-button
+            :text="commit.id"
+            :title="__('Copy commit SHA to clipboard')"
+            class="btn btn-default"
+          />
+        </div>
+      </div>
+    </div>
+  </li>
+</template>
diff --git a/app/assets/javascripts/diffs/components/commit_widget.vue b/app/assets/javascripts/diffs/components/commit_widget.vue
new file mode 100644
index 00000000000..cc8e72eb1c8
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/commit_widget.vue
@@ -0,0 +1,40 @@
+<script>
+import CommitItem from './commit_item.vue';
+
+/**
+ * CommitWidget
+ *
+ * -----------------------------------------------------------------
+ * WARNING: Please keep changes up-to-date with the following files:
+ * - `views/projects/merge_requests/diffs/_commit_widget.html.haml`
+ * -----------------------------------------------------------------
+ *
+ * This Component was cloned from a HAML view. For the time being,
+ * they coexist, but there is an issue to remove the duplication.
+ * https://gitlab.com/gitlab-org/gitlab-ce/issues/51613
+ *
+ */
+export default {
+  components: {
+    CommitItem,
+  },
+  props: {
+    commit: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="info-well prepend-top-default">
+    <div class="well-segment">
+      <ul class="blob-commit-info">
+        <commit-item
+          :commit="commit"
+        />
+      </ul>
+    </div>
+  </div>
+</template>