Skip to content

Prepare usage quotas layout app for storage tab

What does this MR do and why?

In order to achieve the goal in #440195 (closed) we need to prepare the Usage Quotas Layout App to render tabs programmatically/dynamically.

In this MR we create a tabs prop that will have an array of objects that we will use to dynamically create tabs, similarly to what we have in the Incident Settings tabs.

We also remove the placeholder we previously had for the Layout Component.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

This piece under usage_quotas_for_all_editions Feature Flag.

FF on Before FF on After FF off
uq-storage-tab-ff-on_before 143633-ff-on-after 143633-ff-off

How to set up and validate locally

  1. Navigate to a Group Usage Quotas: https://gdk.test:3443/groups/<group-id>/-/usage_quotas
  2. Turn on and off the FF usage_quotas_for_all_editions
  3. Compare with the screenshots
  4. If you want to play with tabs prop, either check the work in !143637 (merged) or change the value of usageQuotasTabsMetadata to the following:
    
       export const usageQuotasTabsMetadata = [
         {
           title: 'Mock Tab',
           component: 'GlAlert',
         },
       ];
    
    
Edited by Sheldon Led

Merge request reports