Adds action to handle the create issue button

Moves component to inside mr widget
Fixes eslint errors

10 files changed, 86 insertions, 13 deletions

diff --git a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
index c3f775013eb..175424e9d73 100644
--- a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
+++ b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
@@ -32,6 +32,7 @@
         'summaryCounts',
         'modalTitle',
         'modalData',
+        'isCreatingNewIssue',
       ]),
 
       groupedSummaryText() {
@@ -56,12 +57,17 @@
     methods: {
       ...mapActions(['setEndpoint', 'fetchReports']),
       reportText(report) {
-        const summary = report.summary || {}; // TODO_SAM: Check with backend if summary is always present. if it is we may be able to remove this check.
+         // TODO_SAM: Check with backend if summary is always present.
+         // if it is we may be able to remove this check.
+        const summary = report.summary || {};
         return textBuilder(report.name, summary.failed, summary.resolved, summary.total);
       },
       getReportIcon(report) {
         return statusIcon(report.status);
       },
+      createIssue() {
+        // TODO_SAM
+      },
     },
   };
 </script>
@@ -100,6 +106,8 @@
       <modal
         :title="modalTitle"
         :modal-data="modalData"
+        :is-creating-new-issue="isCreatingNewIssue"
+        @createIssue="createIssue"
       />
     </div>
   </report-section>
diff --git a/app/assets/javascripts/reports/components/modal.vue b/app/assets/javascripts/reports/components/modal.vue
index 3eb7094f166..83edb6455a9 100644
--- a/app/assets/javascripts/reports/components/modal.vue
+++ b/app/assets/javascripts/reports/components/modal.vue
@@ -1,16 +1,13 @@
 <script>
   import Modal from '~/vue_shared/components/gl_modal.vue';
   import LoadingButton from '~/vue_shared/components/loading_button.vue';
-  import Icon from '~/vue_shared/components/icon.vue';
   import { fieldTypes } from '../constants';
 
   export default {
     components: {
       Modal,
       LoadingButton,
-      Icon,
     },
-
     props: {
       title: {
         type: String,
@@ -20,8 +17,20 @@
         type: Object,
         required: true,
       },
+      isCreatingNewIssue: {
+        type: Boolean,
+        required: true,
+      },
     },
     fieldTypes,
+    methods: {
+      handleCreateIssueClick() {
+        // TODO_SAM: Check with Shynia how to handle this.
+        // I believe we've agreed we'd do this in a new iteration
+        // we may need to hide the footer always. - We probably need to provide some params
+        this.$emit('createIssue');
+      },
+    },
   };
 </script>
 <template>
@@ -67,5 +76,23 @@
         </div>
       </div>
     </slot>
+    <div slot="footer">
+      <button
+        type="button"
+        class="btn btn-default"
+        data-dismiss="modal"
+      >
+        {{ __('Cancel' ) }}
+      </button>
+
+      <loading-button
+        v-if="canCreateIssuePermission"
+        :loading="isCreatingNewIssue"
+        :disabled="isCreatingNewIssue"
+        :label="__('Create issue')"
+        container-class="js-create-issue-btn btn btn-success btn-inverted"
+        @click="handleCreateIssueClick"
+      />
+    </div>
   </modal>
 </template>
diff --git a/app/assets/javascripts/reports/components/test_issue_body.vue b/app/assets/javascripts/reports/components/test_issue_body.vue
index 21dd1840807..0b01bee4557 100644
--- a/app/assets/javascripts/reports/components/test_issue_body.vue
+++ b/app/assets/javascripts/reports/components/test_issue_body.vue
@@ -25,8 +25,10 @@
 <template>
   <div class="report-block-list-issue-description prepend-top-5 append-bottom-5">
     <div class="report-block-list-issue-description-text">
-      <!-- TODO_SAM: I've duplicated this from modal_open_name, because it's expecting a title and we have name
-      Not sure if it's worth refactring now, or if it's ok to leave it duplciated and fix it when we move the components around
+      <!-- TODO_SAM: I've duplicated this from modal_open_name,
+      because it's expecting a title and we have name
+      Not sure if it's worth refactring now, or if it's ok
+      to leave it duplciated and fix it when we move the components around
        -->
       <button
         type="button"
diff --git a/app/assets/javascripts/reports/store/actions.js b/app/assets/javascripts/reports/store/actions.js
index 66d579b7556..c18885f23a4 100644
--- a/app/assets/javascripts/reports/store/actions.js
+++ b/app/assets/javascripts/reports/store/actions.js
@@ -2,6 +2,8 @@ import Visibility from 'visibilityjs';
 import $ from 'jquery';
 import axios from '../../lib/utils/axios_utils';
 import Poll from '../../lib/utils/poll';
+import flash from '../../flash';
+import { s__ } from '../../locale';
 import * as types from './mutation_types';
 
 export const setEndpoint = ({ commit }, endpoint) => commit(types.SET_ENDPOINT, endpoint);
