1 files changed, 95 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/import/fogbugz/new_user_map/components/user_select.vue b/app/assets/javascripts/pages/import/fogbugz/new_user_map/components/user_select.vue
new file mode 100644
index 00000000000..20ce296bbec
--- /dev/null
+++ b/app/assets/javascripts/pages/import/fogbugz/new_user_map/components/user_select.vue
@@ -0,0 +1,95 @@
+<script>
+import { GlAvatarLabeled, GlListbox } from '@gitlab/ui';
+import { __ } from '~/locale';
+import searchUsersQuery from '~/graphql_shared/queries/users_search_all.query.graphql';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
+
+const USERS_PER_PAGE = 20;
+
+export default {
+  components: {
+    GlAvatarLabeled,
+    GlListbox,
+  },
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  apollo: {
+    usersQuery: {
+      query: searchUsersQuery,
+      variables() {
+        return {
+          search: this.search,
+          first: USERS_PER_PAGE,
+        };
+      },
+      update(data) {
+        return data;
+      },
+      debounce: DEFAULT_DEBOUNCE_AND_THROTTLE_MS,
+    },
+  },
+  data() {
+    return {
+      user: '',
+      search: '',
+    };
+  },
+  computed: {
+    userId() {
+      return getIdFromGraphQLId(this.user);
+    },
+    users() {
+      return [
+        { text: __('(no user)'), value: '' },
+        ...(this.usersQuery?.users.nodes || []).map((u) => ({
+          username: `@${u.username}`,
+          avatarUrl: u.avatarUrl,
+          text: u.name,
+          value: u.id,
+        })),
+      ];
+    },
+  },
+  methods: {
+    clearTransform() {
+      // FIXME: workaround for listbox issue
+      // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1986
+      const { listbox } = this.$refs;
+      if (listbox.querySelector('.dropdown-menu')) {
+        listbox.querySelector('.dropdown-menu').style.transform = '';
+      }
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <gl-listbox
+      ref="listbox"
+      v-model="user"
+      :items="users"
+      searchable
+      is-check-centered
+      :searching="$apollo.loading"
+      @click.capture.native="clearTransform"
+      @search="search = $event"
+    >
+      <template #list-item="{ item }">
+        <gl-avatar-labeled
+          shape="circle"
+          :size="32"
+          :src="item.avatarUrl"
+          :label="item.text"
+          :sub-label="item.username"
+        />
+      </template>
+    </gl-listbox>
+    <input type="hidden" :name="name" :value="userId" />
+  </div>
+</template>