Commit 9ae73222 authored by Chad Woolley's avatar Chad Woolley

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
parent 4833bc80
......@@ -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>
......
......@@ -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;
})
......
......@@ -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)
);
},
......
......@@ -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);
}
},
},
......
......@@ -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,
......
......@@ -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 },
......
......@@ -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) => {
......
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);
......
......@@ -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) {
......
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 () => {};
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: {},
......
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(
......
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');
......
......@@ -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();
......
......@@ -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();
......
......@@ -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);
......
......@@ -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) => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment