Integrate StorageInlineAlert with graphql response

The endpoint now responds with actual data.
Let us use this data.

ee/app/assets/javascripts/storage_counter/components/app.vue

@@ -4,6 +4,7 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import ProjectsTable from './projects_table.vue';
 import UsageGraph from './usage_graph.vue';
 import UsageStatistics from './usage_statistics.vue';
+import StorageInlineAlert from './storage_inline_alert.vue';
 import query from '../queries/storage.query.graphql';
 import TemporaryStorageIncreaseModal from './temporary_storage_increase_modal.vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
@@ -17,6 +18,7 @@ export default {
     GlButton,
     GlSprintf,
     GlIcon,
+    StorageInlineAlert,
     UsageGraph,
     UsageStatistics,
     TemporaryStorageIncreaseModal,
@@ -72,6 +74,7 @@ export default {
     isAdditionalStorageFlagEnabled() {
       return this.glFeatures.additionalRepoStorageByNamespace;
     },
+
     formattedNamespaceLimit() {
       return formatUsageSize(this.namespace.limit);
     },
@@ -86,12 +89,25 @@ export default {
         additionalPurchasedStorageSize: this.namespace.additionalPurchasedStorageSize,
       };
     },
+    shouldShowStorageInlineAlert() {
+      return this.isAdditionalStorageFlagEnabled && !this.$apollo.queries.namespace.loading;
+    },
   },
+
   modalId: 'temporary-increase-storage-modal',
 };
 </script>
 <template>
   <div>
+    <storage-inline-alert
+      v-if="shouldShowStorageInlineAlert"
+      :contains-locked-projects="namespace.containsLockedProjects"
+      :repository-size-excess-project-count="namespace.repositorySizeExcessProjectCount"
+      :total-repository-size-excess="namespace.totalRepositorySizeExcess"
+      :total-repository-size="namespace.totalRepositorySize"
+      :additional-purchased-storage-size="namespace.additionalPurchasedStorageSize"
+      :actual-repository-size-limit="namespace.actualRepositorySizeLimit"
+    />
     <div v-if="isAdditionalStorageFlagEnabled && storageStatistics">
       <usage-statistics :root-storage-statistics="storageStatistics" />
     </div>

ee/app/assets/javascripts/storage_counter/components/storage_inline_alert.vue

 <script>
 import { GlAlert } from '@gitlab/ui';
 import { n__, __ } from '~/locale';
