Add latest changes from gitlab-org/gitlab@master

2 files changed, 61 insertions, 1 deletions

diff --git a/app/assets/javascripts/environments/components/commit.vue b/app/assets/javascripts/environments/components/commit.vue
new file mode 100644
index 00000000000..54b94480685
--- /dev/null
+++ b/app/assets/javascripts/environments/components/commit.vue
@@ -0,0 +1,54 @@
+<script>
+import { GlAvatar, GlAvatarLink, GlLink, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
+import { escape } from 'lodash';
+
+export default {
+  components: {
+    GlAvatar,
+    GlAvatarLink,
+    GlLink,
+  },
+  directives: {
+    GlTooltip,
+  },
+  props: {
+    commit: {
+      required: true,
+      type: Object,
+    },
+  },
+  computed: {
+    commitMessage() {
+      return this.commit?.message;
+    },
+    commitAuthorPath() {
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      return this.commit?.author?.path || `mailto:${escape(this.commit?.authorEmail)}`;
+    },
+    commitAuthorAvatar() {
+      return this.commit?.author?.avatarUrl || this.commit?.authorGravatarUrl;
+    },
+    commitAuthor() {
+      return this.commit?.author?.name || this.commit?.authorName;
+    },
+    commitPath() {
+      return this.commit?.commitPath;
+    },
+  },
+};
+</script>
+<template>
+  <div data-testid="deployment-commit" class="gl-display-flex gl-align-items-center">
+    <gl-avatar-link v-gl-tooltip :title="commitAuthor" :href="commitAuthorPath">
+      <gl-avatar :size="16" :src="commitAuthorAvatar" />
+    </gl-avatar-link>
+    <gl-link
+      v-gl-tooltip
+      :title="commitMessage"
+      :href="commitPath"
+      class="gl-ml-3 gl-str-truncated"
+    >
+      {{ commitMessage }}
+    </gl-link>
+  </div>
+</template>
diff --git a/app/assets/javascripts/environments/components/deployment.vue b/app/assets/javascripts/environments/components/deployment.vue
index b36d0d5f2e0..b3a27628272 100644
--- a/app/assets/javascripts/environments/components/deployment.vue
+++ b/app/assets/javascripts/environments/components/deployment.vue
@@ -5,10 +5,12 @@ import { __, s__ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import DeploymentStatusBadge from './deployment_status_badge.vue';
+import Commit from './commit.vue';
 
 export default {
   components: {
     ClipboardButton,
+    Commit,
     DeploymentStatusBadge,
     GlBadge,
     GlButton,
@@ -41,7 +43,7 @@ export default {
       return this.deployment?.iid;
     },
     shortSha() {
-      return this.deployment?.commit?.shortId;
+      return this.commit?.shortId;
     },
     createdAt() {
       return this.deployment?.createdAt;
@@ -57,6 +59,9 @@ export default {
     detailsButtonClasses() {
       return this.isMobile ? 'gl-sr-only' : '';
     },
+    commit() {
+      return this.deployment?.commit;
+    },
   },
   methods: {
     toggleCollapse() {
@@ -143,6 +148,7 @@ export default {
         {{ detailsButton.text }}
       </gl-button>
     </div>
+    <commit v-if="commit" :commit="commit" class="gl-mt-3" />
     <gl-collapse :visible="visible" />
   </div>
 </template>