Add last activity time column to seat usage table

Add last activity time column to seat usage table

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

@@ -20,6 +20,7 @@ import {
   REMOVE_MEMBER_MODAL_ID,
 } from 'ee/billings/seat_usage/constants';
 import { s__ } from '~/locale';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import RemoveMemberModal from './remove_member_modal.vue';
 
 export default {
@@ -37,6 +38,7 @@ export default {
     GlSearchBoxByType,
     GlTable,
     RemoveMemberModal,
+    TimeAgoTooltip,
   },
   data() {
     return {
@@ -151,7 +153,6 @@ export default {
       :show-empty="true"
       data-testid="table"
       :empty-text="emptyText"
-      thead-class="gl-display-none"
     >
       <template #cell(user)="data">
         <div class="gl-display-flex">
@@ -180,6 +181,17 @@ export default {
         </div>
       </template>
 
+      <template #cell(lastActivityTime)="data">
+        <time-ago-tooltip
+          v-if="data.item.user.last_activity_on"
+          :time="data.item.user.last_activity_on"
+          tooltip-placement="bottom"
+        />
+        <span v-else>
+          {{ __('Never') }}
+        </span>
+      </template>
+
       <template #cell(actions)="data">
         <gl-dropdown icon="ellipsis_h" right data-testid="user-actions">
           <gl-dropdown-item

ee/app/assets/javascripts/billings/seat_usage/constants.js

@@ -15,6 +15,11 @@ export const FIELDS = [
     label: __('Email'),
     thClass: thWidthClass(40),
   },
+  {
+    key: 'lastActivityTime',
+    label: __('Last activity'),
+    thClass: thWidthClass(40),
+  },
   {
     key: 'actions',
     label: '',

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 }) => {
+    return state.members.map(
+      ({ id, name, username, avatar_url, web_url, email, last_activity_on }) => {
         const formattedUserName = `@${username}`;
 
-      return { user: { id, name, username: formattedUserName, avatar_url, web_url }, email };
-    });
+        return {
+          user: {
+            id,
+            name,
+            username: formattedUserName,
+            avatar_url,
+            web_url,
+            last_activity_on,
+          },
+          email,
+        };
+      },
+    );
   }
   return [];
 };

ee/changelogs/unreleased/vs-add-last-activity-column.yml

+---
+title: Add last activity time column to seat usage table
+merge_request: 55321
+author:
+type: added

ee/spec/features/groups/billing/seat_usage_spec.rb

@@ -27,7 +27,7 @@ RSpec.describe 'Groups > Billing > Seat Usage', :js do
   context 'seat usage table' do
     it 'displays correct number of users' do
       within '[data-testid="table"]' do
-        expect(all('tr').count).to eq(3)
+        expect(all('tbody tr').count).to eq(3)
       end
     end
   end
@@ -91,7 +91,7 @@ RSpec.describe 'Groups > Billing > Seat Usage', :js do
         wait_for_all_requests
 
         within '[data-testid="table"]' do
-          expect(all('tr').count).to eq(2)
+          expect(all('tbody tr').count).to eq(2)
         end
 
         expect(page.find('.flash-container')).to have_content('User was successfully removed')
@@ -100,7 +100,7 @@ RSpec.describe 'Groups > Billing > Seat Usage', :js do
       context 'removing the user from a sub-group' do
         it 'updates the seat table of the parent group' do
           within '[data-testid="table"]' do
-            expect(all('tr').count).to eq(3)
+            expect(all('tbody tr').count).to eq(3)
           end
 
           visit group_group_members_path(sub_group)
@@ -118,7 +118,7 @@ RSpec.describe 'Groups > Billing > Seat Usage', :js do
           wait_for_all_requests
 
           within '[data-testid="table"]' do
-            expect(all('tr').count).to eq(2)
+            expect(all('tbody tr').count).to eq(2)
           end
         end
       end

ee/spec/frontend/billings/mock_data.js

@@ -74,6 +74,7 @@ export const mockDataSeats = {
       avatar_url: 'path/to/img_administrator',
       web_url: 'path/to/administrator',
       email: 'administrator@email.com',
+      last_activity_on: '2020-03-01',
     },
     {
       id: 3,
@@ -82,6 +83,7 @@ export const mockDataSeats = {
       avatar_url: 'path/to/img_agustin_walker',
       web_url: 'path/to/agustin_walker',
       email: 'agustin_walker@email.com',
+      last_activity_on: '2020-03-01',
     },
     {
       id: 4,
@@ -89,6 +91,7 @@ export const mockDataSeats = {
       username: 'era',
       avatar_url: 'path/to/img_joella_miller',
       web_url: 'path/to/joella_miller',
+      last_activity_on: null,
       email: null,
     },
   ],
@@ -108,6 +111,7 @@ export const mockTableItems = [
       name: 'Administrator',
       username: '@root',
       web_url: 'path/to/administrator',
+      last_activity_on: '2020-03-01',
     },
   },
   {
@@ -118,6 +122,7 @@ export const mockTableItems = [
       name: 'Agustin Walker',
       username: '@lester.orn',
       web_url: 'path/to/agustin_walker',
+      last_activity_on: '2020-03-01',
     },
   },
   {
@@ -128,6 +133,7 @@ export const mockTableItems = [
       name: 'Joella Miller',
       username: '@era',
       web_url: 'path/to/joella_miller',
+      last_activity_on: null,
     },
   },
 ];