Merge branch '238631-ide-show-hide-file-tree' into 'master'

Improve performance on toggling left sidebar tabs in Web IDE

See merge request gitlab-org/gitlab!42873

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

@@ -7,9 +7,8 @@ import ActivityBar from './activity_bar.vue';
 import RepoCommitSection from './repo_commit_section.vue';
 import CommitForm from './commit_sidebar/form.vue';
 import IdeReview from './ide_review.vue';
-import SuccessMessage from './commit_sidebar/success_message.vue';
 import IdeProjectHeader from './ide_project_header.vue';
-import { leftSidebarViews, SIDEBAR_INIT_WIDTH } from '../constants';
+import { SIDEBAR_INIT_WIDTH } from '../constants';
 
 export default {
   components: {
@@ -20,18 +19,11 @@ export default {
     IdeTree,
     CommitForm,
     IdeReview,
-    SuccessMessage,
     IdeProjectHeader,
   },
   computed: {
     ...mapState(['loading', 'currentActivityView', 'changedFiles', 'stagedFiles', 'lastCommitMsg']),
     ...mapGetters(['currentProject', 'someUncommittedChanges']),
-    showSuccessMessage() {
-      return (
-        this.currentActivityView === leftSidebarViews.edit.name &&
-        (this.lastCommitMsg && !this.someUncommittedChanges)
-      );
-    },
   },
   SIDEBAR_INIT_WIDTH,
 };
@@ -44,7 +36,7 @@ export default {
     class="multi-file-commit-panel flex-column"
   >
     <template v-if="loading">
-      <div class="multi-file-commit-panel-inner">
+      <div class="multi-file-commit-panel-inner" data-testid="ide-side-bar-inner">
         <div v-for="n in 3" :key="n" class="multi-file-loading-container">
           <gl-skeleton-loading />
         </div>
@@ -54,9 +46,11 @@ export default {
       <ide-project-header :project="currentProject" />
       <div class="ide-context-body d-flex flex-fill">
         <activity-bar />
-        <div class="multi-file-commit-panel-inner">
+        <div class="multi-file-commit-panel-inner" data-testid="ide-side-bar-inner">
           <div class="multi-file-commit-panel-inner-content">
-            <component :is="currentActivityView" />
+            <keep-alive>
+              <component :is="currentActivityView" />
+            </keep-alive>
           </div>
           <commit-form />
         </div>

app/assets/javascripts/ide/constants.js

@@ -47,9 +47,9 @@ export const diffViewerErrors = Object.freeze({
 });
 
 export const leftSidebarViews = {
-  edit: { name: 'ide-tree', keepAlive: false },
-  review: { name: 'ide-review', keepAlive: false },
-  commit: { name: 'repo-commit-section', keepAlive: false },
+  edit: { name: 'ide-tree' },
+  review: { name: 'ide-review' },
+  commit: { name: 'repo-commit-section' },
 };
 
 export const rightSidebarViews = {

spec/frontend/ide/components/ide_side_bar_spec.js

-import Vue from 'vue';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { mount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { GlSkeletonLoading } from '@gitlab/ui';
 import { createStore } from '~/ide/stores';
-import ideSidebar from '~/ide/components/ide_side_bar.vue';
+import IdeSidebar from '~/ide/components/ide_side_bar.vue';
+import IdeTree from '~/ide/components/ide_tree.vue';
+import RepoCommitSection from '~/ide/components/repo_commit_section.vue';
 import { leftSidebarViews } from '~/ide/constants';
 import { projectData } from '../mock_data';
 
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
 describe('IdeSidebar', () => {
-  let vm;
+  let wrapper;
   let store;
 
-  beforeEach(() => {
+  function createComponent() {
     store = createStore();
 
-    const Component = Vue.extend(ideSidebar);
-
     store.state.currentProjectId = 'abcproject';
     store.state.projects.abcproject = projectData;
 
-    vm = createComponentWithStore(Component, store).$mount();
-  });
+    return mount(IdeSidebar, {
+      store,
+      localVue,
+    });
+  }
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
   it('renders a sidebar', () => {
-    expect(vm.$el.querySelector('.multi-file-commit-panel-inner')).not.toBeNull();
+    wrapper = createComponent();
+
+    expect(wrapper.find('[data-testid="ide-side-bar-inner"]').exists()).toBe(true);
   });
 
-  it('renders loading icon component', done => {
-    vm.$store.state.loading = true;
+  it('renders loading components', async () => {
+    wrapper = createComponent();
 
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('.multi-file-loading-container')).not.toBeNull();
-      expect(vm.$el.querySelectorAll('.multi-file-loading-container').length).toBe(3);
+    store.state.loading = true;
 
-      done();
-    });
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.findAll(GlSkeletonLoading)).toHaveLength(3);
   });
 
   describe('activityBarComponent', () => {
     it('renders tree component', () => {
-      expect(vm.$el.querySelector('.ide-file-list')).not.toBeNull();
+      wrapper = createComponent();
+
+      expect(wrapper.find(IdeTree).exists()).toBe(true);
     });
 
-    it('renders commit component', done => {
-      vm.$store.state.currentActivityView = leftSidebarViews.commit.name;
+    it('renders commit component', async () => {
+      wrapper = createComponent();
+
+      store.state.currentActivityView = leftSidebarViews.commit.name;
 
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.multi-file-commit-panel-section')).not.toBeNull();
+      await wrapper.vm.$nextTick();
 
-        done();
-      });
+      expect(wrapper.find(RepoCommitSection).exists()).toBe(true);
     });
   });
+
+  it('keeps the current activity view components alive', async () => {
+    wrapper = createComponent();
+
+    const ideTreeComponent = wrapper.find(IdeTree).element;
+
+    store.state.currentActivityView = leftSidebarViews.commit.name;
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find(IdeTree).exists()).toBe(false);
+    expect(wrapper.find(RepoCommitSection).exists()).toBe(true);
+
+    store.state.currentActivityView = leftSidebarViews.edit.name;
+
+    await wrapper.vm.$nextTick();
+
+    // reference to the elements remains the same, meaning the components were kept alive
+    expect(wrapper.find(IdeTree).element).toEqual(ideTreeComponent);
+  });
 });

spec/frontend_integration/ide/__snapshots__/ide_integration_spec.js.snap

@@ -20,6 +20,7 @@ exports[`WebIDE runs 1`] = `
       >
         <div
           class="multi-file-commit-panel-inner"
+          data-testid="ide-side-bar-inner"
         >
           <div
             class="multi-file-loading-container"