user search uses user query component

admin/src/pages/UserSearch.spec.js

@@ -186,7 +186,7 @@ describe('UserSearch', () => {
       describe('reset the search field', () => {
         it('calls the API with empty criteria', async () => {
           jest.clearAllMocks()
-          await wrapper.find('.test-click-clear-criteria').trigger('click')
+          await wrapper.findComponent({ name: 'UserQuery' }).vm.$emit('input', '')
           expect(apolloQueryMock).toBeCalledWith(
             expect.objectContaining({
               variables: {

admin/src/pages/UserSearch.vue

@@ -23,21 +23,7 @@
       </b-button>
     </div>
     <label>{{ $t('user_search') }}</label>
-    <div>
-      <b-input-group>
-        <b-form-input
-          type="text"
-          class="test-input-criteria"
-          v-model="criteria"
-          :placeholder="$t('user_search')"
-        ></b-form-input>
-        <b-input-group-append class="test-click-clear-criteria" @click="criteria = ''">
-          <b-input-group-text class="pointer">
-            <b-icon icon="x" />
-          </b-input-group-text>
-        </b-input-group-append>
-      </b-input-group>
-    </div>
+    <user-query class="mb-4 mt-2" v-model="criteria" />
     <search-user-table
       type="PageUserSearch"
       :items="searchResult"
@@ -61,12 +47,14 @@
 import SearchUserTable from '../components/Tables/SearchUserTable'
 import { searchUsers } from '../graphql/searchUsers'
 import { creationMonths } from '../mixins/creationMonths'
+import UserQuery from '../components/UserQuery'
 
 export default {
   name: 'UserSearch',
   mixins: [creationMonths],
   components: {
     SearchUserTable,
+    UserQuery,
   },
   data() {
     return {