Added review mode to new IDE sidebar

#44846

11 files changed, 98 insertions, 56 deletions

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
@@ -53,6 +53,20 @@ export default {
       <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"
           class="ide-sidebar-link js-ide-commit-mode"
           :class="{
             active: currentActivityView === $options.ActivityBarViews.commit
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;
     }
   }