Add deployment status badge

This badge indicates the state of the current deployment. Useful for
both finished and upcoming deployments.

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

 <script>
+import DeploymentStatusBadge from './deployment_status_badge.vue';
+
 export default {
+  components: {
+    DeploymentStatusBadge,
+  },
   props: {
     deployment: {
       type: Object,
       required: true,
     },
   },
+  computed: {
+    status() {
+      return this.deployment?.status;
+    },
+  },
 };
 </script>
 <template>
-  <div></div>
+  <div>
+    <deployment-status-badge v-if="status" :status="status" />
+  </div>
 </template>

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

+<script>
+import { GlBadge } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+const STATUS_TEXT = {
+  created: s__('Deployment|Created'),
+  running: s__('Deployment|Running'),
+  success: s__('Deployment|Success'),
+  failed: s__('Deployment|Failed'),
+  canceled: s__('Deployment|Cancelled'),
+  skipped: s__('Deployment|Skipped'),
+  blocked: s__('Deployment|Waiting'),
+};
+
+const STATUS_VARIANT = {
+  success: 'success',
+  running: 'info',
+  failed: 'danger',
+  created: 'neutral',
+  canceled: 'neutral',
+  skipped: 'neutral',
+  blocked: 'neutral',
+};
+
+const STATUS_ICON = {
+  success: 'status_success',
+  running: 'status_running',
+  failed: 'status_failed',
+  created: 'status_created',
+  canceled: 'status_canceled',
+  skipped: 'status_skipped',
+  blocked: 'status_manual',
+};
+
+export default {
+  components: {
+    GlBadge,
+  },
+  props: {
+    status: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    icon() {
+      return STATUS_ICON[this.status];
+    },
+    text() {
+      return STATUS_TEXT[this.status];
+    },
+    variant() {
+      return STATUS_VARIANT[this.status];
+    },
+  },
+};
+</script>
+<template>
+  <gl-badge v-if="status" :icon="icon" :variant="variant">{{ text }}</gl-badge>
+</template>

locale/gitlab.pot

@@ -11988,9 +11988,30 @@ msgstr[1] ""
 msgid "Deployment|API"
 msgstr ""
 
+msgid "Deployment|Cancelled"
+msgstr ""
+
+msgid "Deployment|Created"
+msgstr ""
+
+msgid "Deployment|Failed"
+msgstr ""
+
+msgid "Deployment|Running"
+msgstr ""
+
+msgid "Deployment|Skipped"
+msgstr ""
+
+msgid "Deployment|Success"
+msgstr ""
+
 msgid "Deployment|This deployment was created using the API"
 msgstr ""
 
+msgid "Deployment|Waiting"
+msgstr ""
+
 msgid "Deployment|blocked"
 msgstr ""
 

spec/frontend/environments/deployment_spec.js

+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import Deployment from '~/environments/components/deployment.vue';
+import DeploymentStatusBadge from '~/environments/components/deployment_status_badge.vue';
+import { resolvedEnvironment } from './graphql/mock_data';
+
+describe('~/environments/components/deployment.vue', () => {
+  let wrapper;
+
+  const createWrapper = ({ propsData = {} } = {}) =>
+    mountExtended(Deployment, {
+      propsData: {
+        deployment: resolvedEnvironment.lastDeployment,
+        ...propsData,
+      },
+    });
+
+  afterEach(() => {
+    wrapper?.destroy();
+  });
+
+  describe('status', () => {
+    it('should pass the deployable status to the badge', () => {
+      wrapper = createWrapper();
+      expect(wrapper.findComponent(DeploymentStatusBadge).props('status')).toBe(
+        resolvedEnvironment.lastDeployment.status,
+      );
+    });
+  });
+});

spec/frontend/environments/deployment_status_badge_spec.js

+import { GlBadge } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { s__ } from '~/locale';
+import DeploymentStatusBadge from '~/environments/components/deployment_status_badge.vue';
+
+describe('~/environments/components/deployment_status_badge.vue', () => {
+  let wrapper;
+
+  const createWrapper = ({ propsData = {} } = {}) =>
+    mountExtended(DeploymentStatusBadge, {
+      propsData,
+    });
+
+  describe.each`
+    status        | text                           | variant      | icon
+    ${'created'}  | ${s__('Deployment|Created')}   | ${'neutral'} | ${'status_created'}
+    ${'running'}  | ${s__('Deployment|Running')}   | ${'info'}    | ${'status_running'}
+    ${'success'}  | ${s__('Deployment|Success')}   | ${'success'} | ${'status_success'}
+    ${'failed'}   | ${s__('Deployment|Failed')}    | ${'danger'}  | ${'status_failed'}
+    ${'canceled'} | ${s__('Deployment|Cancelled')} | ${'neutral'} | ${'status_canceled'}
+    ${'skipped'}  | ${s__('Deployment|Skipped')}   | ${'neutral'} | ${'status_skipped'}
+    ${'blocked'}  | ${s__('Deployment|Waiting')}   | ${'neutral'} | ${'status_manual'}
+  `('$status', ({ status, text, variant, icon }) => {
+    let badge;
+
+    beforeEach(() => {
+      wrapper = createWrapper({ propsData: { status } });
+      badge = wrapper.findComponent(GlBadge);
+    });
+
+    it(`sets the text to ${text}`, () => {
+      expect(wrapper.text()).toBe(text);
+    });
+
+    it(`sets the variant to ${variant}`, () => {
+      expect(badge.props('variant')).toBe(variant);
+    });
+    it(`sets the icon to ${icon}`, () => {
+      expect(badge.props('icon')).toBe(icon);
+    });
+  });
+});