Add route + feature flag for project storage UI

app/assets/javascripts/pages/projects/usage_quotas/index.js

+import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';
+import storageCounter from '~/projects/storage_counter';
+import initSearchSettings from '~/search_settings';
+
+const initLinkedTabs = () => {
+  if (!document.querySelector('.js-usage-quota-tabs')) {
+    return false;
+  }
+
+  return new LinkedTabs({
+    defaultAction: '#storage-quota-tab',
+    parentEl: '.js-usage-quota-tabs',
+    hashedTabs: true,
+  });
+};
+
+const initVueApp = () => {
+  storageCounter('js-project-storage-count-app');
+};
+
+initVueApp();
+initLinkedTabs();
+initSearchSettings();

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

+<script>
+import { s__ } from '~/locale';
+
+export default {
+  name: 'StorageCounterApp',
+  i18n: {
+    placeholder: s__('UsageQuota|Usage'),
+  },
+};
+</script>
+<template>
+  <div>{{ $options.i18n.placeholder }}</div>
+</template>

app/assets/javascripts/projects/storage_counter/index.js

+import Vue from 'vue';
+import StorageCounterApp from './components/app.vue';
+
+export default (containerId = 'js-project-storage-count-app') => {
+  const el = document.getElementById(containerId);
+
+  if (!el) {
+    return false;
+  }
+
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(StorageCounterApp);
+    },
+  });
+};

app/controllers/projects/usage_quotas_controller.rb

+# frozen_string_literal: true
+
+class Projects::UsageQuotasController < Projects::ApplicationController
+  before_action :authorize_admin_project!
+  before_action :verify_usage_quotas_enabled!
+
+  layout "project_settings"
+
+  feature_category :utilization
+
+  private
+
+  def verify_usage_quotas_enabled!
+    render_404 unless Feature.enabled?(:project_storage_ui, project&.group, default_enabled: :yaml)
+  end
+end

app/views/projects/usage_quotas/index.html.haml

+- page_title s_("UsageQuota|Usage")
+
+%h3.page-title
+  = s_('UsageQuota|Usage Quotas')
+
+.row
+  .col-sm-6
+    = s_('UsageQuota|Usage of project resources across the %{strong_start}%{project_name}%{strong_end} project').html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe, project_name: @project.name }
+
+.top-area.scrolling-tabs-container.inner-page-scroll-tabs
+  %ul.nav.nav-tabs.nav-links.scrolling-tabs.separator.js-usage-quota-tabs{ role: 'tablist' }
+    %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': 'true' }
+        = s_('UsageQuota|Storage')
+.tab-content
+  .tab-pane#storage-quota-tab
+    #js-project-storage-count-app

config/feature_flags/development/project_storage_ui.yml

+---
+name: project_storage_ui
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/68289
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/334889
+milestone: '14.2'
+type: development
+group: group::utilization
+default_enabled: false

config/routes/project.rb

@@ -145,6 +145,8 @@
           resource :packages_and_registries, only: [:show]
         end
+        resources :usage_quotas, only: [:index]
+
         resources :autocomplete_sources, only: [] do
           collection do
             get 'members'

lib/sidebars/projects/menus/settings_menu.rb

@@ -17,6 +17,7 @@ def configure_menu_items
           add_item(monitor_menu_item)
           add_item(pages_menu_item)
           add_item(packages_and_registries_menu_item)
+          add_item(usage_quotas_menu_item)
           true
         end
@@ -146,6 +147,19 @@ def packages_and_registries_menu_item
             item_id: :packages_and_registries
           )
         end
+
+        def usage_quotas_menu_item
+          unless Feature.enabled?(:project_storage_ui, context.project&.group, default_enabled: :yaml)
+            return ::Sidebars::NilMenuItem.new(item_id: :usage_quotas)
+          end
+
+          ::Sidebars::MenuItem.new(
+            title: s_('UsageQuota|Usage Quotas'),
+            link: project_usage_quotas_path(context.project),
+            active_routes: { path: 'usage_quotas#index' },
+            item_id: :usage_quotas
+          )
+        end
       end
     end
   end

locale/gitlab.pot

@@ -36088,6 +36088,9 @@ msgstr ""
 msgid "UsageQuota|Usage of group resources across the projects in the %{strong_start}%{group_name}%{strong_end} group"
 msgstr ""
