FE review changes app code

3 files changed, 30 insertions, 18 deletions

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