1 files changed, 30 insertions, 3 deletions
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>