Commit df2efbdb authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch 'ide-commit-section-file-active-indicator' into 'master'

Add active class to active file in IDE commit panel

Closes #46051

See merge request gitlab-org/gitlab-ce!19646
parents 1f5032ef 9d9d952c
...@@ -43,6 +43,15 @@ export default { ...@@ -43,6 +43,15 @@ export default {
required: false, required: false,
default: false, default: false,
}, },
activeFileKey: {
type: String,
required: false,
default: null,
},
keyPrefix: {
type: String,
required: true,
},
}, },
data() { data() {
return { return {
...@@ -113,8 +122,9 @@ export default { ...@@ -113,8 +122,9 @@ export default {
<list-item <list-item
:file="file" :file="file"
:action-component="itemActionComponent" :action-component="itemActionComponent"
:key-prefix="title" :key-prefix="keyPrefix"
:staged-list="stagedList" :staged-list="stagedList"
:active-file-key="activeFileKey"
/> />
</li> </li>
</ul> </ul>
......
...@@ -30,6 +30,11 @@ export default { ...@@ -30,6 +30,11 @@ export default {
required: false, required: false,
default: false, default: false,
}, },
activeFileKey: {
type: String,
required: false,
default: null,
},
}, },
computed: { computed: {
iconName() { iconName() {
...@@ -39,6 +44,12 @@ export default { ...@@ -39,6 +44,12 @@ export default {
iconClass() { iconClass() {
return `multi-file-${this.file.tempFile ? 'addition' : 'modified'} append-right-8`; return `multi-file-${this.file.tempFile ? 'addition' : 'modified'} append-right-8`;
}, },
fullKey() {
return `${this.keyPrefix}-${this.file.key}`;
},
isActive() {
return this.activeFileKey === this.fullKey;
},
}, },
methods: { methods: {
...mapActions([ ...mapActions([
...@@ -51,7 +62,7 @@ export default { ...@@ -51,7 +62,7 @@ export default {
openFileInEditor() { openFileInEditor() {
return this.openPendingTab({ return this.openPendingTab({
file: this.file, file: this.file,
keyPrefix: this.keyPrefix.toLowerCase(), keyPrefix: this.keyPrefix,
}).then(changeViewer => { }).then(changeViewer => {
if (changeViewer) { if (changeViewer) {
this.updateViewer(viewerTypes.diff); this.updateViewer(viewerTypes.diff);
...@@ -70,7 +81,12 @@ export default { ...@@ -70,7 +81,12 @@ export default {
</script> </script>
<template> <template>
<div class="multi-file-commit-list-item"> <div
class="multi-file-commit-list-item"
:class="{
'is-active': isActive
}"
>
<button <button
type="button" type="button"
class="multi-file-commit-list-path" class="multi-file-commit-list-path"
......
...@@ -6,7 +6,7 @@ import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue'; ...@@ -6,7 +6,7 @@ import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
import CommitFilesList from './commit_sidebar/list.vue'; import CommitFilesList from './commit_sidebar/list.vue';
import EmptyState from './commit_sidebar/empty_state.vue'; import EmptyState from './commit_sidebar/empty_state.vue';
import * as consts from '../stores/modules/commit/constants'; import * as consts from '../stores/modules/commit/constants';
import { activityBarViews } from '../constants'; import { activityBarViews, stageKeys } from '../constants';
export default { export default {
components: { components: {
...@@ -27,11 +27,14 @@ export default { ...@@ -27,11 +27,14 @@ export default {
'unusedSeal', 'unusedSeal',
]), ]),
...mapState('commit', ['commitMessage', 'submitCommitLoading']), ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
...mapGetters(['lastOpenedFile', 'hasChanges', 'someUncommitedChanges']), ...mapGetters(['lastOpenedFile', 'hasChanges', 'someUncommitedChanges', 'activeFile']),
...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled']), ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled']),
showStageUnstageArea() { showStageUnstageArea() {
return !!(this.someUncommitedChanges || this.lastCommitMsg || !this.unusedSeal); return !!(this.someUncommitedChanges || this.lastCommitMsg || !this.unusedSeal);
}, },
activeFileKey() {
return this.activeFile ? this.activeFile.key : null;
},
}, },
watch: { watch: {
hasChanges() { hasChanges() {
...@@ -44,6 +47,7 @@ export default { ...@@ -44,6 +47,7 @@ export default {
if (this.lastOpenedFile) { if (this.lastOpenedFile) {
this.openPendingTab({ this.openPendingTab({
file: this.lastOpenedFile, file: this.lastOpenedFile,
keyPrefix: this.lastOpenedFile.changed ? stageKeys.unstaged : stageKeys.staged,
}) })
.then(changeViewer => { .then(changeViewer => {
if (changeViewer) { if (changeViewer) {
...@@ -62,6 +66,7 @@ export default { ...@@ -62,6 +66,7 @@ export default {
return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH).then(() => this.commitChanges()); return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH).then(() => this.commitChanges());
}, },
}, },
stageKeys,
}; };
</script> </script>
...@@ -88,19 +93,23 @@ export default { ...@@ -88,19 +93,23 @@ export default {
class="is-first" class="is-first"
icon-name="unstaged" icon-name="unstaged"
:title="__('Unstaged')" :title="__('Unstaged')"
:key-prefix="$options.stageKeys.unstaged"
:file-list="changedFiles" :file-list="changedFiles"
action="stageAllChanges" action="stageAllChanges"
:action-btn-text="__('Stage all')" :action-btn-text="__('Stage all')"
item-action-component="stage-button" item-action-component="stage-button"
:active-file-key="activeFileKey"
/> />
<commit-files-list <commit-files-list
icon-name="staged" icon-name="staged"
:title="__('Staged')" :title="__('Staged')"
:key-prefix="$options.stageKeys.staged"
:file-list="stagedFiles" :file-list="stagedFiles"
action="unstageAllChanges" action="unstageAllChanges"
:action-btn-text="__('Unstage all')" :action-btn-text="__('Unstage all')"
item-action-component="unstage-button" item-action-component="unstage-button"
:staged-list="true" :staged-list="true"
:active-file-key="activeFileKey"
/> />
</template> </template>
<empty-state <empty-state
......
...@@ -32,3 +32,8 @@ export const rightSidebarViews = { ...@@ -32,3 +32,8 @@ export const rightSidebarViews = {
pipelines: 'pipelines-list', pipelines: 'pipelines-list',
jobsDetail: 'jobs-detail', jobsDetail: 'jobs-detail',
}; };
export const stageKeys = {
unstaged: 'unstaged',
staged: 'staged',
};
...@@ -552,6 +552,10 @@ ...@@ -552,6 +552,10 @@
} }
.multi-file-commit-list-item { .multi-file-commit-list-item {
&.is-active {
background-color: $white-normal;
}
.multi-file-discard-btn { .multi-file-discard-btn {
display: none; display: none;
margin-top: -2px; margin-top: -2px;
......
...@@ -19,6 +19,7 @@ describe('Multi-file editor commit sidebar list item', () => { ...@@ -19,6 +19,7 @@ describe('Multi-file editor commit sidebar list item', () => {
vm = createComponentWithStore(Component, store, { vm = createComponentWithStore(Component, store, {
file: f, file: f,
actionComponent: 'stage-button', actionComponent: 'stage-button',
activeFileKey: `staged-${f.key}`,
}).$mount(); }).$mount();
}); });
...@@ -89,4 +90,20 @@ describe('Multi-file editor commit sidebar list item', () => { ...@@ -89,4 +90,20 @@ describe('Multi-file editor commit sidebar list item', () => {
}); });
}); });
}); });
describe('is active', () => {
it('does not add active class when dont keys match', () => {
expect(vm.$el.classList).not.toContain('is-active');
});
it('adds active class when keys match', done => {
vm.keyPrefix = 'staged';
vm.$nextTick(() => {
expect(vm.$el.classList).toContain('is-active');
done();
});
});
});
}); });
...@@ -17,6 +17,8 @@ describe('Multi-file editor commit sidebar list', () => { ...@@ -17,6 +17,8 @@ describe('Multi-file editor commit sidebar list', () => {
action: 'stageAllChanges', action: 'stageAllChanges',
actionBtnText: 'stage all', actionBtnText: 'stage all',
itemActionComponent: 'stage-button', itemActionComponent: 'stage-button',
activeFileKey: 'staged-testing',
keyPrefix: 'staged',
}); });
vm.$store.state.rightPanelCollapsed = false; vm.$store.state.rightPanelCollapsed = false;
......
...@@ -56,7 +56,7 @@ describe('RepoCommitSection', () => { ...@@ -56,7 +56,7 @@ describe('RepoCommitSection', () => {
vm.$store.state.entries[f.path] = f; vm.$store.state.entries[f.path] = f;
}); });
return vm.$mount(); return vm;
} }
beforeEach(done => { beforeEach(done => {
...@@ -64,6 +64,10 @@ describe('RepoCommitSection', () => { ...@@ -64,6 +64,10 @@ describe('RepoCommitSection', () => {
vm = createComponent(); vm = createComponent();
spyOn(vm, 'openPendingTab').and.callThrough();
vm.$mount();
spyOn(service, 'getTreeData').and.returnValue( spyOn(service, 'getTreeData').and.returnValue(
Promise.resolve({ Promise.resolve({
headers: { headers: {
...@@ -98,6 +102,7 @@ describe('RepoCommitSection', () => { ...@@ -98,6 +102,7 @@ describe('RepoCommitSection', () => {
store.state.noChangesStateSvgPath = 'nochangessvg'; store.state.noChangesStateSvgPath = 'nochangessvg';
store.state.committedStateSvgPath = 'svg'; store.state.committedStateSvgPath = 'svg';
vm.$destroy();
vm = createComponentWithStore(Component, store).$mount(); vm = createComponentWithStore(Component, store).$mount();
expect(vm.$el.querySelector('.js-empty-state').textContent.trim()).toContain('No changes'); expect(vm.$el.querySelector('.js-empty-state').textContent.trim()).toContain('No changes');
...@@ -176,5 +181,12 @@ describe('RepoCommitSection', () => { ...@@ -176,5 +181,12 @@ describe('RepoCommitSection', () => {
expect(store.state.openFiles.length).toBe(1); expect(store.state.openFiles.length).toBe(1);
expect(store.state.openFiles[0].pending).toBe(true); expect(store.state.openFiles[0].pending).toBe(true);
}); });
it('calls openPendingTab', () => {
expect(vm.openPendingTab).toHaveBeenCalledWith({
file: vm.lastOpenedFile,
keyPrefix: 'unstaged',
});
});
}); });
}); });
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