Review changes

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));
 

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 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>
+      <p class="text" v-if="isLocked">
+        {{ __(`Unlock this ${issuableDisplayName(issuableType)}?`) }}
+        <strong>{{ __('Everyone') }}</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>
   </div>
 </template>

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>

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;
     }
   }

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

changelogs/unreleased/18608-lock-issues.yml

 ---
-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

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: {

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, ' ');
 }