Don't show inline edit button when canUpdate is falseadd-inline-edit-button

3 files changed, 16 insertions, 2 deletions

diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index f3bfd1b7296..d1aa83ea57f 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -227,6 +227,7 @@ export default {
     <div v-else>
       <title-component
         :issuable-ref="issuableRef"
+        :can-update="canUpdate"
         :title-html="state.titleHtml"
         :title-text="state.titleText"
         :show-inline-edit-button="showInlineEditButton"
diff --git a/app/assets/javascripts/issue_show/components/title.vue b/app/assets/javascripts/issue_show/components/title.vue
index 89a29cf32a1..d60e6780a06 100644
--- a/app/assets/javascripts/issue_show/components/title.vue
+++ b/app/assets/javascripts/issue_show/components/title.vue
@@ -17,6 +17,11 @@
         type: String,
         required: true,
       },
+      canUpdate: {
+        required: false,
+        type: Boolean,
+        default: false,
+      },
       titleHtml: {
         type: String,
         required: true,
@@ -71,7 +76,7 @@
     </h2>
     <button
       v-tooltip
-      v-if="showInlineEditButton"
+      v-if="showInlineEditButton && canUpdate"
       type="button"
       class="btn-blank btn-edit note-action-button"
       v-html="pencilIcon"
diff --git a/spec/javascripts/issue_show/components/title_spec.js b/spec/javascripts/issue_show/components/title_spec.js
index 9be7f76a793..2b554916e20 100644
--- a/spec/javascripts/issue_show/components/title_spec.js
+++ b/spec/javascripts/issue_show/components/title_spec.js
@@ -80,13 +80,21 @@ describe('Title component', () => {
       expect(vm.$el.querySelector('.note-action-button')).toBeNull();
     });
 
-    it('should show if showInlineEditButton', () => {
+    it('should not show if canUpdate is false', () => {
       vm.showInlineEditButton = true;
+      vm.canUpdate = false;
+      expect(vm.$el.querySelector('.note-action-button')).toBeNull();
+    });
+
+    it('should show if showInlineEditButton and canUpdate', () => {
+      vm.showInlineEditButton = true;
+      vm.canUpdate = true;
       expect(vm.$el.querySelector('.note-action-button')).toBeDefined();
     });
 
     it('should trigger open.form event when clicked', () => {
       vm.showInlineEditButton = true;
+      vm.canUpdate = true;
 
       Vue.nextTick(() => {
         vm.$el.querySelector('.note-action-button').click();