Automatic merge of gitlab-org/gitlab master

.rubocop.yml

@@ -717,3 +717,8 @@ Performance/ActiveRecordSubtransactions:
   Exclude:
     - 'spec/**/*.rb'
     - 'ee/spec/**/*.rb'
+
+Performance/ActiveRecordSubtransactionMethods:
+  Exclude:
+    - 'spec/**/*.rb'
+    - 'ee/spec/**/*.rb'

app/assets/javascripts/blob_edit/blob_bundle.js

@@ -69,6 +69,7 @@ export default () => {
     const currentAction = $('.js-file-title').data('currentAction');
     const projectId = editBlobForm.data('project-id');
     const isMarkdown = editBlobForm.data('is-markdown');
+    const previewMarkdownPath = editBlobForm.data('previewMarkdownPath');
     const commitButton = $('.js-commit-button');
     const cancelLink = $('.btn.btn-cancel');
 
@@ -80,6 +81,7 @@ export default () => {
           currentAction,
           projectId,
           isMarkdown,
+          previewMarkdownPath,
         });
         initPopovers();
         initCodeQualityWalkthroughStep();

app/assets/javascripts/blob_edit/edit_blob.js

@@ -11,7 +11,7 @@ import { BLOB_EDITOR_ERROR, BLOB_PREVIEW_ERROR } from './constants';
 
 export default class EditBlob {
   // The options object has:
-  // assetsPath, filePath, currentAction, projectId, isMarkdown
+  // assetsPath, filePath, currentAction, projectId, isMarkdown, previewMarkdownPath
   constructor(options) {
     this.options = options;
     this.configureMonacoEditor();
@@ -30,7 +30,10 @@ export default class EditBlob {
     import('~/editor/extensions/source_editor_markdown_ext')
       .then(({ EditorMarkdownExtension: MarkdownExtension } = {}) => {
         this.editor.use(
-          new MarkdownExtension({ instance: this.editor, projectPath: this.options.projectPath }),
+          new MarkdownExtension({
+            instance: this.editor,
+            previewMarkdownPath: this.options.previewMarkdownPath,
+          }),
         );
         this.hasMarkdownExtension = true;
         addEditorMarkdownListeners(this.editor);

app/assets/javascripts/editor/extensions/source_editor_markdown_ext.js

@@ -14,17 +14,9 @@ import {
 } from '../constants';
 import { SourceEditorExtension } from './source_editor_extension_base';
 
-const getPreview = (text, projectPath = '') => {
-  let url;
-
-  if (projectPath) {
-    url = `/${projectPath}/preview_markdown`;
-  } else {
-    const { group, project } = document.body.dataset;
-    url = `/${group}/${project}/preview_markdown`;
-  }
+const getPreview = (text, previewMarkdownPath) => {
   return axios
-    .post(url, {
+    .post(previewMarkdownPath, {
       text,
     })
     .then(({ data }) => {
@@ -43,10 +35,10 @@ const setupDomElement = ({ injectToEl = null } = {}) => {
 };
 
 export class EditorMarkdownExtension extends SourceEditorExtension {
-  constructor({ instance, projectPath, ...args } = {}) {
+  constructor({ instance, previewMarkdownPath, ...args } = {}) {
     super({ instance, ...args });
     Object.assign(instance, {
-      projectPath,
+      previewMarkdownPath,
       preview: {
         el: undefined,
         action: undefined,
@@ -112,7 +104,7 @@ export class EditorMarkdownExtension extends SourceEditorExtension {
 
   fetchPreview() {
     const { el: previewEl } = this.preview;
-    getPreview(this.getValue(), this.projectPath)
+    getPreview(this.getValue(), this.previewMarkdownPath)
       .then((data) => {
         previewEl.innerHTML = sanitize(data);
         syntaxHighlight(previewEl.querySelectorAll('.js-syntax-highlight'));

app/assets/javascripts/ide/components/repo_editor.vue

@@ -79,6 +79,7 @@ export default {
       'editorTheme',
       'entries',
       'currentProjectId',
+      'previewMarkdownPath',
     ]),
     ...mapGetters([
       'getAlert',
@@ -314,14 +315,15 @@ export default {
 
         if (
           this.fileType === MARKDOWN_FILE_TYPE &&
-          this.editor?.getEditorType() === EDITOR_TYPE_CODE
+          this.editor?.getEditorType() === EDITOR_TYPE_CODE &&
+          this.previewMarkdownPath
         ) {
           import('~/editor/extensions/source_editor_markdown_ext')
             .then(({ EditorMarkdownExtension: MarkdownExtension } = {}) => {
               this.editor.use(
                 new MarkdownExtension({
                   instance: this.editor,
-                  projectPath: this.currentProjectId,
+                  previewMarkdownPath: this.previewMarkdownPath,
                 }),
               );
             })

app/assets/javascripts/ide/index.js

@@ -63,6 +63,7 @@ export function initIde(el, options = {}) {
         editorTheme: window.gon?.user_color_scheme || DEFAULT_THEME,
         codesandboxBundlerUrl: el.dataset.codesandboxBundlerUrl,
         environmentsGuidanceAlertDismissed: !parseBoolean(el.dataset.enableEnvironmentsGuidance),
+        previewMarkdownPath: el.dataset.previewMarkdownPath,
       });
     },
     beforeDestroy() {

app/assets/javascripts/ide/stores/state.js

@@ -32,4 +32,5 @@ export default () => ({
   codesandboxBundlerUrl: null,
   environmentsGuidanceAlertDismissed: false,
   environmentsGuidanceAlertDetected: false,
+  previewMarkdownPath: '',
 });

app/controllers/clusters/clusters_controller.rb

@@ -38,7 +38,7 @@ class Clusters::ClustersController < Clusters::BaseController
 
   def new
     if params[:provider] == 'aws'
-      @aws_role = Aws::Role.create_or_find_by!(user: current_user)
+      @aws_role = Aws::Role.create_or_find_by!(user: current_user) # rubocop:disable Performance/ActiveRecordSubtransactionMethods
       @instance_types = load_instance_types.to_json
 
     elsif params[:provider] == 'gcp'

app/helpers/blob_helper.rb

@@ -220,7 +220,8 @@ module BlobHelper
       'assets-prefix' => Gitlab::Application.config.assets.prefix,
       'blob-filename' => @blob && @blob.path,
       'project-id' => project.id,
-      'is-markdown' => @blob && @blob.path && Gitlab::MarkupHelper.gitlab_markdown?(@blob.path)
+      'is-markdown' => @blob && @blob.path && Gitlab::MarkupHelper.gitlab_markdown?(@blob.path),
+      'preview-markdown-path' => preview_markdown_path(project)
     }
   end
 

app/helpers/ide_helper.rb

@@ -19,7 +19,8 @@ module IdeHelper
       'merge-request' => @merge_request,
       'fork-info' => @fork_info&.to_json,
       'project' => convert_to_project_entity_json(@project),
-      'enable-environments-guidance' => enable_environments_guidance?.to_s
+      'enable-environments-guidance' => enable_environments_guidance?.to_s,
+      'preview-markdown-path' => @project && preview_markdown_path(@project)
     }
   end
 

app/models/application_record.rb

@@ -66,7 +66,7 @@ class ApplicationRecord < ActiveRecord::Base
   def self.safe_find_or_create_by(*args, &block)
     return optimized_safe_find_or_create_by(*args, &block) if Feature.enabled?(:optimize_safe_find_or_create_by, default_enabled: :yaml)
 
-    safe_ensure_unique(retries: 1) do
+    safe_ensure_unique(retries: 1) do # rubocop:disable Performance/ActiveRecordSubtransactionMethods
       find_or_create_by(*args, &block)
     end
   end
@@ -104,19 +104,6 @@ class ApplicationRecord < ActiveRecord::Base
     enum(enum_mod.key => values)
   end
 
-  def self.transaction(**options, &block)
-    if options[:requires_new] && track_subtransactions?
-      ::Gitlab::Database::Metrics.subtransactions_increment(self.name)
-    end
-
-    super(**options, &block)
-  end
-
-  def self.track_subtransactions?
-    ::Feature.enabled?(:active_record_subtransactions_counter, type: :ops, default_enabled: :yaml) &&
-      connection.transaction_open?
-  end
-
   def self.cached_column_list
     self.column_names.map { |column_name| self.arel_table[column_name] }
   end

app/models/concerns/cache_markdown_field.rb

@@ -171,7 +171,7 @@ module CacheMarkdownField
 
     # One retry is enough as next time `model_user_mention` should return the existing mention record,
     # that threw the `ActiveRecord::RecordNotUnique` exception in first place.
-    self.class.safe_ensure_unique(retries: 1) do
+    self.class.safe_ensure_unique(retries: 1) do # rubocop:disable Performance/ActiveRecordSubtransactionMethods
       user_mention = model_user_mention
 
       # this may happen due to notes polymorphism, so noteable_id may point to a record

app/models/external_pull_request.rb

@@ -89,7 +89,7 @@ class ExternalPullRequest < ApplicationRecord
   end
 
   def self.safe_find_or_initialize_and_update(find:, update:)
-    safe_ensure_unique(retries: 1) do
+    safe_ensure_unique(retries: 1) do # rubocop:disable Performance/ActiveRecordSubtransactionMethods
       model = find_or_initialize_by(find)
 
       if model.update(update)

app/models/user.rb

@@ -2007,19 +2007,19 @@ class User < ApplicationRecord
   end
 
   def set_notification_email
-    if notification_email.blank? || verified_emails.exclude?(notification_email)
+    if verified_emails.exclude?(notification_email)
       self.notification_email = nil
     end
   end
 
   def set_public_email
-    if public_email.blank? || verified_emails.exclude?(public_email)
+    if verified_emails.exclude?(public_email)
       self.public_email = ''
     end
   end
 
   def set_commit_email
-    if commit_email.blank? || verified_emails.exclude?(commit_email)
+    if verified_emails.exclude?(commit_email)
       self.commit_email = nil
     end
   end

app/services/merge_requests/approval_service.rb

@@ -35,7 +35,7 @@ module MergeRequests
     end
 
     def save_approval(approval)
-      Approval.safe_ensure_unique do
+      Approval.safe_ensure_unique do # rubocop:disable Performance/ActiveRecordSubtransactionMethods
         approval.save
       end
     end

app/services/terraform/remote_state_handler.rb

@@ -70,7 +70,7 @@ module Terraform
 
       return find_state!(find_params) if find_only
 
-      state = Terraform::State.create_or_find_by(find_params)
+      state = Terraform::State.create_or_find_by(find_params) # rubocop:disable Performance/ActiveRecordSubtransactionMethods
 
       # https://github.com/rails/rails/issues/36027
       return state unless state.errors.of_kind? :name, :taken

config/feature_categories.yml

@@ -20,7 +20,6 @@
 - chatops
 - cloud_native_installation
 - cluster_cost_management
-- code_analytics
 - code_quality
 - code_review
 - code_testing
@@ -34,6 +33,7 @@
 - continuous_integration_scaling
 - database
 - dataops
+- delivery_management
 - dependency_firewall
 - dependency_proxy
 - dependency_scanning
@@ -42,6 +42,7 @@
 - disaster_recovery
 - dynamic_application_security_testing
 - editor_extension
+- environment_management
 - epics
 - error_tracking
 - experimentation_activation

config/feature_flags/development/other_storage_tab.yml

----
-name: other_storage_tab
-introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/57121
-rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/325967
-milestone: '13.11'
-type: development
-group: group::fulfillment
-default_enabled: false

config/feature_flags/ops/active_record_subtransactions_counter.yml

----
-name: active_record_subtransactions_counter
-introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/66477
-rollout_issue_url:
-milestone: '14.1'
-type: ops
-group: group::pipeline execution
-default_enabled: false

doc/user/project/service_desk.md

@@ -244,8 +244,8 @@ Graph API instead of IMAP. Follow the [documentation in the incoming email secti
   gitlab_rails['service_desk_email_email'] = "project_contact@example.onmicrosoft.com"
   gitlab_rails['service_desk_email_mailbox_name'] = "inbox"
   gitlab_rails['service_desk_email_log_file'] = "/var/log/gitlab/mailroom/mail_room_json.log"
-  gitlab_rails['service_desk_inbox_method'] = 'microsoft_graph'
-  gitlab_rails['service_desk_inbox_options'] = {
+  gitlab_rails['service_desk_email_inbox_method'] = 'microsoft_graph'
+  gitlab_rails['service_desk_email_inbox_options'] = {
    'tenant_id': '<YOUR-TENANT-ID>',
    'client_id': '<YOUR-CLIENT-ID>',
    'client_secret': '<YOUR-CLIENT-SECRET>',

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

-<script>
-import {
-  GlLink,
-  GlSprintf,
-  GlModalDirective,
-  GlButton,
-  GlIcon,
-  GlKeysetPagination,
-} from '@gitlab/ui';
-import { parseBoolean } from '~/lib/utils/common_utils';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { PROJECTS_PER_PAGE } from '../constants';
-import query from '../queries/storage.query.graphql';
-import { formatUsageSize, parseGetStorageResults } from '../utils';
-import ProjectsTable from './projects_table.vue';
-import StorageInlineAlert from './storage_inline_alert.vue';
-import TemporaryStorageIncreaseModal from './temporary_storage_increase_modal.vue';
-import UsageGraph from './usage_graph.vue';
-import UsageStatistics from './usage_statistics.vue';
-
-export default {
-  name: 'OtherStorageCounterApp',
-  components: {
-    GlLink,
-    GlIcon,
-    GlButton,
-    GlSprintf,
-    UsageGraph,
-    ProjectsTable,
-    UsageStatistics,
-    StorageInlineAlert,
-    GlKeysetPagination,
-    TemporaryStorageIncreaseModal,
-  },
-  directives: {
-    GlModalDirective,
-  },
-  mixins: [glFeatureFlagsMixin()],
-  props: {
-    namespacePath: {
-      type: String,
-      required: true,
-    },
-    helpPagePath: {
-      type: String,
-      required: true,
-    },
-    purchaseStorageUrl: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    isTemporaryStorageIncreaseVisible: {
-      type: String,
-      required: false,
-      default: 'false',
-    },
-  },
-  apollo: {
-    namespace: {
-      query,
-      variables() {
-        return {
-          fullPath: this.namespacePath,
-          searchTerm: this.searchTerm,
-          withExcessStorageData: this.isAdditionalStorageFlagEnabled,
-          first: PROJECTS_PER_PAGE,
-        };
-      },
-      update: parseGetStorageResults,
-      result() {
-        this.firstFetch = false;
-      },
-    },
-  },
-  data() {
-    return {
-      namespace: {},
-      searchTerm: '',
-      firstFetch: true,
-    };
-  },
-  computed: {
-    namespaceProjects() {
-      return this.namespace?.projects?.data ?? [];
-    },
-    isStorageIncreaseModalVisible() {
-      return parseBoolean(this.isTemporaryStorageIncreaseVisible);
-    },
-    isAdditionalStorageFlagEnabled() {
-      return this.glFeatures.additionalRepoStorageByNamespace;
-    },
-
-    formattedNamespaceLimit() {
-      return formatUsageSize(this.namespace.limit);
-    },
-    storageStatistics() {
-      if (!this.namespace) {
-        return null;
-      }
-
-      return {
-        totalRepositorySize: this.namespace.totalRepositorySize,
-        actualRepositorySizeLimit: this.namespace.actualRepositorySizeLimit,
-        totalRepositorySizeExcess: this.namespace.totalRepositorySizeExcess,
-        additionalPurchasedStorageSize: this.namespace.additionalPurchasedStorageSize,
-      };
-    },
-    isQueryLoading() {
-      return this.$apollo.queries.namespace.loading;
-    },
-    pageInfo() {
-      return this.namespace.projects?.pageInfo ?? {};
-    },
-    shouldShowStorageInlineAlert() {
-      if (this.firstFetch) {
-        // for initial load check if the data fetch is done (isQueryLoading)
-        return this.isAdditionalStorageFlagEnabled && !this.isQueryLoading;
-      }
-      // for all subsequent queries the storage inline alert doesn't
-      // have to be re-rendered as the data from graphql will remain
-      // the same.
-      return this.isAdditionalStorageFlagEnabled;
-    },
-    showPagination() {
-      return Boolean(this.pageInfo?.hasPreviousPage || this.pageInfo?.hasNextPage);
-    },
-  },
-  methods: {
-    handleSearch(input) {
-      // if length === 0 clear the search, if length > 2 update the search term
-      if (input.length === 0 || input.length > 2) {
-        this.searchTerm = input;
-      }
-    },
-    fetchMoreProjects(vars) {
-      this.$apollo.queries.namespace.fetchMore({
-        variables: {
-          fullPath: this.namespacePath,
-          withExcessStorageData: this.isAdditionalStorageFlagEnabled,
-          first: PROJECTS_PER_PAGE,
-          ...vars,
-        },
-        updateQuery(previousResult, { fetchMoreResult }) {
-          return fetchMoreResult;
-        },
-      });
-    },
-    onPrev(before) {
-      if (this.pageInfo?.hasPreviousPage) {
-        this.fetchMoreProjects({ before });
-      }
-    },
-    onNext(after) {
-      if (this.pageInfo?.hasNextPage) {
-        this.fetchMoreProjects({ after });
-      }
-    },
-  },
-  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"
-        :purchase-storage-url="purchaseStorageUrl"
-      />
-    </div>
-    <div v-else class="gl-py-4 gl-px-2 gl-m-0">
-      <div class="gl-display-flex gl-align-items-center">
-        <div class="gl-w-half">
-          <gl-sprintf :message="s__('UsageQuota|You used: %{usage} %{limit}')">
-            <template #usage>
-              <span class="gl-font-weight-bold" data-testid="total-usage">
-                {{ namespace.totalUsage }}
-              </span>
-            </template>
-            <template #limit>
-              <gl-sprintf
-                v-if="namespace.limit"
-                :message="s__('UsageQuota|out of %{formattedLimit} of your namespace storage')"
-              >
-                <template #formattedLimit>
-                  <span class="gl-font-weight-bold">{{ formattedNamespaceLimit }}</span>
-                </template>
-              </gl-sprintf>
-            </template>
-          </gl-sprintf>
-          <gl-link
-            :href="helpPagePath"
-            target="_blank"
-            :aria-label="s__('UsageQuota|Usage quotas help link')"
-          >
-            <gl-icon name="question" :size="12" />
-          </gl-link>
-        </div>
-        <div class="gl-w-half gl-text-right">
-          <gl-button
-            v-if="isStorageIncreaseModalVisible"
-            v-gl-modal-directive="$options.modalId"
-            category="secondary"
-            variant="success"
-            data-testid="temporary-storage-increase-button"
-            >{{ s__('UsageQuota|Increase storage temporarily') }}</gl-button
-          >
-          <gl-link
-            v-if="purchaseStorageUrl"
-            :href="purchaseStorageUrl"
-            class="btn btn-success gl-ml-2"
-            target="_blank"
-            data-testid="purchase-storage-link"
-            >{{ s__('UsageQuota|Purchase more storage') }}</gl-link
-          >
-        </div>
-      </div>
-      <div v-if="namespace.rootStorageStatistics" class="gl-w-full">
-        <usage-graph
-          :root-storage-statistics="namespace.rootStorageStatistics"
-          :limit="namespace.limit"
-        />
-      </div>
-    </div>
-    <projects-table
-      :projects="namespaceProjects"
-      :is-loading="isQueryLoading"
-      :additional-purchased-storage-size="namespace.additionalPurchasedStorageSize || 0"
-      @search="handleSearch"
-    />
-    <div class="gl-display-flex gl-justify-content-center gl-mt-5">
-      <gl-keyset-pagination v-if="showPagination" v-bind="pageInfo" @prev="onPrev" @next="onNext" />
-    </div>
-    <temporary-storage-increase-modal
-      v-if="isStorageIncreaseModalVisible"
-      :limit="formattedNamespaceLimit"
-      :modal-id="$options.modalId"
-    />
-  </div>
-</template>

ee/app/assets/javascripts/other_storage_counter/components/project.vue

-<script>
-import { GlLink, GlIcon } from '@gitlab/ui';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { numberToHumanSize, isOdd } from '~/lib/utils/number_utils';
-import { s__ } from '~/locale';
-import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
-import StorageRow from './storage_row.vue';
-
-export default {
-  components: {
-    GlIcon,
-    GlLink,
-    ProjectAvatar,
-    StorageRow,
-  },
-  props: {
-    project: {
-      required: true,
-      type: Object,
-    },
-  },
-  data() {
-    return {
-      isOpen: false,
-    };
-  },
-  computed: {
-    projectAvatar() {
-      const { name, id, avatarUrl, webUrl } = this.project;
-      return {
-        name,
-        id: Number(getIdFromGraphQLId(id)),
-        avatar_url: avatarUrl,
-        path: webUrl,
-      };
-    },
-    name() {
-      return this.project.nameWithNamespace;
-    },
-    storageSize() {
-      return numberToHumanSize(this.project.statistics.storageSize);
-    },
-    iconName() {
-      return this.isOpen ? 'angle-down' : 'angle-right';
-    },
-    statistics() {
-      const statisticsCopy = { ...this.project.statistics };
-      delete statisticsCopy.storageSize;
-      // eslint-disable-next-line no-underscore-dangle
-      delete statisticsCopy.__typename;
-      delete statisticsCopy.commitCount;
-
-      return statisticsCopy;
-    },
-  },
-  methods: {
-    toggleProject(e) {
-      const NO_EXPAND_CLS = 'js-project-link';
-      const targetClasses = e.target.classList;
-
-      if (targetClasses.contains(NO_EXPAND_CLS)) {
-        return;
-      }
-      this.isOpen = !this.isOpen;
-    },
-    getFormattedName(name) {
-      return this.$options.i18nStatisticsMap[name];
-    },
-    isOdd(num) {
-      return isOdd(num);
-    },
-    /**
-     * Some values can be `nil`
-     * for those, we send 0 instead
-     */
-    getValue(val) {
-      return val || 0;
-    },
-  },
-  i18nStatisticsMap: {
-    repositorySize: s__('UsageQuota|Repository'),
-    lfsObjectsSize: s__('UsageQuota|LFS Storage'),
-    buildArtifactsSize: s__('UsageQuota|Artifacts'),
-    packagesSize: s__('UsageQuota|Packages'),
-    wikiSize: s__('UsageQuota|Wiki'),
-    snippetsSize: s__('UsageQuota|Snippets'),
-    uploadsSize: s__('UsageQuota|Uploads'),
-  },
-};
-</script>
-<template>
-  <div>
-    <div
-      class="gl-responsive-table-row gl-border-solid gl-border-b-1 gl-pt-3 gl-pb-3 gl-border-b-gray-100 gl-hover-bg-blue-50 gl-hover-border-blue-200 gl-hover-cursor-pointer"
-      role="row"
-      data-testid="projectTableRow"
-      @click="toggleProject"
-    >
-      <div
-        class="table-section gl-white-space-normal! gl-sm-flex-wrap section-70 gl-text-truncate"
-        role="gridcell"
-      >
-        <div class="table-mobile-header gl-font-weight-bold" role="rowheader">
-          {{ __('Project') }}
-        </div>
-        <div class="table-mobile-content gl-display-flex gl-align-items-center">
-          <div class="gl-display-flex gl-mr-3 gl-align-items-center">
-            <gl-icon :size="10" :name="iconName" use-deprecated-sizes class="gl-mr-2" />
-            <gl-icon name="bookmark" />
-          </div>
-          <div>
-            <project-avatar :project="projectAvatar" :size="32" />
-          </div>
-          <gl-link
-            :href="project.webUrl"
-            class="js-project-link gl-font-weight-bold gl-text-gray-900!"
-            >{{ name }}</gl-link
-          >
-        </div>
-      </div>
-      <div
-        class="table-section gl-white-space-normal! gl-sm-flex-wrap section-30 gl-text-truncate"
-        role="gridcell"
-      >
-        <div class="table-mobile-header gl-font-weight-bold" role="rowheader">
-          {{ __('Usage') }}
-        </div>
-        <div class="table-mobile-content gl-text-gray-900">{{ storageSize }}</div>
-      </div>
-    </div>
-
-    <template v-if="isOpen">
-      <storage-row
-        v-for="(value, statisticsName, index) in statistics"
-        :key="index"
-        :name="getFormattedName(statisticsName)"
-        :value="getValue(value)"
-        :class="{ 'gl-bg-gray-10': isOdd(index) }"
-      />
-    </template>
-  </div>
-</template>

ee/app/assets/javascripts/other_storage_counter/components/project_with_excess_storage.vue

-<script>
-import { GlLink, GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { s__, sprintf } from '~/locale';
-import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
-import { ALERT_THRESHOLD, ERROR_THRESHOLD, WARNING_THRESHOLD } from '../constants';
-import { formatUsageSize, usageRatioToThresholdLevel } from '../utils';
-
-export default {
-  i18n: {
-    warningWithNoPurchasedStorageText: s__(
-      'UsageQuota|This project is near the free %{actualRepositorySizeLimit} limit and at risk of being locked.',
-    ),
-    lockedWithNoPurchasedStorageText: s__(
-      'UsageQuota|This project is locked because it is using %{actualRepositorySizeLimit} of free storage and there is no purchased storage available.',
-    ),
-    warningWithPurchasedStorageText: s__(
-      'UsageQuota|This project is at risk of being locked because purchased storage is running low.',
-    ),
-    lockedWithPurchasedStorageText: s__(
-      'UsageQuota|This project is locked because it used %{actualRepositorySizeLimit} of free storage and all the purchased storage.',
-    ),
-  },
-  components: {
-    GlIcon,
-    GlLink,
-    ProjectAvatar,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    project: {
-      required: true,
-      type: Object,
-    },
-    additionalPurchasedStorageSize: {
-      type: Number,
-      required: true,
-    },
-  },
-  computed: {
-    projectAvatar() {
-      const { name, id, avatarUrl, webUrl } = this.project;
-      return {
-        name,
-        id: Number(getIdFromGraphQLId(id)),
-        avatar_url: avatarUrl,
-        path: webUrl,
-      };
-    },
-    name() {
-      return this.project.nameWithNamespace;
-    },
-    hasPurchasedStorage() {
-      return this.additionalPurchasedStorageSize > 0;
-    },
-    storageSize() {
-      return formatUsageSize(this.project.totalCalculatedUsedStorage);
-    },
-    excessStorageSize() {
-      return formatUsageSize(this.project.repositorySizeExcess);
-    },
-    excessStorageRatio() {
-      return this.project.totalCalculatedUsedStorage / this.project.totalCalculatedStorageLimit;
-    },
-    thresholdLevel() {
-      return usageRatioToThresholdLevel(this.excessStorageRatio);
-    },
-    status() {
-      const i18nTextOpts = {
-        actualRepositorySizeLimit: formatUsageSize(this.project.actualRepositorySizeLimit),
-      };
-      if (this.thresholdLevel === ERROR_THRESHOLD) {
-        const tooltipText = this.hasPurchasedStorage
-          ? this.$options.i18n.lockedWithPurchasedStorageText
-          : this.$options.i18n.lockedWithNoPurchasedStorageText;
-
-        return {
-          bgColor: { 'gl-bg-red-50': true },
-          iconClass: { 'gl-text-red-500': true },
-          linkClass: 'gl-text-red-500!',
-          tooltipText: sprintf(tooltipText, i18nTextOpts),
-        };
-      } else if (
-        this.thresholdLevel === WARNING_THRESHOLD ||
-        this.thresholdLevel === ALERT_THRESHOLD
-      ) {
-        const tooltipText = this.hasPurchasedStorage
-          ? this.$options.i18n.warningWithPurchasedStorageText
-          : this.$options.i18n.warningWithNoPurchasedStorageText;
-
-        return {
-          bgColor: { 'gl-bg-orange-50': true },
-          iconClass: 'gl-text-orange-500',
-          tooltipText: sprintf(tooltipText, i18nTextOpts),
-        };
-      }
-
-      return {};
-    },
-  },
-};
-</script>
-<template>
-  <div
-    class="gl-responsive-table-row gl-border-solid gl-border-b-1 gl-pt-3 gl-pb-3 gl-border-b-gray-100"
-    :class="status.bgColor"
-    role="row"
-    data-testid="projectTableRow"
-  >
-    <div
-      class="table-section gl-white-space-normal! gl-sm-flex-wrap section-50 gl-text-truncate gl-pr-5"
-      role="gridcell"
-    >
-      <div class="table-mobile-header gl-font-weight-bold" role="rowheader">
-        {{ __('Project') }}
-      </div>
-      <div class="table-mobile-content gl-display-flex gl-align-items-center">
-        <div class="gl-display-flex gl-mr-3 gl-ml-5 gl-align-items-center">
-          <gl-icon name="bookmark" />
-        </div>
-        <div>
-          <project-avatar :project="projectAvatar" :size="32" />
-        </div>
-        <div v-if="status.iconClass">
-          <gl-icon
-            v-gl-tooltip="{ title: status.tooltipText }"
-            name="status_warning"
-            class="gl-mr-3"
-            :class="status.iconClass"
-          />
-        </div>
-        <gl-link
-          :href="project.webUrl"
-          class="gl-font-weight-bold gl-text-gray-900!"
-          :class="status.linkClass"
-          >{{ name }}</gl-link
-        >
-      </div>
-    </div>
-    <div
-      class="table-section gl-white-space-normal! gl-sm-flex-wrap section-15 gl-text-truncate"
-      role="gridcell"
-    >
-      <div class="table-mobile-header gl-font-weight-bold" role="rowheader">
-        {{ __('Usage') }}
-      </div>
-      <div class="table-mobile-content gl-text-gray-900">{{ storageSize }}</div>
-    </div>
-    <div
-      class="table-section gl-white-space-normal! gl-sm-flex-wrap section-15 gl-text-truncate"
-      role="gridcell"
-    >
-      <div class="table-mobile-header gl-font-weight-bold" role="rowheader">
-        {{ __('Excess storage') }}
-      </div>
-      <div class="table-mobile-content gl-text-gray-900">{{ excessStorageSize }}</div>
-    </div>
-  </div>
-</template>

ee/app/assets/javascripts/other_storage_counter/components/projects_skeleton_loader.vue

-<script>
-import { GlSkeletonLoader } from '@gitlab/ui';
-import { SKELETON_LOADER_ROWS } from '../constants';
-
-export default {
-  name: 'ProjectsSkeletonLoader',
-  components: { GlSkeletonLoader },
-  SKELETON_LOADER_ROWS,
-};
-</script>
-<template>
-  <div class="gl-border-b-solid gl-border-b-1 gl-border-gray-100">
-    <div class="gl-flex-direction-column gl-md-display-none" data-testid="mobile-loader">
-      <div
-        v-for="index in $options.SKELETON_LOADER_ROWS.mobile"
-        :key="index"
-        class="gl-responsive-table-row gl-border-solid gl-border-b-1 gl-pt-3 gl-pb-3 gl-border-b-gray-100"
-      >
-        <gl-skeleton-loader :width="500" :height="172">
-          <rect width="480" height="20" x="10" y="15" rx="4" />
-          <rect width="480" height="20" x="10" y="80" rx="4" />
-          <rect width="480" height="20" x="10" y="145" rx="4" />
-        </gl-skeleton-loader>
-      </div>
-    </div>
-    <div
-      class="gl-display-none gl-md-display-flex gl-flex-direction-column"
-      data-testid="desktop-loader"
-    >
-      <gl-skeleton-loader
-        v-for="index in $options.SKELETON_LOADER_ROWS.desktop"
-        :key="index"
-        :width="1000"
-        :height="39"
-      >
-        <rect rx="4" width="320" height="8" x="0" y="18" />
-        <rect rx="4" width="60" height="8" x="500" y="18" />
-        <rect rx="4" width="60" height="8" x="750" y="18" />
-      </gl-skeleton-loader>
-    </div>
-  </div>
-</template>

ee/app/assets/javascripts/other_storage_counter/components/projects_table.vue

-<script>
-import { GlSearchBoxByType } from '@gitlab/ui';
-import { SEARCH_DEBOUNCE_MS } from '~/ref/constants';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import Project from './project.vue';
-import ProjectWithExcessStorage from './project_with_excess_storage.vue';
-import ProjectsSkeletonLoader from './projects_skeleton_loader.vue';
-
-export default {
-  components: {
-    Project,
-    ProjectsSkeletonLoader,
-    ProjectWithExcessStorage,
-    GlSearchBoxByType,
-  },
-  mixins: [glFeatureFlagsMixin()],
-  props: {
-    projects: {
-      type: Array,
-      required: true,
-    },
-    additionalPurchasedStorageSize: {
-      type: Number,
-      required: true,
-    },
-    isLoading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    isAdditionalStorageFlagEnabled() {
-      return this.glFeatures.additionalRepoStorageByNamespace;
-    },
-    projectRowComponent() {
-      if (this.isAdditionalStorageFlagEnabled) {
-        return ProjectWithExcessStorage;
-      }
-      return Project;
-    },
-  },
-  searchDebounceValue: SEARCH_DEBOUNCE_MS,
-};
-</script>
-
-<template>
-  <div>
-    <div
-      class="gl-responsive-table-row table-row-header gl-border-t-solid gl-border-t-1 gl-border-gray-100 gl-mt-5 gl-line-height-normal gl-text-black-normal gl-font-base"
-      role="row"
-    >
-      <template v-if="isAdditionalStorageFlagEnabled">
-        <div class="table-section section-50 gl-font-weight-bold gl-pl-5" role="columnheader">
-          {{ __('Project') }}
-        </div>
-        <div class="table-section section-15 gl-font-weight-bold" role="columnheader">
-          {{ __('Usage') }}
-        </div>
-        <div class="table-section section-15 gl-font-weight-bold" role="columnheader">
-          {{ __('Excess storage') }}
-        </div>
-        <div class="table-section section-20 gl-font-weight-bold gl-pl-6" role="columnheader">
-          <gl-search-box-by-type
-            :placeholder="__('Search by name')"
-            :debounce="$options.searchDebounceValue"
-            @input="(input) => this.$emit('search', input)"
-          />
-        </div>
-      </template>
-      <template v-else>
-        <div class="table-section section-70 gl-font-weight-bold" role="columnheader">
-          {{ __('Project') }}
-        </div>
-        <div class="table-section section-30 gl-font-weight-bold" role="columnheader">
-          {{ __('Usage') }}
-        </div>
-      </template>
-    </div>
-    <projects-skeleton-loader v-if="isAdditionalStorageFlagEnabled && isLoading" />
-    <template v-else>
-      <component
-        :is="projectRowComponent"
-        v-for="project in projects"
-        :key="project.id"
-        :project="project"
-        :additional-purchased-storage-size="additionalPurchasedStorageSize"
-      />
-    </template>
-  </div>
-</template>

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

-<script>
-import { GlAlert } from '@gitlab/ui';
-import { n__, s__, sprintf } from '~/locale';
-import { ALERT_THRESHOLD, ERROR_THRESHOLD, WARNING_THRESHOLD } from '../constants';
-import { formatUsageSize, usageRatioToThresholdLevel } from '../utils';
-
-export default {
-  i18n: {
-    lockedWithNoPurchasedStorageTitle: s__('UsageQuota|This namespace contains locked projects'),
-    lockedWithNoPurchasedStorageText: s__(
-      'UsageQuota|You have reached the free storage limit of %{actualRepositorySizeLimit} on %{projectsLockedText}. To unlock them, please purchase additional storage.',
-    ),
-    storageUsageText: s__('UsageQuota|%{percentageLeft} of purchased storage is available'),
-    lockedWithPurchaseText: s__(
-      'UsageQuota|You have consumed all of your additional storage, please purchase more to unlock your projects over the free %{actualRepositorySizeLimit} limit.',
-    ),
-    warningWithPurchaseText: s__(
-      'UsageQuota|Your purchased storage is running low. To avoid locked projects, please purchase more storage.',
-    ),
-    infoWithPurchaseText: s__(
-      'UsageQuota|When you purchase additional storage, we automatically unlock projects that were locked when you reached the %{actualRepositorySizeLimit} limit.',
-    ),
-  },
-  components: {
-    GlAlert,
-  },
-  props: {
-    containsLockedProjects: {
-      type: Boolean,
-      required: true,
-    },
-    repositorySizeExcessProjectCount: {
-      type: Number,
-      required: true,
-    },
-    totalRepositorySizeExcess: {
-      type: Number,
-      required: true,
-    },
-    totalRepositorySize: {
-      type: Number,
-      required: true,
-    },
-    additionalPurchasedStorageSize: {
-      type: Number,
-      required: true,
-    },
-    actualRepositorySizeLimit: {
-      type: Number,
-      required: true,
-    },
-  },
-  computed: {
-    shouldShowAlert() {
-      return this.hasPurchasedStorage() || this.containsLockedProjects;
-    },
-    alertText() {
-      return this.hasPurchasedStorage()
-        ? this.hasPurchasedStorageText()
-        : this.hasNotPurchasedStorageText();
-    },
-    alertTitle() {
-      if (!this.hasPurchasedStorage() && this.containsLockedProjects) {
-        return this.$options.i18n.lockedWithNoPurchasedStorageTitle;
-      }
-      return sprintf(this.$options.i18n.storageUsageText, {
-        percentageLeft: `${this.excessStoragePercentageLeft}%`,
-      });
-    },
-    excessStorageRatio() {
-      return this.totalRepositorySizeExcess / this.additionalPurchasedStorageSize;
-    },
-    excessStoragePercentageUsed() {
-      return (this.excessStorageRatio * 100).toFixed(0);
-    },
-    excessStoragePercentageLeft() {
-      return Math.max(0, 100 - this.excessStoragePercentageUsed);
-    },
-    thresholdLevel() {
-      return usageRatioToThresholdLevel(this.excessStorageRatio);
-    },
-    thresholdLevelToAlertVariant() {
-      if (this.thresholdLevel === ERROR_THRESHOLD || this.thresholdLevel === ALERT_THRESHOLD) {
-        return 'danger';
-      } else if (this.thresholdLevel === WARNING_THRESHOLD) {
-        return 'warning';
-      }
-      return 'info';
-    },
-    projectsLockedText() {
-      if (this.repositorySizeExcessProjectCount === 0) {
-        return '';
-      }
-      return `${this.repositorySizeExcessProjectCount} ${n__(
-        'project',
-        'projects',
-        this.repositorySizeExcessProjectCount,
-      )}`;
-    },
-  },
-  methods: {
-    hasPurchasedStorage() {
-      return this.additionalPurchasedStorageSize > 0;
-    },
-    formatSize(size) {
-      return formatUsageSize(size);
-    },
-    hasPurchasedStorageText() {
-      if (this.thresholdLevel === ERROR_THRESHOLD) {
-        return sprintf(this.$options.i18n.lockedWithPurchaseText, {
-          actualRepositorySizeLimit: this.formatSize(this.actualRepositorySizeLimit),
-        });
-      } else if (
-        this.thresholdLevel === WARNING_THRESHOLD ||
-        this.thresholdLevel === ALERT_THRESHOLD
-      ) {
-        return this.$options.i18n.warningWithPurchaseText;
-      }
-      return sprintf(this.$options.i18n.infoWithPurchaseText, {
-        actualRepositorySizeLimit: this.formatSize(this.actualRepositorySizeLimit),
-      });
-    },
-    hasNotPurchasedStorageText() {
-      if (this.thresholdLevel === ERROR_THRESHOLD) {
-        return sprintf(this.$options.i18n.lockedWithNoPurchasedStorageText, {
-          actualRepositorySizeLimit: this.formatSize(this.actualRepositorySizeLimit),
-          projectsLockedText: this.projectsLockedText,
-        });
-      }
-      return '';
-    },
-  },
-};
-</script>
-<template>
-  <gl-alert
-    v-if="shouldShowAlert"
-    class="gl-mt-5"
-    :variant="thresholdLevelToAlertVariant"
-    :dismissible="false"
-    :title="alertTitle"
-  >
-    {{ alertText }}
-  </gl-alert>
-</template>

ee/app/assets/javascripts/other_storage_counter/components/storage_row.vue

-<script>
-import { numberToHumanSize } from '~/lib/utils/number_utils';
-
-export default {
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-    value: {
-      type: Number,
-      required: true,
-    },
-  },
-  computed: {
-    formattedValue() {
-      return numberToHumanSize(this.value);
-    },
-  },
-};
-</script>
-<template>
-  <div class="gl-responsive-table-row lh-100" role="row">
-    <div class="table-section section-wrap section-70 text-truncate pl-2 ml-3" role="gridcell">
-      <div class="table-mobile-header" role="rowheader"></div>
-      <div class="table-mobile-content ml-1">{{ name }}</div>
-    </div>
-
-    <div class="table-section section-wrap section-30 text-truncate" role="gridcell">
-      <div class="table-mobile-header" role="rowheader"></div>
-      <div class="table-mobile-content">{{ formattedValue }}</div>
-    </div>
-  </div>
-</template>

ee/app/assets/javascripts/other_storage_counter/components/temporary_storage_increase_modal.vue

-<script>
-import { GlModal, GlSprintf } from '@gitlab/ui';
-import { s__, __ } from '~/locale';
-
-export default {
-  components: {
-    GlModal,
-    GlSprintf,
-  },
-  props: {
-    limit: {
-      type: String,
-      required: true,
-    },
-    modalId: {
-      type: String,
-      required: true,
-    },
-  },
-  modalBody: s__(
-    "TemporaryStorage|GitLab allows you a %{strongStart}free, one-time storage increase%{strongEnd}. For 30 days your storage will be unlimited. This gives you time to reduce your storage usage. After 30 days, your original storage limit of %{limit} applies. If you are at maximum storage capacity, your account will be read-only. To continue using GitLab you'll have to purchase additional storage or decrease storage usage.",
-  ),
-  modalTitle: s__('TemporaryStorage|Temporarily increase storage now?'),
-  okTitle: s__('TemporaryStorage|Increase storage temporarily'),
-  cancelTitle: __('Cancel'),
-};
-</script>
-<template>
-  <gl-modal
-    size="sm"
-    ok-variant="success"
-    :title="$options.modalTitle"
-    :ok-title="$options.okTitle"
-    :cancel-title="$options.cancelTitle"
-    :modal-id="modalId"
-  >
-    <gl-sprintf :message="$options.modalBody">
-      <template #strong="{ content }">
-        <strong>{{ content }}</strong>
-      </template>
-      <template #limit>{{ limit }}</template>
-    </gl-sprintf>
-  </gl-modal>
-</template>

ee/app/assets/javascripts/other_storage_counter/components/usage_graph.vue

-<script>
-import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import { numberToHumanSize } from '~/lib/utils/number_utils';
-import { s__ } from '~/locale';
-
-export default {
-  components: {
-    GlIcon,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    rootStorageStatistics: {
-      required: true,
-      type: Object,
-    },
-    limit: {
-      required: true,
-      type: Number,
-    },
-  },
-  computed: {
-    storageTypes() {
-      const {
-        buildArtifactsSize,
-        pipelineArtifactsSize,
-        lfsObjectsSize,
-        packagesSize,
-        repositorySize,
-        storageSize,
-        wikiSize,
-        snippetsSize,
-        uploadsSize,
-      } = this.rootStorageStatistics;
-      const artifactsSize = buildArtifactsSize + pipelineArtifactsSize;
-
-      if (storageSize === 0) {
-        return null;
-      }
-
-      return [
-        {
-          name: s__('UsageQuota|Repositories'),
-          style: this.usageStyle(this.barRatio(repositorySize)),
-          class: 'gl-bg-data-viz-blue-500',
-          size: repositorySize,
-        },
-        {
-          name: s__('UsageQuota|LFS Objects'),
-          style: this.usageStyle(this.barRatio(lfsObjectsSize)),
-          class: 'gl-bg-data-viz-orange-600',
-          size: lfsObjectsSize,
-        },
-        {
-          name: s__('UsageQuota|Packages'),
-          style: this.usageStyle(this.barRatio(packagesSize)),
-          class: 'gl-bg-data-viz-aqua-500',
-          size: packagesSize,
-        },
-        {
-          name: s__('UsageQuota|Artifacts'),
-          style: this.usageStyle(this.barRatio(artifactsSize)),
-          class: 'gl-bg-data-viz-green-600',
-          size: artifactsSize,
-          tooltip: s__('UsageQuota|Artifacts is a sum of build and pipeline artifacts.'),
-        },
-        {
-          name: s__('UsageQuota|Wikis'),
-          style: this.usageStyle(this.barRatio(wikiSize)),
-          class: 'gl-bg-data-viz-magenta-500',
-          size: wikiSize,
-        },
-        {
-          name: s__('UsageQuota|Snippets'),
-          style: this.usageStyle(this.barRatio(snippetsSize)),
-          class: 'gl-bg-data-viz-orange-800',
-          size: snippetsSize,
-        },
-        {
-          name: s__('UsageQuota|Uploads'),
-          style: this.usageStyle(this.barRatio(uploadsSize)),
-          class: 'gl-bg-data-viz-aqua-700',
-          size: uploadsSize,
-        },
-      ]
-        .filter((data) => data.size !== 0)
-        .sort((a, b) => b.size - a.size);
-    },
-  },
-  methods: {
-    formatSize(size) {
-      return numberToHumanSize(size);
-    },
-    usageStyle(ratio) {
-      return { flex: ratio };
-    },
-    barRatio(size) {
-      let max = this.rootStorageStatistics.storageSize;
-
-      if (this.limit !== 0 && max <= this.limit) {
-        max = this.limit;
-      }
-
-      return size / max;
-    },
-  },
-};
-</script>
-<template>
-  <div v-if="storageTypes" class="gl-display-flex gl-flex-direction-column w-100">
-    <div class="gl-h-6 gl-my-5 gl-bg-gray-50 gl-rounded-base gl-display-flex">
-      <div
-        v-for="storageType in storageTypes"
-        :key="storageType.name"
-        class="storage-type-usage gl-h-full gl-display-inline-block"
-        :class="storageType.class"
-        :style="storageType.style"
-        data-testid="storage-type-usage"
-      ></div>
-    </div>
-    <div class="row py-0">
-      <div
-        v-for="storageType in storageTypes"
-        :key="storageType.name"
-        class="col-md-auto gl-display-flex gl-align-items-center"
-        data-testid="storage-type-legend"
-      >
-        <div class="gl-h-2 gl-w-5 gl-mr-2 gl-display-inline-block" :class="storageType.class"></div>
-        <span class="gl-mr-2 gl-font-weight-bold gl-font-sm">
-          {{ storageType.name }}
-        </span>
-        <span class="gl-text-gray-500 gl-font-sm">
-          {{ formatSize(storageType.size) }}
-        </span>
-        <span
-          v-if="storageType.tooltip"
-          v-gl-tooltip
-          :title="storageType.tooltip"
-          :aria-label="storageType.tooltip"
-          class="gl-ml-2"
-        >
-          <gl-icon name="question" :size="12" />
-        </span>
-      </div>
-    </div>
-  </div>
-</template>

ee/app/assets/javascripts/other_storage_counter/components/usage_statistics.vue

-<script>
-import { GlButton } from '@gitlab/ui';
-import { helpPagePath } from '~/helpers/help_page_helper';
-import { s__ } from '~/locale';
-import { formatUsageSize } from '../utils';
-import UsageStatisticsCard from './usage_statistics_card.vue';
-
-export default {
-  components: {
-    GlButton,
-    UsageStatisticsCard,
-  },
-  props: {
-    rootStorageStatistics: {
-      required: true,
-      type: Object,
-    },
-    purchaseStorageUrl: {
-      required: false,
-      type: String,
-      default: '',
-    },
-  },
-  computed: {
-    formattedActualRepoSizeLimit() {
-      return formatUsageSize(this.rootStorageStatistics.actualRepositorySizeLimit);
-    },
-    totalUsage() {
-      return {
-        usage: this.formatSizeAndSplit(this.rootStorageStatistics.totalRepositorySize),
-        description: s__('UsageQuota|Total namespace storage used'),
-        footerNote: s__(
-          'UsageQuota|This is the total amount of storage used across your projects within this namespace.',
-        ),
-        link: {
-          text: s__('UsageQuota|Learn more about usage quotas'),
-          url: helpPagePath('user/usage_quotas'),
-        },
-      };
-    },
-    excessUsage() {
-      return {
-        usage: this.formatSizeAndSplit(this.rootStorageStatistics.totalRepositorySizeExcess),
-        description: s__('UsageQuota|Total excess storage used'),
-        footerNote: s__(
-          'UsageQuota|This is the total amount of storage used by projects above the free %{actualRepositorySizeLimit} storage limit.',
-        ),
-        link: {
-          text: s__('UsageQuota|Learn more about excess storage usage'),
-          url: helpPagePath('user/usage_quotas', { anchor: 'excess-storage-usage' }),
-        },
-      };
-    },
-    purchasedUsage() {
-      const {
-        totalRepositorySizeExcess,
-        additionalPurchasedStorageSize,
-      } = this.rootStorageStatistics;
-      return this.purchaseStorageUrl
-        ? {
-            usage: this.formatSizeAndSplit(
-              Math.max(0, additionalPurchasedStorageSize - totalRepositorySizeExcess),
-            ),
-            usageTotal: this.formatSizeAndSplit(additionalPurchasedStorageSize),
-            description: s__('UsageQuota|Purchased storage available'),
-            link: {
-              text: s__('UsageQuota|Purchase more storage'),
-              url: this.purchaseStorageUrl,
-            },
-          }
-        : null;
-    },
-  },
-  methods: {
-    /**
-     * The formatUsageSize method returns
-     * value along with the unit. However, the unit
-     * and the value needs to be separated so that
-     * they can have different styles. The method
-     * splits the value into value and unit.
-     *
-     * @params {Number} size size in bytes
-     * @returns {Object} value and unit of formatted size
-     */
-    formatSizeAndSplit(size) {
-      const formattedSize = formatUsageSize(size);
-      return {
-        value: formattedSize.slice(0, -3),
-        unit: formattedSize.slice(-3),
-      };
-    },
-  },
-};
-</script>
-<template>
-  <div class="gl-display-flex gl-sm-flex-direction-column">
-    <usage-statistics-card
-      data-testid="total-usage"
-      :usage="totalUsage.usage"
-      :link="totalUsage.link"
-      :description="totalUsage.description"
-      css-class="gl-mr-4"
-    />
-    <usage-statistics-card
-      data-testid="excess-usage"
-      :usage="excessUsage.usage"
-      :link="excessUsage.link"
-      :description="excessUsage.description"
-      css-class="gl-mx-4"
-    />
-    <usage-statistics-card
-      v-if="purchasedUsage"
-      data-testid="purchased-usage"
-      :usage="purchasedUsage.usage"
-      :usage-total="purchasedUsage.usageTotal"
-      :link="purchasedUsage.link"
-      :description="purchasedUsage.description"
-      css-class="gl-ml-4"
-    >
-      <template #footer="{ link }">
-        <gl-button
-          target="_blank"
-          :href="link.url"
-          class="mb-0"
-          variant="success"
-          category="primary"
-          block
-        >
-          {{ link.text }}
-        </gl-button>
-      </template>
-    </usage-statistics-card>
-  </div>
-</template>

ee/app/assets/javascripts/other_storage_counter/components/usage_statistics_card.vue

-<script>
-import { GlLink, GlIcon, GlSprintf } from '@gitlab/ui';
-
-export default {
-  components: {
-    GlIcon,
-    GlLink,
-    GlSprintf,
-  },
-  props: {
-    link: {
-      type: Object,
-      required: false,
-      default: () => ({ text: '', url: '' }),
-    },
-    description: {
-      type: String,
-      required: true,
-    },
-    usage: {
-      type: Object,
-      required: true,
-    },
-    usageTotal: {
-      type: Object,
-      required: false,
-      default: null,
-    },
-    cssClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-};
-</script>
-<template>
-  <div class="gl-p-5 gl-my-5 gl-bg-gray-10 gl-flex-grow-1 gl-white-space-nowrap" :class="cssClass">
-    <p class="mb-2">
-      <gl-sprintf :message="__('%{size} %{unit}')">
-        <template #size>
-          <span class="gl-font-size-h-display gl-font-weight-bold">{{ usage.value }}</span>
-        </template>
-        <template #unit>
-          <span class="gl-font-lg gl-font-weight-bold">{{ usage.unit }}</span>
-        </template>
-      </gl-sprintf>
-      <template v-if="usageTotal">
-        <span class="gl-font-size-h-display gl-font-weight-bold">/</span>
-        <gl-sprintf :message="__('%{size} %{unit}')">
-          <template #size>
-            <span class="gl-font-size-h-display gl-font-weight-bold">{{ usageTotal.value }}</span>
-          </template>
-          <template #unit>
-            <span class="gl-font-lg gl-font-weight-bold">{{ usageTotal.unit }}</span>
-          </template>
-        </gl-sprintf>
-      </template>
-    </p>
-    <p class="gl-border-b-2 gl-border-b-solid gl-border-b-gray-100 gl-font-weight-bold gl-pb-3">
-      {{ description }}
-    </p>
-    <p
-      class="gl-mb-0 gl-text-gray-900 gl-font-sm gl-white-space-normal"
-      data-testid="statistics-card-footer"
-    >
-      <slot v-bind="{ link }" name="footer">
-        <gl-link target="_blank" :href="link.url">
-          <span class="text-truncate">{{ link.text }}</span>
-          <gl-icon name="external-link" class="gl-ml-2 gl-flex-shrink-0 gl-text-black-normal" />
-        </gl-link>
-      </slot>
-    </p>
-  </div>
-</template>

ee/app/assets/javascripts/other_storage_counter/constants.js

-export const NONE_THRESHOLD = 'none';
-export const INFO_THRESHOLD = 'info';
-export const WARNING_THRESHOLD = 'warning';
-export const ALERT_THRESHOLD = 'alert';
-export const ERROR_THRESHOLD = 'error';
-
-export const STORAGE_USAGE_THRESHOLDS = {
-  [NONE_THRESHOLD]: 0.0,
-  [INFO_THRESHOLD]: 0.5,
-  [WARNING_THRESHOLD]: 0.75,
-  [ALERT_THRESHOLD]: 0.95,
-  [ERROR_THRESHOLD]: 1.0,
-};
-
-export const PROJECTS_PER_PAGE = 20;
-
-export const SKELETON_LOADER_ROWS = {
-  desktop: PROJECTS_PER_PAGE,
-  mobile: 5,
-};

ee/app/assets/javascripts/other_storage_counter/index.js

-import Vue from 'vue';
-import VueApollo from 'vue-apollo';
-import createDefaultClient from '~/lib/graphql';
-import App from './components/app.vue';
-
-Vue.use(VueApollo);
-
-export default () => {
-  const el = document.getElementById('js-other-storage-counter-app');
-  const {
-    namespacePath,
-    helpPagePath,
-    purchaseStorageUrl,
-    isTemporaryStorageIncreaseVisible,
-  } = el.dataset;
-
-  const apolloProvider = new VueApollo({
-    defaultClient: createDefaultClient(),
-  });
-
-  return new Vue({
-    el,
-    apolloProvider,
-    render(h) {
-      return h(App, {
-        props: {
-          namespacePath,
-          helpPagePath,
-          purchaseStorageUrl,
-          isTemporaryStorageIncreaseVisible,
-        },
-      });
-    },
-  });
-};

ee/app/assets/javascripts/other_storage_counter/queries/storage.query.graphql

-#import "~/graphql_shared/fragments/pageInfo.fragment.graphql"
-
-query getStorageCounter(
-  $fullPath: ID!
-  $withExcessStorageData: Boolean = false
-  $searchTerm: String = ""
-  $first: Int!
-  $after: String
-  $before: String
-) {
-  namespace(fullPath: $fullPath) {
-    id
-    name
-    storageSizeLimit
-    actualRepositorySizeLimit @include(if: $withExcessStorageData)
-    additionalPurchasedStorageSize @include(if: $withExcessStorageData)
-    totalRepositorySizeExcess @include(if: $withExcessStorageData)
-    totalRepositorySize @include(if: $withExcessStorageData)
-    containsLockedProjects @include(if: $withExcessStorageData)
-    repositorySizeExcessProjectCount @include(if: $withExcessStorageData)
-    rootStorageStatistics {
-      storageSize
-      repositorySize
-      lfsObjectsSize
-      buildArtifactsSize
-      pipelineArtifactsSize
-      packagesSize
-      wikiSize
-      snippetsSize
-      uploadsSize
-    }
-    projects(
-      includeSubgroups: true
-      search: $searchTerm
-      first: $first
-      after: $after
-      before: $before
-      sort: STORAGE
-    ) {
-      nodes {
-        id
-        fullPath
-        nameWithNamespace
-        avatarUrl
-        webUrl
-        name
-        repositorySizeExcess @include(if: $withExcessStorageData)
-        actualRepositorySizeLimit @include(if: $withExcessStorageData)
-        statistics {
-          commitCount
-          storageSize
-          repositorySize
-          lfsObjectsSize
-          buildArtifactsSize
-          packagesSize
-          wikiSize
-          snippetsSize
-          uploadsSize
-        }
-      }
-      pageInfo {
-        ...PageInfo
-      }
-    }
-  }
-}

ee/app/assets/javascripts/other_storage_counter/utils.js

-import { numberToHumanSize, bytesToKiB } from '~/lib/utils/number_utils';
-import { getFormatter, SUPPORTED_FORMATS } from '~/lib/utils/unit_format';
-
-import { STORAGE_USAGE_THRESHOLDS } from './constants';
-
-export function usageRatioToThresholdLevel(currentUsageRatio) {
-  let currentLevel = Object.keys(STORAGE_USAGE_THRESHOLDS)[0];
-  Object.keys(STORAGE_USAGE_THRESHOLDS).forEach((thresholdLevel) => {
-    if (currentUsageRatio >= STORAGE_USAGE_THRESHOLDS[thresholdLevel])
-      currentLevel = thresholdLevel;
-  });
-
-  return currentLevel;
-}
-
-/**
- * Formats given bytes to formatted human readable size
- * 
- * We want to display all units above bytes. Hence
- * converting bytesToKiB before passing it to
- * `getFormatter`
-
- * @param {Number} size size in bytes
- * @returns {String}
- */
-export const formatUsageSize = (size) => {
-  const formatDecimalBytes = getFormatter(SUPPORTED_FORMATS.kibibytes);
-  return formatDecimalBytes(bytesToKiB(size), 1);
-};
-
-/**
- * Parses each project to add additional purchased data
- * equally so that locked projects can be unlocked.
- *
- * For example, if a group contains the below projects and
- * project 2, 3 have exceeded the default 10.0 GB limit.
- * 2 and 3 will remain locked until user purchases additional
- * data.
- *
- * Project 1: 7.0GB
- * Project 2: 13.0GB Locked
- * Project 3: 12.0GB Locked
- *
- * If user purchases X GB, it will be equally available
- * to all the locked projects for further use.
- *
- * @param {Object} data project
- * @param {Number} purchasedStorageRemaining Remaining purchased data in bytes
- * @returns {Object}
- */
-export const calculateUsedAndRemStorage = (project, purchasedStorageRemaining) => {
-  // We only consider repo size and lfs object size as of %13.5
-  const totalCalculatedUsedStorage =
-    project.statistics.repositorySize + project.statistics.lfsObjectsSize;
-  // If a project size is above the default limit, then the remaining
-  // storage value will be calculated on top of the project size as
-  // opposed to the default limit.
-  // This
-  const totalCalculatedStorageLimit =
-    totalCalculatedUsedStorage > project.actualRepositorySizeLimit
-      ? totalCalculatedUsedStorage + purchasedStorageRemaining
-      : project.actualRepositorySizeLimit + purchasedStorageRemaining;
-  return {
-    ...project,
-    totalCalculatedUsedStorage,
-    totalCalculatedStorageLimit,
-  };
-};
-/**
- * Parses projects coming in from GraphQL response
- * and patches each project with purchased related
- * data
- *
- * @param {Array} params.projects list of projects
- * @param {Number} params.additionalPurchasedStorageSize Amt purchased in bytes
- * @param {Number} params.totalRepositorySizeExcess Sum of excess amounts on all projects
- * @returns {Array}
- */
-export const parseProjects = ({
-  projects,
-  additionalPurchasedStorageSize = 0,
-  totalRepositorySizeExcess = 0,
-}) => {
-  const purchasedStorageRemaining = Math.max(
-    0,
-    additionalPurchasedStorageSize - totalRepositorySizeExcess,
-  );
-
-  return projects.nodes.map((project) =>
-    calculateUsedAndRemStorage(project, purchasedStorageRemaining),
-  );
-};
-
-/**
- * This method parses the results from `getStorageCounter`
- * call.
- *
- * `rootStorageStatistics` will be sent as null until an
- * event happens to trigger the storage count.
- * For that reason we have to verify if `storageSize` is sent or
- * if we should render N/A
- *
- * @param {Object} data graphql result
- * @returns {Object}
- */
-export const parseGetStorageResults = (data) => {
-  const {
-    namespace: {
-      projects,
-      storageSizeLimit,
-      totalRepositorySize,
-      containsLockedProjects,
-      totalRepositorySizeExcess,
-      rootStorageStatistics = {},
-      actualRepositorySizeLimit,
-      additionalPurchasedStorageSize,
-      repositorySizeExcessProjectCount,
-    },
-  } = data || {};
-
-  const totalUsage = rootStorageStatistics?.storageSize
-    ? numberToHumanSize(rootStorageStatistics.storageSize)
-    : 'N/A';
-
-  return {
-    projects: {
-      data: parseProjects({
-        projects,
-        additionalPurchasedStorageSize,
-        totalRepositorySizeExcess,
-      }),
-      pageInfo: projects.pageInfo,
-    },
-    additionalPurchasedStorageSize,
-    actualRepositorySizeLimit,
-    containsLockedProjects,
-    repositorySizeExcessProjectCount,
-    totalRepositorySize,
-    totalRepositorySizeExcess,
-    totalUsage,
-    rootStorageStatistics,
-    limit: storageSizeLimit,
-  };
-};

ee/app/assets/javascripts/pages/groups/usage_quotas/index.js

-import otherStorageCounter from 'ee/other_storage_counter';
 import SeatUsageApp from 'ee/seat_usage';
 import storageCounter from 'ee/storage_counter';
 import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';
@@ -24,10 +23,6 @@ const initVueApps = () => {
   if (document.querySelector('#js-storage-counter-app')) {
     storageCounter();
   }
-
-  if (document.querySelector('#js-other-storage-counter-app')) {
-    otherStorageCounter();
-  }
 };
 
 initVueApps();

ee/app/assets/javascripts/pages/profiles/usage_quotas/index.js

 import ciMinutesUsage from 'ee/ci_minutes_usage';
-import otherStorageCounter from 'ee/other_storage_counter';
 import storageCounter from 'ee/storage_counter';
 import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';
 
@@ -14,15 +13,4 @@ if (document.querySelector('#js-storage-counter-app')) {
   });
 }
 
-if (document.querySelector('#js-other-storage-counter-app')) {
-  otherStorageCounter();
-
-  // eslint-disable-next-line no-new
-  new LinkedTabs({
-    defaultAction: '#pipelines-quota-tab',
-    parentEl: '.js-other-storage-tabs',
-    hashedTabs: true,
-  });
-}
-
 ciMinutesUsage();

ee/app/views/groups/usage_quotas/index.html.haml

 - page_title s_("UsageQuota|Usage")
 - url_to_purchase_storage = purchase_storage_url if purchase_storage_link_enabled?(@group)
-- other_storage_enabled = Feature.enabled?(:other_storage_tab, @group)
 
 - if show_product_purchase_success_alert?
   = render 'product_purchase_success_alert', product_name: params[:purchased_product]
@@ -23,10 +22,6 @@
     %li.nav-item
       %a.nav-link#storage-quota{ data: { toggle: "tab", action: '#storage-quota-tab' }, href: '#storage-quota-tab', 'aria-controls': '#storage-quota-tab', 'aria-selected': false }
         = s_('UsageQuota|Storage')
-    - if other_storage_enabled
-      %li.nav-item
-        %a.nav-link#storage-quota{ data: { toggle: "tab", action: '#other-storage-quota-tab' }, href: '#other-storage-quota-tab', 'aria-controls': '#other-storage-quota-tab', 'aria-selected': false }
-          = s_('UsageQuota|Other Storage')
 .tab-content
   .tab-pane#seats-quota-tab
     #js-seat-usage-app{ data: { namespace_id: @group.id, namespace_name: @group.name, seat_usage_export_path: group_seat_usage_path(@group, format: :csv) } }
@@ -35,6 +30,3 @@
       locals: { namespace: @group, projects: @projects }
   .tab-pane#storage-quota-tab
     #js-storage-counter-app{ data: { namespace_path: @group.full_path, help_page_path: help_page_path('user/usage_quotas.md'), purchase_storage_url: url_to_purchase_storage, is_temporary_storage_increase_visible: temporary_storage_increase_visible?(@group).to_s } }
-  - if other_storage_enabled
-    .tab-pane#other-storage-quota-tab
-      #js-other-storage-counter-app{ data: { namespace_path: @group.full_path, help_page_path: help_page_path('user/usage_quotas.md'), purchase_storage_url: url_to_purchase_storage, is_temporary_storage_increase_visible: temporary_storage_increase_visible?(@group).to_s } }

ee/app/views/profiles/usage_quotas/index.html.haml

 - page_title s_("UsageQuota|Usage")
 - @content_class = "limit-container-width" unless fluid_layout
 - url_to_purchase_storage = purchase_storage_url if purchase_storage_link_enabled?(@namespace)
-- other_storage_enabled = Feature.enabled?(:other_storage_tab, @namespace)
 
 %h3.page-title
   = s_('UsageQuota|Usage Quotas')
@@ -18,16 +17,9 @@
     %li.nav-item
       %a.nav-link#storage-quota{ data: { toggle: "tab", action: '#storage-quota-tab' }, href: '#storage-quota-tab', 'aria-controls': '#storage-quota-tab', 'aria-selected': false }
         = s_('UsageQuota|Storage')
-    - if other_storage_enabled
-      %li.nav-item
-        %a.nav-link#storage-quota{ data: { toggle: "tab", action: '#other-storage-quota-tab' }, href: '#other-storage-quota-tab', 'aria-controls': '#other-storage-quota-tab', 'aria-selected': false }
-          = s_('UsageQuota|Other Storage')
 .tab-content
   .tab-pane#pipelines-quota-tab
     = render "namespaces/pipelines_quota/list",
       locals: { namespace: @namespace, projects: @projects }
   .tab-pane#storage-quota-tab
     #js-storage-counter-app{ data: { namespace_path: @namespace.full_path, help_page_path: help_page_path('user/usage_quotas.md'), purchase_storage_url: url_to_purchase_storage, is_temporary_storage_increase_visible: temporary_storage_increase_visible?(@namespace).to_s } }
-  - if other_storage_enabled
-    .tab-pane#other-storage-quota-tab
-      #js-other-storage-counter-app{ data: { namespace_path: @namespace.full_path, help_page_path: help_page_path('user/usage_quotas.md'), purchase_storage_url: url_to_purchase_storage, is_temporary_storage_increase_visible: temporary_storage_increase_visible?(@namespace).to_s } }

ee/app/workers/all_queues.yml

@@ -894,7 +894,7 @@
   :tags: []
 - :name: analytics_code_review_metrics
   :worker_name: Analytics::CodeReviewMetricsWorker
-  :feature_category: :code_analytics
+  :feature_category: :value_stream_management
   :has_external_dependencies:
   :urgency: :low
   :resource_boundary: :unknown

ee/app/workers/analytics/code_review_metrics_worker.rb

@@ -8,7 +8,7 @@ module Analytics
 
     sidekiq_options retry: 3
 
-    feature_category :code_analytics
+    feature_category :value_stream_management
     idempotent!
     loggable_arguments 0
 

ee/lib/ee/gitlab/background_migration/migrate_approver_to_approval_rules.rb

@@ -59,7 +59,7 @@ module EE
           end
 
           def self.safe_find_or_create_by(*args)
-            safe_ensure_unique(retries: 1) do
+            safe_ensure_unique(retries: 1) do # rubocop:disable Performance/ActiveRecordSubtransactionMethods
               find_or_create_by(*args)
             end
           end

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

-import { mount } from '@vue/test-utils';
-import StorageApp from 'ee/other_storage_counter/components/app.vue';
-import Project from 'ee/other_storage_counter/components/project.vue';
-import ProjectsTable from 'ee/other_storage_counter/components/projects_table.vue';
-import StorageInlineAlert from 'ee/other_storage_counter/components/storage_inline_alert.vue';
-import TemporaryStorageIncreaseModal from 'ee/other_storage_counter/components/temporary_storage_increase_modal.vue';
-import UsageGraph from 'ee/other_storage_counter/components/usage_graph.vue';
-import UsageStatistics from 'ee/other_storage_counter/components/usage_statistics.vue';
-import { formatUsageSize } from 'ee/other_storage_counter/utils';
-import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
-import { namespaceData, withRootStorageStatistics } from '../mock_data';
-
-const TEST_LIMIT = 1000;
-
-describe('Storage counter app', () => {
-  let wrapper;
-
-  const findTotalUsage = () => wrapper.find("[data-testid='total-usage']");
-  const findPurchaseStorageLink = () => wrapper.find("[data-testid='purchase-storage-link']");
-  const findTemporaryStorageIncreaseButton = () =>
-    wrapper.find("[data-testid='temporary-storage-increase-button']");
-  const findUsageGraph = () => wrapper.find(UsageGraph);
-  const findUsageStatistics = () => wrapper.find(UsageStatistics);
-  const findStorageInlineAlert = () => wrapper.find(StorageInlineAlert);
-  const findProjectsTable = () => wrapper.find(ProjectsTable);
-  const findPrevButton = () => wrapper.find('[data-testid="prevButton"]');
-  const findNextButton = () => wrapper.find('[data-testid="nextButton"]');
-
-  const createComponent = ({
-    props = {},
-    loading = false,
-    additionalRepoStorageByNamespace = false,
-    namespace = {},
-  } = {}) => {
-    const $apollo = {
-      queries: {
-        namespace: {
-          loading,
-        },
-      },
-    };
-
-    wrapper = mount(StorageApp, {
-      propsData: { namespacePath: 'h5bp', helpPagePath: 'help', ...props },
-      mocks: { $apollo },
-      directives: {
-        GlModalDirective: createMockDirective(),
-      },
-      provide: {
-        glFeatures: {
-          additionalRepoStorageByNamespace,
-        },
-      },
-      data() {
-        return {
-          namespace,
-        };
-      },
-    });
-  };
-
-  beforeEach(() => {
-    createComponent();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('renders the 2 projects', async () => {
-    wrapper.setData({
-      namespace: namespaceData,
-    });
-
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.findAll(Project)).toHaveLength(3);
-  });
-
-  describe('limit', () => {
-    it('when limit is set it renders limit information', async () => {
-      wrapper.setData({
-        namespace: namespaceData,
-      });
-
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.text()).toContain(formatUsageSize(namespaceData.limit));
-    });
-
-    it('when limit is 0 it does not render limit information', async () => {
-      wrapper.setData({
-        namespace: { ...namespaceData, limit: 0 },
-      });
-
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.text()).not.toContain(formatUsageSize(0));
-    });
-  });
-
-  describe('with rootStorageStatistics information', () => {
-    it('renders total usage', async () => {
-      wrapper.setData({
-        namespace: withRootStorageStatistics,
-      });
-
-      await wrapper.vm.$nextTick();
-
-      expect(findTotalUsage().text()).toContain(withRootStorageStatistics.totalUsage);
-    });
-  });
-
-  describe('with additional_repo_storage_by_namespace feature', () => {
-    it('usage_graph component hidden is when feature is false', async () => {
-      wrapper.setData({
-        namespace: withRootStorageStatistics,
-      });
-
-      await wrapper.vm.$nextTick();
-
-      expect(findUsageGraph().exists()).toBe(true);
-      expect(findUsageStatistics().exists()).toBe(false);
-      expect(findStorageInlineAlert().exists()).toBe(false);
-    });
-
-    it('usage_statistics component is rendered when feature is true', async () => {
-      createComponent({
-        additionalRepoStorageByNamespace: true,
-        namespace: withRootStorageStatistics,
-      });
-
-      await wrapper.vm.$nextTick();
-
-      expect(findUsageStatistics().exists()).toBe(true);
-      expect(findUsageGraph().exists()).toBe(false);
-      expect(findStorageInlineAlert().exists()).toBe(true);
-    });
-  });
-
-  describe('without rootStorageStatistics information', () => {
-    it('renders N/A', async () => {
-      wrapper.setData({
-        namespace: namespaceData,
-      });
-
-      await wrapper.vm.$nextTick();
-
-      expect(findTotalUsage().text()).toContain('N/A');
-    });
-  });
-
-  describe('purchase storage link', () => {
-    describe('when purchaseStorageUrl is not set', () => {
-      it('does not render an additional link', () => {
-        expect(findPurchaseStorageLink().exists()).toBe(false);
-      });
-    });
-
-    describe('when purchaseStorageUrl is set', () => {
-      beforeEach(() => {
-        createComponent({ props: { purchaseStorageUrl: 'customers.gitlab.com' } });
-      });
-
-      it('does render link', () => {
-        const link = findPurchaseStorageLink();
-
-        expect(link).toExist();
-        expect(link.attributes('href')).toBe('customers.gitlab.com');
-      });
-    });
-  });
-
-  describe('temporary storage increase', () => {
-    describe.each`
-      props                                             | isVisible
-      ${{}}                                             | ${false}
-      ${{ isTemporaryStorageIncreaseVisible: 'false' }} | ${false}
-      ${{ isTemporaryStorageIncreaseVisible: 'true' }}  | ${true}
-    `('with $props', ({ props, isVisible }) => {
-      beforeEach(() => {
-        createComponent({ props });
-      });
-
-      it(`renders button = ${isVisible}`, () => {
-        expect(findTemporaryStorageIncreaseButton().exists()).toBe(isVisible);
-      });
-    });
-
-    describe('when temporary storage increase is visible', () => {
-      beforeEach(() => {
-        createComponent({ props: { isTemporaryStorageIncreaseVisible: 'true' } });
-        wrapper.setData({
-          namespace: {
-            ...namespaceData,
-            limit: TEST_LIMIT,
-          },
-        });
-      });
-
-      it('binds button to modal', () => {
-        const { value } = getBinding(
-          findTemporaryStorageIncreaseButton().element,
-          'gl-modal-directive',
-        );
-
-        // Check for truthiness so we're assured we're not comparing two undefineds
-        expect(value).toBeTruthy();
-        expect(value).toEqual(StorageApp.modalId);
-      });
-
-      it('renders modal', () => {
-        expect(wrapper.find(TemporaryStorageIncreaseModal).props()).toEqual({
-          limit: formatUsageSize(TEST_LIMIT),
-          modalId: StorageApp.modalId,
-        });
-      });
-    });
-  });
-
-  describe('filtering projects', () => {
-    beforeEach(() => {
-      createComponent({
-        additionalRepoStorageByNamespace: true,
-        namespace: withRootStorageStatistics,
-      });
-    });
-
-    const sampleSearchTerm = 'GitLab';
-    const sampleShortSearchTerm = '12';
-
-    it('triggers search if user enters search input', () => {
-      expect(wrapper.vm.searchTerm).toBe('');
-
-      findProjectsTable().vm.$emit('search', sampleSearchTerm);
-
-      expect(wrapper.vm.searchTerm).toBe(sampleSearchTerm);
-    });
-
-    it('triggers search if user clears the entered search input', () => {
-      const projectsTable = findProjectsTable();
-
-      expect(wrapper.vm.searchTerm).toBe('');
-
-      projectsTable.vm.$emit('search', sampleSearchTerm);
-
-      expect(wrapper.vm.searchTerm).toBe(sampleSearchTerm);
-
-      projectsTable.vm.$emit('search', '');
-
-      expect(wrapper.vm.searchTerm).toBe('');
-    });
-
-    it('does not trigger search if user enters short search input', () => {
-      expect(wrapper.vm.searchTerm).toBe('');
-
-      findProjectsTable().vm.$emit('search', sampleShortSearchTerm);
-
-      expect(wrapper.vm.searchTerm).toBe('');
-    });
-  });
-
-  describe('renders projects table pagination component', () => {
-    const namespaceWithPageInfo = {
-      namespace: {
-        ...withRootStorageStatistics,
-        projects: {
-          ...withRootStorageStatistics.projects,
-          pageInfo: {
-            hasPreviousPage: false,
-            hasNextPage: true,
-          },
-        },
-      },
-    };
-    beforeEach(() => {
-      createComponent(namespaceWithPageInfo);
-    });
-
-    it('with disabled "Prev" button', () => {
-      expect(findPrevButton().attributes().disabled).toBe('disabled');
-    });
-
-    it('with enabled "Next" button', () => {
-      expect(findNextButton().attributes().disabled).toBeUndefined();
-    });
-  });
-});

ee/spec/frontend/other_storage_counter/components/project_spec.js

-import { shallowMount } from '@vue/test-utils';
-import Project from 'ee/other_storage_counter/components/project.vue';
-import StorageRow from 'ee/other_storage_counter/components/storage_row.vue';
-import { numberToHumanSize } from '~/lib/utils/number_utils';
-import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
-import { projects } from '../mock_data';
-
-let wrapper;
-const createComponent = () => {
-  wrapper = shallowMount(Project, {
-    propsData: {
-      project: projects[1],
-    },
-  });
-};
-
-const findTableRow = () => wrapper.find('[data-testid="projectTableRow"]');
-const findStorageRow = () => wrapper.find(StorageRow);
-
-describe('Storage Counter project component', () => {
-  beforeEach(() => {
-    createComponent();
-  });
-
-  it('renders project avatar', () => {
-    expect(wrapper.find(ProjectAvatar).exists()).toBe(true);
-  });
-
-  it('renders project name', () => {
-    expect(wrapper.text()).toContain(projects[1].nameWithNamespace);
-  });
-
-  it('renders formatted storage size', () => {
-    expect(wrapper.text()).toContain(numberToHumanSize(projects[1].statistics.storageSize));
-  });
-
-  describe('toggle row', () => {
-    describe('on click', () => {
-      it('toggles isOpen', () => {
-        expect(findStorageRow().exists()).toBe(false);
-
-        findTableRow().trigger('click');
-
-        wrapper.vm.$nextTick(() => {
-          expect(findStorageRow().exists()).toBe(true);
-          findTableRow().trigger('click');
-
-          wrapper.vm.$nextTick(() => {
-            expect(findStorageRow().exists()).toBe(false);
-          });
-        });
-      });
-    });
-  });
-});

ee/spec/frontend/other_storage_counter/components/project_with_excess_storage_spec.js

-import { GlIcon, GlLink } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import ProjectWithExcessStorage from 'ee/other_storage_counter/components/project_with_excess_storage.vue';
-import { formatUsageSize } from 'ee/other_storage_counter/utils';
-import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
-import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
-import { projects } from '../mock_data';
-
-let wrapper;
-
-const createComponent = (propsData = {}) => {
-  wrapper = shallowMount(ProjectWithExcessStorage, {
-    propsData: {
-      project: projects[0],
-      additionalPurchasedStorageSize: 0,
-      ...propsData,
-    },
-    directives: {
-      GlTooltip: createMockDirective(),
-    },
-  });
-};
-
-const findTableRow = () => wrapper.find('[data-testid="projectTableRow"]');
-const findWarningIcon = () =>
-  wrapper.findAll(GlIcon).wrappers.find((w) => w.props('name') === 'status_warning');
-const findProjectLink = () => wrapper.find(GlLink);
-const getWarningIconTooltipText = () => getBinding(findWarningIcon().element, 'gl-tooltip').value;
-
-describe('Storage Counter project component', () => {
-  beforeEach(() => {
-    createComponent();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('without extra storage purchased', () => {
-    it('renders project avatar', () => {
-      expect(wrapper.find(ProjectAvatar).exists()).toBe(true);
-    });
-
-    it('renders project name', () => {
-      expect(wrapper.text()).toContain(projects[0].nameWithNamespace);
-    });
-
-    it('renders formatted storage size', () => {
-      expect(wrapper.text()).toContain(formatUsageSize(projects[0].statistics.storageSize));
-    });
-
-    it('does not render the warning icon if project is not in error state', () => {
-      expect(findWarningIcon()).toBe(undefined);
-    });
-
-    it('render row without error state background', () => {
-      expect(findTableRow().classes('gl-bg-red-50')).toBe(false);
-    });
-
-    describe('renders the row in error state', () => {
-      beforeEach(() => {
-        createComponent({ project: projects[2] });
-      });
-
-      it('with error state background', () => {
-        expect(findTableRow().classes('gl-bg-red-50')).toBe(true);
-      });
-
-      it('with project link in error state', () => {
-        expect(findProjectLink().classes('gl-text-red-500!')).toBe(true);
-      });
-
-      it('with error icon', () => {
-        expect(findWarningIcon().exists()).toBe(true);
-      });
-
-      it('with tooltip', () => {
-        expect(getWarningIconTooltipText().title).toBe(
-          'This project is locked because it is using 97.7KiB of free storage and there is no purchased storage available.',
-        );
-      });
-    });
-
-    describe('renders the row in warning state', () => {
-      beforeEach(() => {
-        createComponent({ project: projects[1] });
-      });
-
-      it('with warning state background', () => {
-        expect(findTableRow().classes('gl-bg-orange-50')).toBe(true);
-      });
-
-      it('with project link in default gray state', () => {
-        expect(findProjectLink().classes('gl-text-gray-900!')).toBe(true);
-      });
-
-      it('with warning icon', () => {
-        expect(findWarningIcon().exists()).toBe(true);
-      });
-
-      it('with tooltip', () => {
-        expect(getWarningIconTooltipText().title).toBe(
-          'This project is near the free 97.7KiB limit and at risk of being locked.',
-        );
-      });
-    });
-  });
-
-  describe('with extra storage purchased', () => {
-    describe('if projects is in error state', () => {
-      beforeEach(() => {
-        createComponent({
-          project: projects[2],
-          additionalPurchasedStorageSize: 100000,
-        });
-      });
-
-      afterEach(() => {
-        wrapper.destroy();
-      });
-
-      it('renders purchased storage specific error tooltip ', () => {
-        expect(getWarningIconTooltipText().title).toBe(
-          'This project is locked because it used 97.7KiB of free storage and all the purchased storage.',
-        );
-      });
-    });
-
-    describe('if projects is in warning state', () => {
-      beforeEach(() => {
-        createComponent({
-          project: projects[1],
-          additionalPurchasedStorageSize: 100000,
-        });
-      });
-
-      afterEach(() => {
-        wrapper.destroy();
-      });
-
-      it('renders purchased storage specific warning tooltip ', () => {
-        expect(getWarningIconTooltipText().title).toBe(
-          'This project is at risk of being locked because purchased storage is running low.',
-        );
-      });
-    });
-  });
-});

ee/spec/frontend/other_storage_counter/components/projects_skeleton_loader_spec.js

-import { mount } from '@vue/test-utils';
-import ProjectsSkeletonLoader from 'ee/other_storage_counter/components/projects_skeleton_loader.vue';
-
-describe('ProjectsSkeletonLoader', () => {
-  let wrapper;
-
-  const createComponent = (props = {}) => {
-    wrapper = mount(ProjectsSkeletonLoader, {
-      propsData: {
-        ...props,
-      },
-    });
-  };
-
-  const findDesktopLoader = () => wrapper.find('[data-testid="desktop-loader"]');
-  const findMobileLoader = () => wrapper.find('[data-testid="mobile-loader"]');
-
-  beforeEach(createComponent);
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  describe('desktop loader', () => {
-    it('produces 20 rows', () => {
-      expect(findDesktopLoader().findAll('rect[width="1000"]')).toHaveLength(20);
-    });
-
-    it('has the correct classes', () => {
-      expect(findDesktopLoader().classes()).toEqual([
-        'gl-display-none',
-        'gl-md-display-flex',
-        'gl-flex-direction-column',
-      ]);
-    });
-  });
-
-  describe('mobile loader', () => {
-    it('produces 5 rows', () => {
-      expect(findMobileLoader().findAll('rect[height="172"]')).toHaveLength(5);
-    });
-
-    it('has the correct classes', () => {
-      expect(findMobileLoader().classes()).toEqual([
-        'gl-flex-direction-column',
-        'gl-md-display-none',
-      ]);
-    });
-  });
-});

ee/spec/frontend/other_storage_counter/components/projects_table_spec.js

-import { shallowMount } from '@vue/test-utils';
-import Project from 'ee/other_storage_counter/components/project.vue';
-import ProjectWithExcessStorage from 'ee/other_storage_counter/components/project_with_excess_storage.vue';
-import ProjectsTable from 'ee/other_storage_counter/components/projects_table.vue';
-import { projects } from '../mock_data';
-
-let wrapper;
-
-const createComponent = ({ additionalRepoStorageByNamespace = false } = {}) => {
-  const stubs = {
-    'anonymous-stub': additionalRepoStorageByNamespace ? ProjectWithExcessStorage : Project,
-  };
-
-  wrapper = shallowMount(ProjectsTable, {
-    propsData: {
-      projects,
-      additionalPurchasedStorageSize: 0,
-    },
-    stubs,
-    provide: {
-      glFeatures: {
-        additionalRepoStorageByNamespace,
-      },
-    },
-  });
-};
-
-const findTableRows = () => wrapper.findAll(Project);
-const findTableRowsWithExcessStorage = () => wrapper.findAll(ProjectWithExcessStorage);
-
-describe('Usage Quotas project table component', () => {
-  beforeEach(() => {
-    createComponent();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('renders regular project rows by default', () => {
-    expect(findTableRows()).toHaveLength(3);
-    expect(findTableRowsWithExcessStorage()).toHaveLength(0);
-  });
-
-  describe('with additional repo storage feature flag ', () => {
-    beforeEach(() => {
-      createComponent({ additionalRepoStorageByNamespace: true });
-    });
-
-    it('renders table row with excess storage', () => {
-      expect(findTableRowsWithExcessStorage()).toHaveLength(3);
-    });
-
-    it('renders excess storage rows with error state', () => {
-      const rowsWithError = findTableRowsWithExcessStorage().filter((r) =>
-        r.classes('gl-bg-red-50'),
-      );
-      expect(rowsWithError).toHaveLength(1);
-    });
-  });
-});

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

-import { GlAlert } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import StorageInlineAlert from 'ee/other_storage_counter/components/storage_inline_alert.vue';
-
-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;
-const THREE_GB_IN_BYTES = 3 * GB_IN_BYTES;
-
-describe('StorageInlineAlert', () => {
-  let wrapper;
-
-  function mountComponent(props) {
-    wrapper = shallowMount(StorageInlineAlert, {
-      propsData: props,
-    });
-  }
-
-  const findAlert = () => wrapper.find(GlAlert);
-
-  describe('no excess storage and no purchase', () => {
-    beforeEach(() => {
-      mountComponent({
-        containsLockedProjects: false,
-        repositorySizeExcessProjectCount: 0,
-        totalRepositorySizeExcess: 0,
-        totalRepositorySize: FIVE_GB_IN_BYTES,
-        additionalPurchasedStorageSize: 0,
-        actualRepositorySizeLimit: TEN_GB_IN_BYTES,
-      });
-    });
-
-    it('does not render an alert', () => {
-      expect(findAlert().exists()).toBe(false);
-    });
-  });
-
-  describe('excess storage and no purchase', () => {
-    beforeEach(() => {
-      mountComponent({
-        containsLockedProjects: true,
-        repositorySizeExcessProjectCount: 1,
-        totalRepositorySizeExcess: THREE_GB_IN_BYTES,
-        totalRepositorySize: THIRTEEN_GB_IN_BYTES,
-        additionalPurchasedStorageSize: 0,
-        actualRepositorySizeLimit: TEN_GB_IN_BYTES,
-      });
-    });
-
-    it('renders danger variant alert', () => {
-      expect(findAlert().exists()).toBe(true);
-      expect(findAlert().props('variant')).toBe('danger');
-    });
-
-    it('renders human readable repositoryFreeLimit', () => {
-      expect(findAlert().text()).toBe(
-        'You have reached the free storage limit of 10.0GiB on 1 project. To unlock them, please purchase additional storage.',
-      );
-    });
-  });
-
-  describe('excess storage below purchase limit', () => {
-    beforeEach(() => {
-      mountComponent({
-        containsLockedProjects: false,
-        repositorySizeExcessProjectCount: 0,
-        totalRepositorySizeExcess: THREE_GB_IN_BYTES,
-        totalRepositorySize: THIRTEEN_GB_IN_BYTES,
-        additionalPurchasedStorageSize: FIVE_GB_IN_BYTES,
-        actualRepositorySizeLimit: TEN_GB_IN_BYTES,
-      });
-    });
-
-    it('renders info variant alert', () => {
-      expect(findAlert().exists()).toBe(true);
-      expect(findAlert().props('variant')).toBe('info');
-    });
-
-    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 10.0GiB limit.',
-      );
-    });
-  });
-
-  describe('excess storage above purchase limit', () => {
-    beforeEach(() => {
-      mountComponent({
-        containsLockedProjects: true,
-        repositorySizeExcessProjectCount: 1,
-        totalRepositorySizeExcess: THREE_GB_IN_BYTES,
-        totalRepositorySize: THIRTEEN_GB_IN_BYTES,
-        additionalPurchasedStorageSize: THREE_GB_IN_BYTES,
-        actualRepositorySizeLimit: TEN_GB_IN_BYTES,
-      });
-    });
-
-    it('renders danger alert', () => {
-      expect(findAlert().exists()).toBe(true);
-      expect(findAlert().props('variant')).toBe('danger');
-    });
-  });
-});

ee/spec/frontend/other_storage_counter/components/storage_row_spec.js

-import { shallowMount } from '@vue/test-utils';
-import StorageRow from 'ee/other_storage_counter/components/storage_row.vue';
-import { numberToHumanSize } from '~/lib/utils/number_utils';
-
-let wrapper;
-const data = {
-  name: 'LFS Package',
-  value: 1293346,
-};
-
-function factory({ name, value }) {
-  wrapper = shallowMount(StorageRow, {
-    propsData: {
-      name,
-      value,
-    },
-  });
-}
-
-describe('Storage Counter row component', () => {
-  beforeEach(() => {
-    factory(data);
-  });
-
-  it('renders provided name', () => {
-    expect(wrapper.text()).toContain(data.name);
-  });
-
-  it('renders formatted value', () => {
-    expect(wrapper.text()).toContain(numberToHumanSize(data.value));
-  });
-});

ee/spec/frontend/other_storage_counter/components/temporary_storage_increase_modal_spec.js

-import { GlModal } from '@gitlab/ui';
-import { mount, shallowMount } from '@vue/test-utils';
-import TemporaryStorageIncreaseModal from 'ee/other_storage_counter/components/temporary_storage_increase_modal.vue';
-
-const TEST_LIMIT = '8 bytes';
-const TEST_MODAL_ID = 'test-modal-id';
-
-describe('Temporary storage increase modal', () => {
-  let wrapper;
-
-  const createComponent = (mountFn, props = {}) => {
-    wrapper = mountFn(TemporaryStorageIncreaseModal, {
-      propsData: {
-        modalId: TEST_MODAL_ID,
-        limit: TEST_LIMIT,
-        ...props,
-      },
-    });
-  };
-  const findModal = () => wrapper.find(GlModal);
-  const showModal = () => {
-    findModal().vm.show();
-    return wrapper.vm.$nextTick();
-  };
-  const findModalText = () => document.body.innerText;
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  it('shows modal message', async () => {
-    createComponent(mount);
-
-    await showModal();
-
-    const text = findModalText();
-    expect(text).toContain('GitLab allows you a free, one-time storage increase.');
-    expect(text).toContain(`your original storage limit of ${TEST_LIMIT} applies.`);
-  });
-
-  it('passes along modalId', () => {
-    createComponent(shallowMount);
-
-    expect(findModal().attributes('modalid')).toBe(TEST_MODAL_ID);
-  });
-});

ee/spec/frontend/other_storage_counter/components/usage_graph_spec.js

-import { shallowMount } from '@vue/test-utils';
-import UsageGraph from 'ee/other_storage_counter/components/usage_graph.vue';
-import { numberToHumanSize } from '~/lib/utils/number_utils';
-
-let data;
-let wrapper;
-
-function mountComponent({ rootStorageStatistics, limit }) {
-  wrapper = shallowMount(UsageGraph, {
-    propsData: {
-      rootStorageStatistics,
-      limit,
-    },
-  });
-}
-function findStorageTypeUsagesSerialized() {
-  return wrapper
-    .findAll('[data-testid="storage-type-usage"]')
-    .wrappers.map((wp) => wp.element.style.flex);
-}
-
-describe('Storage Counter usage graph component', () => {
-  beforeEach(() => {
-    data = {
-      rootStorageStatistics: {
-        wikiSize: 5000,
-        repositorySize: 4000,
-        packagesSize: 3000,
-        lfsObjectsSize: 2000,
-        buildArtifactsSize: 500,
-        pipelineArtifactsSize: 500,
-        snippetsSize: 2000,
-        storageSize: 17000,
-        uploadsSize: 1000,
-      },
-      limit: 2000,
-    };
-    mountComponent(data);
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('renders the legend in order', () => {
-    const types = wrapper.findAll('[data-testid="storage-type-legend"]');
-
-    const {
-      buildArtifactsSize,
-      pipelineArtifactsSize,
-      lfsObjectsSize,
-      packagesSize,
-      repositorySize,
-      wikiSize,
-      snippetsSize,
-      uploadsSize,
-    } = data.rootStorageStatistics;
-
-    expect(types.at(0).text()).toMatchInterpolatedText(`Wikis ${numberToHumanSize(wikiSize)}`);
-    expect(types.at(1).text()).toMatchInterpolatedText(
-      `Repositories ${numberToHumanSize(repositorySize)}`,
-    );
-    expect(types.at(2).text()).toMatchInterpolatedText(
-      `Packages ${numberToHumanSize(packagesSize)}`,
-    );
-    expect(types.at(3).text()).toMatchInterpolatedText(
-      `LFS Objects ${numberToHumanSize(lfsObjectsSize)}`,
-    );
-    expect(types.at(4).text()).toMatchInterpolatedText(
-      `Snippets ${numberToHumanSize(snippetsSize)}`,
-    );
-    expect(types.at(5).text()).toMatchInterpolatedText(
-      `Artifacts ${numberToHumanSize(buildArtifactsSize + pipelineArtifactsSize)}`,
-    );
-    expect(types.at(6).text()).toMatchInterpolatedText(`Uploads ${numberToHumanSize(uploadsSize)}`);
-  });
-
-  describe('when storage type is not used', () => {
-    beforeEach(() => {
-      data.rootStorageStatistics.wikiSize = 0;
-      mountComponent(data);
-    });
-
-    it('filters the storage type', () => {
-      expect(wrapper.text()).not.toContain('Wikis');
-    });
-  });
-
-  describe('when there is no storage usage', () => {
-    beforeEach(() => {
-      data.rootStorageStatistics.storageSize = 0;
-      mountComponent(data);
-    });
-
-    it('it does not render', () => {
-      expect(wrapper.html()).toEqual('');
-    });
-  });
-
-  describe('when limit is 0', () => {
-    beforeEach(() => {
-      data.limit = 0;
-      mountComponent(data);
-    });
-
-    it('sets correct flex values', () => {
-      expect(findStorageTypeUsagesSerialized()).toStrictEqual([
-        '0.29411764705882354',
-        '0.23529411764705882',
-        '0.17647058823529413',
-        '0.11764705882352941',
-        '0.11764705882352941',
-        '0.058823529411764705',
-        '0.058823529411764705',
-      ]);
-    });
-  });
-
-  describe('when storage exceeds limit', () => {
-    beforeEach(() => {
-      data.limit = data.rootStorageStatistics.storageSize - 1;
-      mountComponent(data);
-    });
-
-    it('it does render correclty', () => {
-      expect(findStorageTypeUsagesSerialized()).toStrictEqual([
-        '0.29411764705882354',
-        '0.23529411764705882',
-        '0.17647058823529413',
-        '0.11764705882352941',
-        '0.11764705882352941',
-        '0.058823529411764705',
-        '0.058823529411764705',
-      ]);
-    });
-  });
-});

ee/spec/frontend/other_storage_counter/components/usage_statistics_spec.js

-import { GlButton, GlLink, GlSprintf } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import UsageStatistics from 'ee/other_storage_counter/components/usage_statistics.vue';
-import UsageStatisticsCard from 'ee/other_storage_counter/components/usage_statistics_card.vue';
-import { withRootStorageStatistics } from '../mock_data';
-
-describe('Usage Statistics component', () => {
-  let wrapper;
-
-  const createComponent = (props = {}) => {
-    wrapper = shallowMount(UsageStatistics, {
-      propsData: {
-        rootStorageStatistics: {
-          totalRepositorySize: withRootStorageStatistics.totalRepositorySize,
-          actualRepositorySizeLimit: withRootStorageStatistics.actualRepositorySizeLimit,
-          totalRepositorySizeExcess: withRootStorageStatistics.totalRepositorySizeExcess,
-          additionalPurchasedStorageSize: withRootStorageStatistics.additionalPurchasedStorageSize,
-        },
-        ...props,
-      },
-      stubs: {
-        UsageStatisticsCard,
-        GlSprintf,
-        GlLink,
-      },
-    });
-  };
-
-  const getStatisticsCards = () => wrapper.findAll(UsageStatisticsCard);
-  const getStatisticsCard = (testId) => wrapper.find(`[data-testid="${testId}"]`);
-  const findGlLinkInCard = (cardName) =>
-    getStatisticsCard(cardName).find('[data-testid="statistics-card-footer"]').find(GlLink);
-
-  describe('with purchaseStorageUrl passed', () => {
-    beforeEach(() => {
-      createComponent({
-        purchaseStorageUrl: 'some-fancy-url',
-      });
-    });
-
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
-    it('renders three statistics cards', () => {
-      expect(getStatisticsCards()).toHaveLength(3);
-    });
-
-    it('renders URL in total usage card footer', () => {
-      const url = findGlLinkInCard('total-usage');
-
-      expect(url.attributes('href')).toBe('/help/user/usage_quotas');
-    });
-
-    it('renders URL in excess usage card footer', () => {
-      const url = findGlLinkInCard('excess-usage');
-
-      expect(url.attributes('href')).toBe('/help/user/usage_quotas#excess-storage-usage');
-    });
-
-    it('renders button in purchased usage card footer', () => {
-      expect(getStatisticsCard('purchased-usage').find(GlButton).exists()).toBe(true);
-    });
-  });
-
-  describe('with no purchaseStorageUrl', () => {
-    beforeEach(() => {
-      createComponent({
-        purchaseStorageUrl: null,
-      });
-    });
-
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
-    it('does not render purchased usage card if purchaseStorageUrl is not provided', () => {
-      expect(getStatisticsCard('purchased-usage').exists()).toBe(false);
-    });
-  });
-});

ee/spec/frontend/other_storage_counter/mock_data.js

-export const projects = [
-  {
-    id: '24',
-    fullPath: 'h5bp/dummy-project',
-    nameWithNamespace: 'H5bp / dummy project',
-    avatarUrl: null,
-    webUrl: 'http://localhost:3001/h5bp/dummy-project',
-    name: 'dummy project',
-    statistics: {
-      commitCount: 1,
-      storageSize: 41943,
-      repositorySize: 41943,
-      lfsObjectsSize: 0,
-      buildArtifactsSize: 0,
-      packagesSize: 0,
-    },
-    actualRepositorySizeLimit: 100000,
-    totalCalculatedUsedStorage: 41943,
-    totalCalculatedStorageLimit: 41943000,
-  },
-  {
-    id: '8',
-    fullPath: 'h5bp/html5-boilerplate',
-    nameWithNamespace: 'H5bp / Html5 Boilerplate',
-    avatarUrl: null,
-    webUrl: 'http://localhost:3001/h5bp/html5-boilerplate',
-    name: 'Html5 Boilerplate',
-    statistics: {
-      commitCount: 0,
-      storageSize: 99000,
-      repositorySize: 0,
-      lfsObjectsSize: 0,
-      buildArtifactsSize: 1272375,
-      packagesSize: 0,
-    },
-    actualRepositorySizeLimit: 100000,
-    totalCalculatedUsedStorage: 89000,
-    totalCalculatedStorageLimit: 99430,
-  },
-  {
-    id: '80',
-    fullPath: 'twit/twitter',
-    nameWithNamespace: 'Twitter',
-    avatarUrl: null,
-    webUrl: 'http://localhost:3001/twit/twitter',
-    name: 'Twitter',
-    statistics: {
-      commitCount: 0,
-      storageSize: 12933460,
-      repositorySize: 209710,
-      lfsObjectsSize: 209720,
-      buildArtifactsSize: 1272375,
-      packagesSize: 0,
-    },
-    actualRepositorySizeLimit: 100000,
-    totalCalculatedUsedStorage: 13143170,
-    totalCalculatedStorageLimit: 12143170,
-  },
-];
-
-export const namespaceData = {
-  totalUsage: 'N/A',
-  limit: 10000000,
-  projects: { data: projects },
-};
-
-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,
-    lfsObjectsSize: 4329334601203,
-    buildArtifactsSize: 1272375,
-    packagesSize: 123123120,
-    wikiSize: 1000,
-    snippetsSize: 10000,
-  },
-};
-
-export const mockGetStorageCounterGraphQLResponse = {
-  nodes: projects.map((node) => node),
-};

ee/spec/frontend/other_storage_counter/utils_spec.js

-import {
-  usageRatioToThresholdLevel,
-  formatUsageSize,
-  parseProjects,
-  calculateUsedAndRemStorage,
-} from 'ee/other_storage_counter/utils';
-import { projects as mockProjectsData, mockGetStorageCounterGraphQLResponse } from './mock_data';
-
-describe('UsageThreshold', () => {
-  it.each`
-    usageRatio | expectedLevel
-    ${0}       | ${'none'}
-    ${0.4}     | ${'none'}
-    ${0.5}     | ${'info'}
-    ${0.9}     | ${'warning'}
-    ${0.99}    | ${'alert'}
-    ${1}       | ${'error'}
-    ${1.5}     | ${'error'}
-  `('returns $expectedLevel from $usageRatio', ({ usageRatio, expectedLevel }) => {
-    expect(usageRatioToThresholdLevel(usageRatio)).toBe(expectedLevel);
-  });
-});
-
-describe('formatUsageSize', () => {
-  it.each`
-    input             | expected
-    ${0}              | ${'0.0KiB'}
-    ${999}            | ${'1.0KiB'}
-    ${1000}           | ${'1.0KiB'}
-    ${10240}          | ${'10.0KiB'}
-    ${1024 * 10 ** 5} | ${'97.7MiB'}
-    ${10 ** 6}        | ${'976.6KiB'}
-    ${1024 * 10 ** 6} | ${'976.6MiB'}
-    ${10 ** 8}        | ${'95.4MiB'}
-    ${1024 * 10 ** 8} | ${'95.4GiB'}
-    ${10 ** 10}       | ${'9.3GiB'}
-    ${10 ** 12}       | ${'931.3GiB'}
-    ${10 ** 15}       | ${'909.5TiB'}
-  `('returns $expected from $input', ({ input, expected }) => {
-    expect(formatUsageSize(input)).toBe(expected);
-  });
-});
-
-describe('calculateUsedAndRemStorage', () => {
-  it.each`
-    description                                       | project                | purchasedStorageRemaining | totalCalculatedUsedStorage | totalCalculatedStorageLimit
-    ${'project within limit and purchased 0'}         | ${mockProjectsData[0]} | ${0}                      | ${41943}                   | ${100000}
-    ${'project within limit and purchased 10000'}     | ${mockProjectsData[0]} | ${100000}                 | ${41943}                   | ${200000}
-    ${'project in warning state and purchased 0'}     | ${mockProjectsData[1]} | ${0}                      | ${0}                       | ${100000}
-    ${'project in warning state and purchased 10000'} | ${mockProjectsData[1]} | ${100000}                 | ${0}                       | ${200000}
-    ${'project in error state and purchased 0'}       | ${mockProjectsData[2]} | ${0}                      | ${419430}                  | ${419430}
-    ${'project in error state and purchased 10000'}   | ${mockProjectsData[2]} | ${100000}                 | ${419430}                  | ${519430}
-  `(
-    'returns used: $totalCalculatedUsedStorage and remaining: $totalCalculatedStorageLimit storage for $description',
-    ({
-      project,
-      purchasedStorageRemaining,
-      totalCalculatedUsedStorage,
-      totalCalculatedStorageLimit,
-    }) => {
-      const result = calculateUsedAndRemStorage(project, purchasedStorageRemaining);
-
-      expect(result.totalCalculatedUsedStorage).toBe(totalCalculatedUsedStorage);
-      expect(result.totalCalculatedStorageLimit).toBe(totalCalculatedStorageLimit);
-    },
-  );
-});
-
-describe('parseProjects', () => {
-  it('ensures all projects have totalCalculatedUsedStorage and totalCalculatedStorageLimit', () => {
-    const projects = parseProjects({
-      projects: mockGetStorageCounterGraphQLResponse,
-      additionalPurchasedStorageSize: 10000,
-      totalRepositorySizeExcess: 5000,
-    });
-
-    projects.forEach((project) => {
-      expect(project).toMatchObject({
-        totalCalculatedUsedStorage: expect.any(Number),
-        totalCalculatedStorageLimit: expect.any(Number),
-      });
-    });
-  });
-});

lib/gitlab/database.rb

@@ -214,9 +214,13 @@ module Gitlab
       extend ActiveSupport::Concern
 
       class_methods do
-        # A monkeypatch over ActiveRecord::Base.transaction.
-        # It provides observability into transactional methods.
+        # A patch over ActiveRecord::Base.transaction that provides
+        # observability into transactional methods.
         def transaction(**options, &block)
+          if options[:requires_new] && connection.transaction_open?
+            ::Gitlab::Database::Metrics.subtransactions_increment(self.name)
+          end
+
           ActiveSupport::Notifications.instrument('transaction.active_record', { connection: connection }) do
             super(**options, &block)
           end

locale/gitlab.pot

@@ -36022,9 +36022,6 @@ msgstr ""
 msgid "UsageQuota|Learn more about usage quotas"
 msgstr ""
 
-msgid "UsageQuota|Other Storage"
-msgstr ""
-
 msgid "UsageQuota|Packages"
 msgstr ""
 

rubocop/cop/performance/active_record_subtransaction_methods.rb

+# frozen_string_literal: true
+
+module RuboCop
+  module Cop
+    module Performance
+      # Cop that disallows certain methods that rely on subtransactions in their implementation.
+      # Companion to Performance/ActiveRecordSubtransactions, which bans direct usage of subtransactions.
+      class ActiveRecordSubtransactionMethods < RuboCop::Cop::Cop
+        MSG = 'Methods that rely on subtransactions should not be used. ' \
+          'For more information see: https://gitlab.com/gitlab-org/gitlab/-/issues/338346'
+
+        DISALLOWED_METHODS = %i[
+          safe_ensure_unique
+          create_or_find_by
+          create_or_find_by!
+        ].freeze
+
+        def on_send(node)
+          return unless DISALLOWED_METHODS.include?(node.method_name)
+
+          add_offense(node, location: :selector)
+        end
+      end
+    end
+  end
+end

spec/frontend/blob_edit/edit_blob_spec.js

@@ -8,6 +8,8 @@ jest.mock('~/editor/source_editor');
 jest.mock('~/editor/extensions/source_editor_markdown_ext');
 jest.mock('~/editor/extensions/source_editor_file_template_ext');
 
+const PREVIEW_MARKDOWN_PATH = '/foo/bar/preview_markdown';
+
 describe('Blob Editing', () => {
   const useMock = jest.fn();
   const mockInstance = {
@@ -34,6 +36,7 @@ describe('Blob Editing', () => {
   const editorInst = (isMarkdown) => {
     return new EditBlob({
       isMarkdown,
+      previewMarkdownPath: PREVIEW_MARKDOWN_PATH,
     });
   };
 
@@ -44,6 +47,7 @@ describe('Blob Editing', () => {
 
   it('loads FileTemplateExtension by default', async () => {
     await initEditor();
+    expect(useMock).toHaveBeenCalledWith(expect.any(FileTemplateExtension));
     expect(FileTemplateExtension).toHaveBeenCalledTimes(1);
   });
 
@@ -55,9 +59,12 @@ describe('Blob Editing', () => {
 
     it('loads MarkdownExtension only for the markdown files', async () => {
       await initEditor(true);
-      expect(useMock).toHaveBeenCalledTimes(2);
-      expect(FileTemplateExtension).toHaveBeenCalledTimes(1);
+      expect(useMock).toHaveBeenCalledWith(expect.any(EditorMarkdownExtension));
       expect(EditorMarkdownExtension).toHaveBeenCalledTimes(1);
+      expect(EditorMarkdownExtension).toHaveBeenCalledWith({
+        instance: mockInstance,
+        previewMarkdownPath: PREVIEW_MARKDOWN_PATH,
+      });
     });
   });
 

spec/frontend/editor/source_editor_markdown_ext_spec.js

@@ -23,7 +23,7 @@ describe('Markdown Extension for Source Editor', () => {
   let editorEl;
   let panelSpy;
   let mockAxios;
-  const projectPath = 'fooGroup/barProj';
+  const previewMarkdownPath = '/gitlab/fooGroup/barProj/preview_markdown';
   const firstLine = 'This is a';
   const secondLine = 'multiline';
   const thirdLine = 'string with some **markup**';
@@ -57,7 +57,7 @@ describe('Markdown Extension for Source Editor', () => {
       blobPath: markdownPath,
       blobContent: text,
     });
-    editor.use(new EditorMarkdownExtension({ instance, projectPath }));
+    editor.use(new EditorMarkdownExtension({ instance, previewMarkdownPath }));
     panelSpy = jest.spyOn(EditorMarkdownExtension, 'togglePreviewPanel');
   });
 
@@ -74,7 +74,7 @@ describe('Markdown Extension for Source Editor', () => {
       shown: false,
       modelChangeListener: undefined,
     });
-    expect(instance.projectPath).toBe(projectPath);
+    expect(instance.previewMarkdownPath).toBe(previewMarkdownPath);
   });
 
   describe('model language changes listener', () => {
@@ -223,34 +223,24 @@ describe('Markdown Extension for Source Editor', () => {
   });
 
   describe('fetchPreview', () => {
-    const group = 'foo';
-    const project = 'bar';
-    const setData = (path, g, p) => {
-      instance.projectPath = path;
-      document.body.setAttribute('data-group', g);
-      document.body.setAttribute('data-project', p);
-    };
     const fetchPreview = async () => {
       instance.fetchPreview();
       await waitForPromises();
     };
 
+    let previewMarkdownSpy;
+
     beforeEach(() => {
-      mockAxios.onPost().reply(200, { body: responseData });
+      previewMarkdownSpy = jest.fn().mockImplementation(() => [200, { body: responseData }]);
+      mockAxios.onPost(previewMarkdownPath).replyOnce((req) => previewMarkdownSpy(req));
     });
 
-    it('correctly fetches preview based on projectPath', async () => {
-      setData(projectPath, group, project);
+    it('correctly fetches preview based on previewMarkdownPath', async () => {
       await fetchPreview();
-      expect(mockAxios.history.post[0].url).toBe(`/${projectPath}/preview_markdown`);
-      expect(mockAxios.history.post[0].data).toEqual(JSON.stringify({ text }));
-    });
 
-    it('correctly fetches preview based on group and project data attributes', async () => {
-      setData(undefined, group, project);
-      await fetchPreview();
-      expect(mockAxios.history.post[0].url).toBe(`/${group}/${project}/preview_markdown`);
-      expect(mockAxios.history.post[0].data).toEqual(JSON.stringify({ text }));
+      expect(previewMarkdownSpy).toHaveBeenCalledWith(
+        expect.objectContaining({ data: JSON.stringify({ text }) }),
+      );
     });
 
     it('puts the fetched content into the preview DOM element', async () => {

spec/frontend/ide/components/repo_editor_spec.js

@@ -24,6 +24,8 @@ import axios from '~/lib/utils/axios_utils';
 import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue';
 import { file } from '../helpers';
 
+const PREVIEW_MARKDOWN_PATH = '/foo/bar/preview_markdown';
+
 const defaultFileProps = {
   ...file('file.txt'),
   content: 'hello world',
@@ -77,6 +79,7 @@ const prepareStore = (state, activeFile) => {
     entries: {
       [activeFile.path]: activeFile,
     },
+    previewMarkdownPath: PREVIEW_MARKDOWN_PATH,
   };
   const storeOptions = createStoreOptions();
   return new Vuex.Store({
@@ -278,10 +281,10 @@ describe('RepoEditor', () => {
       async ({ activeFile, viewer, shouldHaveMarkdownExtension } = {}) => {
         await createComponent({ state: { viewer }, activeFile });
         if (shouldHaveMarkdownExtension) {
-          expect(vm.editor.projectPath).toBe(vm.currentProjectId);
+          expect(vm.editor.previewMarkdownPath).toBe(PREVIEW_MARKDOWN_PATH);
           expect(vm.editor.togglePreview).toBeDefined();
         } else {
-          expect(vm.editor.projectPath).toBeUndefined();
+          expect(vm.editor.previewMarkdownPath).toBeUndefined();
           expect(vm.editor.togglePreview).toBeUndefined();
         }
       },

spec/helpers/ide_helper_spec.rb

@@ -18,7 +18,8 @@ RSpec.describe IdeHelper do
             'file-path' => nil,
             'merge-request' => nil,
             'fork-info' => nil,
-            'project' => nil
+            'project' => nil,
+            'preview-markdown-path' => nil
           )
       end
     end
@@ -41,7 +42,8 @@ RSpec.describe IdeHelper do
             'file-path' => 'foo/bar',
             'merge-request' => '1',
             'fork-info' => fork_info.to_json,
-            'project' => serialized_project
+            'project' => serialized_project,
+            'preview-markdown-path' => Gitlab::Routing.url_helpers.preview_markdown_project_path(project)
           )
       end
     end

spec/models/application_record_spec.rb

@@ -164,6 +164,23 @@ RSpec.describe ApplicationRecord do
         end
       end
     end
+
+    # rubocop:disable Database/MultipleDatabases
+    it 'increments a counter when a transaction is created in ActiveRecord' do
+      expect(described_class.connection.transaction_open?).to be false
+
+      expect(::Gitlab::Database::Metrics)
+        .to receive(:subtransactions_increment)
+        .with('ActiveRecord::Base')
+        .once
+
+      ActiveRecord::Base.transaction do
+        ActiveRecord::Base.transaction(requires_new: true) do
+          expect(ActiveRecord::Base.connection.transaction_open?).to be true
+        end
+      end
+    end
+    # rubocop:enable Database/MultipleDatabases
   end
 
   describe '.with_fast_read_statement_timeout' do

spec/rubocop/cop/performance/active_record_subtransaction_methods_spec.rb

+# frozen_string_literal: true
+
+require 'fast_spec_helper'
+require_relative '../../../../rubocop/cop/performance/active_record_subtransaction_methods'
+
+RSpec.describe RuboCop::Cop::Performance::ActiveRecordSubtransactionMethods do
+  subject(:cop) { described_class.new }
+
+  let(:message) { described_class::MSG }
+
+  shared_examples 'a method that uses a subtransaction' do |method_name|
+    it 'registers an offense' do
+      expect_offense(<<~RUBY)
+        Project.#{method_name}
+                #{'^' * method_name.length} #{message}
+      RUBY
+    end
+  end
+
+  context 'when the method uses a subtransaction' do
+    described_class::DISALLOWED_METHODS.each do |method|
+      it_behaves_like 'a method that uses a subtransaction', method
+    end
+  end
+end