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 |
|
Add placeholder users table |
|
Add placeholder actions with users select to table |
|
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 |
---|---|
How to set up and validate locally
- 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);
},
};
- Go to Group > Members and select the Placeholders tab. For example,
http://127.0.0.1:3000/groups/gitlab-org/-/group_members?tab=placeholders
. - 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)
Edited by Justin Ho Tuan Duong