Add a new badge for billable membership types

ee/app/assets/javascripts/billings/seat_usage/components/subscription_seats.vue

@@ -183,7 +183,13 @@ export default {
               :size="$options.avatarSize"
               :label="item.user.name"
               :sub-label="item.user.username"
-            />
+            >
+              <template v-if="item.user.membership_type === 'group_invite'" #meta>
+                <gl-badge size="sm" variant="muted">
+                  {{ s__('Billing|Group invite') }}
+                </gl-badge>
+              </template>
+            </gl-avatar-labeled>
           </gl-avatar-link>
         </div>
       </template>

ee/app/assets/javascripts/billings/seat_usage/store/getters.js

 export const tableItems = (state) => {
   if (state.members.length) {
     return state.members.map(
-      ({ id, name, username, avatar_url, web_url, email, last_activity_on }) => {
+      ({ id, name, username, avatar_url, web_url, email, last_activity_on, membership_type }) => {
         const formattedUserName = `@${username}`;
 
         return {
@@ -12,6 +12,7 @@ export const tableItems = (state) => {
             avatar_url,
             web_url,
             last_activity_on,
+            membership_type,
           },
           email,
         };

ee/changelogs/unreleased/vij-add-membership-type-badges.yml

+---
+title: Add a new badge for billable membership types
+merge_request: 61366
+author:
+type: changed

ee/spec/frontend/billings/mock_data.js

@@ -75,6 +75,7 @@ export const mockDataSeats = {
       web_url: 'path/to/administrator',
       email: 'administrator@email.com',
       last_activity_on: '2020-03-01',
+      membership_type: 'group_member',
     },
     {
       id: 3,
@@ -84,6 +85,7 @@ export const mockDataSeats = {
       web_url: 'path/to/agustin_walker',
       email: 'agustin_walker@email.com',
       last_activity_on: '2020-03-01',
+      membership_type: 'group_member',
     },
     {
       id: 4,
@@ -93,6 +95,7 @@ export const mockDataSeats = {
       web_url: 'path/to/joella_miller',
       last_activity_on: null,
       email: null,
+      membership_type: 'group_invite',
     },
   ],
   headers: {
@@ -123,6 +126,7 @@ export const mockTableItems = [
       username: '@root',
       web_url: 'path/to/administrator',
       last_activity_on: '2020-03-01',
+      membership_type: 'group_member',
     },
   },
   {
@@ -134,6 +138,7 @@ export const mockTableItems = [
       username: '@lester.orn',
       web_url: 'path/to/agustin_walker',
       last_activity_on: '2020-03-01',
+      membership_type: 'group_member',
     },
   },
   {
@@ -145,6 +150,7 @@ export const mockTableItems = [
       username: '@era',
       web_url: 'path/to/joella_miller',
       last_activity_on: null,
+      membership_type: 'group_invite',
     },
   },
 ];

ee/spec/frontend/billings/seat_usage/components/__snapshots__/subscription_seats_spec.js.snap

@@ -42,7 +42,9 @@ Array [
       "avatarLabeled": Object {
         "size": "32",
         "src": "path/to/img_joella_miller",
-        "text": "Joella Miller  @era",
+        "text": "Joella Miller  
+                Group invite
+               @era",
       },
       "avatarLink": Object {
         "alt": "Joella Miller",

ee/spec/frontend/billings/seat_usage/store/getters_spec.js

@@ -34,7 +34,7 @@ describe('Seat usage table getters', () => {
     });
 
     describe('when data is available', () => {
-      it('returns user details statep', () => {
+      it('returns user details state', () => {
         state.userDetails[0] = {
           isLoading: false,
           items: mockMemberDetails,

locale/gitlab.pot

@@ -5085,6 +5085,9 @@ msgstr ""
 msgid "Billing|Group"
 msgstr ""
 
+msgid "Billing|Group invite"
+msgstr ""
+
 msgid "Billing|No users to display."
 msgstr ""