Merge branch 'led/334029-display-badge-for-project-invite-members' into 'master'

Add a badge for project invite members

See merge request gitlab-org/gitlab!66611

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

@@ -130,6 +130,12 @@ export default {
         this.$refs.cannotRemoveModal.show();
       }
     },
+    isGroupInvite(item) {
+      return item.user.membership_type === 'group_invite';
+    },
+    isProjectInvite(item) {
+      return item.user.membership_type === 'project_invite';
+    },
   },
   i18n: {
     emailNotVisibleTooltipText: s__(
@@ -199,10 +205,13 @@ 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="isGroupInvite(item)" size="sm" variant="muted">
                   {{ s__('Billing|Group invite') }}
                 </gl-badge>
+                <gl-badge v-if="isProjectInvite(item)" 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,33 @@ describe('Subscription Seats', () => {
         expect(findErrorModal().text()).toContain(CANNOT_REMOVE_BILLABLE_MEMBER_MODAL_CONTENT);
       });
     });
+
+    describe('members avatar', () => {
+      it('shows the correct avatarLinks length', () => {
+        const avatarLinks = findTable().findAllComponents(GlAvatarLink);
+        expect(avatarLinks.length).toBe(4);
+      });
+
+      it.each(['group_invite', 'project_invite'])(
+        'shows the correct badge for membership_type %s',
+        (membershipType) => {
+          const avatarLinks = findTable().findAllComponents(GlAvatarLink);
+          const badgeText = (
+            membershipType.charAt(0).toUpperCase() + membershipType.slice(1)
+          ).replace('_', ' ');
+
+          avatarLinks.wrappers.forEach((avatarLinkWrapper) => {
+            const currentMember = mockTableItems.find(
+              (item) => item.user.name === avatarLinkWrapper.attributes().alt,
+            );
+
+            if (membershipType === currentMember.user.membership_type) {
+              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 ""