Commit 4b3ad6a6 authored by Andrew Fontaine's avatar Andrew Fontaine

Merge branch '300444-pipeline-editor-improve-cancel-button-experience-in-commit-form' into 'master'

Improve cancel button experience in Pipeline editor

See merge request gitlab-org/gitlab!74634
parents 68bca4de 427826b0
......@@ -73,7 +73,7 @@ export default {
});
},
onReset() {
this.$emit('cancel');
this.$emit('resetContent');
},
scrollIntoView() {
this.$el.scrollIntoView({ behavior: 'smooth' });
......@@ -86,7 +86,7 @@ export default {
startMergeRequest: __('Start a %{new_merge_request} with these changes'),
newMergeRequest: __('new merge request'),
commitChanges: __('Commit changes'),
cancel: __('Cancel'),
resetContent: __('Reset'),
},
};
</script>
......@@ -148,7 +148,7 @@ export default {
{{ $options.i18n.commitChanges }}
</gl-button>
<gl-button type="reset" category="secondary" class="gl-mr-3">
{{ $options.i18n.cancel }}
{{ $options.i18n.resetContent }}
</gl-button>
</div>
</gl-form>
......
......@@ -127,9 +127,6 @@ export default {
this.isSaving = false;
}
},
onCommitCancel() {
this.$emit('resetContent');
},
updateCurrentBranch(currentBranch) {
this.$apollo.mutate({
mutation: updateCurrentBranchMutation,
......@@ -153,7 +150,6 @@ export default {
:is-saving="isSaving"
:scroll-to-commit-form="scrollToCommitForm"
v-on="$listeners"
@cancel="onCommitCancel"
@submit="onCommitSubmit"
/>
</template>
<script>
import { GlLoadingIcon } from '@gitlab/ui';
import { GlLoadingIcon, GlModal } from '@gitlab/ui';
import { fetchPolicies } from '~/lib/graphql';
import { queryToObject } from '~/lib/utils/url_utility';
import { s__ } from '~/locale';
import { __, s__ } from '~/locale';
import { unwrapStagesWithNeeds } from '~/pipelines/components/unwrapping_utils';
......@@ -30,6 +30,7 @@ export default {
components: {
ConfirmUnsavedChangesDialog,
GlLoadingIcon,
GlModal,
PipelineEditorEmptyState,
PipelineEditorHome,
PipelineEditorMessages,
......@@ -54,6 +55,7 @@ export default {
lastCommittedContent: '',
shouldSkipStartScreen: false,
showFailure: false,
showResetComfirmationModal: false,
showStartScreen: false,
showSuccess: false,
starterTemplate: '',
......@@ -224,6 +226,18 @@ export default {
tabGraph: s__('Pipelines|Visualize'),
tabLint: s__('Pipelines|Lint'),
},
resetModal: {
actionPrimary: {
text: __('Reset file'),
},
actionCancel: {
text: __('Cancel'),
},
body: s__(
'Pipeline Editor|Are you sure you want to reset the file to its last committed version?',
),
title: __('Discard changes'),
},
watch: {
isEmpty(flag) {
if (flag) {
......@@ -242,6 +256,11 @@ export default {
hideSuccess() {
this.showSuccess = false;
},
confirmReset() {
if (this.hasUnsavedChanges) {
this.showResetComfirmationModal = true;
}
},
async refetchContent() {
this.$apollo.queries.initialCiFileContent.skip = false;
await this.$apollo.queries.initialCiFileContent.refetch();
......@@ -262,6 +281,7 @@ export default {
this.successType = type;
},
resetContent() {
this.showResetComfirmationModal = false;
this.currentCiFileContent = this.lastCommittedContent;
},
setAppStatus(appStatus) {
......@@ -335,12 +355,22 @@ export default {
:has-unsaved-changes="hasUnsavedChanges"
:is-new-ci-config-file="isNewCiConfigFile"
@commit="updateOnCommit"
@resetContent="resetContent"
@resetContent="confirmReset"
@showError="showErrorAlert"
@refetchContent="refetchContent"
@updateCiConfig="updateCiConfig"
@updateCommitSha="updateCommitSha"
/>
<gl-modal
v-model="showResetComfirmationModal"
modal-id="reset-content"
:title="$options.resetModal.title"
:action-cancel="$options.resetModal.actionCancel"
:action-primary="$options.resetModal.actionPrimary"
@primary="resetContent"
>
{{ $options.resetModal.body }}
</gl-modal>
<confirm-unsaved-changes-dialog :has-unsaved-changes="hasUnsavedChanges" />
</div>
</div>
......
......@@ -25304,6 +25304,9 @@ msgstr ""
msgid "Pipeline Editor"
msgstr ""
msgid "Pipeline Editor|Are you sure you want to reset the file to its last committed version?"
msgstr ""
msgid "Pipeline ID"
msgstr ""
......@@ -29538,6 +29541,9 @@ msgstr ""
msgid "Reset authorization key?"
msgstr ""
msgid "Reset file"
msgstr ""
msgid "Reset filters"
msgstr ""
......
......@@ -52,4 +52,53 @@ RSpec.describe 'Pipeline Editor', :js do
end
end
end
context 'Editor content' do
it 'user can reset their CI configuration' do
click_button 'Collapse'
page.within('#source-editor-') do
find('textarea').send_keys '123'
end
# It takes some time after sending keys for the reset
# btn to register the changes inside the editor
sleep 1
click_button 'Reset'
expect(page).to have_css('#reset-content')
page.within('#reset-content') do
click_button 'Reset file'
end
page.within('#source-editor-') do
expect(page).to have_content('Default Content')
expect(page).not_to have_content('Default Content123')
end
end
it 'user can cancel reseting their CI configuration' do
click_button 'Collapse'
page.within('#source-editor-') do
find('textarea').send_keys '123'
end
# It takes some time after sending keys for the reset
# btn to register the changes inside the editor
sleep 1
click_button 'Reset'
expect(page).to have_css('#reset-content')
page.within('#reset-content') do
click_button 'Cancel'
end
page.within('#source-editor-') do
expect(page).to have_content('Default Content123')
end
end
end
end
......@@ -78,7 +78,7 @@ describe('Pipeline Editor | Commit Form', () => {
it('emits an event when the form resets', () => {
findCancelBtn().trigger('click');
expect(wrapper.emitted('cancel')).toHaveLength(1);
expect(wrapper.emitted('resetContent')).toHaveLength(1);
});
});
......
......@@ -103,11 +103,6 @@ describe('Pipeline Editor | Commit section', () => {
await waitForPromises();
};
const cancelCommitForm = async () => {
const findCancelBtn = () => wrapper.find('[type="reset"]');
await findCancelBtn().trigger('click');
};
afterEach(() => {
mockMutate.mockReset();
wrapper.destroy();
......@@ -266,18 +261,6 @@ describe('Pipeline Editor | Commit section', () => {
});
});
describe('when the commit form is cancelled', () => {
beforeEach(async () => {
createComponent();
});
it('emits an event so that it cab be reseted', async () => {
await cancelCommitForm();
expect(wrapper.emitted('resetContent')).toHaveLength(1);
});
});
it('sets listeners on commit form', () => {
const handler = jest.fn();
createComponent({ options: { listeners: { event: handler } } });
......
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