Add a badge for project invite members

Addition of a badge to indicate when a member belongs to
an external group that is shared with a project. Those billable members
cannot be removed directly.

Changelog: added
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/66611
EE: true

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

@@ -199,10 +199,21 @@ export default {
               :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">
+              <template #meta>
+                <gl-badge
+                  v-if="item.user.membership_type === 'group_invite'"
+                  size="sm"
+                  variant="muted"
+                >
                   {{ s__('Billing|Group invite') }}
                 </gl-badge>
+                <gl-badge
+                  v-if="item.user.membership_type === 'project_invite'"
+                  size="sm"
+                  variant="muted"
+                >
+                  {{ s__('Billing|Project invite') }}
+                </gl-badge>
               </template>
             </gl-avatar-labeled>
           </gl-avatar-link>

ee/spec/frontend/billings/mock_data.js

@@ -100,6 +100,17 @@ export const mockDataSeats = {
       membership_type: 'group_invite',
       removable: false,
     },
+    {
+      id: 5,
+      name: 'John Doe',
+      username: 'jdoe',
+      avatar_url: 'path/to/img_john_doe',
+      web_url: 'path/to/john_doe',
+      last_activity_on: null,
+      email: 'jdoe@email.com',
+      membership_type: 'project_invite',
+      removable: false,
+    },
   ],
   headers: {
     [HEADER_TOTAL_ENTRIES]: '3',
@@ -159,4 +170,17 @@ export const mockTableItems = [
       removable: false,
     },
   },
+  {
+    email: 'jdoe@email.com',
+    user: {
+      id: 5,
+      avatar_url: 'path/to/img_john_doe',
+      name: 'John Doe',
+      username: '@jdoe',
+      web_url: 'path/to/john_doe',
+      last_activity_on: null,
+      membership_type: 'project_invite',
+      removable: false,
+    },
+  },
 ];

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

@@ -10,7 +10,7 @@ Array [
       "avatarLabeled": Object {
         "size": "32",
         "src": "path/to/img_administrator",
-        "text": "Administrator  @root",
+        "text": "Administrator   @root",
       },
       "avatarLink": Object {
         "alt": "Administrator",
@@ -26,7 +26,7 @@ Array [
       "avatarLabeled": Object {
         "size": "32",
         "src": "path/to/img_agustin_walker",
-        "text": "Agustin Walker  @lester.orn",
+        "text": "Agustin Walker   @lester.orn",
       },
       "avatarLink": Object {
         "alt": "Agustin Walker",
@@ -44,7 +44,7 @@ Array [
         "src": "path/to/img_joella_miller",
         "text": "Joella Miller  
                 Group invite
-               @era",
+                @era",
       },
       "avatarLink": Object {
         "alt": "Joella Miller",
@@ -52,5 +52,23 @@ Array [
       },
     },
   },
+  Object {
+    "dropdownExists": true,
+    "email": "jdoe@email.com",
+    "tooltip": undefined,
+    "user": Object {
+      "avatarLabeled": Object {
+        "size": "32",
+        "src": "path/to/img_john_doe",
+        "text": "John Doe   
+                Project invite
+               @jdoe",
+      },
+      "avatarLink": Object {
+        "alt": "John Doe",
+        "href": "path/to/john_doe",
+      },
+    },
+  },
 ]
 `;

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

@@ -147,7 +147,7 @@ describe('Subscription Seats', () => {
 
     describe('table content', () => {
       it('renders the correct data', () => {
-        const serializedTable = findSerializedTable(wrapper.find(GlTable));
+        const serializedTable = findSerializedTable(findTable());
 
         expect(serializedTable).toMatchSnapshot();
       });
@@ -175,6 +175,29 @@ describe('Subscription Seats', () => {
         expect(findErrorModal().text()).toContain(CANNOT_REMOVE_BILLABLE_MEMBER_MODAL_CONTENT);
       });
     });
+
+    describe('member badges', () => {
+      it('shows the correct badge based on membership_type', () => {
+        const avatarLinks = findTable().findAllComponents(GlAvatarLink);
+
+        expect(avatarLinks.length).toBe(4);
+
+        avatarLinks.wrappers.forEach((avatarLinkWrapper) => {
+          const currentMember = mockTableItems.find(
+            (item) => item.user.name === avatarLinkWrapper.attributes().alt,
+          );
+          const currentMembershipType = currentMember.user.membership_type;
+          const membershipTypesWithBadge = ['group_invite', 'project_invite'];
+
+          if (membershipTypesWithBadge.includes(currentMembershipType)) {
+            const badgeText = (
+              currentMembershipType.charAt(0).toUpperCase() + currentMembershipType.slice(1)
+            ).replace('_', ' ');
+            expect(avatarLinkWrapper.find(GlBadge).text()).toBe(badgeText);
+          }
+        });
+      });
+    });
   });
 
   describe('pagination', () => {

locale/gitlab.pot

@@ -5207,6 +5207,9 @@ msgstr ""
 msgid "Billing|Private"
 msgstr ""
 
+msgid "Billing|Project invite"
+msgstr ""
+
 msgid "Billing|Remove user %{username} from your subscription"
 msgstr ""