Commit 2aa47e10 authored by Phil Hughes's avatar Phil Hughes

Improved IDE commit flow

Closes #48182
parent 44cb8a74
<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>
...@@ -56,6 +56,11 @@ export default { ...@@ -56,6 +56,11 @@ export default {
type: String, type: String,
required: true, required: true,
}, },
emptyStateText: {
type: String,
required: false,
default: __('No changes'),
},
}, },
computed: { computed: {
titleText() { titleText() {
...@@ -91,17 +96,20 @@ export default { ...@@ -91,17 +96,20 @@ export default {
:name="iconName" :name="iconName"
:size="18" :size="18"
/> />
<strong>
{{ titleText }} {{ titleText }}
</strong>
<div class="d-flex ml-auto"> <div class="d-flex ml-auto">
<button <button
v-tooltip v-tooltip
v-show="filesLength" :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 +117,10 @@ export default { ...@@ -109,18 +117,10 @@ export default {
> >
<icon <icon
:name="actionBtnIcon" :name="actionBtnIcon"
:size="12" :size="16"
class="ml-auto mr-auto" class="mr-0"
/> />
</button> </button>
<span
:class="{
'rounded-right': !filesLength
}"
class="ide-commit-file-count order-0 rounded-left text-center"
>
{{ filesLength }}
</span>
</div> </div>
</div> </div>
</header> </header>
...@@ -143,9 +143,9 @@ export default { ...@@ -143,9 +143,9 @@ 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>
</div> </div>
</template> </template>
<script> <script>
import $ from 'jquery';
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
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 +19,19 @@ export default { ...@@ -16,8 +19,19 @@ export default {
required: true, required: true,
}, },
}, },
computed: {
modalId() {
return `discard-file-${this.path}`;
},
modalTitle() {
return `Discard changes to ${this.path}?`;
},
},
methods: { methods: {
...mapActions(['stageChange', 'discardFileChanges']), ...mapActions(['stageChange', 'discardFileChanges']),
showDiscardModal() {
$(document.getElementById(this.modalId)).modal('show');
},
}, },
}; };
</script> </script>
...@@ -25,51 +39,48 @@ export default { ...@@ -25,51 +39,48 @@ export default {
<template> <template>
<div <div
v-once v-once
class="multi-file-discard-btn dropdown" class="multi-file-discard-btn"
> >
<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 append-right-8 d-flex 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="stageChange(path)"
> >
<icon <icon
:size="12" :size="16"
name="mobile-issue-close" name="mobile-issue-close"
/> />
</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 d-flex 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="showDiscardModal"
data-display="static"
> >
<icon <icon
:size="12" :size="16"
name="ellipsis_h" name="remove"
/> />
</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>
...@@ -39,8 +39,8 @@ export default { ...@@ -39,8 +39,8 @@ export default {
@click="unstageChange(path)" @click="unstageChange(path)"
> >
<icon <icon
:size="12" :size="16"
name="history" name="redo"
/> />
</button> </button>
</div> </div>
......
...@@ -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"
......
...@@ -95,6 +95,7 @@ export default { ...@@ -95,6 +95,7 @@ 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="mobile-issue-close"
item-action-component="stage-button" item-action-component="stage-button"
...@@ -108,6 +109,7 @@ export default { ...@@ -108,6 +109,7 @@ 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="history"
item-action-component="unstage-button" item-action-component="unstage-button"
......
...@@ -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);
......
...@@ -679,6 +679,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; ...@@ -679,6 +679,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;
...@@ -807,11 +808,6 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; ...@@ -807,11 +808,6 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
} }
.ide-staged-action-btn { .ide-staged-action-btn {
width: 22px;
margin-left: -1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
> svg { > svg {
top: 0; top: 0;
} }
...@@ -1456,3 +1452,9 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; ...@@ -1456,3 +1452,9 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
max-height: 222px; max-height: 222px;
} }
} }
.ide-commit-editor-header {
padding: 8px 16px;
background-color: $white-normal;
box-shadow: inset 0 -1px $white-dark;
}
...@@ -2301,6 +2301,9 @@ msgstr "" ...@@ -2301,6 +2301,9 @@ msgstr ""
msgid "Disable group Runners" msgid "Disable group Runners"
msgstr "" msgstr ""
msgid "Discard"
msgstr ""
msgid "Discard changes" msgid "Discard changes"
msgstr "" msgstr ""
...@@ -3777,9 +3780,6 @@ msgstr "" ...@@ -3777,9 +3780,6 @@ msgstr ""
msgid "More" msgid "More"
msgstr "" msgstr ""
msgid "More actions"
msgstr ""
msgid "More information" msgid "More information"
msgstr "" msgstr ""
...@@ -5769,6 +5769,12 @@ msgstr "" ...@@ -5769,6 +5769,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 +6232,9 @@ msgstr "" ...@@ -6226,6 +6232,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 +6652,9 @@ msgstr "" ...@@ -6643,6 +6652,9 @@ 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 not get any notifications via email" msgid "You will not get any notifications via email"
msgstr "" msgstr ""
......
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