diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index c12dc7bdc2c..baeec130579 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -18,7 +18,7 @@ class Diff {
     });
 
     const tab = document.getElementById('diffs');
-    if (tab && tab.dataset.isLocked === 'false') FilesCommentButton.init($diffFile);
+    if (tab && !Object.hasOwnProperty.call(tab.dataset, 'isLocked')) FilesCommentButton.init($diffFile);
 
     $diffFile.each((index, file) => new gl.ImageFile(file));
 
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form.vue b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
index 616abec4d5e..b79d357d4bb 100644
--- a/app/assets/javascripts/sidebar/components/lock/edit_form.vue
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
@@ -38,25 +38,23 @@ export default {
 <template>
   <div class="dropdown open">
     <div class="dropdown-menu sidebar-item-warning-message">
-      <div>
-        <p v-if="isLocked">
-          {{ __(`Unlock this ${issuableDisplayName(issuableType)}?`) }}
-          <strong>{{ __('Everyone') }}</strong>
-          {{ __('will be able to comment.') }}
-        </p>
+      <p class="text" v-if="isLocked">
+        {{ __(`Unlock this ${issuableDisplayName(issuableType)}?`) }}
+        <strong>{{ __('Everyone') }}</strong>
+        {{ __('will be able to comment.') }}
+      </p>
 
-        <p v-else>
-          {{ __(`Lock this ${issuableDisplayName(issuableType)}? Only`) }}
-          <strong>{{ __('project members') }}</strong>
-          {{ __('will be able to comment.') }}
-        </p>
+      <p class="text" v-else>
+        {{ __(`Lock this ${issuableDisplayName(issuableType)}? Only`) }}
+        <strong>{{ __('project members') }}</strong>
+        {{ __('will be able to comment.') }}
+      </p>
 
-        <edit-form-buttons
-          :is-locked="isLocked"
-          :toggle-form="toggleForm"
-          :update-locked-attribute="updateLockedAttribute"
-        />
-      </div>
+      <edit-form-buttons
+        :is-locked="isLocked"
+        :toggle-form="toggleForm"
+        :update-locked-attribute="updateLockedAttribute"
+      />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
index 7d883704142..c3a553a7605 100644
--- a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
@@ -22,7 +22,7 @@ export default {
       return this.isLocked ? this.__('Unlock') : this.__('Lock');
     },
 
-    updateLockedBool() {
+    toggleLock() {
       return !this.isLocked;
     },
   },
@@ -42,7 +42,7 @@ export default {
     <button
       type="button"
       class="btn btn-close"
-      @click.prevent="updateLockedAttribute(updateLockedBool)"
+      @click.prevent="updateLockedAttribute(toggleLock)"
     >
       {{ buttonText }}
     </button>
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index c2904ce2273..d1cfc75743e 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -122,14 +122,14 @@
   line-height: 1.5;
   padding: 16px;
 
-  p {
+  .text {
     color: $text-color;
   }
 
   .sidebar-item-warning-message-actions {
     display: flex;
 
-    button {
+    .btn {
       flex-grow: 1;
     }
   }
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 4b2ffe4c3ae..607892a42fd 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -80,7 +80,7 @@
       #pipelines.pipelines.tab-pane
         - if @pipelines.any?
           = render 'projects/commit/pipelines_list', disable_initialization: true, endpoint: pipelines_project_merge_request_path(@project, @merge_request)
-      #diffs.diffs.tab-pane{ data: { "is-locked" => @merge_request.discussion_locked?.to_s } }
+      #diffs.diffs.tab-pane{ data: { "is-locked" => @merge_request.discussion_locked? } }
         -# This tab is always loaded via AJAX
 
     .mr-loading-status
diff --git a/changelogs/unreleased/18608-lock-issues.yml b/changelogs/unreleased/18608-lock-issues.yml
index 6c0ae7cebf5..0f22fe691e3 100644
--- a/changelogs/unreleased/18608-lock-issues.yml
+++ b/changelogs/unreleased/18608-lock-issues.yml
@@ -1,5 +1,5 @@
 ---
-title: Create system notes for MR too, improve doc + clean up code
+title: Add lock feature to issue and merge request sidebar
 merge_request:
 author:
 type: added
diff --git a/spec/javascripts/sidebar/lock/lock_issue_sidebar_spec.js b/spec/javascripts/sidebar/lock/lock_issue_sidebar_spec.js
index 2848be62819..696fca516bc 100644
--- a/spec/javascripts/sidebar/lock/lock_issue_sidebar_spec.js
+++ b/spec/javascripts/sidebar/lock/lock_issue_sidebar_spec.js
@@ -10,9 +10,7 @@ describe('LockIssueSidebar', () => {
 
     const mediator = {
       service: {
-        update: () => new Promise((resolve) => {
-          resolve(true);
-        }),
+        update: Promise.resolve(true),
       },
 
       store: {
diff --git a/spec/javascripts/vue_shared/components/issue/issue_warning_spec.js b/spec/javascripts/vue_shared/components/issue/issue_warning_spec.js
index c366589ec50..a5f408d3165 100644
--- a/spec/javascripts/vue_shared/components/issue/issue_warning_spec.js
+++ b/spec/javascripts/vue_shared/components/issue/issue_warning_spec.js
@@ -5,6 +5,7 @@ import mountComponent from '../../../helpers/vue_mount_component_helper';
 const IssueWarning = Vue.extend(issueWarning);
 
 function formatWarning(string) {
+  // Replace newlines with a space then replace multiple spaces with one space
   return string.trim().replace(/\n/g, ' ').replace(/\s\s+/g, ' ');
 }