Skip to content

G
gitlab-ce
Commit 30b6b897 authored by Tim Zallmann's avatar Tim Zallmann Committed by Phil Hughes
Browse files
Options

Resolve "Multi-file editor commit panel empty state"

parent a9efdb8f
Hide whitespace changes
Inline Side-by-side
Showing with 238 additions and 100 deletions
app/assets/javascripts/ide/components/commit_sidebar/list.vue
View file @ 30b6b897
......@@ -26,6 +26,9 @@
'currentBranchId',
'rightPanelCollapsed',
]),
isCommitInfoShown() {
return this.rightPanelCollapsed || this.fileList.length;
},
},
methods: {
toggleCollapsed() {
......@@ -36,7 +39,11 @@
</script>
<template>
<div class="multi-file-commit-list">
<div
:class="{
'multi-file-commit-list': isCommitInfoShown
}"
>
<list-collapsed
v-if="rightPanelCollapsed"
/>
......@@ -54,12 +61,6 @@
/>
</li>
</ul>
<div
v-else
class="help-block prepend-top-0"
>
No changes
</div>
</template>
</div>
</template>
app/assets/javascripts/ide/components/ide.vue
View file @ 30b6b897
......@@ -23,6 +23,14 @@
type: String,
required: true,
},
noChangesStateSvgPath: {
type: String,
required: true,
},
committedStateSvgPath: {
type: String,
required: true,
},
},
computed: {
...mapState([
......@@ -94,6 +102,9 @@
</div>
</template>
</div>
<ide-contextbar/>
<ide-contextbar
:no-changes-state-svg-path="noChangesStateSvgPath"
:committed-state-svg-path="committedStateSvgPath"
/>
</div>
</template>
app/assets/javascripts/ide/components/ide_context_bar.vue
View file @ 30b6b897
......@@ -10,6 +10,16 @@
icon,
panelResizer,
},
props: {
noChangesStateSvgPath: {
type: String,
required: true,
},
committedStateSvgPath: {
type: String,
required: true,
},
},
data() {
return {
width: 290,
......@@ -46,6 +56,11 @@
collapsed: !this.rightPanelCollapsed,
});
},
toggleFullbarCollapsed() {
if (this.rightPanelCollapsed) {
this.toggleCollapsed();
}
},
resizingStarted() {
this.setResizingStatus(true);
},
......@@ -63,8 +78,11 @@
'is-collapsed': rightPanelCollapsed,
}"
:style="panelStyle"
@click="toggleFullbarCollapsed"
>
<div class="multi-file-commit-panel-section">
<div
class="multi-file-commit-panel-section"
>
<header
class="multi-file-commit-panel-header"
:class="{
......@@ -75,16 +93,20 @@
class="multi-file-commit-panel-header-title"
v-if="!rightPanelCollapsed"
>
<icon
name="list-bulleted"
:size="18"
/>
Staged
<div
v-if="changedFiles.length"
>
<icon
name="list-bulleted"
:size="18"
/>
Staged
</div>
</div>
<button
type="button"
class="btn btn-transparent multi-file-commit-panel-collapse-btn"
@click="toggleCollapsed"
@click.stop="toggleCollapsed"
>
<icon
:name="currentIcon"
......@@ -92,7 +114,10 @@
/>
</button>
</header>
<repo-commit-section />
<repo-commit-section
:no-changes-state-svg-path="noChangesStateSvgPath"
:committed-state-svg-path="committedStateSvgPath"
/>
</div>
<panel-resizer
:size.sync="width"
......
app/assets/javascripts/ide/components/repo_commit_section.vue
View file @ 30b6b897
......@@ -14,6 +14,16 @@ export default {
directives: {
tooltip,
},
props: {
noChangesStateSvgPath: {
type: String,
required: true,
},
committedStateSvgPath: {
type: String,
required: true,
},
},
data() {
return {
showNewBranchModal: false,
......@@ -27,6 +37,7 @@ export default {
'currentProjectId',
'currentBranchId',
'rightPanelCollapsed',
'lastCommitMsg',
]),
...mapGetters([
'changedFiles',
......@@ -37,6 +48,9 @@ export default {
commitMessageCount() {
return this.commitMessage.length;
},
statusSvg() {
return this.lastCommitMsg ? this.committedStateSvgPath : this.noChangesStateSvgPath;
},
},
methods: {
...mapActions([
......@@ -101,7 +115,12 @@ export default {
</script>
<template>
<div class="multi-file-commit-panel-section">
<div
class="multi-file-commit-panel-section"
:class="{
'multi-file-commit-empty-state-container': !changedFiles.length
}"
>
<modal
v-if="showNewBranchModal"
:primary-button-label="__('Create new branch')"
......@@ -118,54 +137,92 @@ you started editing. Would you like to create a new branch?`)"
:collapsed="rightPanelCollapsed"
@toggleCollapsed="toggleCollapsed"
/>
<form
class="form-horizontal multi-file-commit-form"
@submit.prevent="tryCommit"
v-if="!rightPanelCollapsed"
<template
v-if="changedFiles.length"
>
<div class="multi-file-commit-fieldset">
<textarea
class="form-control multi-file-commit-message"
name="commit-message"
v-model="commitMessage"
placeholder="Commit message"
>
</textarea>
<form
class="form-horizontal multi-file-commit-form"
@submit.prevent="tryCommit"
v-if="!rightPanelCollapsed"
>
<div class="multi-file-commit-fieldset">
<textarea
class="form-control multi-file-commit-message"
name="commit-message"
v-model="commitMessage"
placeholder="Commit message"
>
</textarea>
</div>
<div class="multi-file-commit-fieldset">
<label
v-tooltip
title="Create a new merge request with these changes"
data-container="body"
data-placement="top"
>
<input
type="checkbox"
v-model="startNewMR"
/>
{{ __('Merge Request') }}
</label>
<button
type="submit"
:disabled="commitButtonDisabled"
class="btn btn-default btn-sm append-right-10 prepend-left-10"
:class="{ disabled: submitCommitsLoading }"
>
<i
v-if="submitCommitsLoading"
class="js-commit-loading-icon fa fa-spinner fa-spin"
aria-hidden="true"
aria-label="loading"
>
</i>
{{ __('Commit') }}
</button>
<div
class="multi-file-commit-message-count"
>
{{ commitMessageCount }}
</div>
</div>
</form>
</template>
<div
v-else-if="!rightPanelCollapsed"
class="row js-empty-state"
>
<div class="col-xs-10 col-xs-offset-1">
<div class="svg-content svg-80">
<img :src="statusSvg" />
</div>
</div>
<div class="multi-file-commit-fieldset">
<label
v-tooltip
title="Create a new merge request with these changes"
data-container="body"
data-placement="top"
>
<input
type="checkbox"
v-model="startNewMR"
/>
Merge Request
</label>
<button
type="submit"
:disabled="commitButtonDisabled"
class="btn btn-default btn-sm append-right-10 prepend-left-10"
:class="{ disabled: submitCommitsLoading }"
<div class="col-xs-10 col-xs-offset-1">
<div
class="text-content text-center"
v-if="!lastCommitMsg"
>
<i
v-if="submitCommitsLoading"
class="js-commit-loading-icon fa fa-spinner fa-spin"
aria-hidden="true"
aria-label="loading"
>
</i>
Commit
</button>
<h4>
{{ __('No changes') }}
</h4>
<p>
{{ __('Edit files in the editor and commit changes here') }}
</p>
</div>
<div
class="multi-file-commit-message-count"
class="text-content text-center"
v-else
>
{{ commitMessageCount }}
<h4>
{{ __('All changes are committed') }}
</h4>
<p>
{{ lastCommitMsg }}
</p>
</div>
</div>
</form>
</div>
</div>
</template>
app/assets/javascripts/ide/index.js
View file @ 30b6b897
......@@ -18,6 +18,8 @@ function initIde(el) {
return createElement('ide', {
props: {
emptyStateSvgPath: el.dataset.emptyStateSvgPath,
noChangesStateSvgPath: el.dataset.noChangesStateSvgPath,
committedStateSvgPath: el.dataset.committedStateSvgPath,
},
});
},
......
app/assets/javascripts/ide/stores/actions.js
View file @ 30b6b897
......@@ -110,15 +110,7 @@ export const commitChanges = (
if (data.stats) {
commitMsg += ` with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`;
}
flash(
commitMsg,
'notice',
document,
null,
false,
true);
window.dispatchEvent(new Event('resize'));
commit(types.SET_LAST_COMMIT_MSG, commitMsg);
if (newMr) {
dispatch('discardAllChanges');
......
app/assets/javascripts/ide/stores/mutation_types.js
View file @ 30b6b897
......@@ -3,6 +3,7 @@ export const TOGGLE_LOADING = 'TOGGLE_LOADING';
export const SET_PARENT_TREE_URL = 'SET_PARENT_TREE_URL';
export const SET_ROOT = 'SET_ROOT';
export const SET_LAST_COMMIT_DATA = 'SET_LAST_COMMIT_DATA';
export const SET_LAST_COMMIT_MSG = 'SET_LAST_COMMIT_MSG';
export const SET_LEFT_PANEL_COLLAPSED = 'SET_LEFT_PANEL_COLLAPSED';
export const SET_RIGHT_PANEL_COLLAPSED = 'SET_RIGHT_PANEL_COLLAPSED';
export const SET_RESIZING_STATUS = 'SET_RESIZING_STATUS';
......
app/assets/javascripts/ide/stores/mutations.js
View file @ 30b6b897
......@@ -63,6 +63,11 @@ export default {
updatedAt: lastCommit.commit.authored_date,
});
},
[types.SET_LAST_COMMIT_MSG](state, lastCommitMsg) {
Object.assign(state, {
lastCommitMsg,
});
},
...projectMutations,
...fileMutations,
...treeMutations,
......
app/assets/javascripts/ide/stores/state.js
View file @ 30b6b897
......@@ -8,6 +8,7 @@ export default () => ({
endpoints: {},
isRoot: false,
isInitialRoot: false,
lastCommitMsg: '',
lastCommitPath: '',
loading: false,
onTopOfBranch: false,
......@@ -18,6 +19,6 @@ export default () => ({
trees: {},
projects: {},
leftPanelCollapsed: false,
rightPanelCollapsed: true,
rightPanelCollapsed: false,
panelResizing: false,
});
app/assets/stylesheets/framework/images.scss
View file @ 30b6b897
......@@ -20,7 +20,7 @@
width: 100%;
}
$image-widths: 250 306 394 430;
$image-widths: 80 250 306 394 430;
@each $width in $image-widths {
&.svg-#{$width} {
img,
......
app/assets/stylesheets/pages/repo.scss
View file @ 30b6b897
......@@ -355,6 +355,11 @@ table.table tr td.multi-file-table-name {
flex: 1;
}
.multi-file-commit-empty-state-container {
align-items: center;
justify-content: center;
}
.multi-file-commit-panel-header {
display: flex;
align-items: center;
......@@ -381,7 +386,7 @@ table.table tr td.multi-file-table-name {
.multi-file-commit-panel-header-title {
display: flex;
flex: 1;
padding: $gl-btn-padding;
padding: 0 $gl-btn-padding;
svg {
margin-right: $gl-btn-padding;
......
app/views/ide/index.html.haml
View file @ 30b6b897
......@@ -5,7 +5,9 @@
= webpack_bundle_tag 'common_vue'
= webpack_bundle_tag 'ide', force_same_domain: true
#ide.ide-loading{ data: {"empty-state-svg-path" => image_path('illustrations/multi_file_editor_empty.svg')} }
#ide.ide-loading{ data: {"empty-state-svg-path" => image_path('illustrations/multi_file_editor_empty.svg'),
"no-changes-state-svg-path" => image_path('illustrations/multi-editor_no_changes_empty.svg'),
"committed-state-svg-path" => image_path('illustrations/multi-editor_all_changes_committed_empty.svg') } }
.text-center
= icon('spinner spin 2x')
%h2.clgray= _('Loading the GitLab IDE...')
spec/features/projects/tree/create_directory_spec.rb
View file @ 30b6b897
......@@ -48,8 +48,6 @@ feature 'Multi-file editor new directory', :js do
wait_for_requests
find('.multi-file-commit-panel-collapse-btn').click
fill_in('commit-message', with: 'commit message ide')
click_button('Commit')
......
spec/features/projects/tree/create_file_spec.rb
View file @ 30b6b897
......@@ -38,8 +38,6 @@ feature 'Multi-file editor new file', :js do
wait_for_requests
find('.multi-file-commit-panel-collapse-btn').click
fill_in('commit-message', with: 'commit message ide')
click_button('Commit')
......
spec/javascripts/repo/components/commit_sidebar/list_spec.js
View file @ 30b6b897
......@@ -24,12 +24,6 @@ describe('Multi-file editor commit sidebar list', () => {
vm.$destroy();
});
describe('empty file list', () => {
it('renders no changes text', () => {
expect(vm.$el.querySelector('.help-block').textContent.trim()).toBe('No changes');
});
});
describe('with a list of files', () => {
beforeEach((done) => {
const f = file('file name');
......
spec/javascripts/repo/components/ide_context_bar_spec.js
View file @ 30b6b897
......@@ -9,7 +9,10 @@ describe('Multi-file editor right context bar', () => {
beforeEach(() => {
const Component = Vue.extend(ideContextBar);
vm = createComponentWithStore(Component, store);
vm = createComponentWithStore(Component, store, {
noChangesStateSvgPath: 'svg',
committedStateSvgPath: 'svg',
});
vm.$store.state.rightPanelCollapsed = false;
......@@ -34,6 +37,17 @@ describe('Multi-file editor right context bar', () => {
it('shows correct icon', () => {
expect(vm.currentIcon).toBe('angle-double-left');
});
it('clicking sidebar collapses the bar', () => {
spyOn(vm, 'setPanelCollapsedStatus').and.returnValue(Promise.resolve());
vm.$el.querySelector('.multi-file-commit-panel-section').click();
expect(vm.setPanelCollapsedStatus).toHaveBeenCalledWith({
side: 'right',
collapsed: false,
});
});
});
it('clicking toggle collapse button collapses the bar', () => {
......@@ -46,4 +60,15 @@ describe('Multi-file editor right context bar', () => {
collapsed: true,
});
});
it('when expanded clicking the main sidebar is not collapsing the bar', () => {
spyOn(vm, 'setPanelCollapsedStatus').and.returnValue(Promise.resolve());
vm.$el.querySelector('.multi-file-commit-panel-section').click();
expect(vm.setPanelCollapsedStatus).not.toHaveBeenCalledWith({
side: 'right',
collapsed: false,
});
});
});
spec/javascripts/repo/components/ide_spec.js
View file @ 30b6b897
......@@ -12,6 +12,8 @@ describe('ide component', () => {
vm = createComponentWithStore(Component, store, {
emptyStateSvgPath: 'svg',
noChangesStateSvgPath: 'svg',
committedStateSvgPath: 'svg',
}).$mount();
});
......
spec/javascripts/repo/components/repo_commit_section_spec.js
View file @ 30b6b897
......@@ -4,21 +4,23 @@ import store from '~/ide/stores';
import service from '~/ide/services';
import repoCommitSection from '~/ide/components/repo_commit_section.vue';
import getSetTimeoutPromise from '../../helpers/set_timeout_promise_helper';
import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
import { file, resetStore } from '../helpers';
describe('RepoCommitSection', () => {
let vm;
function createComponent() {
const RepoCommitSection = Vue.extend(repoCommitSection);
const Component = Vue.extend(repoCommitSection);
const comp = new RepoCommitSection({
store,
}).$mount();
vm = createComponentWithStore(Component, store, {
noChangesStateSvgPath: 'svg',
committedStateSvgPath: 'commitsvg',
});
comp.$store.state.currentProjectId = 'abcproject';
comp.$store.state.currentBranchId = 'master';
comp.$store.state.projects.abcproject = {
vm.$store.state.currentProjectId = 'abcproject';
vm.$store.state.currentBranchId = 'master';
vm.$store.state.projects.abcproject = {
web_url: '',
branches: {
master: {
......@@ -27,15 +29,15 @@ describe('RepoCommitSection', () => {
},
};
comp.$store.state.rightPanelCollapsed = false;
comp.$store.state.currentBranch = 'master';
comp.$store.state.openFiles = [file('file1'), file('file2')];
comp.$store.state.openFiles.forEach(f => Object.assign(f, {
vm.$store.state.rightPanelCollapsed = false;
vm.$store.state.currentBranch = 'master';
vm.$store.state.openFiles = [file('file1'), file('file2')];
vm.$store.state.openFiles.forEach(f => Object.assign(f, {
changed: true,
content: 'testing',
}));
return comp.$mount();
return vm.$mount();
}
beforeEach((done) => {
......@@ -64,6 +66,23 @@ describe('RepoCommitSection', () => {
resetStore(vm.$store);
});
describe('empty Stage', () => {
it('renders no changes text', () => {
resetStore(vm.$store);
const Component = Vue.extend(repoCommitSection);
vm = createComponentWithStore(Component, store, {
noChangesStateSvgPath: 'nochangessvg',
committedStateSvgPath: 'svg',
}).$mount();
// Vue.nextTick();
expect(vm.$el.querySelector('.js-empty-state').textContent.trim()).toContain('No changes');
expect(vm.$el.querySelector('.js-empty-state img').getAttribute('src')).toBe('nochangessvg');
});
});
it('renders a commit section', () => {
const changedFileElements = [...vm.$el.querySelectorAll('.multi-file-commit-list li')];
const submitCommit = vm.$el.querySelector('form .btn');
......@@ -115,6 +134,9 @@ describe('RepoCommitSection', () => {
expect(actions[1].content).toEqual(changedFiles[1].content);
expect(actions[0].file_path).toEqual(changedFiles[0].path);
expect(actions[1].file_path).toEqual(changedFiles[1].path);
expect(vm.$el.querySelector('.js-empty-state').textContent.trim()).toContain('All changes are committed');
expect(vm.$el.querySelector('.js-empty-state img').getAttribute('src')).toBe('commitsvg');
})
.then(done)
.catch(done.fail);
......
spec/javascripts/repo/stores/actions_spec.js
View file @ 30b6b897
......@@ -270,13 +270,10 @@ describe('Multi-file store actions', () => {
}).catch(done.fail);
});
it('shows flash notice', (done) => {
it('sets last Commit Msg', (done) => {
store.dispatch('commitChanges', { payload, newMr: false })
.then(() => {
const alert = document.querySelector('.flash-container');
expect(alert.querySelector('.flash-notice')).not.toBeNull();
expect(alert.textContent.trim()).toBe(
expect(store.state.lastCommitMsg).toBe(
'Your changes have been committed. Commit 123 with 1 additions, 2 deletions.',
);
......
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