From c6c493a7305ebe13db32025782e4f4a3a207eee4 Mon Sep 17 00:00:00 2001
From: Clement Ho <ClemMakesApps@gmail.com>
Date: Wed, 15 Nov 2017 17:13:20 -0600
Subject: Backport delete epic changes

---
 .../javascripts/issue_show/components/app.vue      | 17 ++++++--
 .../issue_show/components/edit_actions.vue         | 10 ++++-
 .../javascripts/issue_show/components/form.vue     |  8 +++-
 .../vue_shared/components/loading_button.vue       |  7 ++-
 app/assets/stylesheets/framework/blocks.scss       |  4 ++
 spec/javascripts/issue_show/components/app_spec.js | 51 ++++++++++++++++------
 .../issue_show/components/edit_actions_spec.js     |  9 ++++
 .../vue_shared/components/loading_button_spec.js   | 17 ++++++++
 8 files changed, 103 insertions(+), 20 deletions(-)

diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index d1aa83ea57f..e8ac8d3b5bb 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -29,6 +29,11 @@ export default {
       required: false,
       default: false,
     },
+    showDeleteButton: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     issuableRef: {
       type: String,
       required: true,
@@ -92,6 +97,11 @@ export default {
       type: String,
       required: true,
     },
+    issuableType: {
+      type: String,
+      required: false,
+      default: 'issue',
+    },
   },
   data() {
     const store = new Store({
@@ -157,21 +167,21 @@ export default {
         })
         .catch(() => {
           eventHub.$emit('close.form');
-          window.Flash('Error updating issue');
+          window.Flash(`Error updating ${this.issuableType}`);
         });
     },
     deleteIssuable() {
       this.service.deleteIssuable()
         .then(res => res.json())
         .then((data) => {
-          // Stop the poll so we don't get 404's with the issue not existing
+          // Stop the poll so we don't get 404's with the issuable not existing
           this.poll.stop();
 
           gl.utils.visitUrl(data.web_url);
         })
         .catch(() => {
           eventHub.$emit('close.form');
-          window.Flash('Error deleting issue');
+          window.Flash(`Error deleting ${this.issuableType}`);
         });
     },
   },
@@ -223,6 +233,7 @@ export default {
       :markdown-preview-path="markdownPreviewPath"
       :project-path="projectPath"
       :project-namespace="projectNamespace"
+      :show-delete-button="showDeleteButton"
     />
     <div v-else>
       <title-component
diff --git a/app/assets/javascripts/issue_show/components/edit_actions.vue b/app/assets/javascripts/issue_show/components/edit_actions.vue
index 8c81575fe6f..a539506bce2 100644
--- a/app/assets/javascripts/issue_show/components/edit_actions.vue
+++ b/app/assets/javascripts/issue_show/components/edit_actions.vue
@@ -13,6 +13,11 @@
         type: Object,
         required: true,
       },
+      showDeleteButton: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
     data() {
       return {
@@ -23,6 +28,9 @@
       isSubmitEnabled() {
         return this.formState.title.trim() !== '';
       },
+      shouldShowDeleteButton() {
+        return this.canDestroy && this.showDeleteButton;
+      },
     },
     methods: {
       closeForm() {
@@ -62,7 +70,7 @@
       Cancel
     </button>
     <button
-      v-if="canDestroy"
+      v-if="shouldShowDeleteButton"
       class="btn btn-danger pull-right append-right-default"
       :class="{ disabled: deleteLoading }"
       type="button"
diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue
index 28bf6c67ea5..8bb5c86d567 100644
--- a/app/assets/javascripts/issue_show/components/form.vue
+++ b/app/assets/javascripts/issue_show/components/form.vue
@@ -36,6 +36,11 @@
         type: String,
         required: true,
       },
+      showDeleteButton: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
     components: {
       lockedWarning,
@@ -81,6 +86,7 @@
       :markdown-docs-path="markdownDocsPath" />
     <edit-actions
       :form-state="formState"
-      :can-destroy="canDestroy" />
+      :can-destroy="canDestroy"
+      :show-delete-button="showDeleteButton" />
   </form>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue
index 0cc2653761c..247943f83e6 100644
--- a/app/assets/javascripts/vue_shared/components/loading_button.vue
+++ b/app/assets/javascripts/vue_shared/components/loading_button.vue
@@ -35,6 +35,11 @@ export default {
       type: String,
       required: false,
     },
+    containerClass: {
+      type: String,
+      required: false,
+      default: 'btn btn-align-content',
+    },
   },
   components: {
     loadingIcon,
@@ -49,9 +54,9 @@ export default {
 
 <template>
   <button
-    class="btn btn-align-content"
     @click="onClick"
     type="button"
+    :class="containerClass"
     :disabled="loading || disabled"
   >
       <transition name="fade">
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 9c1439dfad5..91976ca1f56 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -353,3 +353,7 @@
   display: -webkit-flex;
   display: flex;
 }
+
+.flex-right {
+  margin-left: auto;
+}
diff --git a/spec/javascripts/issue_show/components/app_spec.js b/spec/javascripts/issue_show/components/app_spec.js
index 2ea290108a4..5662c7387fb 100644
--- a/spec/javascripts/issue_show/components/app_spec.js
+++ b/spec/javascripts/issue_show/components/app_spec.js
@@ -223,23 +223,46 @@ describe('Issuable output', () => {
       });
     });
 
-    it('closes form on error', (done) => {
-      spyOn(window, 'Flash').and.callThrough();
-      spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve, reject) => {
-        reject();
-      }));
+    describe('error when updating', () => {
+      beforeEach(() => {
+        spyOn(window, 'Flash').and.callThrough();
+        spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve, reject) => {
+          reject();
+        }));
+      });
 
