Show commit author and message of deployment

To better understand what version of the application is deployed, the
commit message and commit author avatar is displayed as part of the
deployment block.

app/assets/javascripts/environments/components/commit.vue

+<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>

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>

spec/frontend/environments/commit_spec.js

+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import Commit from '~/environments/components/commit.vue';
+import { resolvedEnvironment } from './graphql/mock_data';
+
+describe('~/environments/components/commit.vue', () => {
+  let commit;
+  let wrapper;
+
+  beforeEach(() => {
+    commit = resolvedEnvironment.lastDeployment.commit;
+  });
+
+  const createWrapper = ({ propsData = {} } = {}) =>
+    mountExtended(Commit, {
+      propsData: {
+        commit,
+        ...propsData,
+      },
+    });
+
+  afterEach(() => {
+    wrapper?.destroy();
+  });
+
+  describe('with gitlab user', () => {
+    beforeEach(() => {
+      wrapper = createWrapper();
+    });
+
+    it('links to the user profile', () => {
+      const link = wrapper.findByRole('link', { name: commit.author.name });
+      expect(link.attributes('href')).toBe(commit.author.path);
+    });
+
+    it('displays the user avatar', () => {
+      const avatar = wrapper.findByRole('img', { name: 'avatar' });
+      expect(avatar.attributes('src')).toBe(commit.author.avatarUrl);
+    });
+
+    it('links the commit message to the commit', () => {
+      const message = wrapper.findByRole('link', { name: commit.message });
+
+      expect(message.attributes('href')).toBe(commit.commitPath);
+    });
+  });
+  describe('without gitlab user', () => {
+    beforeEach(() => {
+      commit = {
+        ...commit,
+        author: null,
+      };
+      wrapper = createWrapper();
+    });
+
+    it('links to the user profile', () => {
+      const link = wrapper.findByRole('link', { name: commit.authorName });
+      expect(link.attributes('href')).toBe(`mailto:${commit.authorEmail}`);
+    });
+
+    it('displays the user avatar', () => {
+      const avatar = wrapper.findByRole('img', { name: 'avatar' });
+      expect(avatar.attributes('src')).toBe(commit.authorGravatarUrl);
+    });
+
+    it('displays the commit message', () => {
+      const message = wrapper.findByRole('link', { name: commit.message });
+
+      expect(message.attributes('href')).toBe(commit.commitPath);
+    });
+  });
+});

spec/frontend/environments/deployment_spec.js

@@ -6,15 +6,20 @@ import { formatDate } from '~/lib/utils/datetime_utility';
 import { __, s__ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import Deployment from '~/environments/components/deployment.vue';
+import Commit from '~/environments/components/commit.vue';
 import DeploymentStatusBadge from '~/environments/components/deployment_status_badge.vue';
 import { resolvedEnvironment } from './graphql/mock_data';
 
 describe('~/environments/components/deployment.vue', () => {
   useFakeDate(2022, 0, 8, 16);
 
-  const deployment = resolvedEnvironment.lastDeployment;
+  let deployment;
   let wrapper;
 
+  beforeEach(() => {
+    deployment = resolvedEnvironment.lastDeployment;
+  });
+
   const createWrapper = ({ propsData = {} } = {}) =>
     mountExtended(Deployment, {
       propsData: {
@@ -152,6 +157,32 @@ describe('~/environments/components/deployment.vue', () => {
     });
   });
 
+  describe('commit message', () => {
+    describe('with commit', () => {
+      beforeEach(() => {
+        wrapper = createWrapper();
+      });
+
+      it('shows the commit component', () => {
+        const commit = wrapper.findComponent(Commit);
+        expect(commit.props('commit')).toBe(deployment.commit);
+      });
+    });
+
+    describe('without a commit', () => {
+      it('displays nothing', () => {
+        const noCommit = {
+          ...deployment,
+          commit: null,
+        };
+        wrapper = createWrapper({ propsData: { deployment: noCommit } });
+
+        const commit = wrapper.findComponent(Commit);
+        expect(commit.exists()).toBe(false);
+      });
+    });
+  });
+
   describe('collapse', () => {
     let collapse;
     let button;