Merge branch 'afontaine/latest-vs-upcoming-badge' into 'master'

Show badge indicating the latest deployment

See merge request gitlab-org/gitlab!78211

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

 <script>
+import { GlBadge } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import DeploymentStatusBadge from './deployment_status_badge.vue';
 
 export default {
   components: {
     DeploymentStatusBadge,
+    GlBadge,
   },
   props: {
     deployment: {
       type: Object,
       required: true,
     },
+    latest: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   computed: {
     status() {
       return this.deployment?.status;
     },
   },
+  i18n: {
+    latestBadge: s__('Deployment|Latest Deployed'),
+  },
 };
 </script>
 <template>
-  <div>
+  <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>
 </template>

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

@@ -144,7 +144,7 @@ export default {
     'gl-border-t-solid',
     'gl-border-1',
     'gl-py-5',
-    'gl-pl-7',
+    'gl-md-pl-7',
     'gl-bg-gray-10',
   ],
 };
@@ -255,10 +255,19 @@ export default {
     </div>
     <gl-collapse :visible="visible">
       <div v-if="lastDeployment" :class="$options.deploymentClasses">
-        <deployment :deployment="lastDeployment" :class="{ 'gl-ml-7': inFolder }" />
+        <deployment
+          :deployment="lastDeployment"
+          :class="{ 'gl-ml-7': inFolder }"
+          latest
+          class="gl-pl-4"
+        />
       </div>
       <div v-if="upcomingDeployment" :class="$options.deploymentClasses">
-        <deployment :deployment="upcomingDeployment" :class="{ 'gl-ml-7': inFolder }" />
+        <deployment
+          :deployment="upcomingDeployment"
+          :class="{ 'gl-ml-7': inFolder }"
+          class="gl-pl-4"
+        />
       </div>
     </gl-collapse>
   </div>

locale/gitlab.pot

@@ -11997,6 +11997,9 @@ msgstr ""
 msgid "Deployment|Failed"
 msgstr ""
 
+msgid "Deployment|Latest Deployed"
+msgstr ""
+
 msgid "Deployment|Running"
 msgstr ""
 

spec/frontend/environments/deployment_spec.js

 import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { s__ } from '~/locale';
 import Deployment from '~/environments/components/deployment.vue';
 import DeploymentStatusBadge from '~/environments/components/deployment_status_badge.vue';
 import { resolvedEnvironment } from './graphql/mock_data';
@@ -26,4 +27,22 @@ describe('~/environments/components/deployment.vue', () => {
       );
     });
   });
+
+  describe('latest', () => {
+    it('should show a badge if the deployment is latest', () => {
+      wrapper = createWrapper({ propsData: { latest: true } });
+
+      const badge = wrapper.findByText(s__('Deployment|Latest Deployed'));
+
+      expect(badge.exists()).toBe(true);
+    });
+
+    it('should not show a badge if the deployment is not latest', () => {
+      wrapper = createWrapper();
+
+      const badge = wrapper.findByText(s__('Deployment|Latest Deployed'));
+
+      expect(badge.exists()).toBe(false);
+    });
+  });
 });