1 files changed, 145 insertions, 0 deletions
diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue
new file mode 100644
index 00000000000..b1565699432
--- /dev/null
+++ b/app/assets/javascripts/repository/components/last_commit.vue
@@ -0,0 +1,145 @@
+<script>
+import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
+import { sprintf, s__ } from '~/locale';
+import Icon from '../../vue_shared/components/icon.vue';
+import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+import TimeagoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
+import CommitPipelineStatus from '../../projects/tree/components/commit_pipeline_status_component.vue';
+import CiIcon from '../../vue_shared/components/ci_icon.vue';
+import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
+import getRefMixin from '../mixins/get_ref';
+import getProjectPath from '../queries/getProjectPath.graphql';
+import pathLastCommit from '../queries/pathLastCommit.query.graphql';
+
+export default {
+  components: {
+    Icon,
+    UserAvatarLink,
+    TimeagoTooltip,
+    CommitPipelineStatus,
+    ClipboardButton,
+    CiIcon,
+    GlLink,
+    GlButton,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  mixins: [getRefMixin],
+  apollo: {
+    projectPath: {
+      query: getProjectPath,
+    },
+    commit: {
+      query: pathLastCommit,
+      variables() {
+        return {
+          projectPath: this.projectPath,
+          ref: this.ref,
+          path: this.currentPath.replace(/^\//, ''),
+        };
+      },
+      update: data => data.project.repository.tree.commit,
+    },
+  },
+  props: {
+    currentPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      projectPath: '',
+      commit: {},
+      showDescription: false,
+    };
+  },
+  computed: {
+    statusTitle() {
+      return sprintf(s__('Commits|Commit: %{commitText}'), {
+        commitText: this.commit.pipeline.detailedStatus.text,
+      });
+    },
+    isLoading() {
+      return this.$apollo.queries.commit.loading;
+    },
+    showCommitId() {
+      return this.commit.id.substr(0, 8);
+    },
+  },
+  methods: {
+    toggleShowDescription() {
+      this.showDescription = !this.showDescription;
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="!isLoading" class="info-well d-none d-sm-flex project-last-commit commit p-3">
+    <user-avatar-link
+      v-if="commit.author"
+      :link-href="commit.author.webUrl"
+      :img-src="commit.author.avatarUrl"
+      :img-size="40"
+      class="avatar-cell"
+    />
+    <div class="commit-detail flex-list">
+      <div class="commit-content qa-commit-content">
+        <gl-link :href="commit.webUrl" class="commit-row-message item-title">
+          {{ commit.title }}
+        </gl-link>
+        <gl-button
+          v-if="commit.description"
+          :class="{ open: showDescription }"
+          :aria-label="__('Show commit description')"
+          class="text-expander"
+          @click="toggleShowDescription"
+        >
+          <icon name="ellipsis_h" />
+        </gl-button>
+        <div class="committer">
+          <gl-link
+            v-if="commit.author"
+            :href="commit.author.webUrl"
+            class="commit-author-link js-user-link"
+          >
+            {{ commit.author.name }}
+          </gl-link>
+          authored
+          <timeago-tooltip :time="commit.authoredDate" tooltip-placement="bottom" />
+        </div>
+        <pre
+          v-if="commit.description"
+          v-show="showDescription"
+          class="commit-row-description append-bottom-8"
+        >
+          {{ commit.description }}
+        </pre>
+      </div>
+      <div class="commit-actions flex-row">
+        <gl-link
+          v-if="commit.pipeline"
+          v-gl-tooltip
+          :href="commit.pipeline.detailedStatus.detailsPath"
+          :title="statusTitle"
+          class="js-commit-pipeline"
+        >
+          <ci-icon :status="commit.pipeline.detailedStatus" :size="24" :aria-label="statusTitle" />
+        </gl-link>
+        <div class="commit-sha-group d-flex">
+          <div class="label label-monospace monospace">
+            {{ showCommitId }}
+          </div>
+          <clipboard-button
+            :text="commit.id"
+            :title="__('Copy commit SHA to clipboard')"
+            tooltip-placement="bottom"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>