Skip to content

User mapping - Add placeholder users table

What does this MR do and why?

Add empty table with status badge and tooltip. This change is behind the bulk_import_user_mapping feature flag.

This MR is not the full UI and there will be follow-ups to add more elements as per the design in the UX issue #451028 (closed).

Here is the list of MRs around the feature:

MR Status
Add basic PlaceholdersTabApp and feature flag Merged
Add placeholder users 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

Before After
User_mapping_placeholders_table_before User_mapping_placeholders_table_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 613cf4254557..f0400f5caad3 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';
 
@@ -20,10 +21,20 @@ export default {
 
   methods: {
     tabCount() {
-      return 0;
+      return 1;
     },
     itemsForTab() {
-      return [];
+      return [
+        {
+          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',
+        },
+      ];
     },
   },
 };

Related to #465226 (closed)

Merge request reports