## Problem - We lack consistency between our Usage Quotas tabs, which results in customer's difficulty predicting and managing costs associated with consumables and increased development times due to lack of cohesion. ## Proposed Solution - **Overview**: The usage quotas page needs to be cleaned up visually to create more consistency between the three tabs (vertical vs horizontal layouts, font sizes, how numbers are displayed, graph styling, etc.). Further details https://gitlab.com/gitlab-org/gitlab/-/issues/499354#what-is-the-solution-concept - **Expected customer impact**: In addition to reduce the mental load of users in understanding and reading these pages, this standardization should create an easier/more scalable technical implementation for future changes. Ideally, we will create a FE template for the page which can be used when/if GitLab introduces future consumables. ## E2E Tests There are several [CustomersDot E2E tests](https://gitlab.com/gitlab-org/customers-gitlab-com/-/tree/main/qa?ref_type=heads) which interact with the Usage Quotas page. When making updates to the UI, please reference the following page classes and methods in the CustomersDot E2E test framework to see if the change could have an impact: Page Classes (please pay special attention to the element method declarations and their selectors, [example](https://gitlab.com/gitlab-org/customers-gitlab-com/blob/main/qa/vendor/gitlab/page/pipelines_quota_page.rb#L8)) - [UsageQuotaPage](https://gitlab.com/gitlab-org/customers-gitlab-com/-/blob/main/qa/vendor/gitlab/page/usage_quota_page.rb) (base page used by individual tab page classes) - [PipelinesQuotaPage](https://gitlab.com/gitlab-org/customers-gitlab-com/blob/main/qa/vendor/gitlab/page/pipelines_quota_page.rb) - [StorageQuotaPage](https://gitlab.com/gitlab-org/customers-gitlab-com/-/blob/main/qa/vendor/gitlab/page/storage_quota_page.rb) - [DuoUsagePage](https://gitlab.com/gitlab-org/customers-gitlab-com/-/blob/main/qa/vendor/gitlab/page/duo_usage_page.rb) - [Duo](https://gitlab.com/gitlab-org/customers-gitlab-com/-/blob/main/qa/vendor/gitlab/page/component/duo.rb) component We do not yet have a way to run CustomersDot E2E tests for GitLab MRs in CI before merging. To run the CustomersDot E2E tests locally, make sure your GDK has the latest changes you are working on and follow the instructions in the [documentation](https://gitlab.com/gitlab-org/customers-gitlab-com/-/blob/main/qa/doc/running_tests.md) to run the tests. If you see that your UI change will require an E2E test change, please reach out to `@vburton`, `@richard.chong` or `@jroodnick` for guidance before merging so we can collaborate on updating the E2E tests and avoid stale test failures.