@@ -72,5 +74,19 @@ export const openModal = ({ dispatch }, payload) => {
 
 export const setModalData = ({ commit }, payload) => commit(types.SET_ISSUE_MODAL_DATA, payload);
 
+export const createNewIssue = ({ state, dispatch }) => {
+  dispatch('requestCreateIssue');
+  return axios.post(state.modal.endpoint)
+    .then(() => dispatch('receiveCreateIssueSuccess'))
+    .catch(() => dispatch('receiveCreateIssueError'));
+};
+
+export const requestCreateIssue = ({ commit }) => commit(types.REQUEST_CREATE_ISSUE);
+export const receiveCreateIssueSuccess = ({ commit }) => commit(types.RECEIVE_CREATE_ISSUE_SUCCESS);
+export const receiveCreateIssueError = ({ commit }) => {
+  flash(s__('Report|There was an error creating the issue. Please try again.'));
+  commit(types.RECEIVE_CREATE_ISSUE_ERROR);
+};
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
diff --git a/app/assets/javascripts/reports/store/getters.js b/app/assets/javascripts/reports/store/getters.js
index 8d3efa0b2bf..ddc4b3d3e76 100644
--- a/app/assets/javascripts/reports/store/getters.js
+++ b/app/assets/javascripts/reports/store/getters.js
@@ -6,6 +6,7 @@ export const isLoading = state => state.isLoading;
 export const hasError = state => state.hasError;
 export const modalTitle = state => state.modal.title || '';
 export const modalData = state => state.modal.data || {};
+export const isCreatingNewIssue = state => state.modal.isLoading;
 
 export const summaryStatus = state => {
   if (state.isLoading) {
diff --git a/app/assets/javascripts/reports/store/mutation_types.js b/app/assets/javascripts/reports/store/mutation_types.js
index 599d4862dfe..6242c31b4e2 100644
--- a/app/assets/javascripts/reports/store/mutation_types.js
+++ b/app/assets/javascripts/reports/store/mutation_types.js
@@ -4,3 +4,6 @@ export const REQUEST_REPORTS = 'REQUEST_REPORTS';
 export const RECEIVE_REPORTS_SUCCESS = 'RECEIVE_REPORTS_SUCCESS';
 export const RECEIVE_REPORTS_ERROR = 'RECEIVE_REPORTS_ERROR';
 export const SET_ISSUE_MODAL_DATA = 'SET_ISSUE_MODAL_DATA';
+export const REQUEST_CREATE_ISSUE = 'REQUEST_CREATE_ISSUE';
+export const RECEIVE_CREATE_ISSUE_SUCCESS = 'RECEIVE_CREATE_ISSUE_SUCCESS';
+export const RECEIVE_CREATE_ISSUE_ERROR = 'RECEIVE_CREATE_ISSUE_ERROR';
diff --git a/app/assets/javascripts/reports/store/mutations.js b/app/assets/javascripts/reports/store/mutations.js
index 4ff9b10f28c..120ec177666 100644
--- a/app/assets/javascripts/reports/store/mutations.js
+++ b/app/assets/javascripts/reports/store/mutations.js
@@ -27,6 +27,7 @@ export default {
   },
   [types.SET_ISSUE_MODAL_DATA](state, payload) {
     Vue.set(state.modal, 'title', payload.issue.name);
+    Vue.set(state.modal, 'status', payload.status);
 
     Object.keys(payload.issue).forEach((key) => {
       if (Object.prototype.hasOwnProperty.call(state.modal.data, key)) {
@@ -34,4 +35,13 @@ export default {
       }
     });
   },
+  [types.REQUEST_CREATE_ISSUE](state) {
+    Vue.set(state.modal, 'isLoading', true);
+  },
+  [types.RECEIVE_CREATE_ISSUE_SUCCESS](state) {
+    Vue.set(state.modal, 'isLoading', false);
+  },
+  [types.RECEIVE_CREATE_ISSUE_ERROR](state) {
+    Vue.set(state.modal, 'isLoading', false);
+  },
 };
diff --git a/app/assets/javascripts/reports/store/state.js b/app/assets/javascripts/reports/store/state.js
index acb937351e4..4254f839fd7 100644
--- a/app/assets/javascripts/reports/store/state.js
+++ b/app/assets/javascripts/reports/store/state.js
@@ -33,6 +33,12 @@ export default () => ({
 
   modal: {
     title: null,
+
+    status: null,
+
+    isCreatingNewIssue: false,
+    hasError: false,
+
     data: {
       class: {
         value: null,
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index f356236fd11..77b40076fd9 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -36,7 +36,7 @@ import {
   notify,
   SourceBranchRemovalStatus,
 } from './dependencies';
-import GroupedTestReportsApp from '~/reports/components/grouped_test_reports_app.vue';
+import GroupedTestReportsApp from '../reports/components/grouped_test_reports_app.vue';
 import { setFaviconOverlay } from '../lib/utils/common_utils';
 
 export default {
@@ -262,12 +262,11 @@ export default {
       :deployment="deployment"
     />
 
-    <grouped-test-reports-app
-      v-if="mr.testResultsPath"
-      :endpoint="mr.testResultsPath"
-    />
-
     <div class="mr-section-container">
+      <grouped-test-reports-app
+        v-if="mr.testResultsPath"
+        :endpoint="mr.testResultsPath"
+      />
       <div class="mr-widget-section">
         <component
           :is="componentName"
diff --git a/app/assets/javascripts/vue_shared/components/reports/report_issues.vue b/app/assets/javascripts/vue_shared/components/reports/report_issues.vue
index 5ce3ece4cc5..47b2de8fcef 100644
--- a/app/assets/javascripts/vue_shared/components/reports/report_issues.vue
+++ b/app/assets/javascripts/vue_shared/components/reports/report_issues.vue
@@ -43,7 +43,8 @@ export default {
       return this.status === 'neutral';
     },
     isTypeTest() {
-      // TODO: Remove this. It's needed because of the EE port of this. Ideally there would be no type here.
+      // TODO: Remove this. It's needed because of the EE port of this.
+      // Ideally there would be no type here.
       return this.type === 'test';
     },
   },