Expand rows in GitLab.com billing seat history table

Overview

In https://gitlab.com/gitlab-org/gitlab-ee/issues/7773, we add the seat history table as part of the GitLab.com billing area redesign work in https://gitlab.com/gitlab-org/gitlab-ee/issues/6898.

We should include an Expand button on each row to allow users to get user-by-user detail on the additional users that resulted in the overage.

Proposal

Each row will have an Expand button, which will unfold a nested table detailing which users created the need for new seats.

expanded-table

The columns in the nested table will be:

  • User: Profile picture, user name and @username

  • Joined on: Date on which the user became a member of the group. This attribute will make it possible to determine when the seat was created.

  • Last activity: The last time the user had any activity in the group, displayed in timeago format. This will be helpful to determine which users can be removed from the group

  • Member of: Members of subgroups count towards billing, so this is an important attribute to help determine where seats are being used. Since we do not retain information on users once they leave a group, we cannot provide information on which users generated some seats. These will be displayed in a unique row using the following string:

+X user/users who has/have left the group When there is a large number of seats, the table will serve them in batches of 10 rows. At the bottom of the table there will be a row reading 'Load more users', which will load 10 more rows on click.