Add latest changes from gitlab-org/gitlab@master

1 files changed, 24 insertions, 3 deletions

diff --git a/app/assets/javascripts/environments/components/deployment.vue b/app/assets/javascripts/environments/components/deployment.vue
index 62dc46251c4..77999bbe05b 100644
--- a/app/assets/javascripts/environments/components/deployment.vue
+++ b/app/assets/javascripts/environments/components/deployment.vue
@@ -1,10 +1,12 @@
 <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>