Skip to content

Show code suggestions add-on details in users list

Vamsi Vempati requested to merge 411949-show-addon-info-in-users-list into master

What does this MR do and why?

Show code suggestions add-on details in users list on usage quotas page

  • Create a new component code_suggestions_addon_assignment.vue
  • Read-only view of current addon assignment to begin with
  • Only shows code suggestions add-on field when applicable
  • Added tests for logic around visibility of new field
  • Added tests for new component

When enable_hamilton_in_usage_quotas_ui feature flag is enabled, currently all toggles are displayed in OFF state while API changes are being made.

Designs: https://gitlab.com/gitlab-org/fulfillment-meta/-/issues/1318/designs/Usage_Quotas__Design_Step_1_.png

Related to #411949

Screenshots or screen recordings

With enable_hamilton_in_usage_quotas_ui enabled

Scenario Screenshot
Paid subscription and add-on purchase exists (Ultimate or Premium)
ScreenshotScreenshot_2023-07-31_at_12.13.56_PM
With dummy data for enabled - on and off and disabled states
ScreenshotScreenshot_2023-07-31_at_6.46.38_PM
Code suggestions add-on unavailable tooltip
ScreenshotScreenshot_2023-07-31_at_6.46.17_PM
Error when loading Code Suggestions add-on details
ScreenshotScreenshot_2023-08-01_at_12.51.18_PM
Paid subscription exists but no add-on purchase exists
ScreenshotScreenshot_2023-07-31_at_12.11.24_PM
No paid subscription exists
ScreenshotScreenshot_2023-08-01_at_12.33.21_PM

With enable_hamilton_in_usage_quotas_ui disabled

Scenario Screenshot
Paid subscription exists
ScreenshotScreenshot_2023-08-01_at_12.38.54_PM
No paid subscription exists
ScreenshotScreenshot_2023-08-01_at_12.38.49_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. Enable enable_hamilton_in_usage_quotas_ui FF (globally, or for your group)
  4. Create a Group
  5. Buy a Subscription for your group from Settings > Billing
  6. Visit /groups/<your-namespace-name>/-/usage_quotas#seats-quota-tab

Dummy data to show add-on details

Add the below snippet here. Note that the number of users in the user list should at least be the number of items in the below dummy snippet (3). You can adjust the dummy snippet as you need.

    state.members[0].add_ons = {
      assigned: [{ name: 'CODE_SUGGESTIONS' }],
      assignable: [{ name: 'CODE_SUGGESTIONS' }],
    };
    state.members[1].add_ons = { assigned: [], assignable: [{ name: 'CODE_SUGGESTIONS' }] };
    state.members[2].add_ons = { assigned: [], assignable: [] };

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