+msgid "UsageQuota|Usage of project resources across the %{strong_start}%{project_name}%{strong_end} project"
+msgstr ""
+
 msgid "UsageQuota|Usage of resources across your projects"
 msgstr ""

spec/frontend/projects/storage_counter/app_spec.js

+import { shallowMount } from '@vue/test-utils';
+import StorageCounterApp from '~/projects/storage_counter/components/app.vue';
+
+describe('Storage counter app', () => {
+  let wrapper;
+
+  const createComponent = (propsData = {}) => {
+    wrapper = shallowMount(StorageCounterApp, { propsData });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders app successfully', () => {
+    expect(wrapper.text()).toBe('Usage');
+  });
+});

spec/lib/sidebars/projects/menus/settings_menu_spec.rb

@@ -158,5 +158,31 @@
         end
       end
     end
+
+    describe 'Usage Quotas' do
+      let(:item_id) { :usage_quotas }
+
+      describe 'with project_storage_ui feature flag enabled' do
+        before do
+          stub_feature_flags(project_storage_ui: true)
+        end
+
+        specify { is_expected.not_to be_nil }
+
+        describe 'when the user does not have access' do
+          let(:user) { nil }
+
+          specify { is_expected.to be_nil }
+        end
+      end
+
+      describe 'with project_storage_ui feature flag disabled' do
+        before do
+          stub_feature_flags(project_storage_ui: false)
+        end
+
+        specify { is_expected.to be_nil }
+      end
+    end
   end
 end

spec/requests/projects/usage_quotas_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Project Usage Quotas' do
+  let_it_be(:project) { create(:project) }
+  let_it_be(:role) { :maintainer }
+  let_it_be(:user) { create(:user) }
+
+  before do
+    project.add_role(user, role)
+    login_as(user)
+  end
+
+  shared_examples 'response with 404 status' do
+    it 'renders :not_found' do
+      get project_usage_quotas_path(project)
+
+      expect(response).to have_gitlab_http_status(:not_found)
+      expect(response.body).not_to include(project_usage_quotas_path(project))
+    end
+  end
+
+  describe 'GET /:namespace/:project/usage_quotas' do
+    context 'with project_storage_ui feature flag enabled' do
+      before do
+        stub_feature_flags(project_storage_ui: true)
+      end
+
+      it 'renders usage quotas path' do
+        get project_usage_quotas_path(project)
+
+        expect(response).to have_gitlab_http_status(:ok)
+        expect(response.body).to include(project_usage_quotas_path(project))
+        expect(response.body).to include("Usage of project resources across the <strong>#{project.name}</strong> project")
+      end
+
+      context 'renders :not_found for user without permission' do
+        let(:role) { :developer }
+
+        it_behaves_like 'response with 404 status'
+      end
+    end
+
+    context 'with project_storage_ui feature flag disabled' do
+      before do
+        stub_feature_flags(project_storage_ui: false)
+      end
+
+      it_behaves_like 'response with 404 status'
+    end
+  end
+end

spec/support/shared_contexts/navbar_structure_context.rb

@@ -118,7 +118,8 @@
           _('Access Tokens'),
           _('Repository'),
           _('CI/CD'),
-          _('Monitor')
+          _('Monitor'),
+          (s_('UsageQuota|Usage Quotas') if Feature.enabled?(:project_storage_ui, default_enabled: :yaml))
         ]
       }
     ].compact

spec/views/layouts/nav/sidebar/_project.html.haml_spec.rb

@@ -968,6 +968,32 @@
         end
       end
     end
+
+    describe 'Usage Quotas' do
+      context 'with project_storage_ui feature flag enabled' do
+        before do
+          stub_feature_flags(project_storage_ui: true)
+        end
+
+        it 'has a link to Usage Quotas' do
+          render
+
+          expect(rendered).to have_link('Usage Quotas', href: project_usage_quotas_path(project))
+        end
+      end
+
+      context 'with project_storage_ui feature flag disabled' do
+        before do
+          stub_feature_flags(project_storage_ui: false)
+        end
+
+        it 'does not have a link to Usage Quotas' do
+          render
+
+          expect(rendered).not_to have_link('Usage Quotas', href: project_usage_quotas_path(project))
+        end
+      end
+    end
   end
   describe 'Hidden menus' do