Merge branch 'eduardosanz/entity_select_additional_event' into 'master'

Enrich `input` event with both value and text -- EntitySelect

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/125610



Merged-by: Lukas 'Eipi' Eipert <leipert@gitlab.com>
Approved-by: Tan Le <tle@gitlab.com>
Approved-by: Lukas 'Eipi' Eipert <leipert@gitlab.com>
Co-authored-by: Eduardo Sanz García <esanz-garcia@gitlab.com>

app/assets/javascripts/vue_shared/components/entity_select/entity_select.vue

@@ -75,10 +75,13 @@ export default {
   computed: {
     selected: {
       set(value) {
-        this.$emit('input', value);
         this.selectedValue = value;
         this.selectedText =
           value === null ? null : this.items.find((item) => item.value === value).text;
+        this.$emit('input', {
+          value: this.selectedValue,
+          text: this.selectedText,
+        });
       },
       get() {
         return this.selectedValue;
@@ -161,7 +164,7 @@ export default {
     },
     onReset() {
       this.selected = null;
-      this.$emit('input', null);
+      this.$emit('input', {});
     },
     onBottomReached() {
       this.fetchEntities(this.page + 1);

ee/app/assets/javascripts/pages/admin/namespace_limits/components/excluded_namespaces_form.vue

@@ -99,8 +99,8 @@ export default {
       }
       return { items: groups, totalPages };
     },
-    handleEntitySelectInput(input) {
-      this.excludedId = input;
+    handleEntitySelectInput({ value }) {
+      this.excludedId = value;
     },
   },
 };

ee/spec/frontend/pages/admin/namespace_limits/components/excluded_namespaces_form_spec.js

@@ -37,7 +37,7 @@ describe('ExcludedNamespacesForm', () => {
   const submitForm = () => wrapper.find('form').trigger('submit');
   const fillAndSubmitForm = () => {
     findReasonInput().vm.$emit('input', mockReason);
-    findEntitySelect().vm.$emit('input', mockNamespaceId);
+    findEntitySelect().vm.$emit('input', { value: mockNamespaceId });
 
     submitForm();
 

spec/frontend/vue_shared/components/entity_select/entity_select_spec.js

@@ -125,7 +125,8 @@ describe('EntitySelect', () => {
       it('emits `input` event with the select value', async () => {
         createComponent();
         await selectGroup();
-        expect(wrapper.emitted('input')[0]).toEqual(['1']);
+
+        expect(wrapper.emitted('input')[0][0]).toMatchObject(itemMock);
       });
 
       it(`uses the selected group's name as the toggle text`, async () => {
@@ -153,14 +154,14 @@ describe('EntitySelect', () => {
         expect(findListbox().props('toggleText')).toBe(defaultToggleText);
       });
 
-      it('emits `input` event with `null` on reset', async () => {
+      it('emits `input` event with an empty object on reset', async () => {
         createComponent();
         await selectGroup();
 
         findListbox().vm.$emit('reset');
         await nextTick();
 
-        expect(wrapper.emitted('input')[2]).toEqual([null]);
+        expect(Object.keys(wrapper.emitted('input')[2][0]).length).toBe(0);
       });
     });
   });