Adds missing status in deployment widget

Renders created and canceled status in MR widget

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

@@ -42,6 +42,8 @@ export default {
     running: __('Deploying to'),
     success: __('Deployed to'),
     failed: __('Failed to deploy to'),
+    created: __('Will deploy to'),
+    canceled: __('Failed to deploy to'),
   },
   data() {
     return {

changelogs/unreleased/53578-fe-deployment-status.yml

+---
+title: Adds states to the deployment widget
+merge_request:
+author:
+type: added

locale/gitlab.pot

@@ -7191,6 +7191,9 @@ msgstr ""
 msgid "Wiki|Wiki Pages"
 msgstr ""
 
+msgid "Will deploy to"
+msgstr ""
+
 msgid "Withdraw Access Request"
 msgstr ""
 

spec/javascripts/vue_mr_widget/components/deployment_spec.js

@@ -252,5 +252,33 @@ describe('Deployment component', () => {
         );
       });
     });
+
+    describe('created', () => {
+      beforeEach(() => {
+        vm = mountComponent(Component, {
+          deployment: Object.assign({}, deploymentMockData, { status: 'created' }),
+          showMetrics: true,
+        });
+      });
+
+      it('renders information about created deployment', () => {
+        expect(vm.$el.querySelector('.js-deployment-info').textContent).toContain('Will deploy to');
+      });
+    });
+
+    describe('canceled', () => {
+      beforeEach(() => {
+        vm = mountComponent(Component, {
+          deployment: Object.assign({}, deploymentMockData, { status: 'canceled' }),
+          showMetrics: true,
+        });
+      });
+
+      it('renders information about canceled deployment', () => {
+        expect(vm.$el.querySelector('.js-deployment-info').textContent).toContain(
+          'Failed to deploy to',
+        );
+      });
+    });
   });
 });