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 5e794abbfe4f23090d2eac933ada39de2e63db10..0efb50d7b2de5c9b6265e59c4c953dcf2d0294d9 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 0000000000000000000000000000000000000000..feb2da16a4eb284f40357e84b5ad2c0480ef9185 --- /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 534adef0c465d20593043080a4a9a6fcd24a6543..d248ba41803bda04072a3957ef7e2185da10a5cf 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', () => {