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

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

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 🤖 GitLab Bot 🤖