From 4924e4edb22ece1b5e246fca9f4ae686e6e0e8d3 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 20 Apr 2018 09:09:19 +0100
Subject: Added review mode to new IDE sidebar

#44846
---
 .../javascripts/ide/components/activity_bar.vue    | 14 +++++
 .../javascripts/ide/components/ide_review.vue      | 64 ++++++++++++++++++++++
 .../javascripts/ide/components/ide_side_bar.vue    |  2 +
 app/assets/javascripts/ide/components/ide_tree.vue |  8 ++-
 .../javascripts/ide/components/repo_editor.vue     | 11 +---
 .../javascripts/ide/components/repo_file.vue       | 13 +++--
 .../javascripts/ide/components/repo_tabs.vue       | 17 ------
 app/assets/javascripts/ide/constants.js            |  1 +
 app/assets/javascripts/ide/lib/editor.js           |  3 -
 app/assets/javascripts/ide/stores/actions/file.js  |  1 -
 app/assets/stylesheets/pages/repo.scss             | 20 +------
 11 files changed, 98 insertions(+), 56 deletions(-)
 create mode 100644 app/assets/javascripts/ide/components/ide_review.vue

diff --git a/app/assets/javascripts/ide/components/activity_bar.vue b/app/assets/javascripts/ide/components/activity_bar.vue
index c625976621f..0465de54977 100644
--- a/app/assets/javascripts/ide/components/activity_bar.vue
+++ b/app/assets/javascripts/ide/components/activity_bar.vue
@@ -50,6 +50,20 @@ export default {
           />
         </button>
       </li>
+      <li>
+        <button
+          type="button"
+          class="ide-sidebar-link js-ide-review-mode"
+          :class="{
+            active: currentActivityView === $options.ActivityBarViews.review
+          }"
+          @click.prevent="updateActivityBarView($options.ActivityBarViews.review)"
+        >
+          <icon
+            name="file-modified"
+          />
+        </button>
+      </li>
       <li>
         <button
           type="button"
diff --git a/app/assets/javascripts/ide/components/ide_review.vue b/app/assets/javascripts/ide/components/ide_review.vue
new file mode 100644
index 00000000000..4eb59cc3ca1
--- /dev/null
+++ b/app/assets/javascripts/ide/components/ide_review.vue
@@ -0,0 +1,64 @@
+<script>
+import { mapActions, mapGetters, mapState } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
+import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import RepoFile from './repo_file.vue';
+import NewDropdown from './new_dropdown/index.vue';
+
+export default {
+  components: {
+    Icon,
+    RepoFile,
+    SkeletonLoadingContainer,
+    NewDropdown,
+  },
+  computed: {
+    ...mapState(['currentBranchId']),
+    ...mapGetters(['currentProject', 'currentTree']),
+  },
+  mounted() {
+    this.updateViewer('diff');
+  },
+  methods: {
+    ...mapActions(['updateViewer']),
+  },
+};
+</script>
+
+<template>
+  <div
+    class="ide-file-list"
+  >
+    <template v-if="!currentTree || currentTree.loading">
+      <div
+        class="multi-file-loading-container"
+        v-for="n in 3"
+        :key="n"
+      >
+        <skeleton-loading-container />
+      </div>
+    </template>
+    <template v-else>
+      <header class="ide-tree-header ide-review-header">
+        {{ __('Review') }}
+        <div class="prepend-top-5 clgray">
+          {{ __('Lastest changed') }}
+        </div>
+      </header>
+      <repo-file
+        v-for="file in currentTree.tree"
+        :key="file.key"
+        :file="file"
+        :level="0"
+        :disable-action-dropdown="true"
+      />
+    </template>
+  </div>
+</template>
+
+<style>
+.ide-review-header {
+  flex-direction: column;
+  align-items: flex-start;
+}
+</style>
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index 191210fd828..3fb9b8b241d 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -9,6 +9,7 @@ import IdeTree from './ide_tree.vue';
 import ResizablePanel from './resizable_panel.vue';
 import ActivityBar from './activity_bar.vue';
 import CommitSection from './repo_commit_section.vue';
+import IdeReview from './ide_review.vue';
 
 export default {
   components: {
@@ -21,6 +22,7 @@ export default {
     Identicon,
     CommitSection,
     IdeTree,
+    IdeReview,
   },
   computed: {
     ...mapState(['loading', 'currentBranchId', 'currentActivityView']),
diff --git a/app/assets/javascripts/ide/components/ide_tree.vue b/app/assets/javascripts/ide/components/ide_tree.vue
index ed83bf4109b..4f33bc81838 100644
--- a/app/assets/javascripts/ide/components/ide_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_tree.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapGetters, mapState } from 'vuex';
+import { mapActions, mapGetters, mapState } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
 import RepoFile from './repo_file.vue';
@@ -16,6 +16,12 @@ export default {
     ...mapState(['currentBranchId']),
     ...mapGetters(['currentProject', 'currentTree']),
   },
+  mounted() {
+    this.updateViewer('editor');
+  },
+  methods: {
+    ...mapActions(['updateViewer']),
+  },
 };
 </script>
 
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 3a04cdd8e46..6b7e0aa001f 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -19,7 +19,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['rightPanelCollapsed', 'viewer', 'delayViewerUpdated', 'panelResizing']),
+    ...mapState(['rightPanelCollapsed', 'viewer', 'panelResizing']),
     ...mapGetters(['currentMergeRequest', 'getStagedFile']),
     shouldHideEditor() {
       return this.file && this.file.binary && !this.file.content;
@@ -77,7 +77,6 @@ export default {
       'setFileViewMode',
       'setFileEOL',
       'updateViewer',
-      'updateDelayViewerUpdated',
     ]),
     initMonaco() {
       if (this.shouldHideEditor) return;
@@ -89,14 +88,6 @@ export default {
         baseSha: this.currentMergeRequest ? this.currentMergeRequest.baseCommitSha : '',
       })
         .then(() => {
-          const viewerPromise = this.delayViewerUpdated
-            ? this.updateViewer(this.file.pending ? 'diff' : 'editor')
-            : Promise.resolve();
-
-          return viewerPromise;
-        })
-        .then(() => {
-          this.updateDelayViewerUpdated(false);
           this.createEditorInstance();
         })
         .catch(err => {
diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index 8b18c7d28b4..1a7ed991bf0 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -27,6 +27,11 @@ export default {
       type: Number,
       required: true,
     },
+    disableActionDropdown: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     isTree() {
@@ -55,16 +60,14 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['toggleTreeOpen', 'updateDelayViewerUpdated']),
+    ...mapActions(['toggleTreeOpen']),
     clickFile() {
       // Manual Action if a tree is selected/opened
       if (this.isTree && this.$router.currentRoute.path === `/project${this.file.url}`) {
         this.toggleTreeOpen(this.file.path);
       }
 
-      return this.updateDelayViewerUpdated(true).then(() => {
-        router.push(`/project${this.file.url}`);
-      });
+      router.push(`/project${this.file.url}`);
     },
   },
 };
