Added lock/unlock issue discussion widget into right sidebar.lock-issue-discussion

4 files changed, 46 insertions, 1 deletions

diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js.es6
index dc4d5113826..dff3083fc90 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js.es6
@@ -1,11 +1,14 @@
+/*= require lib/vue */
+
 (function() {
   var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
 
   this.Sidebar = (function() {
     function Sidebar(currentUser) {
       this.toggleTodo = bind(this.toggleTodo, this);
-      this.sidebar = $('aside');
+      this.sidebar = $('aside.right-sidebar');
       this.addEventListeners();
+      this.initVue()
     }
 
     Sidebar.prototype.addEventListeners = function() {
@@ -194,6 +197,20 @@
       return this.sidebar.find(".block." + name);
     };
 
+    Sidebar.prototype.initVue = function() {
+      new Vue({
+        el: this.sidebar.find('.lock-issue-block')[0],
+        name: 'RightSidebarLockIssueBlock',
+        data: { locked: false },
+        methods: {
+          toggleLock(e) {
+            e.stopImmediatePropagation();
+            this.locked = !this.locked;
+          }
+        }
+      });
+    };
+
     return Sidebar;
 
   })();
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 7a50bc9c832..17e85ade6af 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -395,3 +395,7 @@
   display: inline-block;
   line-height: 18px;
 }
+
+.lock-issue-block .state-icon {
+  float: right;
+}
diff --git a/app/views/shared/issuable/_lock_issue.html.haml b/app/views/shared/issuable/_lock_issue.html.haml
new file mode 100644
index 00000000000..ed06e8575a1
--- /dev/null
+++ b/app/views/shared/issuable/_lock_issue.html.haml
@@ -0,0 +1,21 @@
+.block.light.lock-issue-block{data: {locked: locked}}
+  %template{"v-if" => "locked"}
+    .sidebar-collapsed-icon
+      = icon('lock')
+    .title.hide-collapsed
+      Lock issue
+      = icon('lock', class: 'state-icon')
+    %button.btn.btn-block.btn-default.hide-collapsed{"type" => "button", "@click" => "toggleLock"}
+      %span Unlock
+
+  %template{"v-if" => "!locked"}
+    .sidebar-collapsed-icon
+      = icon('unlock-alt')
+    .title.hide-collapsed
+      Lock issue
+      = icon('unlock-alt', class: 'state-icon')
+    %button.btn.btn-block.btn-default.hide-collapsed{"type" => "button", "@click" => "toggleLock"}
+      %span Lock
+
+  .hide-collapsed
+    Locking this issue will prevent other users from commenting. Project members will still be able to leave comment.
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 8e2fcbdfab8..ffa8bebad2d 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -154,6 +154,9 @@
             .subscribed{class: ( 'hidden' unless subscribed )}
               You're receiving notifications because you're subscribed to this thread.
 
+      - if current_user
+        = render "shared/issuable/lock_issue", locked: 'false'
+
       - project_ref = cross_project_reference(@project, issuable)
       .block.project-reference
         .sidebar-collapsed-icon.dont-change-state