Add license counts to licenses tab in Pipeline Single view as async network request

As part of the fix for Rack::Timeout::RequestTimeoutException on parti... (#435272 - closed) • Igor Frenkel, Fernando Cardenas • 16.9 we removed the initial license count. This issue is to restore the counts as a async network request. Either by REST or graphQl, as opposed to loading it in the HAMl template.

Proposal (need UX design)

  • Add a tab count loading state to the tab after initial page load. Tab is not actively selected.

UI Regession as a result of the #435272 (closed) fix

Initial page Load (License Counts change)

Before After
Screenshot_2024-01-31_at_11.42.15_PM Screenshot_2024-01-31_at_11.41.25_PM

When clicking the license tab (License Counts no change)

Before After
Screenshot_2024-01-31_at_11.41.31_PM Screenshot_2024-01-31_at_11.41.31_PM

Implementation Plan

  • Add async network request after the pipeline tabs Vue app is initialized
  • Add loading state indicator to the licenses tab
  • When async network request completes, show count on licenses tab.
Edited by Fernando Cardenas