@@ -110,7 +113,7 @@ export default {
           />
         </span>
         <new-dropdown
-          v-if="isTree"
+          v-if="isTree && !disableActionDropdown"
           :project-id="file.projectId"
           :branch="file.branchId"
           :path="file.path"
diff --git a/app/assets/javascripts/ide/components/repo_tabs.vue b/app/assets/javascripts/ide/components/repo_tabs.vue
index 7bd646ba9b0..99e51097e12 100644
--- a/app/assets/javascripts/ide/components/repo_tabs.vue
+++ b/app/assets/javascripts/ide/components/repo_tabs.vue
@@ -32,16 +32,6 @@ export default {
       default: '',
     },
   },
-  data() {
-    return {
-      showShadow: false,
-    };
-  },
-  updated() {
-    if (!this.$refs.tabsScroller) return;
-
-    this.showShadow = this.$refs.tabsScroller.scrollWidth > this.$refs.tabsScroller.offsetWidth;
-  },
   methods: {
     ...mapActions(['updateViewer', 'removePendingTab']),
     openFileViewer(viewer) {
@@ -71,12 +61,5 @@ export default {
         :tab="tab"
       />
     </ul>
-    <editor-mode
-      :viewer="viewer"
-      :show-shadow="showShadow"
-      :has-changes="hasChanges"
-      :merge-request-id="mergeRequestId"
-      @click="openFileViewer"
-    />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js
index 3aa32a49a20..565f026c56c 100644
--- a/app/assets/javascripts/ide/constants.js
+++ b/app/assets/javascripts/ide/constants.js
@@ -5,4 +5,5 @@ export const MAX_BODY_LENGTH = 72;
 export const ActivityBarViews = {
   edit: 'ide-tree',
   commit: 'commit-section',
+  review: 'ide-review',
 };
diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js
index 2d3ee7d4f48..af506f1d0ea 100644
--- a/app/assets/javascripts/ide/lib/editor.js
+++ b/app/assets/javascripts/ide/lib/editor.js
@@ -64,11 +64,8 @@ export default class Editor {
       this.disposable.add(
         (this.instance = this.monaco.editor.createDiffEditor(domElement, {
           ...defaultEditorOptions,
-          readOnly: true,
           quickSuggestions: false,
           occurrencesHighlight: false,
-          renderLineHighlight: 'none',
-          hideCursorInOverviewRuler: true,
           renderSideBySide: Editor.renderSideBySide(domElement),
         })),
       );
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index d782e0a84d2..798edebd545 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -29,7 +29,6 @@ export const closeFile = ({ commit, state, dispatch }, file) => {
         keyPrefix: nextFileToOpen.staged ? 'staged' : 'unstaged',
       });
     } else {
-      dispatch('updateDelayViewerUpdated', true);
       router.push(`/project${nextFileToOpen.url}`);
     }
   } else if (!state.openFiles.length) {
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index f050b105f99..80c6a9dd3f2 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -153,24 +153,6 @@
       border-bottom-color: $white-light;
     }
   }
-
-  .dropdown {
-    display: flex;
-    margin-left: auto;
-    margin-bottom: 1px;
-    padding: 0 $grid-size;
-    border-left: 1px solid $white-dark;
-    background-color: $white-light;
-
-    &.shadow {
-      box-shadow: 0 0 10px $dropdown-shadow-color;
-    }
-
-    .btn {
-      margin-top: auto;
-      margin-bottom: auto;
-    }
-  }
 }
 
 .multi-file-tab {
@@ -298,7 +280,7 @@
       opacity: 0.4;
     }
 
-    .cursors-layer {
+    .editor.original .cursors-layer {
       display: none;
     }
   }
-- 
cgit v1.2.1


From fc11520e51ba6a7fb3cb07b4300bf303b725881c Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 20 Apr 2018 09:44:14 +0100
Subject: fixed repo_tabs_spec fixed editor_spec

---
 spec/javascripts/ide/components/repo_tabs_spec.js | 50 -----------------------
 spec/javascripts/ide/lib/editor_spec.js           |  4 +-
 2 files changed, 1 insertion(+), 53 deletions(-)

diff --git a/spec/javascripts/ide/components/repo_tabs_spec.js b/spec/javascripts/ide/components/repo_tabs_spec.js
index 5c4bcc372bc..583f71e6121 100644
--- a/spec/javascripts/ide/components/repo_tabs_spec.js
+++ b/spec/javascripts/ide/components/repo_tabs_spec.js
@@ -32,54 +32,4 @@ describe('RepoTabs', () => {
       done();
     });
   });