-import { getFormatter, SUPPORTED_FORMATS } from '~/lib/utils/unit_format';
-import { usageRatioToThresholdLevel } from '../utils';
+import { formatUsageSize, usageRatioToThresholdLevel } from '../utils';
 import { ALERT_THRESHOLD, ERROR_THRESHOLD, WARNING_THRESHOLD } from '../constants';
 
 export default {
@@ -30,7 +29,7 @@ export default {
       type: Number,
       required: true,
     },
-    repositoryFreeSizeLimit: {
+    actualRepositorySizeLimit: {
       type: Number,
       required: true,
     },
@@ -86,14 +85,13 @@ export default {
       return this.additionalPurchasedStorageSize > 0;
     },
     formatSize(size) {
-      const formatter = getFormatter(SUPPORTED_FORMATS.decimalBytes);
-      return formatter(size);
+      return formatUsageSize(size);
     },
     hasPurchasedStorageText() {
       if (this.thresholdLevel === ERROR_THRESHOLD) {
         return __(
           `You have consumed all of your additional storage, please purchase more to unlock your projects over the free ${this.formatSize(
-            this.repositoryFreeSizeLimit,
+            this.actualRepositorySizeLimit,
           )} limit`,
         );
       } else if (
@@ -106,7 +104,7 @@ export default {
       }
       return __(
         `When you purchase additional storage, we automatically unlock projects that were locked when you reached the ${this.formatSize(
-          this.repositoryFreeSizeLimit,
+          this.actualRepositorySizeLimit,
         )} limit.`,
       );
     },
@@ -114,7 +112,7 @@ export default {
       if (this.thresholdLevel === ERROR_THRESHOLD) {
         return __(
           `You have reached the free storage limit of ${this.formatSize(
-            this.repositoryFreeSizeLimit,
+            this.actualRepositorySizeLimit,
           )} on ${this.projectsLockedText}. To unlock them, please purchase additional storage.`,
         );
       }

ee/spec/frontend/storage_counter/components/app_spec.js

 import { mount } from '@vue/test-utils';
 import StorageApp from 'ee/storage_counter/components/app.vue';
 import Project from 'ee/storage_counter/components/project.vue';
+import StorageInlineAlert from 'ee/storage_counter/components/storage_inline_alert.vue';
 import UsageGraph from 'ee/storage_counter/components/usage_graph.vue';
 import UsageStatistics from 'ee/storage_counter/components/usage_statistics.vue';
 import TemporaryStorageIncreaseModal from 'ee/storage_counter/components/temporary_storage_increase_modal.vue';
@@ -19,11 +20,13 @@ describe('Storage counter app', () => {
     wrapper.find("[data-testid='temporary-storage-increase-button']");
   const findUsageGraph = () => wrapper.find(UsageGraph);
   const findUsageStatistics = () => wrapper.find(UsageStatistics);
+  const findStorageInlineAlert = () => wrapper.find(StorageInlineAlert);
 
   const createComponent = ({
     props = {},
     loading = false,
     additionalRepoStorageByNamespace = false,
+    namespace = {},
   } = {}) => {
     const $apollo = {
       queries: {
@@ -44,6 +47,11 @@ describe('Storage counter app', () => {
           additionalRepoStorageByNamespace,
         },
       },
+      data() {
+        return {
+          namespace,
+        };
+      },
     });
   };
 
@@ -109,14 +117,12 @@ describe('Storage counter app', () => {
 
       expect(findUsageGraph().exists()).toBe(true);
       expect(findUsageStatistics().exists()).toBe(false);
+      expect(findStorageInlineAlert().exists()).toBe(false);
     });
 
     it('usage_statistics component is rendered when flag is true', async () => {
       createComponent({
         additionalRepoStorageByNamespace: true,
-      });
-
-      wrapper.setData({
         namespace: withRootStorageStatistics,
       });
 
@@ -124,6 +130,7 @@ describe('Storage counter app', () => {
 
       expect(findUsageStatistics().exists()).toBe(true);
       expect(findUsageGraph().exists()).toBe(false);
+      expect(findStorageInlineAlert().exists()).toBe(true);
     });
   });
 

ee/spec/frontend/storage_counter/components/storage_inline_alert_spec.js

@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import StorageInlineAlert from 'ee/storage_counter/components/storage_inline_alert.vue';
 import { GlAlert } from '@gitlab/ui';
 
-const GB_IN_BYTES = 1_000_000_000;
+const GB_IN_BYTES = 1_074_000_000;
 const THIRTEEN_GB_IN_BYTES = 13 * GB_IN_BYTES;
 const TEN_GB_IN_BYTES = 10 * GB_IN_BYTES;
 const FIVE_GB_IN_BYTES = 5 * GB_IN_BYTES;
@@ -27,7 +27,7 @@ describe('StorageInlineAlert', () => {
         totalRepositorySizeExcess: 0,
         totalRepositorySize: FIVE_GB_IN_BYTES,
         additionalPurchasedStorageSize: 0,
-        repositoryFreeSizeLimit: TEN_GB_IN_BYTES,
+        actualRepositorySizeLimit: TEN_GB_IN_BYTES,
       });
     });
 
@@ -44,7 +44,7 @@ describe('StorageInlineAlert', () => {
         totalRepositorySizeExcess: THREE_GB_IN_BYTES,
         totalRepositorySize: THIRTEEN_GB_IN_BYTES,
         additionalPurchasedStorageSize: 0,
-        repositoryFreeSizeLimit: TEN_GB_IN_BYTES,
+        actualRepositorySizeLimit: TEN_GB_IN_BYTES,
       });
     });
 
@@ -55,7 +55,7 @@ describe('StorageInlineAlert', () => {
 
     it('renders human readable repositoryFreeLimit', () => {
       expect(findAlert().text()).toBe(
-        'You have reached the free storage limit of 10GB on 1 project. To unlock them, please purchase additional storage.',
+        'You have reached the free storage limit of 10.0GiB on 1 project. To unlock them, please purchase additional storage.',
       );
     });
   });
@@ -68,7 +68,7 @@ describe('StorageInlineAlert', () => {
         totalRepositorySizeExcess: THREE_GB_IN_BYTES,
         totalRepositorySize: THIRTEEN_GB_IN_BYTES,
         additionalPurchasedStorageSize: FIVE_GB_IN_BYTES,
-        repositoryFreeSizeLimit: TEN_GB_IN_BYTES,
+        actualRepositorySizeLimit: TEN_GB_IN_BYTES,
       });
     });
 
@@ -79,7 +79,7 @@ describe('StorageInlineAlert', () => {
 
     it('renders text explaining storage', () => {
       expect(findAlert().text()).toBe(
-        'When you purchase additional storage, we automatically unlock projects that were locked when you reached the 10GB limit.',
+        'When you purchase additional storage, we automatically unlock projects that were locked when you reached the 10.0GiB limit.',
       );
     });
   });
@@ -92,7 +92,7 @@ describe('StorageInlineAlert', () => {
         totalRepositorySizeExcess: THREE_GB_IN_BYTES,
         totalRepositorySize: THIRTEEN_GB_IN_BYTES,
         additionalPurchasedStorageSize: THREE_GB_IN_BYTES,
-        repositoryFreeSizeLimit: TEN_GB_IN_BYTES,
+        actualRepositorySizeLimit: TEN_GB_IN_BYTES,
       });
     });
 

ee/spec/frontend/storage_counter/mock_data.js

@@ -68,6 +68,12 @@ export const withRootStorageStatistics = {
   projects,
   limit: 10000000,
   totalUsage: 129334601,
+  containsLockedProjects: true,
+  repositorySizeExcessProjectCount: 1,
+  totalRepositorySizeExcess: 2321,
+  totalRepositorySize: 1002321,
+  additionalPurchasedStorageSize: 321,
+  actualRepositorySizeLimit: 1002321,
   rootStorageStatistics: {
     storageSize: 129334601,
     repositorySize: 46012030,