Fixed UX bug in agent creation modal

The MR fixes the bug when pressing enter during the agent creation
reloads the page.

Changelog: fixed

app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue

@@ -3,6 +3,7 @@ import {
   GlDropdown,
   GlDropdownItem,
   GlDropdownDivider,
+  GlDropdownText,
   GlSearchBoxByType,
   GlSprintf,
 } from '@gitlab/ui';
@@ -15,6 +16,7 @@ export default {
     GlDropdown,
     GlDropdownItem,
     GlDropdownDivider,
+    GlDropdownText,
     GlSearchBoxByType,
     GlSprintf,
   },
@@ -73,13 +75,24 @@ export default {
       this.clearSearch();
       this.focusSearch();
     },
+    onKeyEnter() {
+      if (!this.searchTerm?.length) {
+        return;
+      }
+      this.$refs.dropdown.hide();
+      this.selectAgent(this.searchTerm);
+    },
   },
 };
 </script>
 <template>
-  <gl-dropdown :text="dropdownText" :loading="isRegistering" @shown="handleShow">
+  <gl-dropdown ref="dropdown" :text="dropdownText" :loading="isRegistering" @shown="handleShow">
     <template #header>
-      <gl-search-box-by-type ref="searchInput" v-model.trim="searchTerm" />
+      <gl-search-box-by-type
+        ref="searchInput"
+        v-model.trim="searchTerm"
+        @keydown.enter.stop.prevent="onKeyEnter"
+      />
     </template>
     <gl-dropdown-item
       v-for="agent in filteredResults"
@@ -90,9 +103,9 @@ export default {
     >
       {{ agent }}
     </gl-dropdown-item>
-    <gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{
+    <gl-dropdown-text v-if="!filteredResults.length" ref="noMatchingResults">{{
       $options.i18n.noResults
-    }}</gl-dropdown-item>
+    }}</gl-dropdown-text>
     <template v-if="shouldRenderCreateButton">
       <gl-dropdown-divider />
       <gl-dropdown-item data-testid="create-config-button" @click="selectAgent(searchTerm)">

spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js

 import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { ENTER_KEY } from '~/lib/utils/keys';
 import AvailableAgentsDropdown from '~/clusters_list/components/available_agents_dropdown.vue';
 import { I18N_AVAILABLE_AGENTS_DROPDOWN } from '~/clusters_list/constants';
 
@@ -18,6 +19,7 @@ describe('AvailableAgentsDropdown', () => {
       propsData,
       stubs: { GlDropdown },
     });
+    wrapper.vm.$refs.dropdown.hide = jest.fn();
   };
 
   afterEach(() => {
@@ -96,6 +98,25 @@ describe('AvailableAgentsDropdown', () => {
         expect(findDropdown().props('text')).toBe('new-agent');
       });
     });
+
+    describe('click enter to register new agent without configuration', () => {
+      beforeEach(async () => {
+        await findSearchInput().vm.$emit('input', 'new-agent');
+        await findSearchInput().vm.$emit('keydown', new KeyboardEvent({ key: ENTER_KEY }));
+      });
+
+      it('emits agentSelected with the name of the clicked agent', () => {
+        expect(wrapper.emitted('agentSelected')).toEqual([['new-agent']]);
+      });
+
+      it('marks the clicked item as selected', () => {
+        expect(findDropdown().props('text')).toBe('new-agent');
+      });
+
+      it('closes the dropdown', () => {
+        expect(wrapper.vm.$refs.dropdown.hide).toHaveBeenCalledTimes(1);
+      });
+    });
   });
 
   describe('registration in progress', () => {