-
-  describe('updated', () => {
-    it('sets showShadow as true when scroll width is larger than width', done => {
-      const el = document.createElement('div');
-      el.innerHTML = '<div id="test-app"></div>';
-      document.body.appendChild(el);
-
-      const style = document.createElement('style');
-      style.innerText = `
-        .multi-file-tabs {
-          width: 100px;
-        }
-
-        .multi-file-tabs .list-unstyled {
-          display: flex;
-          overflow-x: auto;
-        }
-      `;
-      document.head.appendChild(style);
-
-      vm = createComponent(
-        RepoTabs,
-        {
-          files: [],
-          viewer: 'editor',
-          hasChanges: false,
-          activeFile: file('activeFile'),
-          hasMergeRequest: false,
-        },
-        '#test-app',
-      );
-
-      vm
-        .$nextTick()
-        .then(() => {
-          expect(vm.showShadow).toEqual(false);
-
-          vm.files = openedFiles;
-        })
-        .then(vm.$nextTick)
-        .then(() => {
-          expect(vm.showShadow).toEqual(true);
-
-          style.remove();
-          el.remove();
-        })
-        .then(done)
-        .catch(done.fail);
-    });
-  });
 });
diff --git a/spec/javascripts/ide/lib/editor_spec.js b/spec/javascripts/ide/lib/editor_spec.js
index 530bdfa2759..c4fda0fb1c2 100644
--- a/spec/javascripts/ide/lib/editor_spec.js
+++ b/spec/javascripts/ide/lib/editor_spec.js
@@ -70,12 +70,10 @@ describe('Multi-file editor library', () => {
         minimap: {
           enabled: false,
         },
-        readOnly: true,
+        readOnly: false,
         scrollBeyondLastLine: false,
         quickSuggestions: false,
         occurrencesHighlight: false,
-        renderLineHighlight: 'none',
-        hideCursorInOverviewRuler: true,
         wordWrap: 'on',
         renderSideBySide: true,
       });
-- 
cgit v1.2.1


From 93f8ad8dd856b98b2bfe6afb9b4d6641e1b764ea Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 20 Apr 2018 10:34:57 +0100
Subject: created HOC for the tree list to cover both edit & review mode

---
 .../javascripts/ide/components/ide_review.vue      | 64 ++++---------------
 app/assets/javascripts/ide/components/ide_tree.vue | 55 +++++-----------
 .../javascripts/ide/components/ide_tree_list.vue   | 73 ++++++++++++++++++++++
 app/assets/stylesheets/pages/repo.scss             |  9 +++
 4 files changed, 110 insertions(+), 91 deletions(-)
 create mode 100644 app/assets/javascripts/ide/components/ide_tree_list.vue

diff --git a/app/assets/javascripts/ide/components/ide_review.vue b/app/assets/javascripts/ide/components/ide_review.vue
index 4eb59cc3ca1..1b1a5b91dd6 100644
--- a/app/assets/javascripts/ide/components/ide_review.vue
+++ b/app/assets/javascripts/ide/components/ide_review.vue
@@ -1,64 +1,26 @@
 <script>
-import { mapActions, mapGetters, mapState } from 'vuex';
-import Icon from '~/vue_shared/components/icon.vue';
-import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
-import RepoFile from './repo_file.vue';
-import NewDropdown from './new_dropdown/index.vue';
+import IdeTreeList from './ide_tree_list.vue';
 
 export default {
   components: {
-    Icon,
-    RepoFile,
-    SkeletonLoadingContainer,
-    NewDropdown,
-  },
-  computed: {
-    ...mapState(['currentBranchId']),
-    ...mapGetters(['currentProject', 'currentTree']),
-  },
-  mounted() {
-    this.updateViewer('diff');
-  },
-  methods: {
-    ...mapActions(['updateViewer']),
+    IdeTreeList,
   },
 };
 </script>
 
 <template>
-  <div
-    class="ide-file-list"
+  <ide-tree-list
+    viewer-type="diff"
+    header-class="ide-review-header"
+    :disable-action-dropdown="true"
   >
-    <template v-if="!currentTree || currentTree.loading">
-      <div
-        class="multi-file-loading-container"
-        v-for="n in 3"
-        :key="n"
-      >
-        <skeleton-loading-container />
+    <template
+      slot="header"
+    >
+      {{ __('Review') }}
+      <div class="prepend-top-5 ide-review-sub-header">
+        {{ __('Lastest changed') }}
       </div>
     </template>
-    <template v-else>
-      <header class="ide-tree-header ide-review-header">
-        {{ __('Review') }}
-        <div class="prepend-top-5 clgray">
-          {{ __('Lastest changed') }}
-        </div>
-      </header>
-      <repo-file
-        v-for="file in currentTree.tree"
-        :key="file.key"
-        :file="file"
-        :level="0"
-        :disable-action-dropdown="true"
-      />
-    </template>
-  </div>
+  </ide-tree-list>
 </template>
-
-<style>
-.ide-review-header {
-  flex-direction: column;
-  align-items: flex-start;
-}
-</style>
diff --git a/app/assets/javascripts/ide/components/ide_tree.vue b/app/assets/javascripts/ide/components/ide_tree.vue
index 4f33bc81838..7dbedaf2cb2 100644
--- a/app/assets/javascripts/ide/components/ide_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_tree.vue
@@ -1,58 +1,33 @@
 <script>
-import { mapActions, mapGetters, mapState } from 'vuex';
-import Icon from '~/vue_shared/components/icon.vue';
-import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
-import RepoFile from './repo_file.vue';
+import { mapState, mapGetters } from 'vuex';
 import NewDropdown from './new_dropdown/index.vue';
+import IdeTreeList from './ide_tree_list.vue';
 
 export default {
   components: {
-    Icon,
-    RepoFile,
-    SkeletonLoadingContainer,
     NewDropdown,
+    IdeTreeList,
   },
   computed: {
     ...mapState(['currentBranchId']),
-    ...mapGetters(['currentProject', 'currentTree']),
-  },
-  mounted() {
-    this.updateViewer('editor');
-  },
-  methods: {
-    ...mapActions(['updateViewer']),
+    ...mapGetters(['currentProject']),
   },
 };
 </script>
 
 <template>
-  <div
-    class="ide-file-list"
+  <ide-tree-list
+    viewer-type="editor"
   >
