Add deployment IID to new environments table

Show a deployment's IID to ensure users can refer to a specific
deployment easier.

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

 <script>
-import { GlBadge } from '@gitlab/ui';
+import { GlBadge, GlIcon, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import DeploymentStatusBadge from './deployment_status_badge.vue';
 
@@ -7,6 +7,10 @@ export default {
   components: {
     DeploymentStatusBadge,
     GlBadge,
+    GlIcon,
+  },
+  directives: {
+    GlTooltip,
   },
   props: {
     deployment: {
@@ -23,9 +27,13 @@ export default {
     status() {
       return this.deployment?.status;
     },
+    iid() {
+      return this.deployment?.iid;
+    },
   },
   i18n: {
     latestBadge: s__('Deployment|Latest Deployed'),
+    deploymentId: s__('Deployment|Deployment ID'),
   },
 };
 </script>
@@ -33,5 +41,13 @@ export default {
   <div class="gl-display-flex gl-align-items-center gl-gap-x-3">
     <deployment-status-badge v-if="status" :status="status" />
     <gl-badge v-if="latest" variant="info">{{ $options.i18n.latestBadge }}</gl-badge>
+    <div
+      v-if="iid"
+      v-gl-tooltip
+      :title="$options.i18n.deploymentId"
+      :aria-label="$options.i18n.deploymentId"
+    >
+      <gl-icon ref="deployment-iid-icon" name="deployments" /> {{ iid }}
+    </div>
   </div>
 </template>

locale/gitlab.pot

@@ -11994,6 +11994,9 @@ msgstr ""
 msgid "Deployment|Created"
 msgstr ""
 
+msgid "Deployment|Deployment ID"
+msgstr ""
+
 msgid "Deployment|Failed"
 msgstr ""
 

spec/frontend/environments/deployment_spec.js

@@ -5,12 +5,13 @@ import DeploymentStatusBadge from '~/environments/components/deployment_status_b
 import { resolvedEnvironment } from './graphql/mock_data';
 
 describe('~/environments/components/deployment.vue', () => {
+  const deployment = resolvedEnvironment.lastDeployment;
   let wrapper;
 
   const createWrapper = ({ propsData = {} } = {}) =>
     mountExtended(Deployment, {
       propsData: {
-        deployment: resolvedEnvironment.lastDeployment,
+        deployment,
         ...propsData,
       },
     });
@@ -22,9 +23,7 @@ describe('~/environments/components/deployment.vue', () => {
   describe('status', () => {
     it('should pass the deployable status to the badge', () => {
       wrapper = createWrapper();
-      expect(wrapper.findComponent(DeploymentStatusBadge).props('status')).toBe(
-        resolvedEnvironment.lastDeployment.status,
-      );
+      expect(wrapper.findComponent(DeploymentStatusBadge).props('status')).toBe(deployment.status);
     });
   });
 
@@ -45,4 +44,41 @@ describe('~/environments/components/deployment.vue', () => {
       expect(badge.exists()).toBe(false);
     });
   });
+
+  describe('iid', () => {
+    const findIid = () => wrapper.findByTitle(s__('Deployment|Deployment ID'));
+    const findDeploymentIcon = () => wrapper.findComponent({ ref: 'deployment-iid-icon' });
+
+    describe('is present', () => {
+      beforeEach(() => {
+        wrapper = createWrapper();
+      });
+
+      it('should show the iid', () => {
+        const iid = findIid();
+        expect(iid.exists()).toBe(true);
+      });
+
+      it('should show an icon for the iid', () => {
+        const deploymentIcon = findDeploymentIcon();
+        expect(deploymentIcon.props('name')).toBe('deployments');
+      });
+    });
+
+    describe('is not present', () => {
+      beforeEach(() => {
+        wrapper = createWrapper({ propsData: { deployment: { ...deployment, iid: '' } } });
+      });
+
+      it('should not show the iid', () => {
+        const iid = findIid();
+        expect(iid.exists()).toBe(false);
+      });
+
+      it('should not show an icon for the iid', () => {
+        const deploymentIcon = findDeploymentIcon();
+        expect(deploymentIcon.exists()).toBe(false);
+      });
+    });
+  });
 });