Add basic PlaceholdersTabApp

To be used for placeholder users from import by direct transfer.

The tab is not shown at the moment as `showTab` returns false
for the placeholder tab. It will only show when we send data
from the backend helpers.

app/assets/javascripts/members/components/placeholders/app.vue

+<script>
+import { GlBadge, GlTab, GlTabs } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  name: 'PlaceholdersTabApp',
+  components: {
+    GlBadge,
+    GlTab,
+    GlTabs,
+  },
+  TABS: [
+    {
+      title: s__('UserMapping|Awaiting reassignment'),
+    },
+    {
+      title: s__('UserMapping|Reassigned'),
+    },
+  ],
+  data() {
+    return {
+      selectedTabIndex: 0,
+    };
+  },
+  methods: {
+    tabCount() {
+      return 0;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-tabs v-model="selectedTabIndex" class="gl-mt-3">
+    <gl-tab v-for="(tab, index) in $options.TABS" :key="index">
+      <template #title>
+        <span>{{ tab.title }}</span>
+        <gl-badge size="sm" class="gl-tab-counter-badge">{{ tabCount() }}</gl-badge>
+      </template>
+    </gl-tab>
+  </gl-tabs>
+</template>

app/assets/javascripts/members/constants.js

@@ -3,6 +3,8 @@ import { GlFilteredSearchToken } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import { OPERATORS_IS } from '~/vue_shared/components/filtered_search_bar/constants';
 
+import PlaceholdersTabApp from './components/placeholders/app.vue';
+
 // Overridden in EE
 export const EE_GROUPS_APP_OPTIONS = {};
 export const EE_PROJECTS_APP_OPTIONS = {};
@@ -166,6 +168,7 @@ export const MEMBER_TYPES = Object.freeze({
   group: 'group',
   invite: 'invite',
   accessRequest: 'accessRequest',
+  placeholder: 'placeholder',
 });
 
 // `app/models/members/group_member.rb`
@@ -178,6 +181,7 @@ export const TAB_QUERY_PARAM_VALUES = Object.freeze({
   group: 'groups',
   invite: 'invited',
   accessRequest: 'access_requests',
+  placeholder: 'placeholders',
 });
 
 // Overridden in EE
@@ -204,6 +208,12 @@ export const TABS = [
     requiredPermissions: ['canManageAccessRequests'],
     queryParamValue: TAB_QUERY_PARAM_VALUES.accessRequest,
   },
+  {
+    namespace: MEMBER_TYPES.placeholder,
+    title: s__('UserMapping|Placeholders'),
+    queryParamValue: TAB_QUERY_PARAM_VALUES.placeholder,
+    component: PlaceholdersTabApp,
+  },
 ];
 
 /**

app/assets/javascripts/members/index.js

@@ -63,6 +63,7 @@ export const initMembersApp = (el, options) => {
 
   return new Vue({
     el,
+    name: 'MembersRoot',
     components: { MembersTabs },
     store,
     apolloProvider: new VueApollo({ defaultClient: createDefaultClient() }),

app/controllers/groups/group_members_controller.rb

@@ -17,6 +17,7 @@ def self.admin_not_required_endpoints
   before_action :authorize_read_group_member!, only: :index
 
   before_action only: [:index] do
+    push_frontend_feature_flag(:bulk_import_user_mapping, @group)
     push_frontend_feature_flag(:service_accounts_crud, @group)
     push_frontend_feature_flag(:webui_members_inherited_users, current_user)
   end

config/feature_flags/wip/bulk_import_user_mapping.yml

+---
+name: bulk_import_user_mapping
+feature_issue_url: https://gitlab.com/groups/gitlab-org/-/epics/12378
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/149735
+rollout_issue_url:
+milestone: '17.0'
+group: group::import and integrate
+type: wip
+default_enabled: false

locale/gitlab.pot

@@ -55815,6 +55815,15 @@ msgstr ""
 msgid "UserList|created %{timeago}"
 msgstr ""
+msgid "UserMapping|Awaiting reassignment"
+msgstr ""
+
+msgid "UserMapping|Placeholders"
+msgstr ""
+
+msgid "UserMapping|Reassigned"
+msgstr ""
+
 msgid "UserProfile|%{count} %{file}"
 msgstr ""

spec/frontend/members/components/placeholders/app_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlTabs } from '@gitlab/ui';
+
+import PlaceholdersTabApp from '~/members/components/placeholders/app.vue';
+
+describe('PlaceholdersTabApp', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(PlaceholdersTabApp, {});
+  };
+
+  const findTabs = () => wrapper.findComponent(GlTabs);
+
+  it('renders tabs', () => {
+    createComponent();
+
+    expect(findTabs().exists()).toBe(true);
+  });
+});

spec/requests/groups/group_members_controller_spec.rb

@@ -10,6 +10,20 @@
 
   let(:membershipable_path) { group_path(membershipable) }
 
+  describe 'GET /groups/*group_id/-/group_members' do
+    subject(:request) do
+      get group_group_members_path(group_id: membershipable)
+    end
+
+    it 'pushes feature flag to frontend' do
+      request
+
+      expect(response.body).to have_pushed_frontend_feature_flags(bulkImportUserMapping: true)
+      expect(response.body).to have_pushed_frontend_feature_flags(serviceAccountsCrud: true)
+      expect(response.body).to have_pushed_frontend_feature_flags(webuiMembersInheritedUsers: true)
+    end
+  end
+
   describe 'GET /groups/*group_id/-/group_members/request_access' do
     subject(:request) do
       get request_access_group_group_members_path(group_id: membershipable)