-    <template v-if="!currentTree || currentTree.loading">
-      <div
-        class="multi-file-loading-container"
-        v-for="n in 3"
-        :key="n"
-      >
-        <skeleton-loading-container />
-      </div>
-    </template>
-    <template v-else>
-      <header class="ide-tree-header">
-        {{ __('Edit') }}
-        <new-dropdown
-          :project-id="currentProject.name_with_namespace"
-          :branch="currentBranchId"
-          path=""
-        />
-      </header>
-      <repo-file
-        v-for="file in currentTree.tree"
-        :key="file.key"
-        :file="file"
-        :level="0"
+    <template
+      slot="header"
+    >
+      {{ __('Edit') }}
+      <new-dropdown
+        :project-id="currentProject.name_with_namespace"
+        :branch="currentBranchId"
+        path=""
       />
     </template>
-  </div>
+  </ide-tree-list>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue
new file mode 100644
index 00000000000..56baba05b74
--- /dev/null
+++ b/app/assets/javascripts/ide/components/ide_tree_list.vue
@@ -0,0 +1,73 @@
+<script>
+import { mapActions, mapGetters, mapState } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
+import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import RepoFile from './repo_file.vue';
+import NewDropdown from './new_dropdown/index.vue';
+
+export default {
+  components: {
+    Icon,
+    RepoFile,
+    SkeletonLoadingContainer,
+    NewDropdown,
+  },
+  props: {
+    viewerType: {
+      type: String,
+      required: true,
+    },
+    headerClass: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    disableActionDropdown: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    ...mapState(['currentBranchId']),
+    ...mapGetters(['currentProject', 'currentTree']),
+  },
+  mounted() {
+    this.updateViewer(this.viewerType);
+  },
+  methods: {
+    ...mapActions(['updateViewer']),
+  },
+};
+</script>
+
+<template>
+  <div
+    class="ide-file-list"
+  >
+    <template v-if="!currentTree || currentTree.loading">
+      <div
+        class="multi-file-loading-container"
+        v-for="n in 3"
+        :key="n"
+      >
+        <skeleton-loading-container />
+      </div>
+    </template>
+    <template v-else>
+      <header
+        class="ide-tree-header"
+        :class="headerClass"
+      >
+        <slot name="header"></slot>
+      </header>
+      <repo-file
+        v-for="file in currentTree.tree"
+        :key="file.key"
+        :file="file"
+        :level="0"
+        :disable-action-dropdown="disableActionDropdown"
+      />
+    </template>
+  </div>
+</template>
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 80c6a9dd3f2..d303b6660c6 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -902,3 +902,12 @@
     margin-top: -1px;
   }
 }
+
+.ide-review-header {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.ide-review-sub-header {
+  color: $gl-text-color-secondary;
+}
-- 
cgit v1.2.1


From eb8903a1d7a67f07d90fb951c4d9687c175e07df Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 20 Apr 2018 16:48:36 +0100
Subject: updated hover color

---
 app/assets/stylesheets/framework/gitlab_theme.scss | 2 --
 app/assets/stylesheets/pages/repo.scss             | 2 ++
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss
index 6a03c302d9c..4f8149dd426 100644
--- a/app/assets/stylesheets/framework/gitlab_theme.scss
+++ b/app/assets/stylesheets/framework/gitlab_theme.scss
@@ -186,8 +186,6 @@
   }
 
   .ide-sidebar-link {
-    &:hover,
-    &:focus,
     &.active {
       color: $color-700;
     }
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index d303b6660c6..7bf3bd80d86 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -777,10 +777,12 @@
   }
 
   &:hover {
+    color: $gl-text-color;
     background-color: $theme-gray-100;
   }
 
   &:focus {
+    color: $gl-text-color;
     background-color: $theme-gray-200;
   }
 
-- 
cgit v1.2.1


From cfae2d755cb38994aeb64fee6a98f9f1db0be4d5 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 23 Apr 2018 10:51:44 +0100
Subject: fixed scss lint & ide_tree_spec

---
 app/assets/stylesheets/framework/gitlab_theme.scss | 3 ---
 spec/javascripts/ide/components/ide_tree_spec.js   | 9 ---------
 2 files changed, 12 deletions(-)

diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss
index 4f8149dd426..0bbd6eb27c1 100644
--- a/app/assets/stylesheets/framework/gitlab_theme.scss
+++ b/app/assets/stylesheets/framework/gitlab_theme.scss
@@ -188,9 +188,6 @@
   .ide-sidebar-link {
     &.active {
       color: $color-700;
-    }
-
-    &.active {
       box-shadow: inset 3px 0 $color-700;
     }
   }
diff --git a/spec/javascripts/ide/components/ide_tree_spec.js b/spec/javascripts/ide/components/ide_tree_spec.js
index bdc03692b40..97a0a2432f1 100644
--- a/spec/javascripts/ide/components/ide_tree_spec.js
+++ b/spec/javascripts/ide/components/ide_tree_spec.js
@@ -28,15 +28,6 @@ describe('IdeRepoTree', () => {
     resetStore(vm.$store);
   });
 
-  it('renders loading', done => {
-    vm.currentTree.loading = true;
-
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelectorAll('.multi-file-loading-container').length).toBe(3);
-      done();
-    });
-  });
-
   it('renders list of files', () => {
     expect(vm.$el.textContent).toContain('fileName');
   });
-- 
cgit v1.2.1


From 70affaa0663f8fd4aa1aa08f85e35d312e78fee1 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 23 Apr 2018 11:20:49 +0100
Subject: fixed typo

---
 app/assets/javascripts/ide/components/ide_review.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/ide/components/ide_review.vue b/app/assets/javascripts/ide/components/ide_review.vue
