Clear modal form fields

ee/app/assets/javascripts/admin/dev_ops_report/components/devops_adoption_segment_modal.vue

@@ -53,8 +53,11 @@ export default {
     },
     cancelOptions() {
       return {
+        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 }}

ee/changelogs/unreleased/293714-devops-adoption-clear-previously-selected-groups-when-creating-.yml

+---
+title: 'DevOps Adoption: Clear form when creating a new segment'
+merge_request: 50766
+author:
+type: fixed

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', () => {