Add latest changes from gitlab-org/gitlab@master

3 files changed, 28 insertions, 7 deletions

diff --git a/app/assets/javascripts/incidents/components/incidents_list.vue b/app/assets/javascripts/incidents/components/incidents_list.vue
index f10c2901adb..f15aed739eb 100644
--- a/app/assets/javascripts/incidents/components/incidents_list.vue
+++ b/app/assets/javascripts/incidents/components/incidents_list.vue
@@ -7,9 +7,11 @@ import {
   GlAvatarLink,
   GlAvatar,
   GlTooltipDirective,
+  GlButton,
 } from '@gitlab/ui';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { s__ } from '~/locale';
+import { mergeUrlParams } from '~/lib/utils/url_utility';
 import getIncidents from '../graphql/queries/get_incidents.query.graphql';
 import { I18N } from '../constants';
 
@@ -48,12 +50,13 @@ export default {
     GlAvatarsInline,
     GlAvatarLink,
     GlAvatar,
+    GlButton,
     TimeAgoTooltip,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  inject: ['projectPath'],
+  inject: ['projectPath', 'newIssuePath', 'incidentTemplateName'],
   apollo: {
     incidents: {
       query: getIncidents,
@@ -73,6 +76,7 @@ export default {
     return {
       errored: false,
       isErrorAlertDismissed: false,
+      redirecting: false,
     };
   },
   computed: {
@@ -90,6 +94,9 @@ export default {
         [bodyTrClass]: !this.loading && this.hasIncidents,
       };
     },
+    newIncidentPath() {
+      return mergeUrlParams({ issuable_template: this.incidentTemplateName }, this.newIssuePath);
+    },
   },
   methods: {
     hasAssignees(assignees) {
@@ -104,6 +111,21 @@ export default {
       {{ $options.i18n.errorMsg }}
     </gl-alert>
 
+    <div class="gl-display-flex gl-justify-content-end">
+      <gl-button
+        class="gl-mt-3 create-incident-button"
+        data-testid="createIncidentBtn"
+        :loading="redirecting"
+        :disabled="redirecting"
+        category="primary"
+        variant="success"
+        :href="newIncidentPath"
+        @click="redirecting = true"
+      >
+        {{ $options.i18n.createIncidentBtnLabel }}
+      </gl-button>
+    </div>
+
     <h4 class="gl-display-block d-md-none my-3">
       {{ s__('IncidentManagement|Incidents') }}
     </h4>
diff --git a/app/assets/javascripts/incidents/constants.js b/app/assets/javascripts/incidents/constants.js
index 7eac77f7a7f..3e3d0ef71e1 100644
--- a/app/assets/javascripts/incidents/constants.js
+++ b/app/assets/javascripts/incidents/constants.js
@@ -5,4 +5,5 @@ export const I18N = {
   errorMsg: s__('IncidentManagement|There was an error displaying the incidents.'),
   noIncidents: s__('IncidentManagement|No incidents to display.'),
   unassigned: s__('IncidentManagement|Unassigned'),
+  createIncidentBtnLabel: s__('IncidentManagement|Create incident'),
 };
diff --git a/app/assets/javascripts/incidents/list.js b/app/assets/javascripts/incidents/list.js
index f1599477c1a..f6198981bb5 100644
--- a/app/assets/javascripts/incidents/list.js
+++ b/app/assets/javascripts/incidents/list.js
@@ -8,7 +8,7 @@ export default () => {
   const selector = '#js-incidents';
 
   const domEl = document.querySelector(selector);
-  const { projectPath } = domEl.dataset;
+  const { projectPath, newIssuePath, incidentTemplateName } = domEl.dataset;
 
   const apolloProvider = new VueApollo({
     defaultClient: createDefaultClient(),
@@ -18,17 +18,15 @@ export default () => {
     el: selector,
     provide: {
       projectPath,
+      incidentTemplateName,
+      newIssuePath,
     },
     apolloProvider,
     components: {
       IncidentsList,
     },
     render(createElement) {
-      return createElement('incidents-list', {
-        props: {
-          projectPath,
-        },
-      });
+      return createElement('incidents-list');
     },
   });
 };