Skip to content

G
gitlab-ce
Commit 03974580 authored by Phil Hughes's avatar Phil Hughes
Browse files
Options

Tidy up IDE code 

[ci skip]
parent 1a294f8e
Hide whitespace changes
Inline Side-by-side
Showing with 303 additions and 548 deletions
ee/app/assets/javascripts/ide/components/ide.vue
View file @ 03974580
......@@ -5,7 +5,6 @@
import repoTabs from './repo_tabs.vue';
import repoFileButtons from './repo_file_buttons.vue';
import ideStatusBar from './ide_status_bar.vue';
import repoPreview from './repo_preview.vue';
import repoEditor from './repo_editor.vue';
export default {
......@@ -16,7 +15,6 @@
repoFileButtons,
ideStatusBar,
repoEditor,
repoPreview,
},
props: {
emptyStateSvgPath: {
......@@ -34,8 +32,6 @@
},
computed: {
...mapState([
'currentBlobView',
'selectedFile',
'changedFiles',
]),
...mapGetters([
......@@ -68,13 +64,12 @@
v-if="activeFile"
>
<repo-tabs/>
<component
<repo-editor
class="multi-file-edit-pane-content"
:is="currentBlobView"
/>
<repo-file-buttons />
<ide-status-bar
:file="selectedFile"
:file="activeFile"
/>
</template>
<template
......
ee/app/assets/javascripts/ide/components/ide_context_bar.vue
View file @ 03974580
......@@ -3,12 +3,14 @@
import icon from '~/vue_shared/components/icon.vue';
import panelResizer from '~/vue_shared/components/panel_resizer.vue';
import repoCommitSection from './repo_commit_section.vue';
import ResizablePanel from './resizable_panel.vue';
export default {
components: {
repoCommitSection,
icon,
panelResizer,
ResizablePanel,
},
props: {
noChangesStateSvgPath: {
......@@ -70,13 +72,10 @@
</script>
<template>
<div
class="multi-file-commit-panel"
:class="{
'is-collapsed': rightPanelCollapsed,
}"
:style="panelStyle"
@click="toggleFullbarCollapsed"
<resizable-panel
:collapsible="true"
:initial-width="340"
side="right"
>
<div
class="multi-file-commit-panel-section"
......@@ -117,15 +116,5 @@
:committed-state-svg-path="committedStateSvgPath"
/>
</div>
<panel-resizer
:size.sync="width"
:enabled="!rightPanelCollapsed"
:start-size="340"
:min-size="200"
:max-size="maxSize"
@resize-start="resizingStarted"
@resize-end="resizingEnded"
side="left"
/>
</div>
</resizable-panel>
</template>
ee/app/assets/javascripts/ide/components/ide_repo_tree.vue
View file @ 03974580
<script>
import { mapState } from 'vuex';
import { mapState, mapGetters } from 'vuex';
import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
import repoFile from './repo_file.vue';
......@@ -23,6 +23,9 @@ export default {
return state.project.name;
},
}),
...mapGetters([
'treeList',
]),
selctedTree() {
return this.trees[this.treeId].tree;
},
......@@ -48,7 +51,7 @@ export default {
</div>
</template>
<repo-file
v-for="file in selctedTree"
v-for="file in treeList"
:key="file.key"
:file="file"
/>
......
ee/app/assets/javascripts/ide/components/ide_side_bar.vue
View file @ 03974580
......@@ -4,6 +4,7 @@
import panelResizer from '~/vue_shared/components/panel_resizer.vue';
import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
import projectTree from './ide_project_tree.vue';
import ResizablePanel from './resizable_panel.vue';
export default {
components: {
......@@ -11,6 +12,7 @@
icon,
panelResizer,
skeletonLoadingContainer,
ResizablePanel,
},
data() {
return {
......@@ -61,12 +63,10 @@
</script>
<template>
<div
class="multi-file-commit-panel"
:class="{
'is-collapsed': leftPanelCollapsed,
}"
:style="panelStyle"
<resizable-panel
:collapsible="false"
:initial-width="290"
side="left"
>
<div class="multi-file-commit-panel-inner">
<template v-if="showLoading">
......@@ -84,31 +84,5 @@
:project="project"
/>
</div>
<button
type="button"
class="btn btn-transparent left-collapse-btn"
@click="toggleCollapsed"
>
<icon
:name="currentIcon"
:size="18"
/>
<span
v-if="!leftPanelCollapsed"
class="collapse-text"
>
Collapse sidebar
</span>
</button>
<panel-resizer
:size.sync="width"
:enabled="!leftPanelCollapsed"
:start-size="290"
:min-size="200"
:max-size="maxSize"
@resize-start="resizingStarted"
@resize-end="resizingEnded"
side="right"
/>
</div>
</resizable-panel>
</template>
ee/app/assets/javascripts/ide/components/ide_status_bar.vue
View file @ 03974580
<script>
import { mapState } from 'vuex';
import icon from '~/vue_shared/components/icon.vue';
import tooltip from '~/vue_shared/directives/tooltip';
import timeAgoMixin from '~/vue_shared/mixins/timeago';
......@@ -20,11 +19,6 @@
required: true,
},
},
computed: {
...mapState([
'selectedFile',
]),
},
};
</script>
......@@ -35,32 +29,32 @@
name="branch"
:size="12"
/>
{{ selectedFile.branchId }}
{{ file.branchId }}
</div>
<div>
<div v-if="selectedFile.lastCommit && selectedFile.lastCommit.id">
<div v-if="file.lastCommit && file.lastCommit.id">
Last commit:
<a
v-tooltip
:title="selectedFile.lastCommit.message"
:href="selectedFile.lastCommit.url"
:title="file.lastCommit.message"
:href="file.lastCommit.url"
>
{{ timeFormated(selectedFile.lastCommit.updatedAt) }} by
{{ selectedFile.lastCommit.author }}
{{ timeFormated(file.lastCommit.updatedAt) }} by
{{ file.lastCommit.author }}
</a>
</div>
</div>
<div class="text-right">
{{ selectedFile.name }}
{{ file.name }}
</div>
<div class="text-right">
{{ selectedFile.eol }}
{{ file.eol }}
</div>
<div class="text-right">
{{ file.editorRow }}:{{ file.editorColumn }}
</div>
<div class="text-right">
{{ selectedFile.fileLanguage }}
{{ file.fileLanguage }}
</div>
</div>
</template>
ee/app/assets/javascripts/ide/components/repo_edit_button.vue deleted 100644 → 0
View file @ 1a294f8e
<script>
import { mapGetters, mapActions, mapState } from 'vuex';
import modal from '~/vue_shared/components/modal.vue';
export default {
components: {
modal,
},
computed: {
...mapState([
'editMode',
]),
...mapGetters([
'canEditFile',
]),
buttonLabel() {
return this.editMode ? this.__('Cancel edit') : this.__('Edit');
},
},
methods: {
...mapActions([
'toggleEditMode',
]),
},
};
</script>
<template>
<div class="editable-mode">
<button
v-if="canEditFile"
class="btn btn-default"
type="button"
@click.prevent="toggleEditMode()">
<i
v-if="!editMode"
class="fa fa-pencil"
aria-hidden="true">
</i>
<span>
{{ buttonLabel }}
</span>
</button>
</div>
</template>
ee/app/assets/javascripts/ide/components/repo_editor.vue
View file @ 03974580
......@@ -9,7 +9,6 @@ export default {
computed: {
...mapGetters([
'activeFile',
'activeFileExtension',
]),
...mapState([
'leftPanelCollapsed',
......@@ -22,7 +21,7 @@ export default {
},
watch: {
activeFile(oldVal, newVal) {
if (newVal && !newVal.active) {
if (newVal.path !== this.activeFile.path) {
this.initMonaco();
}
},
......
ee/app/assets/javascripts/ide/components/repo_preview.vue deleted 100644 → 0
View file @ 1a294f8e
<script>
import $ from 'jquery';
import { mapGetters } from 'vuex';
import LineHighlighter from '~/line_highlighter';
import syntaxHighlight from '~/syntax_highlight';
export default {
computed: {
...mapGetters([
'activeFile',
]),
renderErrorTooLarge() {
return this.activeFile.renderError === 'too_large';
},
},
mounted() {
this.highlightFile();
this.lineHighlighter = new LineHighlighter({
fileHolderSelector: '.blob-viewer-container',
scrollFileHolder: true,
});
},
updated() {
this.$nextTick(() => {
this.highlightFile();
});
},
methods: {
highlightFile() {
syntaxHighlight($(this.$el).find('.file-content'));
},
},
};
</script>
<template>
<div>
<div
v-if="!activeFile.renderError"
v-html="activeFile.html"
class="multi-file-preview-holder"
>
</div>
<div
v-else-if="activeFile.tempFile"
class="vertical-center render-error">
<p class="text-center">
The source could not be displayed for this temporary file.
</p>
</div>
<div
v-else-if="renderErrorTooLarge"
class="vertical-center render-error">
<p class="text-center">
The source could not be displayed because it is too large.
You can <a
:href="activeFile.rawPath"
download>download</a> it instead.
</p>
</div>
<div
v-else
class="vertical-center render-error">
<p class="text-center">
The source could not be displayed because a rendering error occurred.
You can <a
:href="activeFile.rawPath"
download>download</a> it instead.
</p>
</div>
</div>
</template>
ee/app/assets/javascripts/ide/components/repo_tabs.vue
View file @ 03974580
<script>
import { mapState } from 'vuex';
import { mapGetters } from 'vuex';
import RepoTab from './repo_tab.vue';
export default {
......@@ -7,8 +7,8 @@
'repo-tab': RepoTab,
},
computed: {
...mapState([
'openFiles',
...mapGetters([
'openFilesMap',
]),
},
};
......@@ -19,7 +19,7 @@
class="multi-file-tabs list-unstyled append-bottom-0"
>
<repo-tab
v-for="tab in openFiles"
v-for="tab in openFilesMap"
:key="tab.key"
:tab="tab"
/>
......
ee/app/assets/javascripts/ide/components/resizable_panel.vue 0 → 100644
View file @ 03974580
<script>
import { mapActions, mapState } from 'vuex';
import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
export default {
components: {
PanelResizer,
},
props: {
collapsible: {
type: Boolean,
required: true,
},
initialWidth: {
type: Number,
required: true,
},
minSize: {
type: Number,
required: false,
default: 200,
},
side: {
type: String,
required: true,
},
},
data() {
return {
width: this.initialWidth,
};
},
computed: {
...mapState({
collapsed(state) {
return state[`${this.side}PanelCollapsed`];
},
}),
panelStyle() {
if (!this.collapsed) {
return {
width: `${this.width}px`,
};
}
return {};
},
},
methods: {
...mapActions([
'setPanelCollapsedStatus',
'setResizingStatus',
]),
toggleFullbarCollapsed() {
if (this.collapsed && this.collapsible) {
this.setPanelCollapsedStatus({
side: this.side,
collapsed: !this.collapsed,
});
}
},
},
maxSize: (window.innerWidth / 2),
};
</script>
<template>
<div
class="multi-file-commit-panel"
:class="{
'is-collapsed': collapsed && collapsible,
}"
:style="panelStyle"
@click="toggleFullbarCollapsed"
>
<slot></slot>
<panel-resizer
:size.sync="width"
:enabled="!collapsed"
:start-size="initialWidth"
:min-size="minSize"
:max-size="$options.maxSize"
@resize-start="setResizingStatus(true)"
@resize-end="setResizingStatus(false)"
:side="side === 'right' ? 'left' : 'right'"
/>
</div>
</template>
ee/app/assets/javascripts/ide/ide_router.js
View file @ 03974580
......@@ -2,9 +2,6 @@ import Vue from 'vue';
import VueRouter from 'vue-router';
import flash from '~/flash';
import store from './stores';
import {
getTreeEntry,
} from './stores/utils';
Vue.use(VueRouter);
......@@ -76,7 +73,7 @@ router.beforeEach((to, from, next) => {
})
.then(() => {
if (to.params[0]) {
const treeEntry = getTreeEntry(store, `${to.params.namespace}/${to.params.project}/${to.params.branch}`, to.params[0]);
const treeEntry = store.state.entries[to.params[0]];
if (treeEntry) {
store.dispatch('handleTreeEntryAction', treeEntry);
}
......
ee/app/assets/javascripts/ide/stores/actions.js
View file @ 03974580
......@@ -23,19 +23,6 @@ export const closeAllFiles = ({ state, dispatch }) => {
state.openFiles.forEach(file => dispatch('closeFile', file));
};
export const toggleEditMode = ({ commit, dispatch }) => {
commit(types.TOGGLE_EDIT_MODE);
dispatch('toggleBlobView');
};
export const toggleBlobView = ({ commit, state }) => {
if (state.editMode) {
commit(types.SET_EDIT_MODE);
} else {
commit(types.SET_PREVIEW_MODE);
}
};
export const setPanelCollapsedStatus = ({ commit }, { side, collapsed }) => {
if (side === 'left') {
commit(types.SET_LEFT_PANEL_COLLAPSED, collapsed);
......
ee/app/assets/javascripts/ide/stores/actions/file.js
View file @ 03974580
......@@ -10,8 +10,8 @@ import {
findIndexOfFile,
} from '../utils';
export const closeFile = ({ commit, state, dispatch }, file) => {
const indexOfClosedFile = findIndexOfFile(state.openFiles, file);
export const closeFile = ({ commit, state, getters, dispatch }, file) => {
const indexOfClosedFile = state.openFiles.indexOf(file.path);
const fileWasActive = file.active;
commit(types.TOGGLE_FILE_OPEN, file);
......@@ -19,7 +19,7 @@ export const closeFile = ({ commit, state, dispatch }, file) => {
if (state.openFiles.length > 0 && fileWasActive) {
const nextIndexToOpen = indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1;
const nextFileToOpen = state.openFiles[nextIndexToOpen];
const nextFileToOpen = state.entries[state.openFiles[nextIndexToOpen]];
router.push(`/project${nextFileToOpen.url}`);
} else if (!state.openFiles.length) {
......@@ -89,21 +89,21 @@ export const changeFileContent = ({ state, commit }, { file, content }) => {
}
};
export const setFileLanguage = ({ state, commit }, { fileLanguage }) => {
if (state.selectedFile) {
commit(types.SET_FILE_LANGUAGE, { file: state.selectedFile, fileLanguage });
export const setFileLanguage = ({ getters, commit }, { fileLanguage }) => {
if (getters.activeFile) {
commit(types.SET_FILE_LANGUAGE, { file: getters.activeFile, fileLanguage });
}
};
export const setFileEOL = ({ state, commit }, { eol }) => {
if (state.selectedFile) {
commit(types.SET_FILE_EOL, { file: state.selectedFile, eol });
export const setFileEOL = ({ getters, commit }, { eol }) => {
if (getters.activeFile) {
commit(types.SET_FILE_EOL, { file: getters.activeFile, eol });
}
};
export const setEditorPosition = ({ state, commit }, { editorRow, editorColumn }) => {
if (state.selectedFile) {
commit(types.SET_FILE_POSITION, { file: state.selectedFile, editorRow, editorColumn });
export const setEditorPosition = ({ getters, commit }, { editorRow, editorColumn }) => {
if (getters.activeFile) {
commit(types.SET_FILE_POSITION, { file: getters.activeFile, editorRow, editorColumn });
}
};
......@@ -134,10 +134,6 @@ export const createTempFile = ({ state, commit, dispatch }, { projectId, branchI
commit(types.ADD_FILE_TO_CHANGED, file);
dispatch('setFileActive', file);
if (!state.editMode && !file.base64) {
dispatch('toggleEditMode', true);
}
router.push(`/project${file.url}`);
return Promise.resolve(file);
......
ee/app/assets/javascripts/ide/stores/actions/tree.js
View file @ 03974580
......@@ -9,7 +9,7 @@ import {
findEntry,
createTemp,
createOrMergeEntry,
sortTree,
decorateData,
} from '../utils';
export const getTreeData = (
......@@ -199,72 +199,70 @@ export const getFiles = (
.getFiles(selectedProject.web_url, branchId)
.then(res => res.json())
.then((data) => {
const newTree = data.reduce((outputArray, file) => {
const pathSplit = file.split('/');
const treeList = [];
const entries = data.reduce((acc, path) => {
const pathSplit = path.split('/');
const blobName = pathSplit.pop();
let selectedFolderTree;
let foundFolder = null;
let fullPath = '';
if (pathSplit.length > 0) {
const newBaseFolders = pathSplit.reduce((newFolders, folder, currentIndex) => {
fullPath += `/${folder}`;
foundFolder = findEntry(selectedFolderTree || outputArray, 'tree', fullPath, 'path');
if (!foundFolder) {
foundFolder = createOrMergeEntry({
pathSplit.reduce((pathAcc, folderName, folderLevel) => {
const folderPath = `${(pathAcc.length ? `${pathAcc[pathAcc.length - 1]}/` : '')}${folderName}`;
const foundEntry = state.entries[folderPath];
if (!foundEntry) {
const tree = decorateData({
projectId,
branchId,
entry: {
id: fullPath,
name: folder,
path: fullPath,
url: `/${projectId}/tree/${branchId}/${fullPath}`,
},
level: currentIndex,
id: folderPath,
name: folderName,
path: folderPath,
url: `/${projectId}/tree/${branchId}/${folderPath}`,
level: folderLevel,
type: 'tree',
parentTreeUrl: '',
state,
});
if (selectedFolderTree) {
selectedFolderTree.push(foundFolder);
} else {
newFolders.push(foundFolder);
Object.assign(acc, {
[folderPath]: tree,
});
if (folderLevel === 0) {
treeList.push(tree.path);
}
}
selectedFolderTree = foundFolder.tree;
return newFolders;
return pathAcc;
}, []);
if (newBaseFolders.length) outputArray.push(newBaseFolders[0]);
}
// Add file
const blobEntry = createOrMergeEntry({
const fileFolder = acc[pathSplit.join('/')];
const file = decorateData({
projectId,
branchId,
entry: {
id: file,
name: blobName,
path: file,
url: `/${projectId}/blob/${branchId}/${file}`,
},
level: foundFolder ? (foundFolder.level + 1) : 0,
id: path,
name: blobName,
path,
url: `/${projectId}/blob/${branchId}/${path}`,
level: fileFolder ? fileFolder.level + 1 : 0,
type: 'blob',
parentTreeUrl: foundFolder ? foundFolder.url : '',
state,
});
if (selectedFolderTree) {
selectedFolderTree.push(blobEntry);
Object.assign(acc, {
[path]: file,
});
if (fileFolder) {
fileFolder.tree.push(path);
} else {
outputArray.push(blobEntry);
treeList.push(file.path);
}
return outputArray;
}, []);
return acc;
}, {});
const selectedTree = state.trees[`${projectId}/${branchId}`];
commit(types.SET_DIRECTORY_DATA, { tree: selectedTree, data: sortTree(newTree) });
commit(types.SET_ENTRIES, entries);
commit(types.SET_DIRECTORY_DATA, { tree: selectedTree, data: treeList });
commit(types.TOGGLE_LOADING, { entry: selectedTree, forceValue: false });
resolve();
......
ee/app/assets/javascripts/ide/stores/getters.js
View file @ 03974580
export const activeFile = state => state.openFiles.find(file => file.active) || null;
import { sortTree } from './utils';
export const activeFileExtension = (state) => {
const file = activeFile(state);
return file ? `.${file.path.split('.').pop()}` : '';
};
export const openFilesMap = state => state.openFiles.map(path => state.entries[path]);
export const activeFile = state => openFilesMap(state).find(file => file.active) || null;
export const canEditFile = (state) => {
const currentActiveFile = activeFile(state);
......@@ -15,3 +14,28 @@ export const canEditFile = (state) => {
export const addedFiles = state => state.changedFiles.filter(f => f.tempFile);
export const modifiedFiles = state => state.changedFiles.filter(f => !f.tempFile);
export const treeList = (state) => {
const tree = state.trees['root/testing-123/master'];
if (!tree) return [];
const map = (arr) => {
if (!arr.tree.length) return [];
return sortTree(arr.tree.reduce((acc, key) => {
const entity = state.entries[key];
if (entity) {
return acc.concat({
...entity,
tree: map(entity),
});
}
return acc;
}, []));
};
return map(tree);
};
ee/app/assets/javascripts/ide/stores/mutation_types.js
View file @ 03974580
......@@ -40,9 +40,6 @@ export const ADD_FILE_TO_CHANGED = 'ADD_FILE_TO_CHANGED';
export const REMOVE_FILE_FROM_CHANGED = 'REMOVE_FILE_FROM_CHANGED';
export const TOGGLE_FILE_CHANGED = 'TOGGLE_FILE_CHANGED';
// Viewer mutation types
export const SET_PREVIEW_MODE = 'SET_PREVIEW_MODE';
export const SET_EDIT_MODE = 'SET_EDIT_MODE';
export const TOGGLE_EDIT_MODE = 'TOGGLE_EDIT_MODE';
export const SET_CURRENT_BRANCH = 'SET_CURRENT_BRANCH';
export const SET_ENTRIES = 'SET_ENTRIES';
ee/app/assets/javascripts/ide/stores/mutations.js
View file @ 03974580
......@@ -8,25 +8,22 @@ export default {
[types.SET_INITIAL_DATA](state, data) {
Object.assign(state, data);
},
[types.SET_PREVIEW_MODE](state) {
Object.assign(state, {
currentBlobView: 'repo-preview',
});
},
[types.SET_EDIT_MODE](state) {
Object.assign(state, {
currentBlobView: 'repo-editor',
});
},
[types.TOGGLE_LOADING](state, { entry, forceValue = undefined }) {
Object.assign(entry, {
loading: forceValue !== undefined ? forceValue : !entry.loading,
});
},
[types.TOGGLE_EDIT_MODE](state) {
Object.assign(state, {
editMode: !state.editMode,
});
if (entry.path) {
Object.assign(state, {
entries: {
...state.entries,
[entry.path]: {
...state.entries[entry.path],
loading: forceValue !== undefined ? forceValue : !state.entries[entry.path].loading,
},
},
});
} else {
Object.assign(entry, {
loading: forceValue !== undefined ? forceValue : !entry.loading,
});
}
},
[types.SET_LEFT_PANEL_COLLAPSED](state, collapsed) {
Object.assign(state, {
......@@ -57,6 +54,11 @@ export default {
lastCommitMsg,
});
},
[types.SET_ENTRIES](state, entries) {
Object.assign(state, {
entries,
});
},
...projectMutations,
...fileMutations,
...treeMutations,
......
ee/app/assets/javascripts/ide/stores/mutations/file.js
View file @ 03974580
......@@ -3,39 +3,59 @@ import { findIndexOfFile } from '../utils';
export default {
[types.SET_FILE_ACTIVE](state, { file, active }) {
Object.assign(file, {
active,
});
Object.assign(state, {
selectedFile: file,
entries: {
...state.entries,
[file.path]: {
...state.entries[file.path],
active,
},
},
});
},
[types.TOGGLE_FILE_OPEN](state, file) {
Object.assign(file, {
opened: !file.opened,
Object.assign(state, {
entries: {
...state.entries,
[file.path]: {
...state.entries[file.path],
opened: !state.entries[file.path].opened,
},
},
});
if (file.opened) {
state.openFiles.push(file);
if (state.entries[file.path].opened) {
state.openFiles.push(file.path);
} else {
state.openFiles.splice(findIndexOfFile(state.openFiles, file), 1);
state.openFiles.splice(state.openFiles.indexOf(file.path), 1);
}
},
[types.SET_FILE_DATA](state, { data, file }) {
Object.assign(file, {
id: data.id,
blamePath: data.blame_path,
commitsPath: data.commits_path,
permalink: data.permalink,
rawPath: data.raw_path,
binary: data.binary,
renderError: data.render_error,
Object.assign(state, {
entries: {
...state.entries,
[file.path]: {
...state.entries[file.path],
id: data.id,
blamePath: data.blame_path,
commitsPath: data.commits_path,
permalink: data.permalink,
rawPath: data.raw_path,
binary: data.binary,
renderError: data.render_error,
},
},
});
},
[types.SET_FILE_RAW_DATA](state, { file, raw }) {
Object.assign(file, {
raw,
Object.assign(state, {
entries: {
...state.entries,
[file.path]: {
...state.entries[file.path],
raw,
},
},
});
},
[types.UPDATE_FILE_CONTENT](state, { file, content }) {
......@@ -47,19 +67,37 @@ export default {
});
},
[types.SET_FILE_LANGUAGE](state, { file, fileLanguage }) {
Object.assign(file, {
fileLanguage,
Object.assign(state, {
entries: {
...state.entries,
[file.path]: {
...state.entries[file.path],
fileLanguage,
},
},
});
},
[types.SET_FILE_EOL](state, { file, eol }) {
Object.assign(file, {
eol,
Object.assign(state, {
entries: {
...state.entries,
[file.path]: {
...state.entries[file.path],
eol,
},
},
});
},
[types.SET_FILE_POSITION](state, { file, editorRow, editorColumn }) {
Object.assign(file, {
editorRow,
editorColumn,
Object.assign(state, {
entries: {
...state.entries,
[file.path]: {
...state.entries[file.path],
editorRow,
editorColumn,
},
},
});
},
[types.DISCARD_FILE_CHANGES](state, file) {
......
ee/app/assets/javascripts/ide/stores/mutations/tree.js
View file @ 03974580
......@@ -2,8 +2,14 @@ import * as types from '../mutation_types';
export default {
[types.TOGGLE_TREE_OPEN](state, tree) {
Object.assign(tree, {
opened: !tree.opened,
Object.assign(state, {
entries: {
...state.entries,
[tree.path]: {
...state.entries[tree.path],
opened: !state.entries[tree.path].opened,
},
},
});
},
[types.CREATE_TREE](state, { treePath }) {
......
ee/app/assets/javascripts/ide/stores/state.js
View file @ 03974580
......@@ -2,9 +2,7 @@ export default () => ({
canCommit: false,
currentProjectId: '',
currentBranchId: '',
currentBlobView: 'repo-editor',
changedFiles: [],
editMode: true,
endpoints: {},
isInitialRoot: false,
lastCommitMsg: '',
......@@ -20,4 +18,5 @@ export default () => ({
leftPanelCollapsed: false,
rightPanelCollapsed: false,
panelResizing: false,
entries: {},
});
ee/app/assets/javascripts/ide/stores/utils.js
View file @ 03974580
......@@ -11,7 +11,6 @@ export const dataStructure = () => ({
path: '',
level: 0,
tempFile: false,
icon: '',
tree: [],
loading: false,
opened: false,
......@@ -51,7 +50,6 @@ export const decorateData = (entity) => {
type,
url,
name,
icon,
tree_url,
path,
renderError,
......@@ -81,7 +79,6 @@ export const decorateData = (entity) => {
path,
level,
tempFile,
icon: `fa-${icon}`,
opened,
active,
parentTreeUrl,
......@@ -144,7 +141,6 @@ export const createTemp = ({
type,
tempFile: true,
path: treePath,
icon: type === 'tree' ? 'folder' : 'file-text-o',
changed,
content,
parentTreeUrl: '',
......
spec/javascripts/ide/components/new_dropdown/modal_spec.js
View file @ 03974580
......@@ -117,16 +117,6 @@ describe('new file modal component', () => {
});
});
it('toggles blob view', (done) => {
vm.createEntryInStore();
setTimeout(() => {
expect(vm.$store.state.currentBlobView).toBe('repo-editor');
done();
});
});
it('opens newly created file', (done) => {
if (type === 'blob') {
vm.createEntryInStore();
......
spec/javascripts/ide/components/repo_edit_button_spec.js deleted 100644 → 0
View file @ 1a294f8e
import Vue from 'vue';
import store from 'ee/ide/stores';
import repoEditButton from 'ee/ide/components/repo_edit_button.vue';
import { file, resetStore } from '../helpers';
describe('RepoEditButton', () => {
let vm;
beforeEach(() => {
const f = file();
const RepoEditButton = Vue.extend(repoEditButton);
vm = new RepoEditButton({
store,
});
f.active = true;
vm.$store.dispatch('setInitialData', {
canCommit: true,
onTopOfBranch: true,
});
vm.$store.state.openFiles.push(f);
});
afterEach(() => {
vm.$destroy();
resetStore(vm.$store);
});
it('renders an edit button', () => {
vm.$mount();
expect(vm.$el.querySelector('.btn')).not.toBeNull();
expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Cancel edit');
});
it('renders edit button with cancel text', () => {
vm.$store.state.editMode = true;
vm.$mount();
expect(vm.$el.querySelector('.btn')).not.toBeNull();
expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Cancel edit');
});
it('toggles edit mode on click', (done) => {
vm.$mount();
vm.$el.querySelector('.btn').click();
vm.$nextTick(() => {
expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Edit');
done();
});
});
});
spec/javascripts/ide/components/repo_preview_spec.js deleted 100644 → 0
View file @ 1a294f8e
import Vue from 'vue';
import store from 'ee/ide/stores';
import repoPreview from 'ee/ide/components/repo_preview.vue';
import { file, resetStore } from '../helpers';
describe('RepoPreview', () => {
let vm;
function createComponent() {
const f = file();
const RepoPreview = Vue.extend(repoPreview);
const comp = new RepoPreview({
store,
});
f.active = true;
f.html = 'test';
comp.$store.state.openFiles.push(f);
return comp.$mount();
}
afterEach(() => {
vm.$destroy();
resetStore(vm.$store);
});
it('renders a div with the activeFile html', () => {
vm = createComponent();
expect(vm.$el.tagName).toEqual('DIV');
expect(vm.$el.innerHTML).toContain('test');
});
});
spec/javascripts/ide/stores/actions_spec.js
View file @ 03974580
import Vue from 'vue';
import * as urlUtils from '~/lib/utils/url_utility';
import store from 'ee/ide/stores';
import router from 'ee/ide/ide_router';
......@@ -84,56 +83,6 @@ describe('Multi-file store actions', () => {
});
});
describe('toggleEditMode', () => {
it('toggles edit mode', (done) => {
store.state.editMode = true;
store.dispatch('toggleEditMode')
.then(() => {
expect(store.state.editMode).toBeFalsy();
done();
}).catch(done.fail);
});
it('sets preview mode', (done) => {
store.state.currentBlobView = 'repo-editor';
store.state.editMode = true;
store.dispatch('toggleEditMode')
.then(Vue.nextTick)
.then(() => {
expect(store.state.currentBlobView).toBe('repo-preview');
done();
}).catch(done.fail);
});
});
describe('toggleBlobView', () => {
it('sets edit mode view if in edit mode', (done) => {
store.dispatch('toggleBlobView')
.then(() => {
expect(store.state.currentBlobView).toBe('repo-editor');
done();
})
.catch(done.fail);
});
it('sets preview mode view if not in edit mode', (done) => {
store.state.editMode = false;
store.dispatch('toggleBlobView')
.then(() => {
expect(store.state.currentBlobView).toBe('repo-preview');
done();
})
.catch(done.fail);
});
});
describe('createTempEntry', () => {
beforeEach(() => {
store.state.trees['abcproject/mybranch'] = {
......
spec/javascripts/ide/stores/getters_spec.js
View file @ 03974580
......@@ -26,20 +26,6 @@ describe('Multi-file store getters', () => {
});
});
describe('activeFileExtension', () => {
it('returns the file extension for the current active file', () => {
localState.openFiles.push(file('active'));
localState.openFiles[0].active = true;
localState.openFiles[0].path = 'test.js';
expect(getters.activeFileExtension(localState)).toBe('.js');
localState.openFiles[0].path = 'test.es6.js';
expect(getters.activeFileExtension(localState)).toBe('.js');
});
});
describe('canEditFile', () => {
beforeEach(() => {
localState.onTopOfBranch = true;
......
spec/javascripts/ide/stores/mutations_spec.js
View file @ 03974580
......@@ -21,34 +21,6 @@ describe('Multi-file store mutations', () => {
});
});
describe('SET_PREVIEW_MODE', () => {
it('sets currentBlobView to repo-preview', () => {
mutations.SET_PREVIEW_MODE(localState);
expect(localState.currentBlobView).toBe('repo-preview');
localState.currentBlobView = 'testing';
mutations.SET_PREVIEW_MODE(localState);
expect(localState.currentBlobView).toBe('repo-preview');
});
});
describe('SET_EDIT_MODE', () => {
it('sets currentBlobView to repo-editor', () => {
mutations.SET_EDIT_MODE(localState);
expect(localState.currentBlobView).toBe('repo-editor');
localState.currentBlobView = 'testing';
mutations.SET_EDIT_MODE(localState);
expect(localState.currentBlobView).toBe('repo-editor');
});
});
describe('TOGGLE_LOADING', () => {
it('toggles loading of entry', () => {
mutations.TOGGLE_LOADING(localState, { entry });
......@@ -71,18 +43,6 @@ describe('Multi-file store mutations', () => {
});
});
describe('TOGGLE_EDIT_MODE', () => {
it('toggles editMode', () => {
mutations.TOGGLE_EDIT_MODE(localState);
expect(localState.editMode).toBeFalsy();
mutations.TOGGLE_EDIT_MODE(localState);
expect(localState.editMode).toBeTruthy();
});
});
describe('SET_LEFT_PANEL_COLLAPSED', () => {
it('sets left panel collapsed', () => {
mutations.SET_LEFT_PANEL_COLLAPSED(localState, true);
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7