removed file changes that have no changes to make diff easier

simplified SET_FILE_ACTIVE openFiles map
use .find in router so that it returns early instead of looping all the
values

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

@@ -87,8 +87,7 @@ export default {
     <div
       class="multi-file-tab"
       :class="{
-        active: tab.active,
-        pending: tab.pending
+        active: tab.active
       }"
       :title="tab.url"
     >

app/assets/javascripts/ide/ide_router.js

@@ -77,16 +77,12 @@ router.beforeEach((to, from, next) => {
               if (to.params[0]) {
                 const path =
                   to.params[0].slice(-1) === '/' ? to.params[0].slice(0, -1) : to.params[0];
-                const treeEntry = Object.keys(store.state.entries).reduce((acc, key) => {
-                  const file = store.state.entries[key];
-                  if (key === path && !file.pending) {
-                    return file;
-                  }
-
-                  return acc;
-                }, {});
+                const treeEntryKey = Object.keys(store.state.entries).find(
+                  key => key === path && !store.state.entries[key].pending,
+                );
+                const treeEntry = store.state.entries[treeEntryKey];
 
-                if (Object.keys(treeEntry).length) {
+                if (treeEntry) {
                   store.dispatch('handleTreeEntryAction', treeEntry);
                 }
               }

app/assets/javascripts/ide/lib/diff/controller.js

@@ -3,7 +3,7 @@ import { throttle } from 'underscore';
 import DirtyDiffWorker from './diff_worker';
 import Disposable from '../common/disposable';
 
-export const getDiffChangeType = change => {
+export const getDiffChangeType = (change) => {
   if (change.modified) {
     return 'modified';
   } else if (change.added) {
@@ -16,12 +16,15 @@ export const getDiffChangeType = change => {
 };
 
 export const getDecorator = change => ({
-  range: new monaco.Range(change.lineNumber, 1, change.endLineNumber, 1),
+  range: new monaco.Range(
+    change.lineNumber,
+    1,
+    change.endLineNumber,
+    1,
+  ),
   options: {
     isWholeLine: true,
-    linesDecorationsClassName: `dirty-diff dirty-diff-${getDiffChangeType(
-      change,
-    )}`,
+    linesDecorationsClassName: `dirty-diff dirty-diff-${getDiffChangeType(change)}`,
   },
 });
 

app/assets/javascripts/ide/lib/diff/diff_worker.js

 import { computeDiff } from './diff';
 
-self.addEventListener('message', e => {
+self.addEventListener('message', (e) => {
   const data = e.data;
 
   self.postMessage({

app/assets/javascripts/ide/stores/actions/tree.js

@@ -2,7 +2,9 @@ import { normalizeHeaders } from '~/lib/utils/common_utils';
 import flash from '~/flash';
 import service from '../../services';
 import * as types from '../mutation_types';
-import { findEntry } from '../utils';
+import {
+  findEntry,
+} from '../utils';
 import FilesDecoratorWorker from '../workers/files_decorator_worker';
 
 export const toggleTreeOpen = ({ commit, dispatch }, path) => {
@@ -23,29 +25,20 @@ export const handleTreeEntryAction = ({ commit, dispatch }, row) => {
   }
 };
 
-export const getLastCommitData = (
-  { state, commit, dispatch, getters },
-  tree = state,
-) => {
+export const getLastCommitData = ({ state, commit, dispatch, getters }, tree = state) => {
   if (!tree || tree.lastCommitPath === null || !tree.lastCommitPath) return;
 
-  service
-    .getTreeLastCommit(tree.lastCommitPath)
-    .then(res => {
-      const lastCommitPath =
-        normalizeHeaders(res.headers)['MORE-LOGS-URL'] || null;
+  service.getTreeLastCommit(tree.lastCommitPath)
+    .then((res) => {
+      const lastCommitPath = normalizeHeaders(res.headers)['MORE-LOGS-URL'] || null;
 
       commit(types.SET_LAST_COMMIT_URL, { tree, url: lastCommitPath });
 
       return res.json();
     })
-    .then(data => {
-      data.forEach(lastCommit => {
-        const entry = findEntry(
-          tree.tree,
-          lastCommit.type,
-          lastCommit.file_name,
-        );
+    .then((data) => {
+      data.forEach((lastCommit) => {
+        const entry = findEntry(tree.tree, lastCommit.type, lastCommit.file_name);
 
         if (entry) {
           commit(types.SET_LAST_COMMIT_DATA, { entry, lastCommit });
@@ -54,16 +47,13 @@ export const getLastCommitData = (
 
       dispatch('getLastCommitData', tree);
     })
-    .catch(() =>
-      flash('Error fetching log data.', 'alert', document, null, false, true),
-    );
+    .catch(() => flash('Error fetching log data.', 'alert', document, null, false, true));
 };
 
 export const getFiles = (
   { state, commit, dispatch },
   { projectId, branchId } = {},
-) =>
-  new Promise((resolve, reject) => {
+) => new Promise((resolve, reject) => {
   if (!state.trees[`${projectId}/${branchId}`]) {
     const selectedProject = state.projects[projectId];
     commit(types.CREATE_TREE, { treePath: `${projectId}/${branchId}` });
@@ -71,21 +61,15 @@ export const getFiles = (
     service
       .getFiles(selectedProject.web_url, branchId)
       .then(res => res.json())
-        .then(data => {
+      .then((data) => {
         const worker = new FilesDecoratorWorker();
-          worker.addEventListener('message', e => {
+        worker.addEventListener('message', (e) => {
           const { entries, treeList } = e.data;
           const selectedTree = state.trees[`${projectId}/${branchId}`];
 
           commit(types.SET_ENTRIES, entries);
-            commit(types.SET_DIRECTORY_DATA, {
-              treePath: `${projectId}/${branchId}`,
-              data: treeList,
-            });
-            commit(types.TOGGLE_LOADING, {
-              entry: selectedTree,
-              forceValue: false,
-            });
+          commit(types.SET_DIRECTORY_DATA, { treePath: `${projectId}/${branchId}`, data: treeList });
+          commit(types.TOGGLE_LOADING, { entry: selectedTree, forceValue: false });
 
           worker.terminate();
 
@@ -98,18 +82,12 @@ export const getFiles = (
           branchId,
         });
       })
-        .catch(e => {
-          flash(
-            'Error loading tree data. Please try again.',
-            'alert',
-            document,
-            null,
-            false,
-            true,
-          );
+      .catch((e) => {
+        flash('Error loading tree data. Please try again.', 'alert', document, null, false, true);
         reject(e);
       });
   } else {
     resolve();
   }
-  });
+});
+

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

-export const activeFile = state => state.openFiles.find(file => file.active) || null;
+export const activeFile = state =>
+  state.openFiles.find(file => file.active) || null;
 
 export const addedFiles = state => state.changedFiles.filter(f => f.tempFile);
 
-export const modifiedFiles = state => state.changedFiles.filter(f => !f.tempFile);
+export const modifiedFiles = state =>
+  state.changedFiles.filter(f => !f.tempFile);
 
 export const projectsWithTrees = state =>
   Object.keys(state.projects).map(projectId => {

app/assets/javascripts/ide/stores/mutations/file.js

@@ -8,13 +8,7 @@ export default {
 
     if (active && !state.entries[path].pending) {
       Object.assign(state, {
-        openFiles: state.openFiles.map(f => {
-          if (f.pending) {
-            return Object.assign(f, { active: false });
-          }
-
-          return f;
-        }),
+        openFiles: state.openFiles.map(f => Object.assign(f, { active: !(f.pending && f.active) })),
       });
     }
   },

app/assets/stylesheets/pages/repo.scss

@@ -720,7 +720,9 @@
     }
 
     .ide-view {
-      height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height});
+      height: calc(
+        100vh - #{$header-height + $performance-bar-height + $flash-height}
+      );
     }
   }
 }