Updated components to PascalCase

Added comment for `key` usage

app/assets/javascripts/ide/components/commit_sidebar/list_item.vue

@@ -1,10 +1,10 @@
 <script>
 import { mapActions } from 'vuex';
-import icon from '~/vue_shared/components/icon.vue';
+import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    icon,
+    Icon,
   },
   props: {
     file: {

app/assets/javascripts/ide/components/repo_editor.vue

@@ -21,6 +21,7 @@ export default {
   },
   watch: {
     file(oldVal, newVal) {
+      // Compare key to allow for files opened in review mode to be cached differently
       if (newVal.key !== this.file.key) {
         this.initMonaco();
       }

app/assets/javascripts/ide/components/repo_tab.vue

@@ -1,17 +1,17 @@
 <script>
 import { mapActions } from 'vuex';
 
-import fileIcon from '~/vue_shared/components/file_icon.vue';
-import icon from '~/vue_shared/components/icon.vue';
-import fileStatusIcon from './repo_file_status_icon.vue';
-import changedFileIcon from './changed_file_icon.vue';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import FileStatusIcon from './repo_file_status_icon.vue';
+import ChangedFileIcon from './changed_file_icon.vue';
 
 export default {
   components: {
-    fileStatusIcon,
-    fileIcon,
-    icon,
-    changedFileIcon,
+    FileStatusIcon,
+    FileIcon,
+    Icon,
+    ChangedFileIcon,
   },
   props: {
     tab: {

app/assets/javascripts/ide/stores/utils.js

@@ -1,5 +1,7 @@
 export const dataStructure = () => ({
   id: '',
+  // Key will contain a mixture of ID and path
+  // it can also contain a prefix `pending-` for files opened in review mode
   key: '',
   type: '',
   projectId: '',