Backport delete epic changes

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

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"

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>

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">

app/assets/stylesheets/framework/blocks.scss

@@ -353,3 +353,7 @@
   display: -webkit-flex;
   display: flex;
 }
+
+.flex-right {
+  margin-left: auto;
+}

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();
+          });
+        });
       });
     });
   });

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();

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, {