Merge branch 'afontaine/deployment-commit' into 'master'

Show commit author and message of deployment

See merge request gitlab-org/gitlab!79072

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;