Skip to content

Extract subscription users table into its own component

What does this MR do and why?

Extracts subscription users table on Usage quotas > Seats page into its own component to reduce complexity in subscription_seats.vue component especially when we add more functionality to the users table. There is no change to the existing logic and is pretty much about moving the table out of subscription_seats.vue into a new component, similar changes in test file too.

Related to #411949

Screenshots or screen recordings

No changes to UI, before and after should be identical

Scenario Before After
Free plan
ScreenshotScreenshot_2023-07-28_at_2.40.02_PM Screenshot_2023-07-28_at_2.39.56_PM
ScreenshotScreenshot_2023-07-28_at_3.36.02_PMScreenshot_2023-07-28_at_3.36.13_PM
Premium plan (usage quota page includes guest members)
ScreenshotScreenshot_2023-07-28_at_2.40.13_PM Screenshot_2023-07-28_at_2.40.07_PM
ScreenshotScreenshot_2023-07-28_at_3.36.26_PMScreenshot_2023-07-28_at_3.36.37_PM
Ultimate plan (usage quota page does not include guest members)
ScreenshotScreenshot_2023-07-28_at_2.40.22_PMScreenshot_2023-07-28_at_2.40.18_PM
ScreenshotScreenshot_2023-07-28_at_3.36.45_PMScreenshot_2023-07-28_at_3.36.57_PM
Sort functionality
ScreenshotSort
ScreenshotSort
User details
ScreenshotUser_details
Screenshotuser_details
Export
ScreenshotExport
ScreenshotExport
Filter - no users to display
ScreenshotNo_users_to_display
Screenshotno_users
Filter - minimum 3 characters required
ScreenshotMinimum_3_chars
Screenshot3_char
Remove user
ScreenshotRemove_user
ScreenshotRemove_user
Cannot remove
ScreenshotCannot_remove
ScreenshotScreenshot_2023-07-28_at_3.38.34_PM

How to set up and validate locally

  1. Customers Dot needs to be setup in order to view the billing page for a group
  2. Start GDK in SaaS mode GITLAB_SIMULATE_SAAS=1 gdk start
  3. Create a Group
  4. Buy a Subscription for your group from Settings > Billing
  5. Visit /groups/<your-namespace-name>/-/usage_quotas#seats-quota-tab

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Vamsi Vempati

Merge request reports