Shows delete button if permissions are correct

[ci skip]

app/assets/javascripts/issue_show/components/app.vue

@@ -19,6 +19,10 @@ export default {
       required: true,
       type: Boolean,
     },
+    canDestroy: {
+      required: true,
+      type: Boolean,
+    },
     issuableRef: {
       type: String,
       required: true,
@@ -134,6 +138,7 @@ export default {
       :updated-at="state.updatedAt"
       :task-status="state.taskStatus" />
     <edit-actions
-      v-if="canUpdate && showForm" />
+      v-if="canUpdate && showForm"
+      :can-destroy="canDestroy" />
   </div>
 </template>

app/assets/javascripts/issue_show/components/edit_actions.vue

@@ -2,6 +2,12 @@
   import eventHub from '../event_hub';
 
   export default {
+    props: {
+      canDestroy: {
+        type: Boolean,
+        required: true,
+      },
+    },
     data() {
       return {
         deleteLoading: false,
@@ -50,6 +56,7 @@
       Cancel
     </button>
     <button
+      v-if="canDestroy"
       class="btn btn-danger pull-right append-right-default"
       :class="{ disabled: deleteLoading }"
       type="button"

app/assets/javascripts/issue_show/index.js

@@ -22,12 +22,14 @@ document.addEventListener('DOMContentLoaded', () => {
       const issuableDescriptionTextarea = issuableElement.querySelector('.js-task-list-field');
       const {
         canUpdate,
+        canDestroy,
         endpoint,
         issuableRef,
       } = issuableElement.dataset;
 
       return {
         canUpdate: gl.utils.convertPermissionToBoolean(canUpdate),
+        canDestroy: gl.utils.convertPermissionToBoolean(canDestroy),
         endpoint,
         issuableRef,
         initialTitle: issuableTitleElement.innerHTML,
@@ -56,6 +58,7 @@ document.addEventListener('DOMContentLoaded', () => {
       return createElement('issuable-app', {
         props: {
           canUpdate: this.canUpdate,
+          canDestroy: this.canDestroy,
           endpoint: this.endpoint,
           issuableRef: this.issuableRef,
           initialTitle: this.initialTitle,

app/views/projects/issues/show.html.haml

@@ -53,6 +53,7 @@
   .detail-page-description.content-block
     #js-issuable-app{ "data" => { "endpoint" => namespace_project_issue_path(@project.namespace, @project, @issue),
       "can-update" => can?(current_user, :update_issue, @issue).to_s,
+      "can-destroy" => can?(current_user, :destroy_issue, @issue).to_s,
       "issuable-ref" => @issue.to_reference,
     } }
       %h2.title= markdown_field(@issue, :title)

spec/javascripts/issue_show/components/app_spec.js

@@ -28,12 +28,13 @@ describe('Issuable output', () => {
     vm = new IssuableDescriptionComponent({
       propsData: {
         canUpdate: true,
+        canDestroy: true,
         endpoint: '/gitlab-org/gitlab-shell/issues/9/rendered_title',
         issuableRef: '#1',
         initialTitle: '',
         initialDescriptionHtml: '',
         initialDescriptionText: '',
-        showForm: true,
+        showForm: false,
       },
     }).$mount();
   });
@@ -62,6 +63,31 @@ describe('Issuable output', () => {
     });
   });
 
+  it('shows actions if permissions are correct', (done) => {
+    vm.showForm = true;
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.btn'),
+      ).not.toBeNull();
+
+      done();
+    });
+  });
+
+  it('does not show actions if permissions are incorrect', (done) => {
+    vm.showForm = true;
+    vm.canUpdate = false;
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.btn'),
+      ).toBeNull();
+
+      done();
+    });
+  });
+
   describe('updateIssuable', () => {
     it('correctly updates issuable data', (done) => {
       spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => {

spec/javascripts/issue_show/components/edit_actions_spec.js

@@ -10,7 +10,11 @@ describe('Edit Actions components', () => {
 
     spyOn(eventHub, '$emit');
 
-    vm = new Component().$mount();
+    vm = new Component({
+      propsData: {
+        canDestroy: true,
+      },
+    }).$mount();
 
     Vue.nextTick(done);
   });
@@ -25,6 +29,18 @@ describe('Edit Actions components', () => {
     ).toBe(0);
   });
 
+  it('does not render delete button if canUpdate is false', (done) => {
+    vm.canDestroy = 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();