index 1b1a5b91dd6..ede1a753f17 100644
--- a/app/assets/javascripts/ide/components/ide_review.vue
+++ b/app/assets/javascripts/ide/components/ide_review.vue
@@ -19,7 +19,7 @@ export default {
     >
       {{ __('Review') }}
       <div class="prepend-top-5 ide-review-sub-header">
-        {{ __('Lastest changed') }}
+        {{ __('Lastest changes') }}
       </div>
     </template>
   </ide-tree-list>
-- 
cgit v1.2.1


From ea680b73dedbe029f58857eccb9e1f1489f2de35 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 26 Apr 2018 12:02:26 +0100
Subject: specs

---
 app/assets/stylesheets/pages/repo.scss             | 10 +++-
 .../ide/components/activity_bar_spec.js            |  6 +++
 spec/javascripts/ide/components/ide_review_spec.js | 33 +++++++++++++
 .../ide/components/ide_tree_list_spec.js           | 54 ++++++++++++++++++++++
 spec/javascripts/ide/components/repo_file_spec.js  | 44 ++++++++++++++++--
 5 files changed, 142 insertions(+), 5 deletions(-)
 create mode 100644 spec/javascripts/ide/components/ide_review_spec.js
 create mode 100644 spec/javascripts/ide/components/ide_tree_list_spec.js

diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index cb2beb3cff9..4657b37b9a3 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -282,8 +282,14 @@
       opacity: 0.4;
     }
 
-    .editor.original .cursors-layer {
-      display: none;
+    .editor.original {
+      .view-lines {
+        cursor: default;
+      }
+
+      .cursors-layer {
+        display: none;
+      }
     }
   }
 }
diff --git a/spec/javascripts/ide/components/activity_bar_spec.js b/spec/javascripts/ide/components/activity_bar_spec.js
index 5c7b4909fc7..cc8de196393 100644
--- a/spec/javascripts/ide/components/activity_bar_spec.js
+++ b/spec/javascripts/ide/components/activity_bar_spec.js
@@ -62,6 +62,12 @@ describe('IDE activity bar', () => {
 
       expect(vm.updateActivityBarView).toHaveBeenCalledWith(ActivityBarViews.commit);
     });
