Show short SHA of commit of deployment

Users want to know what commit has been deployed, and may need to easily
copy it to use in other areas.

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

 <script>
 import { GlBadge, GlIcon, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import DeploymentStatusBadge from './deployment_status_badge.vue';
 
 export default {
   components: {
+    ClipboardButton,
     DeploymentStatusBadge,
     GlBadge,
     GlIcon,
@@ -30,15 +32,20 @@ export default {
     iid() {
       return this.deployment?.iid;
     },
+    shortSha() {
+      return this.deployment?.commit?.shortId;
+    },
   },
   i18n: {
     latestBadge: s__('Deployment|Latest Deployed'),
     deploymentId: s__('Deployment|Deployment ID'),
+    copyButton: __('Copy commit SHA'),
+    commitSha: __('Commit SHA'),
   },
 };
 </script>
 <template>
-  <div class="gl-display-flex gl-align-items-center gl-gap-x-3">
+  <div class="gl-display-flex gl-align-items-center gl-gap-x-3 gl-font-sm gl-text-gray-700">
     <deployment-status-badge v-if="status" :status="status" />
     <gl-badge v-if="latest" variant="info">{{ $options.i18n.latestBadge }}</gl-badge>
     <div
@@ -47,7 +54,21 @@ export default {
       :title="$options.i18n.deploymentId"
       :aria-label="$options.i18n.deploymentId"
     >
-      <gl-icon ref="deployment-iid-icon" name="deployments" /> {{ iid }}
+      <gl-icon ref="deployment-iid-icon" name="deployments" /> #{{ iid }}
+    </div>
+    <div
+      v-if="shortSha"
+      data-testid="deployment-commit-sha"
+      class="gl-font-monospace gl-display-flex gl-align-items-center"
+    >
+      <gl-icon ref="deployment-commit-icon" name="commit" class="gl-mr-2" />
+      <span v-gl-tooltip :title="$options.i18n.commitSha">{{ shortSha }}</span>
+      <clipboard-button
+        :text="shortSha"
+        category="tertiary"
+        :title="$options.i18n.copyButton"
+        size="small"
+      />
     </div>
   </div>
 </template>

locale/gitlab.pot

@@ -8716,6 +8716,9 @@ msgstr ""
 msgid "Commit Message"
 msgstr ""
 
+msgid "Commit SHA"
+msgstr ""
+
 msgid "Commit changes"
 msgstr ""
 

spec/frontend/environments/deployment_spec.js

 import { mountExtended } from 'helpers/vue_test_utils_helper';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import Deployment from '~/environments/components/deployment.vue';
 import DeploymentStatusBadge from '~/environments/components/deployment_status_badge.vue';
 import { resolvedEnvironment } from './graphql/mock_data';
@@ -81,4 +82,47 @@ describe('~/environments/components/deployment.vue', () => {
       });
     });
   });
+
+  describe('shortSha', () => {
+    describe('is present', () => {
+      beforeEach(() => {
+        wrapper = createWrapper();
+      });
+
+      it('shows the short SHA for the commit of the deployment', () => {
+        const sha = wrapper.findByTitle(__('Commit SHA'));
+
+        expect(sha.exists()).toBe(true);
+        expect(sha.text()).toBe(deployment.commit.shortId);
+      });
+
+      it('shows the commit icon', () => {
+        const icon = wrapper.findComponent({ ref: 'deployment-commit-icon' });
+        expect(icon.props('name')).toBe('commit');
+      });
+
+      it('shows a copy button for the sha', () => {
+        const button = wrapper.findComponent(ClipboardButton);
+        expect(button.props()).toMatchObject({
+          text: deployment.commit.shortId,
+          title: __('Copy commit SHA'),
+        });
+      });
+    });
+
+    describe('is not present', () => {
+      it('does not show the short SHA for the commit of the deployment', () => {
+        wrapper = createWrapper({
+          propsData: {
+            deployment: {
+              ...deployment,
+              commit: null,
+            },
+          },
+        });
+        const sha = wrapper.findByTestId('deployment-commit-sha');
+        expect(sha.exists()).toBe(false);
+      });
+    });
+  });
 });