-      vm.updateIssuable();
+      it('closes form on error', (done) => {
+        vm.updateIssuable();
 
-      setTimeout(() => {
-        expect(
-          eventHub.$emit,
-        ).toHaveBeenCalledWith('close.form');
-        expect(
-          window.Flash,
-        ).toHaveBeenCalledWith('Error updating issue');
+        setTimeout(() => {
+          expect(
+            eventHub.$emit,
+          ).toHaveBeenCalledWith('close.form');
+          expect(
+            window.Flash,
+          ).toHaveBeenCalledWith('Error updating issue');
 
-        done();
+          done();
+        });
+      });
+
+      it('returns the correct error message for issuableType', (done) => {
+        vm.issuableType = 'merge request';
+
+        Vue.nextTick(() => {
+          vm.updateIssuable();
+
+          setTimeout(() => {
+            expect(
+              eventHub.$emit,
+            ).toHaveBeenCalledWith('close.form');
+            expect(
+              window.Flash,
+            ).toHaveBeenCalledWith('Error updating merge request');
+
+            done();
+          });
+        });
       });
     });
   });
diff --git a/spec/javascripts/issue_show/components/edit_actions_spec.js b/spec/javascripts/issue_show/components/edit_actions_spec.js
index f6625b748b6..d779ab7bb31 100644
--- a/spec/javascripts/issue_show/components/edit_actions_spec.js
+++ b/spec/javascripts/issue_show/components/edit_actions_spec.js
@@ -61,6 +61,15 @@ describe('Edit Actions components', () => {
     });
   });
 
+  it('should not show delete button if showDeleteButton is false', (done) => {
+    vm.showDeleteButton = false;
+
+    Vue.nextTick(() => {
+      expect(vm.$el.querySelector('.btn-danger')).toBeNull();
+      done();
+    });
+  });
+
   describe('updateIssuable', () => {
     it('sends update.issauble event when clicking save button', () => {
       vm.$el.querySelector('.btn-save').click();
diff --git a/spec/javascripts/vue_shared/components/loading_button_spec.js b/spec/javascripts/vue_shared/components/loading_button_spec.js
index 97c8a08fcdd..c1eabdede00 100644
--- a/spec/javascripts/vue_shared/components/loading_button_spec.js
+++ b/spec/javascripts/vue_shared/components/loading_button_spec.js
@@ -66,6 +66,23 @@ describe('LoadingButton', function () {
     });
   });
 
+  describe('container class', () => {
+    it('should default to btn btn-align-content', () => {
+      vm = mountComponent(LoadingButton, {});
+      expect(vm.$el.classList.contains('btn')).toEqual(true);
+      expect(vm.$el.classList.contains('btn-align-content')).toEqual(true);
+    });
+
+    it('should be configurable through props', () => {
+      vm = mountComponent(LoadingButton, {
+        containerClass: 'test-class',
+      });
+      expect(vm.$el.classList.contains('btn')).toEqual(false);
+      expect(vm.$el.classList.contains('btn-align-content')).toEqual(false);
+      expect(vm.$el.classList.contains('test-class')).toEqual(true);
+    });
+  });
+
   describe('click callback prop', () => {
     it('calls given callback when normal', () => {
       vm = mountComponent(LoadingButton, {
-- 
cgit v1.2.1