+
+    it('calls updateActivityBarView with review value on click', () => {
+      vm.$el.querySelector('.js-ide-review-mode').click();
+
+      expect(vm.updateActivityBarView).toHaveBeenCalledWith(ActivityBarViews.review);
+    });
   });
 
   describe('active item', () => {
diff --git a/spec/javascripts/ide/components/ide_review_spec.js b/spec/javascripts/ide/components/ide_review_spec.js
new file mode 100644
index 00000000000..13753c6b6fb
--- /dev/null
+++ b/spec/javascripts/ide/components/ide_review_spec.js
@@ -0,0 +1,33 @@
+import Vue from 'vue';
+import IdeReview from '~/ide/components/ide_review.vue';
+import store from '~/ide/stores';
+import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
+import { resetStore, file } from '../helpers';
+import { projectData } from '../mock_data';
+
+describe('IDE review mode', () => {
+  const Component = Vue.extend(IdeReview);
+  let vm;
+
+  beforeEach(() => {
+    store.state.currentProjectId = 'abcproject';
+    store.state.currentBranchId = 'master';
+    store.state.projects.abcproject = Object.assign({}, projectData);
+    Vue.set(store.state.trees, 'abcproject/master', {
+      tree: [file('fileName')],
+      loading: false,
+    });
+
+    vm = createComponentWithStore(Component, store).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+
+    resetStore(vm.$store);
+  });
+
+  it('renders list of files', () => {
+    expect(vm.$el.textContent).toContain('fileName');
+  });
+});
diff --git a/spec/javascripts/ide/components/ide_tree_list_spec.js b/spec/javascripts/ide/components/ide_tree_list_spec.js
new file mode 100644
index 00000000000..4ecbdb8a55e
--- /dev/null
+++ b/spec/javascripts/ide/components/ide_tree_list_spec.js
@@ -0,0 +1,54 @@
+import Vue from 'vue';
+import IdeTreeList from '~/ide/components/ide_tree_list.vue';
+import store from '~/ide/stores';
+import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
+import { resetStore, file } from '../helpers';
+import { projectData } from '../mock_data';
+
+describe('IDE tree list', () => {
+  const Component = Vue.extend(IdeTreeList);
+  let vm;
+
+  beforeEach(() => {
+    store.state.currentProjectId = 'abcproject';
+    store.state.currentBranchId = 'master';
+    store.state.projects.abcproject = Object.assign({}, projectData);
+    Vue.set(store.state.trees, 'abcproject/master', {
+      tree: [file('fileName')],
+      loading: false,
+    });
+
+    vm = createComponentWithStore(Component, store, {
+      viewerType: 'edit',
+    });
+
+    spyOn(vm, 'updateViewer').and.callThrough();
+
+    vm.$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+
+    resetStore(vm.$store);
+  });
+
+  it('updates viewer on mount', () => {
+    expect(vm.updateViewer).toHaveBeenCalledWith('edit');
+  });
+
+  it('renders loading indicator', done => {
+    store.state.trees['abcproject/master'].loading = true;
+
+    vm.$nextTick(() => {
+      expect(vm.$el.querySelector('.multi-file-loading-container')).not.toBeNull();
+      expect(vm.$el.querySelectorAll('.multi-file-loading-container').length).toBe(3);
+
+      done();
+    });
+  });
+
+  it('renders list of files', () => {
+    expect(vm.$el.textContent).toContain('fileName');
+  });
+});
diff --git a/spec/javascripts/ide/components/repo_file_spec.js b/spec/javascripts/ide/components/repo_file_spec.js
index ff391cb4351..3bb7b7e49b7 100644
--- a/spec/javascripts/ide/components/repo_file_spec.js
+++ b/spec/javascripts/ide/components/repo_file_spec.js
@@ -5,7 +5,7 @@ import router from '~/ide/ide_router';
 import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
 import { file } from '../helpers';
 
-describe('RepoFile', () => {
+fdescribe('RepoFile', () => {
   let vm;
 
   function createComponent(propsData) {
@@ -72,9 +72,47 @@ describe('RepoFile', () => {
 
     it('renders a tooltip', () => {
       expect(
-        vm.$el.querySelector('.ide-file-name span:nth-child(2)').dataset
-          .originalTitle,
+        vm.$el.querySelector('.ide-file-name span:nth-child(2)').dataset.originalTitle,
       ).toContain('Locked by testuser');
     });
   });
+
+  describe('folder', () => {
+    it('renders action dropdown', done => {
+      createComponent({
+        file: {
+          ...file('t4'),
+          type: 'tree',
+          branchId: 'master',
+          projectId: 'project',
+        },
+        level: 0,
+      });
+
+      setTimeout(() => {
+        expect(vm.$el.querySelector('.ide-new-btn')).not.toBeNull();
+
+        done();
+      });
+    });
+
+    it('disables action dropdown', done => {
+      createComponent({
+        file: {
+          ...file('t4'),
+          type: 'tree',
+          branchId: 'master',
+          projectId: 'project',
+        },
+        level: 0,
+        disableActionDropdown: true,
+      });
+
+      setTimeout(() => {
+        expect(vm.$el.querySelector('.ide-new-btn')).toBeNull();
+
+        done();
+      });
+    });
+  });
 });
-- 
cgit v1.2.1


From f1b206a56b7add6142a8d2cec7a2df49633e1d60 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 26 Apr 2018 19:52:59 +0100
Subject: fixed eslint

---
 spec/javascripts/ide/components/repo_file_spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/javascripts/ide/components/repo_file_spec.js b/spec/javascripts/ide/components/repo_file_spec.js
index 3bb7b7e49b7..4b144eef744 100644
--- a/spec/javascripts/ide/components/repo_file_spec.js
+++ b/spec/javascripts/ide/components/repo_file_spec.js
@@ -5,7 +5,7 @@ import router from '~/ide/ide_router';
 import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
 import { file } from '../helpers';
 
-fdescribe('RepoFile', () => {
+describe('RepoFile', () => {
   let vm;
 
   function createComponent(propsData) {
-- 
cgit v1.2.1


From 15a8535f4a95723abfe1b3f112604b7388691f42 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Sun, 29 Apr 2018 18:32:55 +0100
Subject: fixed undefined variable after variable name change

---
 app/assets/javascripts/ide/components/activity_bar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/ide/components/activity_bar.vue b/app/assets/javascripts/ide/components/activity_bar.vue
index 561ffde885a..e27404a08d3 100644
--- a/app/assets/javascripts/ide/components/activity_bar.vue
+++ b/app/assets/javascripts/ide/components/activity_bar.vue
@@ -56,9 +56,9 @@ export default {
           type="button"
           class="ide-sidebar-link js-ide-review-mode"
           :class="{
-            active: currentActivityView === $options.ActivityBarViews.review
+            active: currentActivityView === $options.activityBarViews.review
           }"
-          @click.prevent="updateActivityBarView($options.ActivityBarViews.review)"
+          @click.prevent="updateActivityBarView($options.activityBarViews.review)"
         >
           <icon
             name="file-modified"
-- 
cgit v1.2.1


From 9f8895316e67860f1ef87ce495048e45ad563f52 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 30 Apr 2018 09:43:23 +0100
Subject: fixed karma & eslint

---
 spec/javascripts/ide/components/activity_bar_spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/javascripts/ide/components/activity_bar_spec.js b/spec/javascripts/ide/components/activity_bar_spec.js
index 956e6c04ff3..946c7e8e9c8 100644
--- a/spec/javascripts/ide/components/activity_bar_spec.js
+++ b/spec/javascripts/ide/components/activity_bar_spec.js
@@ -66,7 +66,7 @@ describe('IDE activity bar', () => {
     it('calls updateActivityBarView with review value on click', () => {
       vm.$el.querySelector('.js-ide-review-mode').click();
 
-      expect(vm.updateActivityBarView).toHaveBeenCalledWith(ActivityBarViews.review);
+      expect(vm.updateActivityBarView).toHaveBeenCalledWith(activityBarViews.review);
     });
   });
 
-- 
cgit v1.2.1


From 1180b74b7c61f3f8f2e0f1077c136d44740edf46 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 1 May 2018 10:46:28 +0100
Subject: hide edit/preview tabs in review & commit mode only make diff mode
 editable in review mode

---
 .../javascripts/ide/components/repo_editor.vue      | 17 ++++++++++++++---
 app/assets/javascripts/ide/lib/editor.js            |  5 ++++-
 app/assets/javascripts/ide/stores/getters.js        |  5 +++++
 app/assets/stylesheets/pages/repo.scss              | 21 +++++++++++----------
 spec/javascripts/ide/lib/editor_spec.js             |  4 +++-
 5 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 6b7e0aa001f..2d41f0f118e 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -20,7 +20,12 @@ export default {
   },
   computed: {
     ...mapState(['rightPanelCollapsed', 'viewer', 'panelResizing']),
-    ...mapGetters(['currentMergeRequest', 'getStagedFile']),
+    ...mapGetters([
+      'currentMergeRequest',
+      'getStagedFile',
+      'isReviewModeActive',
+      'isCommitModeActive',
+    ]),
     shouldHideEditor() {
       return this.file && this.file.binary && !this.file.content;
     },
@@ -102,7 +107,7 @@ export default {
         if (this.viewer === 'editor') {
           this.editor.createInstance(this.$refs.editor);
         } else {
-          this.editor.createDiffInstance(this.$refs.editor);
+          this.editor.createDiffInstance(this.$refs.editor, !this.isReviewModeActive);
         }
 
         this.setupEditor();
@@ -167,7 +172,10 @@ export default {
     id="ide"
     class="blob-viewer-container blob-editor-container"
   >
-    <div class="ide-mode-tabs clearfix">
+    <div
+      v-show="!isReviewModeActive && !isCommitModeActive"
+      class="ide-mode-tabs clearfix"
+    >
       <ul
         class="nav-links pull-left"
         v-if="!shouldHideEditor">
@@ -203,6 +211,9 @@ export default {
       v-show="!shouldHideEditor && file.viewMode === 'edit'"
       ref="editor"
       class="multi-file-editor-holder"
+      :class="{
+        'is-readonly': isCommitModeActive,
+      }"
     >
     </div>
     <content-viewer
diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js
index 489c7c1a03a..9c3bb9cc17d 100644
--- a/app/assets/javascripts/ide/lib/editor.js
+++ b/app/assets/javascripts/ide/lib/editor.js
@@ -61,7 +61,7 @@ export default class Editor {
     }
   }
 
-  createDiffInstance(domElement) {
+  createDiffInstance(domElement, readOnly = true) {
     if (!this.instance) {
       clearDomElement(domElement);
 
@@ -71,6 +71,9 @@ export default class Editor {
           quickSuggestions: false,
           occurrencesHighlight: false,
           renderSideBySide: Editor.renderSideBySide(domElement),
+          readOnly,
+          renderLineHighlight: readOnly ? 'all' : 'none',
+          hideCursorInOverviewRuler: !readOnly,
         })),
       );
 
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index a3a711cf096..0a5371fd5bb 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -1,3 +1,5 @@
+import { activityBarViews } from '../constants';
+
 export const activeFile = state => state.openFiles.find(file => file.active) || null;
 
 export const addedFiles = state => state.changedFiles.filter(f => f.tempFile);
@@ -52,5 +54,8 @@ export const allBlobs = state =>
 
 export const getStagedFile = state => path => state.stagedFiles.find(f => f.path === path);
 
+export const isReviewModeActive = state => state.currentActivityView === activityBarViews.review;
+export const isCommitModeActive = state => state.currentActivityView === activityBarViews.commit;
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 79f32033af4..73704b958b9 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -227,6 +227,17 @@
     display: none;
   }
 
+  .is-readonly,
+  .editor.original {
+    .view-lines {
+      cursor: default;
+    }
+
+    .cursors-layer {
+      display: none;
+    }
+  }
+
   .monaco-diff-editor.vs {
     .editor.modified {
       box-shadow: none;
@@ -285,16 +296,6 @@
     .margin-view-overlays .delete-sign {
       opacity: 0.4;
     }
-
-    .editor.original {
-      .view-lines {
-        cursor: default;
-      }
-
-      .cursors-layer {
-        display: none;
-      }
-    }
   }
 }
 
diff --git a/spec/javascripts/ide/lib/editor_spec.js b/spec/javascripts/ide/lib/editor_spec.js
index c4fda0fb1c2..b88a12264ca 100644
--- a/spec/javascripts/ide/lib/editor_spec.js
+++ b/spec/javascripts/ide/lib/editor_spec.js
@@ -70,12 +70,14 @@ describe('Multi-file editor library', () => {
         minimap: {
           enabled: false,
         },
-        readOnly: false,
+        readOnly: true,
         scrollBeyondLastLine: false,
         quickSuggestions: false,
         occurrencesHighlight: false,
         wordWrap: 'on',
         renderSideBySide: true,
+        renderLineHighlight: 'all',
+        hideCursorInOverviewRuler: false,
       });
     });
   });
-- 
cgit v1.2.1


From 2dc3d43c6409a7e68c7a952a541955e20dc8c395 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 1 May 2018 14:42:55 +0100
Subject: changed which element is hidden

---
 .../javascripts/ide/components/repo_editor.vue     | 27 +++++++++++++++++-----
 .../javascripts/ide/components/repo_editor_spec.js | 27 ++++++++++++++++++++++
 2 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 2d41f0f118e..6b7245bdbc1 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -3,6 +3,7 @@
 import { mapState, mapGetters, mapActions } from 'vuex';
 import flash from '~/flash';
 import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue';
+import { activityBarViews } from '../constants';
 import monacoLoader from '../monaco_loader';
 import Editor from '../lib/editor';
 import IdeFileButtons from './ide_file_buttons.vue';
@@ -19,7 +20,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['rightPanelCollapsed', 'viewer', 'panelResizing']),
+    ...mapState(['rightPanelCollapsed', 'viewer', 'panelResizing', 'currentActivityView']),
     ...mapGetters([
       'currentMergeRequest',
       'getStagedFile',
@@ -45,6 +46,21 @@ export default {
       // Compare key to allow for files opened in review mode to be cached differently
       if (newVal.key !== this.file.key) {
         this.initMonaco();
+
+        if (this.currentActivityView !== activityBarViews.edit) {
+          this.setFileViewMode({
+            file: this.file,
+            viewMode: 'edit',
+          });
+        }
+      }
+    },
+    currentActivityView() {
+      if (this.currentActivityView !== activityBarViews.edit) {
+        this.setFileViewMode({
+          file: this.file,
+          viewMode: 'edit',
+        });
       }
     },
     rightPanelCollapsed() {
@@ -172,13 +188,12 @@ export default {
     id="ide"
     class="blob-viewer-container blob-editor-container"
   >
-    <div
-      v-show="!isReviewModeActive && !isCommitModeActive"
-      class="ide-mode-tabs clearfix"
-    >
+    <div class="ide-mode-tabs clearfix" >
       <ul
         class="nav-links pull-left"
-        v-if="!shouldHideEditor">
+        v-if="!shouldHideEditor"
+        v-show="!isReviewModeActive && !isCommitModeActive"
+      >
         <li :class="editTabCSS">
           <a
             href="javascript:void(0);"
diff --git a/spec/javascripts/ide/components/repo_editor_spec.js b/spec/javascripts/ide/components/repo_editor_spec.js
index b06a6c62a1c..5a29508b25a 100644
--- a/spec/javascripts/ide/components/repo_editor_spec.js
+++ b/spec/javascripts/ide/components/repo_editor_spec.js
@@ -5,6 +5,7 @@ import store from '~/ide/stores';
 import repoEditor from '~/ide/components/repo_editor.vue';
 import monacoLoader from '~/ide/monaco_loader';
 import Editor from '~/ide/lib/editor';
+import { activityBarViews } from '~/ide/constants';
 import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
 import setTimeoutPromise from '../../helpers/set_timeout_promise_helper';
 import { file, resetStore } from '../helpers';
@@ -295,4 +296,30 @@ describe('RepoEditor', () => {
       });
     });
   });
+
+  describe('show tabs', () => {
+    it('shows tabs in edit mode', () => {
+      expect(vm.$el.querySelector('.nav-links').style.display).toBe('');
+    });
+
+    it('hides tabs in review mode', done => {
+      vm.$store.state.currentActivityView = activityBarViews.review;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.nav-links').style.display).toBe('none');
+
+        done();
+      });
+    });
+
+    it('hides tabs in commit mode', done => {
+      vm.$store.state.currentActivityView = activityBarViews.commit;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.nav-links').style.display).toBe('none');
+
+        done();
+      });
+    });
+  });
 });
