1 files changed, 116 insertions, 0 deletions
diff --git a/app/assets/javascripts/repository/components/commit_info.vue b/app/assets/javascripts/repository/components/commit_info.vue
new file mode 100644
index 00000000000..b6e3cdbb7a3
--- /dev/null
+++ b/app/assets/javascripts/repository/components/commit_info.vue
@@ -0,0 +1,116 @@
+<script>
+import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
+import SafeHtml from '~/vue_shared/directives/safe_html';
+import defaultAvatarUrl from 'images/no_avatar.png';
+import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
+import getRefMixin from '../mixins/get_ref';
+
+export default {
+  components: {
+    UserAvatarLink,
+    TimeagoTooltip,
+    GlButton,
+    GlLink,
+    UserAvatarImage,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+    SafeHtml,
+  },
+  mixins: [getRefMixin],
+  props: {
+    commit: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return { showDescription: false };
+  },
+  computed: {
+    commitDescription() {
+      // Strip the newline at the beginning
+      return this.commit?.descriptionHtml?.replace(/^&#x000A;/, '');
+    },
+  },
+  methods: {
+    toggleShowDescription() {
+      this.showDescription = !this.showDescription;
+    },
+  },
+  defaultAvatarUrl,
+  safeHtmlConfig: {
+    ADD_TAGS: ['gl-emoji'],
+  },
+  i18n: {
+    toggleCommitDescription: __('Toggle commit description'),
+    authored: __('authored'),
+  },
+};
+</script>
+
+<template>
+  <div class="well-segment commit gl-min-h-8 gl-p-2 gl-w-full gl-display-flex">
+    <user-avatar-link
+      v-if="commit.author"
+      :link-href="commit.author.webPath"
+      :img-src="commit.author.avatarUrl"
+      :img-size="32"
+      class="gl-my-2 gl-mr-4"
+    />
+    <user-avatar-image
+      v-else
+      class="gl-my-2 gl-mr-4"
+      :img-src="commit.authorGravatar || $options.defaultAvatarUrl"
+      :size="32"
+    />
+    <div
+      class="commit-detail flex-list gl-display-flex gl-justify-content-space-between gl-align-items-center gl-flex-grow-1 gl-min-w-0"
+    >
+      <div class="commit-content" data-qa-selector="commit_content">
+        <gl-link
+          v-safe-html:[$options.safeHtmlConfig]="commit.titleHtml"
+          :href="commit.webPath"
+          :class="{ 'gl-font-style-italic': !commit.message }"
+          class="commit-row-message item-title"
+        />
+        <gl-button
+          v-if="commit.descriptionHtml"
+          v-gl-tooltip
+          :class="{ open: showDescription }"
+          :title="$options.i18n.toggleCommitDescription"
+          :aria-label="$options.i18n.toggleCommitDescription"
+          :selected="showDescription"
+          class="text-expander gl-vertical-align-bottom!"
+          icon="ellipsis_h"
+          @click="toggleShowDescription"
+        />
+        <div class="committer">
+          <gl-link
+            v-if="commit.author"
+            :href="commit.author.webPath"
+            class="commit-author-link js-user-link"
+          >
+            {{ commit.author.name }}</gl-link
+          >
+          <template v-else>
+            {{ commit.authorName }}
+          </template>
+          {{ $options.i18n.authored }}
+          <timeago-tooltip :time="commit.authoredDate" tooltip-placement="bottom" />
+        </div>
+        <pre
+          v-if="commitDescription"
+          v-safe-html:[$options.safeHtmlConfig]="commitDescription"
+          :class="{ 'gl-display-block!': showDescription }"
+          class="commit-row-description gl-mb-3 gl-white-space-pre-line"
+        ></pre>
+      </div>
+      <div class="gl-flex-grow-1"></div>
+      <slot></slot>
+    </div>
+  </div>
+</template>