Display Cost Factored Storage Sizes on Project Usage Quotas Page

What does this MR do and why?

It displays the cost factored storage size statistics on the project's usage quotas page.

When display_cost_factored_storage_size_on_project_pages feature flag is enabled, we fetch the cost factored storage sizes and show them to the users.

Note: I opted to have two GraphQL queries for this change and based feature flag decide which one we use.

The new query has the same structure as the original one except it aliases all costFactored* types to the original type name without costFactored prefix, this way the frontend would just works without much changes or additional complexity.

It might not be recommended to use this method, but I think it's justified in this case since the costFactored* types are EE only, and having them in a conditional @include will break the FOSS version.

MR	Description	Status
!136867 (merged)	Duplicate project_storage query to EE
!134758 (merged)	Add cost_factored query to both CE and EE and load it behind FF
Upcoming	Clean-up feature flag, and move cost_factored properties to the EE version of project_storage query

Screenshots or screen recordings

Before	After

How to set up and validate locally

1. In bin/rails console run Feature.enable(:display_cost_factored_storage_size_on_project_pages)
2. As root, navigate to /admin/application_settings/namespace_storage and set the cost factor to something less than 1 (e.g. 0.3) and save
3. In local gitlab, fork a public project to a private fork
4. Navigate to the forked project > Settings > Usage Quotas
5. Observe the storage size displayed is less than original repo's storage
6. Try disable the feature flag in step 1 and refresh the page, the storage size in the forked project should match the original repo

• To run the frontend tests, make sure to generate the fixtures first bin/rspec ee/spec/frontend/fixtures/projects.rb
• In case the storage didn't get updated, click the "Recalculate repository usage" button on the project's usage quotas page

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #416097

app/assets/javascripts/usage_quotas/storage/components/project_storage_app.vue

@@ -4,6 +4,7 @@ import { sprintf } from '~/locale';
 import { updateRepositorySize } from '~/api/projects_api';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import SectionedPercentageBar from '~/usage_quotas/components/sectioned_percentage_bar.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import {
   ERROR_MESSAGE,
   LEARN_MORE_LABEL,
@@ -32,6 +33,7 @@ export default {
     ProjectStorageDetail,
     SectionedPercentageBar,
   },
+  mixins: [glFeatureFlagsMixin()],
   inject: ['projectPath'],
   apollo: {
     project: {
@@ -150,6 +152,9 @@ export default {
         });
     },
   },
+  created() {
+    console.log(this.glFeatures.displayCostFactoredStorageSizeOnProjectPages);
+  },
   methods: {
     clearError() {
       this.error = '';