-- 
cgit v1.2.1


From 06eb127b5bbebdfffec00ed56fdae24db29d91da Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 2 May 2018 09:10:24 +0100
Subject: fixed height changing when hiding tabs

---
 app/assets/stylesheets/pages/repo.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 73704b958b9..00bc95666f5 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -367,6 +367,7 @@
 
 .ide-btn-group {
   padding: $gl-padding-4 $gl-vert-padding;
+  line-height: 24px;
 }
 
 .ide-status-bar {
-- 
cgit v1.2.1


From 3c9439acd728d4980f54186de46f669d837fd7d6 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 2 May 2018 15:30:51 +0100
Subject: made path prop in dropdown optional added computed prop for showing
 loading indicator

---
 app/assets/javascripts/ide/components/ide_tree.vue           | 1 -
 app/assets/javascripts/ide/components/ide_tree_list.vue      | 5 ++++-
 app/assets/javascripts/ide/components/new_dropdown/index.vue | 3 ++-
 app/assets/javascripts/ide/components/repo_editor.vue        | 5 ++---
 app/assets/javascripts/ide/stores/getters.js                 | 2 +-
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/ide/components/ide_tree.vue b/app/assets/javascripts/ide/components/ide_tree.vue
index 7dbedaf2cb2..569d55d28ac 100644
--- a/app/assets/javascripts/ide/components/ide_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_tree.vue
@@ -26,7 +26,6 @@ export default {
       <new-dropdown
         :project-id="currentProject.name_with_namespace"
         :branch="currentBranchId"
-        path=""
       />
     </template>
   </ide-tree-list>
diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue
index 56baba05b74..e64a09fcc90 100644
--- a/app/assets/javascripts/ide/components/ide_tree_list.vue
+++ b/app/assets/javascripts/ide/components/ide_tree_list.vue
@@ -31,6 +31,9 @@ export default {
   computed: {
     ...mapState(['currentBranchId']),
     ...mapGetters(['currentProject', 'currentTree']),
+    showLoading() {
+      return !this.currentTree || this.currentTree.loading;
+    },
   },
   mounted() {
     this.updateViewer(this.viewerType);
@@ -45,7 +48,7 @@ export default {
   <div
     class="ide-file-list"
   >
-    <template v-if="!currentTree || currentTree.loading">
+    <template v-if="showLoading">
       <div
         class="multi-file-loading-container"
         v-for="n in 3"
diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue
index b1b5c0d4a28..a0ce1c9dac7 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue
@@ -17,7 +17,8 @@ export default {
     },
     path: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
   },
   data() {
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 6b7245bdbc1..23d584b62c4 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -24,7 +24,7 @@ export default {
     ...mapGetters([
       'currentMergeRequest',
       'getStagedFile',
-      'isReviewModeActive',
+      'isEditModeActive',
       'isCommitModeActive',
     ]),
     shouldHideEditor() {
@@ -191,8 +191,7 @@ export default {
     <div class="ide-mode-tabs clearfix" >
       <ul
         class="nav-links pull-left"
-        v-if="!shouldHideEditor"
-        v-show="!isReviewModeActive && !isCommitModeActive"
+        v-if="!shouldHideEditor && isEditModeActive"
       >
         <li :class="editTabCSS">
           <a
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index 0a5371fd5bb..8dd3b9a66a2 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -54,7 +54,7 @@ export const allBlobs = state =>
 
 export const getStagedFile = state => path => state.stagedFiles.find(f => f.path === path);
 
-export const isReviewModeActive = state => state.currentActivityView === activityBarViews.review;
+export const isEditModeActive = state => state.currentActivityView === activityBarViews.edit;
 export const isCommitModeActive = state => state.currentActivityView === activityBarViews.commit;
 
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
-- 
cgit v1.2.1


From 8c9fad9d32d3a9b3b30ae7203c361d788eff9e02 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 2 May 2018 16:22:13 +0100
Subject: fixed repo_editor_spec

---
 spec/javascripts/ide/components/repo_editor_spec.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/spec/javascripts/ide/components/repo_editor_spec.js b/spec/javascripts/ide/components/repo_editor_spec.js
index 5a29508b25a..360b6d4dc15 100644
--- a/spec/javascripts/ide/components/repo_editor_spec.js
+++ b/spec/javascripts/ide/components/repo_editor_spec.js
@@ -299,14 +299,14 @@ describe('RepoEditor', () => {
 
   describe('show tabs', () => {
     it('shows tabs in edit mode', () => {
-      expect(vm.$el.querySelector('.nav-links').style.display).toBe('');
+      expect(vm.$el.querySelector('.nav-links')).not.toBe(null);
     });
 
     it('hides tabs in review mode', done => {
       vm.$store.state.currentActivityView = activityBarViews.review;
 
       vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.nav-links').style.display).toBe('none');
+        expect(vm.$el.querySelector('.nav-links')).toBe(null);
 
         done();
       });
@@ -316,7 +316,7 @@ describe('RepoEditor', () => {
       vm.$store.state.currentActivityView = activityBarViews.commit;
 
       vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.nav-links').style.display).toBe('none');
+        expect(vm.$el.querySelector('.nav-links')).toBe(null);
 
         done();
       });
-- 
cgit v1.2.1