Commit 5c75d750 authored by Phil Hughes's avatar Phil Hughes

addressed feedback from review

spec fixes
parent 4b80cde2
<script>
import { mapState } from 'vuex';
import newModal from './modal.vue';
export default {
......@@ -11,6 +12,11 @@
modalType: '',
};
},
computed: {
...mapState([
'path',
]),
},
methods: {
createNewItem(type) {
this.modalType = type;
......@@ -64,6 +70,7 @@
<new-modal
v-if="openModal"
:type="modalType"
:path="path"
@toggle="toggleModalOpen"
/>
</div>
......
......@@ -9,10 +9,14 @@
type: String,
required: true,
},
path: {
type: String,
required: true,
},
},
data() {
return {
entryName: '',
entryName: this.path !== '' ? `${this.path}/` : '',
};
},
components: {
......@@ -24,7 +28,7 @@
]),
createEntryInStore() {
this.createTempEntry({
name: this.entryName,
name: this.entryName.replace(new RegExp(`^${this.path}\/`), ''),
type: this.type,
});
......@@ -35,17 +39,6 @@
},
},
computed: {
...mapState([
'path',
]),
name: {
get() {
return this.path !== '' ? `${this.path}/${this.entryName}` : this.entryName;
},
set(newVal) {
this.entryName = newVal.replace(`${this.path}/`, '');
},
},
modalTitle() {
if (this.type === 'tree') {
return __('Create new directory');
......@@ -95,7 +88,7 @@
<input
type="text"
class="form-control"
v-model="name"
v-model="entryName"
ref="fieldName"
/>
</div>
......
......@@ -13,7 +13,7 @@ export default {
'currentBlobView',
]),
...mapGetters([
'isMini',
'isCollapsed',
'changedFiles',
]),
},
......@@ -26,15 +26,12 @@ export default {
RepoPreview,
},
mounted() {
const alertMessage = 'Are you sure you want to lose unsaved changes?';
window.onbeforeunload = (e) => {
const event = e || window.event;
if (!this.changedFiles.length) return undefined;
if (event) event.returnValue = 'Are you sure you want to lose unsaved changes?';
// For Safari
return 'Are you sure you want to lose unsaved changes?';
e.returnValue = alertMessage;
return alertMessage;
};
},
};
......@@ -42,10 +39,10 @@ export default {
<template>
<div class="repository-view">
<div class="tree-content-holder" :class="{'tree-content-holder-mini' : isMini}">
<div class="tree-content-holder" :class="{'tree-content-holder-mini' : isCollapsed}">
<repo-sidebar/>
<div
v-if="isMini"
v-if="isCollapsed"
class="panel-right"
>
<repo-tabs/>
......
......@@ -33,6 +33,7 @@ export default {
...mapActions([
'checkCommitStatus',
'commitChanges',
'getTreeData',
]),
makeCommit(newBranch = false) {
const createNewBranch = newBranch || this.startNewMR;
......@@ -54,6 +55,7 @@ export default {
this.commitChanges({ payload, newMr: this.startNewMR })
.then(() => {
this.submitCommitsLoading = false;
this.getTreeData();
})
.catch(() => {
this.submitCommitsLoading = false;
......
......@@ -92,5 +92,10 @@ export default {
</script>
<template>
<div id="ide" v-if='!shouldHideEditor' class="blob-viewer-container blob-editor-container"></div>
<div
id="ide"
v-if='!shouldHideEditor'
class="blob-viewer-container blob-editor-container"
>
</div>
</template>
......@@ -14,7 +14,7 @@
},
computed: {
...mapGetters([
'isMini',
'isCollapsed',
]),
fileIcon() {
return {
......@@ -71,7 +71,7 @@
</template>
</td>
<template v-if="!isMini">
<template v-if="!isCollapsed">
<td class="hidden-sm hidden-xs">
<a
@click.stop
......
......@@ -4,7 +4,7 @@
export default {
computed: {
...mapGetters([
'isMini',
'isCollapsed',
]),
},
methods: {
......@@ -30,7 +30,7 @@
</div>
</div>
</td>
<template v-if="!isMini">
<template v-if="!isCollapsed">
<td
class="hidden-sm hidden-xs">
<div class="animation-container">
......
......@@ -7,10 +7,10 @@
'parentTreeUrl',
]),
...mapGetters([
'isMini',
'isCollapsed',
]),
colSpanCondition() {
return this.isMini ? undefined : 3;
return this.isCollapsed ? undefined : 3;
},
},
methods: {
......
......@@ -7,6 +7,9 @@ export default {
...mapGetters([
'activeFile',
]),
renderErrorTooLarge() {
return this.activeFile.renderError == 'too_large';
},
},
methods: {
highlightFile() {
......@@ -35,7 +38,7 @@ export default {
v-html="activeFile.html">
</div>
<div
v-else-if="activeFile.renderError == 'too_large'"
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.
......
......@@ -31,7 +31,7 @@ export default {
}),
...mapGetters([
'treeList',
'isMini',
'isCollapsed',
]),
},
methods: {
......@@ -44,12 +44,12 @@ export default {
</script>
<template>
<div id="sidebar" :class="{'sidebar-mini' : isMini}">
<div id="sidebar" :class="{'sidebar-mini' : isCollapsed}">
<table class="table">
<thead>
<tr>
<th
v-if="isMini"
v-if="isCollapsed"
class="repo-file-options title"
>
<strong class="clgray">
......
......@@ -2,6 +2,9 @@ import Vue from 'vue';
import flash from '../../flash';
import service from '../services';
import * as types from './mutation_types';
import {
pushState,
} from './utils';
export const redirectToUrl = url => gl.utils.visitUrl(url);
......@@ -67,6 +70,7 @@ export const checkCommitStatus = ({ state }) => service.getBranchData(
export const commitChanges = ({ commit, state, dispatch }, { payload, newMr }) =>
service.commit(state.project.id, payload)
.then((data) => {
const { branch } = payload;
if (!data.short_id) {
flash(data.message);
return;
......@@ -75,9 +79,8 @@ export const commitChanges = ({ commit, state, dispatch }, { payload, newMr }) =
flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
if (newMr) {
redirectToUrl(`${state.endpoints.newMergeRequestUrl}${payload.branch}`);
redirectToUrl(`${state.endpoints.newMergeRequestUrl}${branch}`);
} else {
// TODO: push a new state with the branch name
commit(types.SET_COMMIT_REF, data.id);
dispatch('discardAllChanges');
dispatch('closeAllFiles');
......
import _ from 'underscore';
/*
Takes the multi-dimensional tree and returns a flattened array.
This allows for the table to recursively render the table rows but keeps the data
structure nested to make it easier to add new files/directories.
*/
export const treeList = (state) => {
const mapTree = arr => (!arr.tree.length ? [] : _.map(arr.tree, a => [a, mapTree(a)]));
......@@ -9,11 +14,7 @@ export const treeList = (state) => {
.value();
};
export const changedFiles = (state) => {
const files = state.openFiles;
return files.filter(file => file.changed);
};
export const changedFiles = state => state.openFiles.filter(file => file.changed);
export const activeFile = state => state.openFiles.find(file => file.active);
......@@ -22,7 +23,7 @@ export const activeFileExtension = (state) => {
return file ? `.${file.path.split('.').pop()}` : '';
};
export const isMini = state => !!state.openFiles.length;
export const isCollapsed = state => !!state.openFiles.length;
export const canEditFile = (state) => {
const currentActiveFile = activeFile(state);
......
export default () => ({
project: {
id: 0,
name: '',
url: '',
},
endpoints: {},
isRoot: false,
isInitialRoot: false,
canCommit: false,
currentBranch: '',
currentBlobView: 'repo-preview',
currentRef: '',
path: '',
canCommit: false,
onTopOfBranch: false,
discardPopupOpen: false,
editMode: false,
endpoints: {},
isRoot: false,
isInitialRoot: false,
loading: false,
currentBlobView: 'repo-preview',
discardPopupOpen: false,
tree: [],
onTopOfBranch: false,
openFiles: [],
path: '',
project: {
id: 0,
name: '',
url: '',
},
parentTreeUrl: '',
previousUrl: '',
tree: [],
});
......@@ -2,7 +2,7 @@
.tree-ref-holder
= render 'shared/ref_switcher', destination: 'tree', path: @path, show_create: true
- if show_new_repo?
- if show_new_repo? && can_push_branch?(@project, @ref)
.js-new-dropdown
- else
= render 'projects/tree/old_tree_header'
......
......@@ -28,7 +28,7 @@ feature 'Multi-file editor new file', :js do
click_button('Create file')
end
find('.inputarea').send_keys('file content')
find('.inputarea', visible: false).send_keys('file content')
fill_in('commit-message', with: 'commit message')
......
......@@ -15,7 +15,6 @@ describe('RepoEditButton', () => {
});
f.active = true;
f.changed = true;
vm.$store.dispatch('setInitialData', {
canCommit: true,
onTopOfBranch: true,
......@@ -45,17 +44,23 @@ describe('RepoEditButton', () => {
expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Cancel edit');
});
it('toggles edit mode on click', () => {
it('toggles edit mode on click', (done) => {
vm.$mount();
vm.$el.querySelector('.btn').click();
vm.$nextTick(() => {
expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Cancel edit');
done();
});
});
describe('discardPopupOpen', () => {
beforeEach(() => {
vm.$store.state.discardPopupOpen = true;
vm.$store.state.editMode = true;
vm.$store.state.openFiles[0].changed = true;
vm.$mount();
});
......
......@@ -5,6 +5,7 @@ import { file, resetStore } from '../helpers';
describe('RepoFile', () => {
const updated = 'updated';
let vm;
function createComponent(propsData) {
const RepoFile = Vue.extend(repoFile);
......@@ -21,7 +22,7 @@ describe('RepoFile', () => {
it('renders link, icon, name and last commit details', () => {
const RepoFile = Vue.extend(repoFile);
const vm = new RepoFile({
vm = new RepoFile({
store,
propsData: {
file: file(),
......@@ -43,7 +44,7 @@ describe('RepoFile', () => {
});
it('does render if hasFiles is true and is loading tree', () => {
const vm = createComponent({
vm = createComponent({
file: file(),
});
......@@ -53,7 +54,7 @@ describe('RepoFile', () => {
it('renders a spinner if the file is loading', () => {
const f = file();
f.loading = true;
const vm = createComponent({
vm = createComponent({
file: f,
});
......@@ -62,7 +63,7 @@ describe('RepoFile', () => {
});
it('does not render commit message and datetime if mini', (done) => {
const vm = createComponent({
vm = createComponent({
file: file(),
});
vm.$store.state.openFiles.push(vm.file);
......@@ -76,7 +77,7 @@ describe('RepoFile', () => {
});
it('fires clickedTreeRow when the link is clicked', () => {
const vm = createComponent({
vm = createComponent({
file: file(),
});
......@@ -89,7 +90,6 @@ describe('RepoFile', () => {
describe('submodule', () => {
let f;
let vm;
beforeEach(() => {
f = file('submodule name', '123456789');
......
......@@ -4,6 +4,8 @@ import repoTab from '~/repo/components/repo_tab.vue';
import { file, resetStore } from '../helpers';
describe('RepoTab', () => {
let vm;
function createComponent(propsData) {
const RepoTab = Vue.extend(repoTab);
......@@ -18,7 +20,7 @@ describe('RepoTab', () => {
});
it('renders a close link and a name link', () => {
const vm = createComponent({
vm = createComponent({
tab: file(),
});
vm.$store.state.openFiles.push(vm.tab);
......@@ -30,7 +32,7 @@ describe('RepoTab', () => {
});
it('calls setFileActive when clicking tab', () => {
const vm = createComponent({
vm = createComponent({
tab: file(),
});
......@@ -42,7 +44,7 @@ describe('RepoTab', () => {
});
it('calls closeFile when clicking close button', () => {
const vm = createComponent({
vm = createComponent({
tab: file(),
});
......@@ -56,7 +58,7 @@ describe('RepoTab', () => {
it('renders an fa-circle icon if tab is changed', () => {
const tab = file();
tab.changed = true;
const vm = createComponent({
vm = createComponent({
tab,
});
......@@ -69,7 +71,7 @@ describe('RepoTab', () => {
const tab = file();
tab.changed = true;
tab.opened = true;
const vm = createComponent({
vm = createComponent({
tab,
});
vm.$store.state.openFiles.push(tab);
......@@ -87,7 +89,7 @@ describe('RepoTab', () => {
it('closes tab when clicking close btn', (done) => {
const tab = file('lose');
tab.opened = true;
const vm = createComponent({
vm = createComponent({
tab,
});
vm.$store.state.openFiles.push(tab);
......
......@@ -5,6 +5,7 @@ import { file, resetStore } from '../helpers';
describe('RepoTabs', () => {
const openedFiles = [file(), file()];
let vm;
function createComponent() {
const RepoTabs = Vue.extend(repoTabs);
......@@ -19,7 +20,7 @@ describe('RepoTabs', () => {
});
it('renders a list of tabs', (done) => {
const vm = createComponent();
vm = createComponent();
openedFiles[0].active = true;
vm.$store.state.openFiles = openedFiles;
......
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