Allow users to switch between months and update usage page sidebar designs

[gtsiolis]

Problem to solve

Following up from #11481, the sidebar in the new usage page does not support switching between other periods (months).

Proposal

Sidebar	Sidebar (Dropdown)

[laushinka]

Hope you don't mind I reordered the wording to show the main task first 🙏🏽

[gtsiolis]

Thanks, @laushinka! PERMISSION TO EDIT: ALWAYS ON 🏀

[gtsiolis]

For more clarification, the goal of the designs is to provide dropdown options only for the months that the team had active billing months.

This comes with a scalability issue as the list could grow a lot after a year or two, which can be tackled later by either introducing a scrolling area or trimming the list to the last 6 months.

However, in the future, I'd expect this to become clearer by providing a separate invoice view where billed months are listed in a better and more scalable way similar to what has been initially described as the usage page (see early designs in #10328 (comment)) and instead rely on custom date range filtering on the usage page for drilling down on usage for a specific invoice (billed month), see screenshot below.

Regarding separation in the dropdown, we could consider using the known line separator we've using in other dropdowns
or section headers, but we could skip that for now, see screenshots below.

More options on filtering	Dropdown with line separator	Dropdown with section headers

[laushinka]

Thanks, @gtsiolis! Writing down comments here after a quick brainstorm on the implementation with @easyCZ:

the goal of the designs is to provide dropdown options only for the months that the team had active billing months.

For simplicity in this skateboard, we will show a list/dropdown/buttons/something of the previous 6 months without knowing beforehand whether the team has billed sessions or not. If there is no data, then that is tackled by the empty data page.

trimming the list to the last 6 months.

👍🏼

A summary of the functionality for this skateboard:

• User is shown by default the current month.
• List/dropdown/history shows 6 months prior. This could be a separate section, or a scrolling dropdown as shown in the design above.
• We don't have to know beforehand whether there is data for the previous months. If there is no data, we show the empty usage data page.

Next issues maybe:

• Put month in the URL (shareable)

@gtsiolis Let me know if you'd like to talk further about this or if that changes your designs in any way 🙏🏽

[gtsiolis]

Fair enough, @laushinka and @easyCZ! 🤝

For simplicity in this skateboard, we will show a list/dropdown/buttons/something of the previous 6 months without knowing beforehand whether the team has billed sessions or not. If there is no data, then that is tackled by the empty data page.

This will also push for improving the empty state and the copy included there, in #11587.

Put month in the URL (shareable)

Rendering a usage view based on a URL parameter sounds great for fixed durations like Last 30 Days, etc. or custom range dates which will be needed for deep-linking from a potential invoice page in the future, but not sure if adding the month in the URL of the usage page is something we won't need to remove later. 💭

Let me know if you'd like to talk further about this or if that changes your designs in any way 🙏🏽

Let's go with the fixed 6 dropdown options, but also include a section header there to make this clearer for users in case they wonder what happened to the previous billing cycles, etc. I'd love to make this an opt in feature of the existing dropdown component if possible, but let me know if that's introducing too much complexity. Feedback is welcome!

See design specs for detailed padding, colors, font-size, and font-weight in case it helps, @laushinka!