Skip to content

G
gitlab-ce
Commit 9765f876 authored by Tim Zallmann's avatar Tim Zallmann
Browse files
Options

Merge branch 'ide-commit-panel-improved' into 'master' 

Improved IDE commit flow

Closes #48182

See merge request gitlab-org/gitlab-ce!21471
parents 1bf6697c 9ab61e17
Hide whitespace changes
Inline Side-by-side
Showing with 356 additions and 122 deletions
app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue 0 → 100644
View file @ 9765f876
<script>
import $ from 'jquery';
import { mapActions } from 'vuex';
import { __ } from '~/locale';
import FileIcon from '~/vue_shared/components/file_icon.vue';
import ChangedFileIcon from '../changed_file_icon.vue';
export default {
components: {
FileIcon,
ChangedFileIcon,
},
props: {
activeFile: {
type: Object,
required: true,
},
},
computed: {
activeButtonText() {
return this.activeFile.staged ? __('Unstage') : __('Stage');
},
isStaged() {
return !this.activeFile.changed && this.activeFile.staged;
},
},
methods: {
...mapActions(['stageChange', 'unstageChange']),
actionButtonClicked() {
if (this.activeFile.staged) {
this.unstageChange(this.activeFile.path);
} else {
this.stageChange(this.activeFile.path);
}
},
showDiscardModal() {
$(document.getElementById(`discard-file-${this.activeFile.path}`)).modal('show');
},
},
};
</script>
<template>
<div class="d-flex ide-commit-editor-header align-items-center">
<file-icon
:file-name="activeFile.name"
:size="16"
class="mr-2"
/>
<strong class="mr-2">
{{ activeFile.path }}
</strong>
<changed-file-icon
:file="activeFile"
/>
<div class="ml-auto">
<button
v-if="!isStaged"
type="button"
class="btn btn-remove btn-inverted append-right-8"
@click="showDiscardModal"
>
{{ __('Discard') }}
</button>
<button
:class="{
'btn-success': !isStaged,
'btn-warning': isStaged
}"
type="button"
class="btn btn-inverted"
@click="actionButtonClicked"
>
{{ activeButtonText }}
</button>
</div>
</div>
</template>
app/assets/javascripts/ide/components/commit_sidebar/list.vue
View file @ 9765f876
<script> <script>
import $ from 'jquery';
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import { __, sprintf } from '~/locale'; import { __, sprintf } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import GlModal from '~/vue_shared/components/gl_modal.vue';
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
import ListItem from './list_item.vue'; import ListItem from './list_item.vue';
...@@ -9,6 +11,7 @@ export default { ...@@ -9,6 +11,7 @@ export default {
components: { components: {
Icon, Icon,
ListItem, ListItem,
GlModal,
}, },
directives: { directives: {
tooltip, tooltip,
...@@ -56,6 +59,11 @@ export default { ...@@ -56,6 +59,11 @@ export default {
type: String, type: String,
required: true, required: true,
}, },
emptyStateText: {
type: String,
required: false,
default: __('No changes'),
},
}, },
computed: { computed: {
titleText() { titleText() {
...@@ -68,11 +76,19 @@ export default { ...@@ -68,11 +76,19 @@ export default {
}, },
}, },
methods: { methods: {
...mapActions(['stageAllChanges', 'unstageAllChanges']), ...mapActions(['stageAllChanges', 'unstageAllChanges', 'discardAllChanges']),
actionBtnClicked() { actionBtnClicked() {
this[this.action](); this[this.action]();
$(this.$refs.actionBtn).tooltip('hide');
},
openDiscardModal() {
$('#discard-all-changes').modal('show');
}, },
}, },
discardModalText: __(
"You will loose all the unstaged changes you've made in this project. This action cannot be undone.",
),
}; };
</script> </script>
...@@ -81,27 +97,32 @@ export default { ...@@ -81,27 +97,32 @@ export default {
class="ide-commit-list-container" class="ide-commit-list-container"
> >
<header <header
class="multi-file-commit-panel-header" class="multi-file-commit-panel-header d-flex mb-0"
> >
<div <div
class="multi-file-commit-panel-header-title" class="d-flex align-items-center flex-fill"
> >
<icon <icon
v-once v-once
:name="iconName" :name="iconName"
:size="18" :size="18"
class="append-right-8"
/> />
{{ titleText }} <strong>
{{ titleText }}
</strong>
<div class="d-flex ml-auto"> <div class="d-flex ml-auto">
<button <button
v-tooltip v-tooltip
v-show="filesLength" ref="actionBtn"
:title="actionBtnText"
:aria-label="actionBtnText"
:disabled="!filesLength"
:class="{ :class="{
'd-flex': filesLength 'disabled-content': !filesLength
}" }"
:title="actionBtnText"
type="button" type="button"
class="btn btn-default ide-staged-action-btn p-0 order-1 align-items-center" class="d-flex ide-staged-action-btn p-0 border-0 align-items-center"
data-placement="bottom" data-placement="bottom"
data-container="body" data-container="body"
data-boundary="viewport" data-boundary="viewport"
...@@ -109,18 +130,32 @@ export default { ...@@ -109,18 +130,32 @@ export default {
> >
<icon <icon
:name="actionBtnIcon" :name="actionBtnIcon"
:size="12" :size="16"
class="ml-auto mr-auto" class="ml-auto mr-auto"
/> />
</button> </button>
<span <button
v-tooltip
v-if="!stagedList"
:title="__('Discard all changes')"
:aria-label="__('Discard all changes')"
:disabled="!filesLength"
:class="{ :class="{
'rounded-right': !filesLength 'disabled-content': !filesLength
}" }"
class="ide-commit-file-count order-0 rounded-left text-center" type="button"
class="d-flex ide-staged-action-btn p-0 border-0 align-items-center"
data-placement="bottom"
data-container="body"
data-boundary="viewport"
@click="openDiscardModal"
> >
{{ filesLength }} <icon
</span> :size="16"
name="remove-all"
class="ml-auto mr-auto"
/>
</button>
</div> </div>
</div> </div>
</header> </header>
...@@ -143,9 +178,19 @@ export default { ...@@ -143,9 +178,19 @@ export default {
</ul> </ul>
<p <p
v-else v-else
class="multi-file-commit-list form-text text-muted" class="multi-file-commit-list form-text text-muted text-center"
> >
{{ __('No changes') }} {{ emptyStateText }}
</p> </p>
<gl-modal
v-if="!stagedList"
id="discard-all-changes"
:footer-primary-button-text="__('Discard all changes')"
:header-title-text="__('Discard all unstaged changes?')"
footer-primary-button-variant="danger"
@submit="discardAllChanges"
>
{{ $options.discardModalText }}
</gl-modal>
</div> </div>
</template> </template>
app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
View file @ 9765f876
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import FileIcon from '~/vue_shared/components/file_icon.vue';
import StageButton from './stage_button.vue'; import StageButton from './stage_button.vue';
import UnstageButton from './unstage_button.vue'; import UnstageButton from './unstage_button.vue';
import { viewerTypes } from '../../constants'; import { viewerTypes } from '../../constants';
...@@ -12,6 +13,7 @@ export default { ...@@ -12,6 +13,7 @@ export default {
Icon, Icon,
StageButton, StageButton,
UnstageButton, UnstageButton,
FileIcon,
}, },
directives: { directives: {
tooltip, tooltip,
...@@ -48,7 +50,7 @@ export default { ...@@ -48,7 +50,7 @@ export default {
return `${getCommitIconMap(this.file).icon}${suffix}`; return `${getCommitIconMap(this.file).icon}${suffix}`;
}, },
iconClass() { iconClass() {
return `${getCommitIconMap(this.file).class} append-right-8`; return `${getCommitIconMap(this.file).class} ml-auto mr-auto`;
}, },
fullKey() { fullKey() {
return `${this.keyPrefix}-${this.file.key}`; return `${this.keyPrefix}-${this.file.key}`;
...@@ -105,17 +107,24 @@ export default { ...@@ -105,17 +107,24 @@ export default {
@click="openFileInEditor" @click="openFileInEditor"
> >
<span class="multi-file-commit-list-file-path d-flex align-items-center"> <span class="multi-file-commit-list-file-path d-flex align-items-center">
<icon <file-icon
:name="iconName" :file-name="file.name"
:size="16" class="append-right-8"
:css-classes="iconClass"
/>{{ file.name }} />{{ file.name }}
</span> </span>
<div class="ml-auto d-flex align-items-center">
<div class="d-flex align-items-center ide-commit-list-changed-icon">
<icon
:name="iconName"
:size="16"
:css-classes="iconClass"
/>
</div>
<component
:is="actionComponent"
:path="file.path"
/>
</div>
</div> </div>
<component
:is="actionComponent"
:path="file.path"
class="d-flex position-absolute"
/>
</div> </div>
</template> </template>
app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
View file @ 9765f876
<script> <script>
import $ from 'jquery';
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import { sprintf, __ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
import GlModal from '~/vue_shared/components/gl_modal.vue';
export default { export default {
components: { components: {
Icon, Icon,
GlModal,
}, },
directives: { directives: {
tooltip, tooltip,
...@@ -16,8 +20,22 @@ export default { ...@@ -16,8 +20,22 @@ export default {
required: true, required: true,
}, },
}, },
computed: {
modalId() {
return `discard-file-${this.path}`;
},
modalTitle() {
return sprintf(
__('Discard changes to %{path}?'),
{ path: this.path },
);
},
},
methods: { methods: {
...mapActions(['stageChange', 'discardFileChanges']), ...mapActions(['stageChange', 'discardFileChanges']),
showDiscardModal() {
$(document.getElementById(this.modalId)).modal('show');
},
}, },
}; };
</script> </script>
...@@ -25,51 +43,50 @@ export default { ...@@ -25,51 +43,50 @@ export default {
<template> <template>
<div <div
v-once v-once
class="multi-file-discard-btn dropdown" class="multi-file-discard-btn d-flex"
> >
<button <button
v-tooltip v-tooltip
:aria-label="__('Stage changes')" :aria-label="__('Stage changes')"
:title="__('Stage changes')" :title="__('Stage changes')"
type="button" type="button"
class="btn btn-blank append-right-5 d-flex align-items-center" class="btn btn-blank align-items-center"
data-container="body" data-container="body"
data-boundary="viewport" data-boundary="viewport"
data-placement="bottom" data-placement="bottom"
@click.stop="stageChange(path)" @click.stop.prevent="stageChange(path)"
> >
<icon <icon
:size="12" :size="16"
name="mobile-issue-close" name="mobile-issue-close"
class="ml-auto mr-auto"
/> />
</button> </button>
<button <button
v-tooltip v-tooltip
:title="__('More actions')" :aria-label="__('Discard changes')"
:title="__('Discard changes')"
type="button" type="button"
class="btn btn-blank d-flex align-items-center" class="btn btn-blank align-items-center"
data-container="body" data-container="body"
data-boundary="viewport" data-boundary="viewport"
data-placement="bottom" data-placement="bottom"
data-toggle="dropdown" @click.stop.prevent="showDiscardModal"
data-display="static"
> >
<icon <icon
:size="12" :size="16"
name="ellipsis_h" name="remove"
class="ml-auto mr-auto"
/> />
</button> </button>
<div class="dropdown-menu dropdown-menu-right"> <gl-modal
<ul> :id="modalId"
<li> :header-title-text="modalTitle"
<button :footer-primary-button-text="__('Discard changes')"
type="button" footer-primary-button-variant="danger"
@click.stop="discardFileChanges(path)" @submit="discardFileChanges(path)"
> >
{{ __('Discard changes') }} {{ __("You will loose all changes you've made to this file. This action cannot be undone.") }}
</button> </gl-modal>
</li>
</ul>
</div>
</div> </div>
</template> </template>
app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue
View file @ 9765f876
...@@ -25,22 +25,23 @@ export default { ...@@ -25,22 +25,23 @@ export default {
<template> <template>
<div <div
v-once v-once
class="multi-file-discard-btn" class="multi-file-discard-btn d-flex"
> >
<button <button
v-tooltip v-tooltip
:aria-label="__('Unstage changes')" :aria-label="__('Unstage changes')"
:title="__('Unstage changes')" :title="__('Unstage changes')"
type="button" type="button"
class="btn btn-blank d-flex align-items-center" class="btn btn-blank align-items-center"
data-container="body" data-container="body"
data-boundary="viewport" data-boundary="viewport"
data-placement="bottom" data-placement="bottom"
@click="unstageChange(path)" @click.stop.prevent="unstageChange(path)"
> >
<icon <icon
:size="12" :size="16"
name="history" name="redo"
class="ml-auto mr-auto"
/> />
</button> </button>
</div> </div>
......
app/assets/javascripts/ide/components/ide.vue
View file @ 9765f876
...@@ -10,6 +10,7 @@ import RepoEditor from './repo_editor.vue'; ...@@ -10,6 +10,7 @@ import RepoEditor from './repo_editor.vue';
import FindFile from './file_finder/index.vue'; import FindFile from './file_finder/index.vue';
import RightPane from './panes/right.vue'; import RightPane from './panes/right.vue';
import ErrorMessage from './error_message.vue'; import ErrorMessage from './error_message.vue';
import CommitEditorHeader from './commit_sidebar/editor_header.vue';
const originalStopCallback = Mousetrap.stopCallback; const originalStopCallback = Mousetrap.stopCallback;
...@@ -23,6 +24,7 @@ export default { ...@@ -23,6 +24,7 @@ export default {
FindFile, FindFile,
RightPane, RightPane,
ErrorMessage, ErrorMessage,
CommitEditorHeader,
}, },
computed: { computed: {
...mapState([ ...mapState([
...@@ -34,7 +36,7 @@ export default { ...@@ -34,7 +36,7 @@ export default {
'currentProjectId', 'currentProjectId',
'errorMessage', 'errorMessage',
]), ]),
...mapGetters(['activeFile', 'hasChanges', 'someUncommitedChanges']), ...mapGetters(['activeFile', 'hasChanges', 'someUncommitedChanges', 'isCommitModeActive']),
}, },
mounted() { mounted() {
window.onbeforeunload = e => this.onBeforeUnload(e); window.onbeforeunload = e => this.onBeforeUnload(e);
...@@ -96,7 +98,12 @@ export default { ...@@ -96,7 +98,12 @@ export default {
<template <template
v-if="activeFile" v-if="activeFile"
> >
<commit-editor-header
v-if="isCommitModeActive"
:active-file="activeFile"
/>
<repo-tabs <repo-tabs
v-else
:active-file="activeFile" :active-file="activeFile"
:files="openFiles" :files="openFiles"
:viewer="viewer" :viewer="viewer"
......
app/assets/javascripts/ide/components/repo_commit_section.vue
View file @ 9765f876
...@@ -95,8 +95,9 @@ export default { ...@@ -95,8 +95,9 @@ export default {
:file-list="changedFiles" :file-list="changedFiles"
:action-btn-text="__('Stage all changes')" :action-btn-text="__('Stage all changes')"
:active-file-key="activeFileKey" :active-file-key="activeFileKey"
:empty-state-text="__('There are no unstaged changes')"
action="stageAllChanges" action="stageAllChanges"
action-btn-icon="mobile-issue-close" action-btn-icon="stage-all"
item-action-component="stage-button" item-action-component="stage-button"
class="is-first" class="is-first"
icon-name="unstaged" icon-name="unstaged"
...@@ -108,8 +109,9 @@ export default { ...@@ -108,8 +109,9 @@ export default {
:action-btn-text="__('Unstage all changes')" :action-btn-text="__('Unstage all changes')"
:staged-list="true" :staged-list="true"
:active-file-key="activeFileKey" :active-file-key="activeFileKey"
:empty-state-text="__('There are no staged changes')"
action="unstageAllChanges" action="unstageAllChanges"
action-btn-icon="history" action-btn-icon="unstage-all"
item-action-component="unstage-button" item-action-component="unstage-button"
icon-name="staged" icon-name="staged"
/> />
......
app/assets/javascripts/ide/stores/actions.js
View file @ 9765f876
...@@ -4,6 +4,7 @@ import { visitUrl } from '~/lib/utils/url_utility'; ...@@ -4,6 +4,7 @@ import { visitUrl } from '~/lib/utils/url_utility';
import flash from '~/flash'; import flash from '~/flash';
import * as types from './mutation_types'; import * as types from './mutation_types';
import FilesDecoratorWorker from './workers/files_decorator_worker'; import FilesDecoratorWorker from './workers/files_decorator_worker';
import { stageKeys } from '../constants';
export const redirectToUrl = (_, url) => visitUrl(url); export const redirectToUrl = (_, url) => visitUrl(url);
...@@ -122,14 +123,28 @@ export const scrollToTab = () => { ...@@ -122,14 +123,28 @@ export const scrollToTab = () => {
}); });
}; };
export const stageAllChanges = ({ state, commit }) => { export const stageAllChanges = ({ state, commit, dispatch }) => {
const openFile = state.openFiles[0];
commit(types.SET_LAST_COMMIT_MSG, ''); commit(types.SET_LAST_COMMIT_MSG, '');
state.changedFiles.forEach(file => commit(types.STAGE_CHANGE, file.path)); state.changedFiles.forEach(file => commit(types.STAGE_CHANGE, file.path));
dispatch('openPendingTab', {
file: state.stagedFiles.find(f => f.path === openFile.path),
keyPrefix: stageKeys.staged,
});
}; };
export const unstageAllChanges = ({ state, commit }) => { export const unstageAllChanges = ({ state, commit, dispatch }) => {
const openFile = state.openFiles[0];
state.stagedFiles.forEach(file => commit(types.UNSTAGE_CHANGE, file.path)); state.stagedFiles.forEach(file => commit(types.UNSTAGE_CHANGE, file.path));
dispatch('openPendingTab', {
file: state.changedFiles.find(f => f.path === openFile.path),
keyPrefix: stageKeys.unstaged,
});
}; };
export const updateViewer = ({ commit }, viewer) => { export const updateViewer = ({ commit }, viewer) => {
......
app/assets/javascripts/ide/stores/actions/file.js
View file @ 9765f876
...@@ -5,7 +5,7 @@ import service from '../../services'; ...@@ -5,7 +5,7 @@ import service from '../../services';
import * as types from '../mutation_types'; import * as types from '../mutation_types';
import router from '../../ide_router'; import router from '../../ide_router';
import { setPageTitle } from '../utils'; import { setPageTitle } from '../utils';
import { viewerTypes } from '../../constants'; import { viewerTypes, stageKeys } from '../../constants';
export const closeFile = ({ commit, state, dispatch }, file) => { export const closeFile = ({ commit, state, dispatch }, file) => {
const { path } = file; const { path } = file;
...@@ -208,8 +208,9 @@ export const discardFileChanges = ({ dispatch, state, commit, getters }, path) = ...@@ -208,8 +208,9 @@ export const discardFileChanges = ({ dispatch, state, commit, getters }, path) =
eventHub.$emit(`editor.update.model.dispose.unstaged-${file.key}`, file.content); eventHub.$emit(`editor.update.model.dispose.unstaged-${file.key}`, file.content);
}; };
export const stageChange = ({ commit, state }, path) => { export const stageChange = ({ commit, state, dispatch }, path) => {
const stagedFile = state.stagedFiles.find(f => f.path === path); const stagedFile = state.stagedFiles.find(f => f.path === path);
const openFile = state.openFiles.find(f => f.path === path);
commit(types.STAGE_CHANGE, path); commit(types.STAGE_CHANGE, path);
commit(types.SET_LAST_COMMIT_MSG, ''); commit(types.SET_LAST_COMMIT_MSG, '');
...@@ -217,21 +218,39 @@ export const stageChange = ({ commit, state }, path) => { ...@@ -217,21 +218,39 @@ export const stageChange = ({ commit, state }, path) => {
if (stagedFile) { if (stagedFile) {
eventHub.$emit(`editor.update.model.new.content.staged-${stagedFile.key}`, stagedFile.content); eventHub.$emit(`editor.update.model.new.content.staged-${stagedFile.key}`, stagedFile.content);
} }
if (openFile && openFile.active) {
const file = state.stagedFiles.find(f => f.path === path);
dispatch('openPendingTab', {
file,
keyPrefix: stageKeys.staged,
});
}
}; };
export const unstageChange = ({ commit }, path) => { export const unstageChange = ({ commit, dispatch, state }, path) => {
const openFile = state.openFiles.find(f => f.path === path);
commit(types.UNSTAGE_CHANGE, path); commit(types.UNSTAGE_CHANGE, path);
if (openFile && openFile.active) {
const file = state.changedFiles.find(f => f.path === path);
dispatch('openPendingTab', {
file,
keyPrefix: stageKeys.unstaged,
});
}
}; };
export const openPendingTab = ({ commit, getters, dispatch, state }, { file, keyPrefix }) => { export const openPendingTab = ({ commit, getters, state }, { file, keyPrefix }) => {
if (getters.activeFile && getters.activeFile.key === `${keyPrefix}-${file.key}`) return false; if (getters.activeFile && getters.activeFile.key === `${keyPrefix}-${file.key}`) return false;
state.openFiles.forEach(f => eventHub.$emit(`editor.update.model.dispose.${f.key}`)); state.openFiles.forEach(f => eventHub.$emit(`editor.update.model.dispose.${f.key}`));
commit(types.ADD_PENDING_TAB, { file, keyPrefix }); commit(types.ADD_PENDING_TAB, { file, keyPrefix });
dispatch('scrollToTab');
router.push(`/project/${file.projectId}/tree/${state.currentBranchId}/`); router.push(`/project/${file.projectId}/tree/${state.currentBranchId}/`);
return true; return true;
......
app/assets/stylesheets/framework/buttons.scss
View file @ 9765f876
...@@ -166,6 +166,10 @@ ...@@ -166,6 +166,10 @@
@include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700); @include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700);
} }
&.btn-warning {
@include btn-outline($white-light, $orange-500, $orange-500, $orange-500, $white-light, $orange-600, $orange-600, $orange-700);
}
&.btn-primary, &.btn-primary,
&.btn-info { &.btn-info {
@include btn-outline($white-light, $blue-500, $blue-500, $blue-500, $white-light, $blue-600, $blue-600, $blue-700); @include btn-outline($white-light, $blue-500, $blue-500, $blue-500, $white-light, $blue-600, $blue-600, $blue-700);
......
app/assets/stylesheets/page_bundles/ide.scss
View file @ 9765f876
...@@ -7,6 +7,8 @@ $ide-context-header-padding: 10px; ...@@ -7,6 +7,8 @@ $ide-context-header-padding: 10px;
$ide-project-avatar-end: $ide-context-header-padding + 48px; $ide-project-avatar-end: $ide-context-header-padding + 48px;
$ide-tree-padding: $gl-padding; $ide-tree-padding: $gl-padding;
$ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
$ide-commit-row-height: 32px;
$ide-commit-header-height: 48px;
.project-refs-form, .project-refs-form,
.project-refs-target-form { .project-refs-target-form {
...@@ -567,24 +569,11 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; ...@@ -567,24 +569,11 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
} }
.multi-file-commit-panel-header { .multi-file-commit-panel-header {
display: flex; height: $ide-commit-header-height;
align-items: center;
margin-bottom: 0;
border-bottom: 1px solid $white-dark; border-bottom: 1px solid $white-dark;
padding: 12px 0; padding: 12px 0;
} }
.multi-file-commit-panel-header-title {
display: flex;
flex: 1;
align-items: center;
svg {
margin-right: $gl-btn-padding;
color: $theme-gray-700;
}
}
.multi-file-commit-panel-collapse-btn { .multi-file-commit-panel-collapse-btn {
border-left: 1px solid $white-dark; border-left: 1px solid $white-dark;
margin-left: auto; margin-left: auto;
...@@ -594,8 +583,6 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; ...@@ -594,8 +583,6 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
flex: 1; flex: 1;
overflow: auto; overflow: auto;
padding: $grid-size 0; padding: $grid-size 0;
margin-left: -$grid-size;
margin-right: -$grid-size;
min-height: 60px; min-height: 60px;
&.form-text.text-muted { &.form-text.text-muted {
...@@ -660,6 +647,8 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; ...@@ -660,6 +647,8 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
.multi-file-commit-list-path { .multi-file-commit-list-path {
cursor: pointer; cursor: pointer;
height: $ide-commit-row-height;
padding-right: 0;
&.is-active { &.is-active {
background-color: $white-normal; background-color: $white-normal;
...@@ -668,6 +657,12 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; ...@@ -668,6 +657,12 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
&:hover, &:hover,
&:focus { &:focus {
outline: 0; outline: 0;
.multi-file-discard-btn {
> .btn {
display: flex;
}
}
} }
svg { svg {
...@@ -679,6 +674,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; ...@@ -679,6 +674,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
.multi-file-commit-list-file-path { .multi-file-commit-list-file-path {
@include str-truncated(calc(100% - 30px)); @include str-truncated(calc(100% - 30px));
user-select: none;
&:active { &:active {
text-decoration: none; text-decoration: none;
...@@ -686,9 +682,11 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; ...@@ -686,9 +682,11 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
} }
.multi-file-discard-btn { .multi-file-discard-btn {
top: 4px; > .btn {
right: 8px; display: none;
bottom: 4px; width: $ide-commit-row-height;
height: $ide-commit-row-height;
}
svg { svg {
top: 0; top: 0;
...@@ -807,10 +805,9 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; ...@@ -807,10 +805,9 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
} }
.ide-staged-action-btn { .ide-staged-action-btn {
width: 22px; width: $ide-commit-row-height;
margin-left: -1px; height: $ide-commit-row-height;
border-top-left-radius: 0; color: inherit;
border-bottom-left-radius: 0;
> svg { > svg {
top: 0; top: 0;
...@@ -1456,3 +1453,15 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; ...@@ -1456,3 +1453,15 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
max-height: 222px; max-height: 222px;
} }
} }
.ide-commit-editor-header {
height: 65px;
padding: 8px 16px;
background-color: $theme-gray-50;
box-shadow: inset 0 -1px $white-dark;
}
.ide-commit-list-changed-icon {
width: $ide-commit-row-height;
height: $ide-commit-row-height;
}
changelogs/unreleased/ide-commit-panel-improved.yml 0 → 100644
View file @ 9765f876
---
title: Improved commit panel in Web IDE
merge_request: 21471
author:
type: changed
locale/gitlab.pot
View file @ 9765f876
...@@ -2301,9 +2301,21 @@ msgstr "" ...@@ -2301,9 +2301,21 @@ msgstr ""
msgid "Disable group Runners" msgid "Disable group Runners"
msgstr "" msgstr ""
msgid "Discard"
msgstr ""
msgid "Discard all changes"
msgstr ""
msgid "Discard all unstaged changes?"
msgstr ""
msgid "Discard changes" msgid "Discard changes"
msgstr "" msgstr ""
msgid "Discard changes to %{path}?"
msgstr ""
msgid "Discard draft" msgid "Discard draft"
msgstr "" msgstr ""
...@@ -3777,9 +3789,6 @@ msgstr "" ...@@ -3777,9 +3789,6 @@ msgstr ""
msgid "More" msgid "More"
msgstr "" msgstr ""
msgid "More actions"
msgstr ""
msgid "More information" msgid "More information"
msgstr "" msgstr ""
...@@ -5769,6 +5778,12 @@ msgstr "" ...@@ -5769,6 +5778,12 @@ msgstr ""
msgid "There are no projects shared with this group yet" msgid "There are no projects shared with this group yet"
msgstr "" msgstr ""
msgid "There are no staged changes"
msgstr ""
msgid "There are no unstaged changes"
msgstr ""
msgid "There are problems accessing Git storage: " msgid "There are problems accessing Git storage: "
msgstr "" msgstr ""
...@@ -6226,6 +6241,9 @@ msgstr "" ...@@ -6226,6 +6241,9 @@ msgstr ""
msgid "Unresolve discussion" msgid "Unresolve discussion"
msgstr "" msgstr ""
msgid "Unstage"
msgstr ""
msgid "Unstage all changes" msgid "Unstage all changes"
msgstr "" msgstr ""
...@@ -6643,6 +6661,12 @@ msgstr "" ...@@ -6643,6 +6661,12 @@ msgstr ""
msgid "You need permission." msgid "You need permission."
msgstr "" msgstr ""
msgid "You will loose all changes you've made to this file. This action cannot be undone."
msgstr ""
msgid "You will loose all the unstaged changes you've made in this project. This action cannot be undone."
msgstr ""
msgid "You will not get any notifications via email" msgid "You will not get any notifications via email"
msgstr "" msgstr ""
......
package.json
View file @ 9765f876
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
"webpack-prod": "NODE_ENV=production webpack --config config/webpack.config.js" "webpack-prod": "NODE_ENV=production webpack --config config/webpack.config.js"
}, },
"dependencies": { "dependencies": {
"@gitlab-org/gitlab-svgs": "^1.28.0", "@gitlab-org/gitlab-svgs": "^1.29.0",
"@gitlab-org/gitlab-ui": "1.0.5", "@gitlab-org/gitlab-ui": "1.0.5",
"autosize": "^4.0.0", "autosize": "^4.0.0",
"axios": "^0.17.1", "axios": "^0.17.1",
......
spec/javascripts/ide/components/commit_sidebar/list_item_spec.js
View file @ 9765f876
...@@ -30,7 +30,7 @@ describe('Multi-file editor commit sidebar list item', () => { ...@@ -30,7 +30,7 @@ describe('Multi-file editor commit sidebar list item', () => {
}); });
it('renders file path', () => { it('renders file path', () => {
expect(vm.$el.querySelector('.multi-file-commit-list-path').textContent.trim()).toBe(f.path); expect(vm.$el.querySelector('.multi-file-commit-list-path').textContent).toContain(f.path);
}); });
it('renders actionn button', () => { it('renders actionn button', () => {
......
spec/javascripts/ide/components/commit_sidebar/stage_button_spec.js
View file @ 9765f876
...@@ -29,7 +29,7 @@ describe('IDE stage file button', () => { ...@@ -29,7 +29,7 @@ describe('IDE stage file button', () => {
}); });
it('renders button to discard & stage', () => { it('renders button to discard & stage', () => {
expect(vm.$el.querySelectorAll('.btn').length).toBe(2); expect(vm.$el.querySelectorAll('.btn-blank').length).toBe(2);
}); });
it('calls store with stage button', () => { it('calls store with stage button', () => {
...@@ -39,7 +39,7 @@ describe('IDE stage file button', () => { ...@@ -39,7 +39,7 @@ describe('IDE stage file button', () => {
}); });
it('calls store with discard button', () => { it('calls store with discard button', () => {
vm.$el.querySelector('.dropdown-menu button').click(); vm.$el.querySelector('.btn-danger').click();
expect(vm.discardFileChanges).toHaveBeenCalledWith(f.path); expect(vm.discardFileChanges).toHaveBeenCalledWith(f.path);
}); });
......
spec/javascripts/ide/components/repo_commit_section_spec.js
View file @ 9765f876
...@@ -111,7 +111,7 @@ describe('RepoCommitSection', () => { ...@@ -111,7 +111,7 @@ describe('RepoCommitSection', () => {
.then(vm.$nextTick) .then(vm.$nextTick)
.then(() => { .then(() => {
expect(vm.$el.querySelector('.ide-commit-list-container').textContent).toContain( expect(vm.$el.querySelector('.ide-commit-list-container').textContent).toContain(
'No changes', 'There are no unstaged changes',
); );
}) })
.then(done) .then(done)
...@@ -133,7 +133,7 @@ describe('RepoCommitSection', () => { ...@@ -133,7 +133,7 @@ describe('RepoCommitSection', () => {
}); });
it('discards a single file', done => { it('discards a single file', done => {
vm.$el.querySelector('.multi-file-discard-btn .dropdown-menu button').click(); vm.$el.querySelector('.multi-file-commit-list li:first-child .js-modal-primary-action').click();
Vue.nextTick(() => { Vue.nextTick(() => {
expect(vm.$el.querySelector('.ide-commit-list-container').textContent).not.toContain('file1'); expect(vm.$el.querySelector('.ide-commit-list-container').textContent).not.toContain('file1');
......
spec/javascripts/ide/stores/actions/file_spec.js
View file @ 9765f876
...@@ -692,21 +692,6 @@ describe('IDE store file actions', () => { ...@@ -692,21 +692,6 @@ describe('IDE store file actions', () => {
.then(done) .then(done)
.catch(done.fail); .catch(done.fail);
}); });
it('calls scrollToTab', done => {
const scrollToTabSpy = jasmine.createSpy('scrollToTab');
const oldScrollToTab = store._actions.scrollToTab; // eslint-disable-line
store._actions.scrollToTab = [scrollToTabSpy]; // eslint-disable-line
store
.dispatch('openPendingTab', { file: f, keyPrefix: 'pending' })
.then(() => {
expect(scrollToTabSpy).toHaveBeenCalled();
store._actions.scrollToTab = oldScrollToTab; // eslint-disable-line
})
.then(done)
.catch(done.fail);
});
}); });
describe('removePendingTab', () => { describe('removePendingTab', () => {
......
spec/javascripts/ide/stores/actions_spec.js
View file @ 9765f876
...@@ -305,7 +305,11 @@ describe('Multi-file store actions', () => { ...@@ -305,7 +305,11 @@ describe('Multi-file store actions', () => {
describe('stageAllChanges', () => { describe('stageAllChanges', () => {
it('adds all files from changedFiles to stagedFiles', done => { it('adds all files from changedFiles to stagedFiles', done => {
store.state.changedFiles.push(file(), file('new')); const openFile = { ...file(), path: 'test' };
store.state.openFiles.push(openFile);
store.state.stagedFiles.push(openFile);
store.state.changedFiles.push(openFile, file('new'));
testAction( testAction(
stageAllChanges, stageAllChanges,
...@@ -316,7 +320,12 @@ describe('Multi-file store actions', () => { ...@@ -316,7 +320,12 @@ describe('Multi-file store actions', () => {
{ type: types.STAGE_CHANGE, payload: store.state.changedFiles[0].path }, { type: types.STAGE_CHANGE, payload: store.state.changedFiles[0].path },
{ type: types.STAGE_CHANGE, payload: store.state.changedFiles[1].path }, { type: types.STAGE_CHANGE, payload: store.state.changedFiles[1].path },
], ],
[], [
{
type: 'openPendingTab',
payload: { file: openFile, keyPrefix: 'staged' },
},
],
done, done,
); );
}); });
...@@ -324,7 +333,11 @@ describe('Multi-file store actions', () => { ...@@ -324,7 +333,11 @@ describe('Multi-file store actions', () => {
describe('unstageAllChanges', () => { describe('unstageAllChanges', () => {
it('removes all files from stagedFiles after unstaging', done => { it('removes all files from stagedFiles after unstaging', done => {
store.state.stagedFiles.push(file(), file('new')); const openFile = { ...file(), path: 'test' };
store.state.openFiles.push(openFile);
store.state.changedFiles.push(openFile);
store.state.stagedFiles.push(openFile, file('new'));
testAction( testAction(
unstageAllChanges, unstageAllChanges,
...@@ -334,7 +347,12 @@ describe('Multi-file store actions', () => { ...@@ -334,7 +347,12 @@ describe('Multi-file store actions', () => {
{ type: types.UNSTAGE_CHANGE, payload: store.state.stagedFiles[0].path }, { type: types.UNSTAGE_CHANGE, payload: store.state.stagedFiles[0].path },
{ type: types.UNSTAGE_CHANGE, payload: store.state.stagedFiles[1].path }, { type: types.UNSTAGE_CHANGE, payload: store.state.stagedFiles[1].path },
], ],
[], [
{
type: 'openPendingTab',
payload: { file: openFile, keyPrefix: 'unstaged' },
},
],
done, done,
); );
}); });
......
yarn.lock
View file @ 9765f876
...@@ -78,13 +78,9 @@ ...@@ -78,13 +78,9 @@
lodash "^4.2.0" lodash "^4.2.0"
to-fast-properties "^2.0.0" to-fast-properties "^2.0.0"
"@gitlab-org/gitlab-svgs@^1.23.0": "@gitlab-org/gitlab-svgs@^1.23.0", "@gitlab-org/gitlab-svgs@^1.29.0":
version "1.27.0" version "1.29.0"
resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.27.0.tgz#638e70399ebd59e503732177316bb9a18bf7a13f" resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.29.0.tgz#03b65b513f9099bbda6ecf94d673a2952f8c6c70"
"@gitlab-org/gitlab-svgs@^1.28.0":
version "1.28.0"
resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.28.0.tgz#f689dfd46504df0a75027d6dd4ea01a71cd46f88"
"@gitlab-org/gitlab-ui@1.0.5": "@gitlab-org/gitlab-ui@1.0.5":
version "1.0.5" version "1.0.5"
......
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