Merge branch '334050-hide-details-for-invited-members-in-seats-usage' into 'master'

Hide details for invited members in seats usage

See merge request gitlab-org/gitlab!74224

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

@@ -112,6 +112,9 @@ export default {
     isProjectInvite(item) {
       return item.user.membership_type === 'project_invite';
     },
+    shouldShowDetails(item) {
+      return !this.isGroupInvite(item) && !this.isProjectInvite(item);
+    },
   },
   i18n: {
     emailNotVisibleTooltipText: s__(
@@ -172,8 +175,9 @@ export default {
       :empty-text="emptyText"
     >
       <template #cell(user)="{ item, toggleDetails, detailsShowing }">
-        <div class="gl-display-flex">
+        <div class="gl-display-flex" :data-testid="`seat-cell-${item.user.id}`">
           <gl-button
+            v-if="shouldShowDetails(item)"
             variant="link"
             class="gl-mr-2"
             :aria-label="s__('Billing|Toggle seat details')"

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

@@ -212,6 +212,33 @@ describe('Subscription Seats', () => {
         },
       );
     });
+
+    describe('members details', () => {
+      it.each`
+        membershipType      | shouldShowDetails
+        ${'project_invite'} | ${false}
+        ${'group_invite'}   | ${false}
+        ${'project_member'} | ${true}
+        ${'group_member'}   | ${true}
+      `(
+        'when membershipType is $membershipType, shouldShowDetails should be $shouldShowDetails',
+        ({ membershipType, shouldShowDetails }) => {
+          const seatCells = findTable().findAll('[data-testid*="seat-cell-"]');
+
+          seatCells.wrappers.forEach((seatCellWrapper) => {
+            const currentMember = mockTableItems.find(
+              (item) => seatCellWrapper.attributes('data-testid') === `seat-cell-${item.user.id}`,
+            );
+
+            if (membershipType === currentMember.user.membership_type) {
+              expect(
+                seatCellWrapper.find('[data-testid="toggle-seat-usage-details"]').exists(),
+              ).toBe(shouldShowDetails);
+            }
+          });
+        },
+      );
+    });
   });
 
   describe('is loading', () => {

ee/spec/frontend/seat_usage/mock_data.js

@@ -25,7 +25,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',
+      membership_type: 'project_member',
       removable: true,
     },
     {
@@ -92,7 +92,7 @@ export const mockTableItems = [
       username: '@lester.orn',
       web_url: 'path/to/agustin_walker',
       last_activity_on: '2020-03-01',
-      membership_type: 'group_member',
+      membership_type: 'project_member',
       removable: true,
     },
   },