From 2f4945d08467bd501d8375c117e283b67f31d551 Mon Sep 17 00:00:00 2001
From: wortschi <mwortschack@gitlab.com>
Date: Thu, 7 Jan 2021 11:46:33 +0100
Subject: [PATCH] Clear modal form fields
---
.../devops_adoption_segment_modal.vue | 17 ++++++++++++++---
...reviously-selected-groups-when-creating-.yml | 5 +++++
.../devops_adoption_segment_modal_spec.js | 9 +++++++++
3 files changed, 28 insertions(+), 3 deletions(-)
create mode 100644 ee/changelogs/unreleased/293714-devops-adoption-clear-previously-selected-groups-when-creating-.yml
diff --git a/ee/app/assets/javascripts/admin/dev_ops_report/components/devops_adoption_segment_modal.vue b/ee/app/assets/javascripts/admin/dev_ops_report/components/devops_adoption_segment_modal.vue
index 5e794abbfe4f2..0efb50d7b2de5 100644
--- a/ee/app/assets/javascripts/admin/dev_ops_report/components/devops_adoption_segment_modal.vue
+++ b/ee/app/assets/javascripts/admin/dev_ops_report/components/devops_adoption_segment_modal.vue
@@ -53,8 +53,11 @@ export default {
},
cancelOptions() {
return {
- text: this.$options.i18n.cancel,
- attributes: [{ disabled: this.loading }],
+ button: {
+ text: this.$options.i18n.cancel,
+ attributes: [{ disabled: this.loading }],
+ },
+ callback: this.resetForm,
};
},
primaryOptions() {
@@ -115,6 +118,7 @@ export default {
if (errors.length) {
this.errors = errors;
} else {
+ this.resetForm();
this.closeModal();
}
} catch (error) {
@@ -161,6 +165,11 @@ export default {
checkboxValuesFromSegment() {
return this.segment.groups.map(({ id }) => getIdFromGraphQLId(id));
},
+ resetForm() {
+ this.name = this.segment?.name || '';
+ this.checkboxValues = this.segment ? this.checkboxValuesFromSegment() : [];
+ this.filter = '';
+ },
},
devopsSegmentModalId: DEVOPS_ADOPTION_SEGMENT_MODAL_ID,
};
@@ -173,8 +182,10 @@ export default {
size="sm"
scrollable
:action-primary="primaryOptions.button"
- :action-cancel="cancelOptions"
+ :action-cancel="cancelOptions.button"
@primary.prevent="primaryOptions.callback"
+ @canceled="cancelOptions.callback"
+ @hide="resetForm"
>
<gl-alert v-if="errors.length" variant="danger" class="gl-mb-3" @dismiss="clearErrors">
{{ displayError }}
diff --git a/ee/changelogs/unreleased/293714-devops-adoption-clear-previously-selected-groups-when-creating-.yml b/ee/changelogs/unreleased/293714-devops-adoption-clear-previously-selected-groups-when-creating-.yml
new file mode 100644
index 0000000000000..feb2da16a4eb2
--- /dev/null
+++ b/ee/changelogs/unreleased/293714-devops-adoption-clear-previously-selected-groups-when-creating-.yml
@@ -0,0 +1,5 @@
+---
+title: 'DevOps Adoption: Clear form when creating a new segment'
+merge_request: 50766
+author:
+type: fixed
diff --git a/ee/spec/frontend/admin/dev_ops_report/components/devops_adoption_segment_modal_spec.js b/ee/spec/frontend/admin/dev_ops_report/components/devops_adoption_segment_modal_spec.js
index 534adef0c465d..d248ba41803bd 100644
--- a/ee/spec/frontend/admin/dev_ops_report/components/devops_adoption_segment_modal_spec.js
+++ b/ee/spec/frontend/admin/dev_ops_report/components/devops_adoption_segment_modal_spec.js
@@ -298,6 +298,15 @@ describe('DevopsAdoptionSegmentModal', () => {
it('closes the modal after a successful mutation', async () => {
expect(wrapper.vm.$refs.modal.hide).toHaveBeenCalled();
});
+
+ it('resets the form fields', async () => {
+ const name = segment ? 'Segment 1' : '';
+ const checkboxValues = segment ? [1] : [];
+
+ expect(wrapper.vm.name).toBe(name);
+ expect(wrapper.vm.checkboxValues).toEqual(checkboxValues);
+ expect(wrapper.vm.filter).toBe('');
+ });
});
describe('error handling', () => {
--
GitLab