FE review changes app code

8 files changed, 40 insertions, 24 deletions

diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index 8959365a5c9..c49f83e7089 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 && !Object.hasOwnProperty.call(tab.dataset, 'isLocked'))) FilesCommentButton.init($diffFile);
+    if (!tab || (tab && tab.dataset && tab.dataset.isLocked !== '')) FilesCommentButton.init($diffFile);
 
     $diffFile.each((index, file) => new gl.ImageFile(file));
 
diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index 3682c95f6eb..715027c6fbc 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -58,7 +58,7 @@
       isIssueOpen() {
         return this.issueState === constants.OPENED || this.issueState === constants.REOPENED;
       },
-      canCreate() {
+      canCreateNote() {
         return this.getIssueData.current_user.can_create_note;
       },
       issueActionButtonTitle() {
@@ -241,7 +241,7 @@
 <template>
   <div>
     <issue-note-signed-out-widget v-if="!isLoggedIn" />
-    <issue-discussion-locked-widget v-else-if="!canCreate" />
+    <issue-discussion-locked-widget v-else-if="!canCreateNote" />
     <ul
       v-else
       class="notes notes-form timeline">
diff --git a/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue b/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue
index f0429b82aaa..e73ec2aaf71 100644
--- a/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue
+++ b/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue
@@ -1,7 +1,7 @@
 <script>
   export default {
     computed: {
-      icon() {
+      lockIcon() {
         return gl.utils.spriteIcon('lock');
       },
     },
@@ -12,7 +12,7 @@
 <template>
   <div class="disabled-comment text-center">
     <span class="issuable-note-warning">
-      <span class="icon" v-html="icon"></span>
+      <span class="icon" v-html="lockIcon"></span>
       <span>This issue is locked. Only <b>project members</b> can comment.</span>
      </span>
   </div>
diff --git a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
index 143f8ae7bc1..7ed0619ee6b 100644
--- a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
@@ -15,7 +15,7 @@ export default {
     },
   },
   computed: {
-    buttonText() {
+    toggleButtonText() {
       return this.isConfidential ? 'Turn Off' : 'Turn On';
     },
     updateConfidentialBool() {
@@ -39,7 +39,7 @@ export default {
       class="btn btn-close"
       @click.prevent="updateConfidentialAttribute(updateConfidentialBool)"
     >
-      {{ buttonText }}
+      {{ toggleButtonText }}
     </button>
   </div>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
index 9021d17dddf..cc214039bdd 100644
--- a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
@@ -86,7 +86,7 @@ export default {
     </div>
 
     <div class="value sidebar-item-value hide-collapsed">
-      <editForm
+      <edit-form
         v-if="isLockDialogOpen"
         :toggle-form="toggleForm"
         :is-locked="isLocked"
@@ -94,13 +94,25 @@ export default {
         :issuable-type="issuableType"
       />
 
-      <div v-if="isLocked" class="value sidebar-item-value">
-        <i aria-hidden="true" class="fa fa-lock sidebar-item-icon is-active"></i>
+      <div
+        v-if="isLocked"
+        class="value sidebar-item-value"
+      >
+        <i
+          aria-hidden="true"
+          class="fa fa-lock sidebar-item-icon is-active"
+        ></i>
         {{ __('Locked') }}
       </div>
 
-      <div v-else class="no-value sidebar-item-value hide-collapsed">
-        <i aria-hidden="true" class="fa fa-unlock sidebar-item-icon"></i>
+      <div
+        v-else
+        class="no-value sidebar-item-value hide-collapsed"
+      >
+        <i
+          aria-hidden="true"
+          class="fa fa-unlock sidebar-item-icon"
+        ></i>
         {{ __('Unlocked') }}
       </div>
     </div>
diff --git a/app/assets/javascripts/sidebar/sidebar_bundle.js b/app/assets/javascripts/sidebar/sidebar_bundle.js
index 645e65d7b16..09b9d75c02d 100644
--- a/app/assets/javascripts/sidebar/sidebar_bundle.js
+++ b/app/assets/javascripts/sidebar/sidebar_bundle.js
@@ -1,9 +1,9 @@
 import Vue from 'vue';
-import sidebarTimeTracking from './components/time_tracking/sidebar_time_tracking';
-import sidebarAssignees from './components/assignees/sidebar_assignees';
-import confidential from './components/confidential/confidential_issue_sidebar.vue';
+import SidebarTimeTracking from './components/time_tracking/sidebar_time_tracking';
+import SidebarAssignees from './components/assignees/sidebar_assignees';
+import ConfidentialIssueSidebar from './components/confidential/confidential_issue_sidebar.vue';
 import SidebarMoveIssue from './lib/sidebar_move_issue';
-import lockBlock from './components/lock/lock_issue_sidebar.vue';
+import LockIssueSidebar from './components/lock/lock_issue_sidebar.vue';
 import Translate from '../vue_shared/translate';
 
 import Mediator from './sidebar_mediator';
@@ -11,14 +11,14 @@ import Mediator from './sidebar_mediator';
 Vue.use(Translate);
 
 function mountConfidentialComponent(mediator) {
-  const el = document.querySelector('#js-confidential-entry-point');
+  const el = document.getElementById('js-confidential-entry-point');
 
   if (!el) return;
 
   const dataNode = document.getElementById('js-confidential-issue-data');
   const initialData = JSON.parse(dataNode.innerHTML);
 
-  const ConfidentialComp = Vue.extend(confidential);
+  const ConfidentialComp = Vue.extend(ConfidentialIssueSidebar);
 
   new ConfidentialComp({
     propsData: {
@@ -30,14 +30,14 @@ function mountConfidentialComponent(mediator) {
 }
 
 function mountLockComponent(mediator) {
-  const el = document.querySelector('#js-lock-entry-point');
+  const el = document.getElementById('js-lock-entry-point');
 
   if (!el) return;
 
   const dataNode = document.getElementById('js-lock-issue-data');
   const initialData = JSON.parse(dataNode.innerHTML);
 
-  const LockComp = Vue.extend(lockBlock);
+  const LockComp = Vue.extend(LockIssueSidebar);
 
   new LockComp({
     propsData: {
@@ -54,11 +54,11 @@ function domContentLoaded() {
   const mediator = new Mediator(sidebarOptions);
   mediator.fetch();
 
-  const sidebarAssigneesEl = document.querySelector('#js-vue-sidebar-assignees');
+  const sidebarAssigneesEl = document.getElementById('js-vue-sidebar-assignees');
   // Only create the sidebarAssignees vue app if it is found in the DOM
   // We currently do not use sidebarAssignees for the MR page
   if (sidebarAssigneesEl) {
-    new Vue(sidebarAssignees).$mount(sidebarAssigneesEl);
+    new Vue(SidebarAssignees).$mount(sidebarAssigneesEl);
   }
 
   mountConfidentialComponent(mediator);
@@ -70,7 +70,7 @@ function domContentLoaded() {
     $('.js-move-issue-confirmation-button'),
   ).init();
 
-  new Vue(sidebarTimeTracking).$mount('#issuable-time-tracker');
+  new Vue(SidebarTimeTracking).$mount('#issuable-time-tracker');
 }
 
 document.addEventListener('DOMContentLoaded', domContentLoaded);
diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
index 0f11b6e2223..7a8be8c42da 100644
--- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
@@ -4,11 +4,13 @@
       isLocked: {
         type: Boolean,
         default: false,
+        required: false,
       },
 
       isConfidential: {
         type: Boolean,
         default: false,
+        required: false,
       },
     },
 
diff --git a/app/assets/javascripts/vue_shared/mixins/issuable.js b/app/assets/javascripts/vue_shared/mixins/issuable.js
index 831102c0cac..263361587e0 100644
--- a/app/assets/javascripts/vue_shared/mixins/issuable.js
+++ b/app/assets/javascripts/vue_shared/mixins/issuable.js
@@ -1,7 +1,9 @@
 export default {
   methods: {
     issuableDisplayName(issuableType) {
-      return issuableType.replace(/_/, ' ');
+      const displayName = issuableType.replace(/_/, ' ');
+
+      return this.__ ? this.__(displayName) : displayName;
     },
   },
 };