Refactor constant activityBarViews to leftSidebarViews

This is a refactoring to support a collapsible left IDE sidebar.
See the epic for more context:
https://gitlab.com/groups/gitlab-org/-/epics/2585

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

@@ -3,7 +3,7 @@ import $ from 'jquery';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
-import { activityBarViews } from '../constants';
+import { leftSidebarViews } from '../constants';
 
 export default {
   components: {
@@ -26,7 +26,7 @@ export default {
       $(e.currentTarget).tooltip('hide');
     },
   },
-  activityBarViews,
+  leftSidebarViews,
 };
 </script>
 
@@ -37,7 +37,7 @@ export default {
         <button
           v-tooltip
           :class="{
-            active: currentActivityView === $options.activityBarViews.edit,
+            active: currentActivityView === $options.leftSidebarViews.edit.name,
           }"
           :title="s__('IDE|Edit')"
           :aria-label="s__('IDE|Edit')"
@@ -45,7 +45,7 @@ export default {
           data-placement="right"
           type="button"
           class="ide-sidebar-link js-ide-edit-mode"
-          @click.prevent="changedActivityView($event, $options.activityBarViews.edit)"
+          @click.prevent="changedActivityView($event, $options.leftSidebarViews.edit.name)"
         >
           <icon name="code" />
         </button>
@@ -54,7 +54,7 @@ export default {
         <button
           v-tooltip
           :class="{
-            active: currentActivityView === $options.activityBarViews.review,
+            active: currentActivityView === $options.leftSidebarViews.review.name,
           }"
           :title="s__('IDE|Review')"
           :aria-label="s__('IDE|Review')"
@@ -62,7 +62,7 @@ export default {
           data-placement="right"
           type="button"
           class="ide-sidebar-link js-ide-review-mode"
-          @click.prevent="changedActivityView($event, $options.activityBarViews.review)"
+          @click.prevent="changedActivityView($event, $options.leftSidebarViews.review.name)"
         >
           <icon name="file-modified" />
         </button>
@@ -71,7 +71,7 @@ export default {
         <button
           v-tooltip
           :class="{
-            active: currentActivityView === $options.activityBarViews.commit,
+            active: currentActivityView === $options.leftSidebarViews.commit.name,
           }"
           :title="s__('IDE|Commit')"
           :aria-label="s__('IDE|Commit')"
@@ -79,7 +79,7 @@ export default {
           data-placement="right"
           type="button"
           class="ide-sidebar-link js-ide-commit-mode qa-commit-mode-tab"
-          @click.prevent="changedActivityView($event, $options.activityBarViews.commit)"
+          @click.prevent="changedActivityView($event, $options.leftSidebarViews.commit.name)"
         >
           <icon name="commit" />
         </button>

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

@@ -5,7 +5,7 @@ import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import CommitMessageField from './message_field.vue';
 import Actions from './actions.vue';
 import SuccessMessage from './success_message.vue';
-import { activityBarViews, MAX_WINDOW_HEIGHT_COMPACT } from '../../constants';
+import { leftSidebarViews, MAX_WINDOW_HEIGHT_COMPACT } from '../../constants';
 
 export default {
   components: {
@@ -41,7 +41,7 @@ export default {
     },
 
     currentViewIsCommitView() {
-      return this.currentActivityView === activityBarViews.commit;
+      return this.currentActivityView === leftSidebarViews.commit.name;
     },
   },
   watch: {
@@ -57,7 +57,7 @@ export default {
 
     lastCommitMsg() {
       this.isCompact =
-        this.currentActivityView !== activityBarViews.commit && this.lastCommitMsg === '';
+        this.currentActivityView !== leftSidebarViews.commit.name && this.lastCommitMsg === '';
     },
   },
   methods: {
@@ -67,7 +67,7 @@ export default {
       if (this.currentViewIsCommitView) {
         this.isCompact = !this.isCompact;
       } else {
-        this.updateActivityBarView(activityBarViews.commit)
+        this.updateActivityBarView(leftSidebarViews.commit.name)
           .then(() => {
             this.isCompact = false;
           })

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

@@ -4,19 +4,19 @@ import { GlSkeletonLoading } from '@gitlab/ui';
 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 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 { activityBarViews } from '../constants';
+import { leftSidebarViews } from '../constants';
 
 export default {
   components: {
     GlSkeletonLoading,
     ResizablePanel,
     ActivityBar,
-    CommitSection,
+    RepoCommitSection,
     IdeTree,
     CommitForm,
     IdeReview,
@@ -28,7 +28,7 @@ export default {
     ...mapGetters(['currentProject', 'someUncommittedChanges']),
     showSuccessMessage() {
       return (
-        this.currentActivityView === activityBarViews.edit &&
+        this.currentActivityView === leftSidebarViews.edit.name &&
         (this.lastCommitMsg && !this.someUncommittedChanges)
       );
     },

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

@@ -5,7 +5,7 @@ import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import CommitFilesList from './commit_sidebar/list.vue';
 import EmptyState from './commit_sidebar/empty_state.vue';
 import consts from '../stores/modules/commit/constants';
-import { activityBarViews, stageKeys } from '../constants';
+import { leftSidebarViews, stageKeys } from '../constants';
 
 export default {
   components: {
@@ -37,7 +37,7 @@ export default {
   watch: {
     hasChanges() {
       if (!this.hasChanges) {
-        this.updateActivityBarView(activityBarViews.edit);
+        this.updateActivityBarView(leftSidebarViews.edit.name);
       }
     },
   },

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

@@ -5,7 +5,7 @@ import flash from '~/flash';
 import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue';
 import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
 import {
-  activityBarViews,
+  leftSidebarViews,
   viewerTypes,
   FILE_VIEW_MODE_EDITOR,
   FILE_VIEW_MODE_PREVIEW,
@@ -100,7 +100,7 @@ export default {
       if (oldVal.key !== this.file.key) {
         this.initEditor();
 
-        if (this.currentActivityView !== activityBarViews.edit) {
+        if (this.currentActivityView !== leftSidebarViews.edit.name) {
           this.setFileViewMode({
             file: this.file,
             viewMode: FILE_VIEW_MODE_EDITOR,
@@ -109,7 +109,7 @@ export default {
       }
     },
     currentActivityView() {
-      if (this.currentActivityView !== activityBarViews.edit) {
+      if (this.currentActivityView !== leftSidebarViews.edit.name) {
         this.setFileViewMode({
           file: this.file,
           viewMode: FILE_VIEW_MODE_EDITOR,

app/assets/javascripts/ide/constants.js

@@ -11,12 +11,6 @@ export const FILE_VIEW_MODE_PREVIEW = 'preview';
 export const PERMISSION_CREATE_MR = 'createMergeRequestIn';
 export const PERMISSION_READ_MR = 'readMergeRequest';
 
-export const activityBarViews = {
-  edit: 'ide-tree',
-  commit: 'commit-section',
-  review: 'ide-review',
-};
-
 export const viewerTypes = {
   mr: 'mrdiff',
   edit: 'editor',
@@ -47,6 +41,12 @@ export const diffViewerErrors = Object.freeze({
   stored_externally: 'server_side_but_stored_externally',
 });
 
+export const leftSidebarViews = {
+  edit: { name: 'ide-tree', keepAlive: false },
+  review: { name: 'ide-review', keepAlive: false },
+  commit: { name: 'repo-commit-section', keepAlive: false },
+};
+
 export const rightSidebarViews = {
   pipelines: { name: 'pipelines-list', keepAlive: true },
   jobsDetail: { name: 'jobs-detail', keepAlive: false },

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

@@ -2,7 +2,7 @@ import flash from '~/flash';
 import { __ } from '~/locale';
 import service from '../../services';
 import * as types from '../mutation_types';
-import { activityBarViews, PERMISSION_READ_MR } from '../../constants';
+import { leftSidebarViews, PERMISSION_READ_MR } from '../../constants';
 
 export const getMergeRequestsForBranch = (
   { commit, state, getters },
@@ -187,7 +187,7 @@ export const openMergeRequest = (
     )
     .then(mrChanges => {
       if (mrChanges.changes.length) {
-        dispatch('updateActivityBarView', activityBarViews.review);
+        dispatch('updateActivityBarView', leftSidebarViews.review.name);
       }
 
       mrChanges.changes.forEach((change, ind) => {

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

 import { getChangesCountForFiles, filePathMatches } from './utils';
 import {
-  activityBarViews,
+  leftSidebarViews,
   packageJsonPath,
   PERMISSION_READ_MR,
   PERMISSION_CREATE_MR,
@@ -74,9 +74,11 @@ export const getOpenFile = state => path => state.openFiles.find(f => f.path ===
 export const lastOpenedFile = state =>
   [...state.changedFiles, ...state.stagedFiles].sort((a, b) => b.lastOpenedAt - a.lastOpenedAt)[0];
 
-export const isEditModeActive = state => state.currentActivityView === activityBarViews.edit;
-export const isCommitModeActive = state => state.currentActivityView === activityBarViews.commit;
-export const isReviewModeActive = state => state.currentActivityView === activityBarViews.review;
+export const isEditModeActive = state => state.currentActivityView === leftSidebarViews.edit.name;
+export const isCommitModeActive = state =>
+  state.currentActivityView === leftSidebarViews.commit.name;
+export const isReviewModeActive = state =>
+  state.currentActivityView === leftSidebarViews.review.name;
 
 export const someUncommittedChanges = state =>
   Boolean(state.changedFiles.length || state.stagedFiles.length);

app/assets/javascripts/ide/stores/modules/commit/actions.js

@@ -7,7 +7,7 @@ import router from '../../../ide_router';
 import service from '../../../services';
 import * as types from './mutation_types';
 import consts from './constants';
-import { activityBarViews } from '../../../constants';
+import { leftSidebarViews } from '../../../constants';
 import eventHub from '../../../eventhub';
 
 export const updateCommitMessage = ({ commit }, message) => {
@@ -189,7 +189,7 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState, roo
                 throw e;
               });
           } else {
-            dispatch('updateActivityBarView', activityBarViews.edit, { root: true });
+            dispatch('updateActivityBarView', leftSidebarViews.edit.name, { root: true });
             dispatch('updateViewer', 'editor', { root: true });
 
             if (rootGetters.activeFile) {

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

-import { activityBarViews } from '../../../constants';
+import { leftSidebarViews } from '../../../constants';
 import { __ } from '~/locale';
 
 export const templateTypes = () => [
@@ -22,6 +22,6 @@ export const templateTypes = () => [
 
 export const showFileTemplatesBar = (_, getters, rootState) => name =>
   getters.templateTypes.find(t => t.name === name) &&
-  rootState.currentActivityView === activityBarViews.edit;
+  rootState.currentActivityView === leftSidebarViews.edit.name;
 
 export default () => {};

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

-import { activityBarViews, viewerTypes } from '../constants';
+import { leftSidebarViews, viewerTypes } from '../constants';
 import { DEFAULT_THEME } from '../lib/themes';
 
 export default () => ({
@@ -21,7 +21,7 @@ export default () => ({
   entries: {},
   viewer: viewerTypes.edit,
   delayViewerUpdated: false,
-  currentActivityView: activityBarViews.edit,
+  currentActivityView: leftSidebarViews.edit.name,
   unusedSeal: true,
   fileFindVisible: false,
   links: {},

spec/frontend/ide/stores/modules/file_templates/getters_spec.js

 import createState from '~/ide/stores/state';
-import { activityBarViews } from '~/ide/constants';
+import { leftSidebarViews } from '~/ide/constants';
 import * as getters from '~/ide/stores/modules/file_templates/getters';
 
 describe('IDE file templates getters', () => {
@@ -17,7 +17,7 @@ describe('IDE file templates getters', () => {
     });
 
     it('returns true if template is found and currentActivityView is edit', () => {
-      rootState.currentActivityView = activityBarViews.edit;
+      rootState.currentActivityView = leftSidebarViews.edit.name;
 
       expect(
         getters.showFileTemplatesBar(
@@ -31,7 +31,7 @@ describe('IDE file templates getters', () => {
     });
 
     it('returns false if template is found and currentActivityView is not edit', () => {
-      rootState.currentActivityView = activityBarViews.commit;
+      rootState.currentActivityView = leftSidebarViews.commit.name;
 
       expect(
         getters.showFileTemplatesBar(

spec/javascripts/ide/components/activity_bar_spec.js

 import Vue from 'vue';
 import store from '~/ide/stores';
-import { activityBarViews } from '~/ide/constants';
+import { leftSidebarViews } from '~/ide/constants';
 import ActivityBar from '~/ide/components/activity_bar.vue';
 import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
 import { resetStore } from '../helpers';
@@ -34,19 +34,19 @@ describe('IDE activity bar', () => {
     it('calls updateActivityBarView with edit value on click', () => {
       vm.$el.querySelector('.js-ide-edit-mode').click();
 
-      expect(vm.updateActivityBarView).toHaveBeenCalledWith(activityBarViews.edit);
+      expect(vm.updateActivityBarView).toHaveBeenCalledWith(leftSidebarViews.edit.name);
     });
 
     it('calls updateActivityBarView with commit value on click', () => {
       vm.$el.querySelector('.js-ide-commit-mode').click();
 
-      expect(vm.updateActivityBarView).toHaveBeenCalledWith(activityBarViews.commit);
+      expect(vm.updateActivityBarView).toHaveBeenCalledWith(leftSidebarViews.commit.name);
     });
 
     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(leftSidebarViews.review.name);
     });
   });
 
@@ -60,7 +60,7 @@ describe('IDE activity bar', () => {
     });
 
     it('sets commit item active', done => {
-      vm.$store.state.currentActivityView = activityBarViews.commit;
+      vm.$store.state.currentActivityView = leftSidebarViews.commit.name;
 
       vm.$nextTick(() => {
         expect(vm.$el.querySelector('.js-ide-commit-mode').classList).toContain('active');

spec/javascripts/ide/components/commit_sidebar/form_spec.js

@@ -4,7 +4,7 @@ import getSetTimeoutPromise from 'spec/helpers/set_timeout_promise_helper';
 import { projectData } from 'spec/ide/mock_data';
 import store from '~/ide/stores';
 import CommitForm from '~/ide/components/commit_sidebar/form.vue';
-import { activityBarViews } from '~/ide/constants';
+import { leftSidebarViews } from '~/ide/constants';
 import { resetStore } from '../../helpers';
 
 describe('IDE commit form', () => {
@@ -71,7 +71,7 @@ describe('IDE commit form', () => {
       vm.$el.querySelector('.btn-primary').click();
 
       vm.$nextTick(() => {
-        expect(store.state.currentActivityView).toBe(activityBarViews.commit);
+        expect(store.state.currentActivityView).toBe(leftSidebarViews.commit.name);
 
         done();
       });
@@ -79,7 +79,7 @@ describe('IDE commit form', () => {
 
     it('collapses if lastCommitMsg is set to empty and current view is not commit view', done => {
       store.state.lastCommitMsg = 'abc';
-      store.state.currentActivityView = activityBarViews.edit;
+      store.state.currentActivityView = leftSidebarViews.edit.name;
 
       vm.$nextTick(() => {
         // if commit message is set, form is uncollapsed
@@ -133,7 +133,7 @@ describe('IDE commit form', () => {
       vm.$el.querySelector('.btn-primary').click();
 
       vm.$nextTick(() => {
-        expect(store.state.currentActivityView).toBe(activityBarViews.commit);
+        expect(store.state.currentActivityView).toBe(leftSidebarViews.commit.name);
         expect(vm.isCompact).toBe(false);
 
         done();

spec/javascripts/ide/components/ide_side_bar_spec.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import store from '~/ide/stores';
 import ideSidebar from '~/ide/components/ide_side_bar.vue';
-import { activityBarViews } from '~/ide/constants';
+import { leftSidebarViews } from '~/ide/constants';
 import { resetStore } from '../helpers';
 import { projectData } from '../mock_data';
 
@@ -45,7 +45,7 @@ describe('IdeSidebar', () => {
     });
 
     it('renders commit component', done => {
-      vm.$store.state.currentActivityView = activityBarViews.commit;
+      vm.$store.state.currentActivityView = leftSidebarViews.commit.name;
 
       vm.$nextTick(() => {
         expect(vm.$el.querySelector('.multi-file-commit-panel-section')).not.toBeNull();

spec/javascripts/ide/components/repo_editor_spec.js

@@ -5,7 +5,7 @@ import axios from '~/lib/utils/axios_utils';
 import store from '~/ide/stores';
 import repoEditor from '~/ide/components/repo_editor.vue';
 import Editor from '~/ide/lib/editor';
-import { activityBarViews, FILE_VIEW_MODE_EDITOR, FILE_VIEW_MODE_PREVIEW } from '~/ide/constants';
+import { leftSidebarViews, FILE_VIEW_MODE_EDITOR, FILE_VIEW_MODE_PREVIEW } from '~/ide/constants';
 import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
 import setTimeoutPromise from '../../helpers/set_timeout_promise_helper';
 import { file, resetStore } from '../helpers';
@@ -359,7 +359,7 @@ describe('RepoEditor', () => {
     });
 
     it('hides tabs in review mode', done => {
-      vm.$store.state.currentActivityView = activityBarViews.review;
+      vm.$store.state.currentActivityView = leftSidebarViews.review.name;
 
       vm.$nextTick(() => {
         expect(vm.$el.querySelector('.nav-links')).toBe(null);
@@ -369,7 +369,7 @@ describe('RepoEditor', () => {
     });
 
     it('hides tabs in commit mode', done => {
-      vm.$store.state.currentActivityView = activityBarViews.commit;
+      vm.$store.state.currentActivityView = leftSidebarViews.commit.name;
 
       vm.$nextTick(() => {
         expect(vm.$el.querySelector('.nav-links')).toBe(null);

spec/javascripts/ide/stores/actions/merge_request_spec.js

@@ -8,7 +8,7 @@ import actions, {
   openMergeRequest,
 } from '~/ide/stores/actions/merge_request';
 import service from '~/ide/services';
-import { activityBarViews, PERMISSION_READ_MR } from '~/ide/constants';
+import { leftSidebarViews, PERMISSION_READ_MR } from '~/ide/constants';
 import { resetStore } from '../../helpers';
 
 const TEST_PROJECT = 'abcproject';
@@ -470,7 +470,7 @@ describe('IDE store merge request actions', () => {
         .then(() => {
           expect(store.dispatch).toHaveBeenCalledWith(
             'updateActivityBarView',
-            activityBarViews.review,
+            leftSidebarViews.review.name,
           );
 
           testMergeRequestChanges.changes.forEach((change, i) => {