Add the possibility to lock issuables from the frontend

6 files changed, 74 insertions, 1 deletions

diff --git a/app/assets/javascripts/discussion_lock.js b/app/assets/javascripts/discussion_lock.js
new file mode 100644
index 00000000000..7bf83e9b8a0
--- /dev/null
+++ b/app/assets/javascripts/discussion_lock.js
@@ -0,0 +1,46 @@
+class DiscussionLock {
+  constructor(containerElm) {
+    this.containerElm = containerElm;
+
+    const lockButton = containerElm.querySelector('.js-discussion-lock-button');
+    console.log(lockButton);
+    if (lockButton) {
+      // remove class so we don't bind twice
+      lockButton.classList.remove('js-discussion-lock-button');
+      console.log(lockButton);
+      lockButton.addEventListener('click', this.toggleDiscussionLock.bind(this));
+    }
+  }
+
+  toggleDiscussionLock(event) {
+    const button = event.currentTarget;
+    const buttonSpan = button.querySelector('span');
+    if (!buttonSpan || button.classList.contains('disabled')) {
+      return;
+    }
+    button.classList.add('disabled');
+
+    const url = this.containerElm.dataset.url;
+    const lock = this.containerElm.dataset.lock;
+    const issuableType = this.containerElm.dataset.issuableType;
+
+    const data = {}
+    data[issuableType] = {}
+    data[issuableType].discussion_locked = lock
+
+    $.ajax({
+      url,
+      data: data,
+      type: 'PUT'
+    }).done((data) => {
+      button.classList.remove('disabled');
+    });
+  }
+
+  static bindAll(selector) {
+    [].forEach.call(document.querySelectorAll(selector), elm => new DiscussionLock(elm));
+  }
+}
+
+window.gl = window.gl || {};
+window.gl.DiscussionLock = DiscussionLock;
diff --git a/app/assets/javascripts/init_issuable_sidebar.js b/app/assets/javascripts/init_issuable_sidebar.js
index 29e3d2ea94e..8857601f530 100644
--- a/app/assets/javascripts/init_issuable_sidebar.js
+++ b/app/assets/javascripts/init_issuable_sidebar.js
@@ -13,6 +13,7 @@ export default () => {
   new LabelsSelect();
   new IssuableContext(sidebarOptions.currentUser);
   gl.Subscription.bindAll('.subscription');
+  gl.DiscussionLock.bindAll('.discussion-lock');
   new gl.DueDateSelectors();
   window.sidebar = new Sidebar();
 };
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 0bc31a56684..ea1d50de965 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -80,6 +80,7 @@ import './copy_as_gfm';
 import './copy_to_clipboard';
 import './create_label';
 import './diff';
+import './discussion_lock';
 import './dropzone_input';
 import './due_date_select';
 import './files_comment_button';
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index e437bad4912..94439ed94a6 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -703,6 +703,12 @@ ul.notes {
   color: $note-disabled-comment-color;
   padding: 90px 0;
 
+  &.discussion-locked {
+    border: none;
+    background-color: $white-light;
+  }
+
+
   a {
     color: $gl-link-color;
   }
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 9cae3f51825..38a54c232d0 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -131,6 +131,17 @@
           %button.btn.btn-default.pull-right.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
             %span= subscribed ? 'Unsubscribe' : 'Subscribe'
 
+      - if can_edit_issuable
+        - locked = issuable.discussion_locked?
+        .block.light.discussion-lock{ data: { lock: (!locked).to_s, url: "#{issuable_json_path(issuable)}?basic=true", issuable_type: issuable.class.to_s.underscore } }
+          .sidebar-collapsed-icon
+            = icon('rss', 'aria-hidden': 'true')
+          %span.issuable-header-text.hide-collapsed.pull-left
+            Discussion Lock
+          - subscribtion_status = locked ? 'locked' : 'not locked'
+          %button.btn.btn-default.pull-right.js-discussion-lock-button.issuable-discussion-lock-button.hide-collapsed{ type: "button" }
+            %span= locked ? 'Unlock' : 'Lock'
+
       - project_ref = cross_project_reference(@project, issuable)
       .block.project-reference
         .sidebar-collapsed-icon.dont-change-state
diff --git a/app/views/shared/notes/_notes_with_form.html.haml b/app/views/shared/notes/_notes_with_form.html.haml
index e3e86709b8f..371a9523de9 100644
--- a/app/views/shared/notes/_notes_with_form.html.haml
+++ b/app/views/shared/notes/_notes_with_form.html.haml
@@ -1,3 +1,6 @@
+- issuable = @issue || @merge_request
+- discussion_locked = issuable&.discussion_locked?
+
 %ul#notes-list.notes.main-notes-list.timeline
   = render "shared/notes/notes"
 
@@ -21,5 +24,10 @@
     or
     = link_to "sign in", new_session_path(:user, redirect_to_referer: 'yes'), class: 'js-sign-in-link'
     to comment
-
+- elsif discussion_locked
+  .discussion_locked
+    %span
+      This
+      = issuable.class.to_s
+      has been locked. Posting comments has been restricted to project members.
 %script.js-notes-data{ type: "application/json" }= initial_notes_data(autocomplete).to_json.html_safe