Add placeholder actions with user select to table

What does this MR do and why?

This MR adds placeholder actions to the table that renders a listbox. This allows group owners to select which user they would like the placeholder to be mapped to OR choose "Don't reassign" to keep the placeholder as-is. Note that clicking the Reassign / Confirm button does not do anything at the moment as it will be added once backend is ready.

This change is behind the bulk_import_user_mapping feature flag.

Changelog: changed

Here is the list of MRs around the feature:

MR	Status
Add basic PlaceholdersTabApp and feature flag	✅ Merged
Add placeholder users table	✅ Merged
Add placeholder actions with users select to table	👈 You are here

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

User_mapping_users_select

Before	After

How to set up and validate locally

1. Apply this diff to show the "Placeholders" tab:

diff --git a/app/assets/javascripts/members/components/members_tabs.vue b/app/assets/javascripts/members/components/members_tabs.vue
index 05fde6369d16..be4df313533a 100644
--- a/app/assets/javascripts/members/components/members_tabs.vue
+++ b/app/assets/javascripts/members/components/members_tabs.vue
@@ -27,6 +27,7 @@ export default {
           ...getters,
           // eslint-disable-next-line @gitlab/require-i18n-strings
           [`${memberType}Count`](state) {
+            if (memberType === 'placeholder') return 1;
             return countComputed(state, memberType);
           },
         };

1. Go to Group > Members and select the Placeholders tab. For example, http://127.0.0.1:3000/groups/gitlab-org/-/group_members?tab=placeholders.
2. You should see an empty table. Apply the next diff to add dummy data:

diff --git a/app/assets/javascripts/members/components/placeholders/app.vue b/app/assets/javascripts/members/components/placeholders/app.vue
index ee435cd8154d..a78c9a8546e1 100644
--- a/app/assets/javascripts/members/components/placeholders/app.vue
+++ b/app/assets/javascripts/members/components/placeholders/app.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlBadge, GlTab, GlTabs } from '@gitlab/ui';
+import { __ } from '~/locale';
 import PlaceholdersTable from './placeholders_table.vue';

 export default {
@@ -14,6 +15,17 @@ export default {
   data() {
     return {
       selectedTabIndex: 0,
+      items: [
+        {
+          avatar_url:
+            'https://www.gravatar.com/avatar/258d8dc916db8cea2cafb6c3cd0cb0246efe061421dbd83ec3a350428cabda4f?s=80&d=identicon',
+          name: __('Administrator'),
+          username: '@root',
+          source_hostname: 'https://gitlab.com',
+          source_username: '@old_root',
+          status: 'pending_assignment',
+        },
+      ],
     };
   },

@@ -34,7 +46,7 @@ export default {
         <gl-badge size="sm" class="gl-tab-counter-badge">{{ tabCount }}</gl-badge>
       </template>

-      <placeholders-table key="unassigned" />
+      <placeholders-table key="unassigned" :items="items" />
     </gl-tab>

     <gl-tab>

Related to #465226 (closed)