Use mapping FE - Add tab counts for "Awaiting reassignment" / "Reassigned" tabs
Once !158468 (merged) is merged, the frontend can use the data passed via the helper to render the proper tab counts in the badges for the 2 tabs.
Here is a simple diff that implements this:
diff --git a/app/assets/javascripts/members/components/placeholders/app.vue b/app/assets/javascripts/members/components/placeholders/app.vue
index 0ab075587ca5..3fbe205b9136 100644
--- a/app/assets/javascripts/members/components/placeholders/app.vue
+++ b/app/assets/javascripts/members/components/placeholders/app.vue
@@ -1,4 +1,6 @@
<script>
+// eslint-disable-next-line no-restricted-imports
+import { mapState } from 'vuex';
import { GlBadge, GlTab, GlTabs } from '@gitlab/ui';
import { createAlert } from '~/alert';
import { s__ } from '~/locale';
@@ -50,9 +52,12 @@ export default {
},
computed: {
- tabCount() {
- // WIP: https://gitlab.com/groups/gitlab-org/-/epics/12378
- return 0;
+ ...mapState('placeholder', ['pagination']),
+ unassignedtabCount() {
+ return this.pagination.awaitingReassignmentItems || 0;
+ },
+ assignedtabCount() {
+ return this.pagination.reassignedItems || 0;
},
isLoading() {
return Boolean(this.$apollo.queries.sourceUsers.loading);
@@ -88,7 +93,7 @@ export default {
<gl-tab>
<template #title>
<span>{{ s__('UserMapping|Awaiting reassignment') }}</span>
- <gl-badge class="gl-tab-counter-badge">{{ tabCount }}</gl-badge>
+ <gl-badge class="gl-tab-counter-badge">{{ unassignedtabCount }}</gl-badge>
</template>
<placeholders-table
@@ -104,7 +109,7 @@ export default {
<gl-tab>
<template #title>
<span>{{ s__('UserMapping|Reassigned') }}</span>
- <gl-badge class="gl-tab-counter-badge">{{ tabCount }}</gl-badge>
+ <gl-badge class="gl-tab-counter-badge">{{ assignedtabCount }}</gl-badge>
</template>
<placeholders-table
Note that we should consider what happens when users perform the actions Reassign / Keep as placeholder. Should we update the tab count or not (either manually on the frontend or via extra data sent from the backend).
Edited by Justin Ho Tuan Duong