Move `seats usage` from billing to usage quotas

doc/subscriptions/gitlab_com/index.md

@@ -94,6 +94,8 @@ The following table describes details of your subscription:
 To view a list of seats being used, go to **Settings > Billing**.
 Under **Seats currently in use**, select **See usage**.
+You can also see this information in your group settings by going to **Menu > Groups > Your Group > Settings > Usage Quotas**, and the information about **Seat usage** will be under the **Seats** tab.
+
 The **Seat usage** page lists all users occupying seats. Details for each user include:
 - Full name

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

@@ -2,11 +2,6 @@ export const TABLE_TYPE_DEFAULT = 'default';
 export const TABLE_TYPE_FREE = 'free';
 export const TABLE_TYPE_TRIAL = 'trial';
-// Billable Seats HTTP headers
-export const HEADER_TOTAL_ENTRIES = 'x-total';
-export const HEADER_PAGE_NUMBER = 'x-page';
-export const HEADER_ITEMS_PER_PAGE = 'x-per-page';
-
 export const DAYS_FOR_RENEWAL = 15;
 export const PLAN_TITLE_TRIAL_TEXT = ' Trial';

ee/app/assets/javascripts/pages/groups/seat_usage/show/index.js

-import initSeatUsage from 'ee/billings/seat_usage';
-
-initSeatUsage();

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';
 import initSearchSettings from '~/search_settings';
-if (document.querySelector('#js-storage-counter-app')) {
-  storageCounter();
-  // eslint-disable-next-line no-new
-  new LinkedTabs({
-    defaultAction: '#pipelines-quota-tab',
+const initLinkedTabs = () => {
+  if (!document.querySelector('.js-storage-tabs')) {
+    return false;
+  }
+  return new LinkedTabs({
+    defaultAction: '#seats-quota-tab',
     parentEl: '.js-storage-tabs',
     hashedTabs: true,
   });
-}
-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,
-  });
-}
+};
+const initVueApps = () => {
+  if (document.querySelector('#js-seat-usage-app')) {
+    SeatUsageApp();
+  }
+  if (document.querySelector('#js-storage-counter-app')) {
+    storageCounter();
+  }
+
+  if (document.querySelector('#js-other-storage-counter-app')) {
+    otherStorageCounter();
+  }
+};
+initVueApps();
+initLinkedTabs();
 initSearchSettings();

ee/app/assets/javascripts/billings/seat_usage/components/remove_billable_member_modal.vue → ee/app/assets/javascripts/seat_usage/components/remove_billable_member_modal.vue

@@ -10,7 +10,7 @@ import { mapActions, mapState } from 'vuex';
 import {
   REMOVE_BILLABLE_MEMBER_MODAL_ID,
   REMOVE_BILLABLE_MEMBER_MODAL_CONTENT_TEXT_TEMPLATE,
-} from 'ee/billings/seat_usage/constants';
+} from 'ee/seat_usage/constants';
 import csrf from '~/lib/utils/csrf';
 import { __, s__, sprintf } from '~/locale';

ee/app/assets/javascripts/billings/seat_usage/components/subscription_seats.vue → ee/app/assets/javascripts/seat_usage/components/subscription_seats.vue

@@ -22,7 +22,7 @@ import {
   CANNOT_REMOVE_BILLABLE_MEMBER_MODAL_TITLE,
   CANNOT_REMOVE_BILLABLE_MEMBER_MODAL_CONTENT,
   SORT_OPTIONS,
-} from 'ee/billings/seat_usage/constants';
+} from 'ee/seat_usage/constants';
 import { s__, __ } from '~/locale';
 import FilterSortContainerRoot from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
 import RemoveBillableMemberModal from './remove_billable_member_modal.vue';
@@ -99,9 +99,6 @@ export default {
       }, '');
       this.setSearchQuery(searchQuery.trim() || null);
     },
-    handleSortOptionChange(sortOption) {
-      this.setSortOption(sortOption);
-    },
     displayRemoveMemberModal(user) {
       if (user.removable) {
         this.setBillableMemberToRemove(user);
@@ -161,7 +158,7 @@ export default {
         :sort-options="$options.sortOptions"
         initial-sort-by="last_activity_on_desc"
         @onFilter="applyFilter"
-        @onSort="handleSortOptionChange"
+        @onSort="setSortOption"
       />
     </div>

ee/app/assets/javascripts/billings/seat_usage/constants.js → ee/app/assets/javascripts/seat_usage/constants.js

@@ -2,6 +2,11 @@ import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { thWidthClass } from '~/lib/utils/table_utility';
 import { __, s__ } from '~/locale';
+// Billable Seats HTTP headers
+export const HEADER_TOTAL_ENTRIES = 'x-total';
+export const HEADER_PAGE_NUMBER = 'x-page';
+export const HEADER_ITEMS_PER_PAGE = 'x-per-page';
+
 export const FIELDS = [
   {
     key: 'user',

ee/app/assets/javascripts/billings/seat_usage/index.js → ee/app/assets/javascripts/seat_usage/index.js

@@ -5,17 +5,18 @@ import initialStore from './store';
 Vue.use(Vuex);
-export default (containerId = 'js-seat-usage') => {
-  const containerEl = document.getElementById(containerId);
-  if (!containerEl) {
+export default (containerId = 'js-seat-usage-app') => {
+  const el = document.getElementById(containerId);
+  if (!el) {
     return false;
   }
-  const { namespaceId, namespaceName, seatUsageExportPath } = containerEl.dataset;
+  const { namespaceId, namespaceName, seatUsageExportPath } = el.dataset;
   return new Vue({
-    el: containerEl,
+    el,
+    apolloProvider: {},
     store: new Vuex.Store(initialStore({ namespaceId, namespaceName, seatUsageExportPath })),
     render(createElement) {
       return createElement(SubscriptionSeats);

ee/app/assets/javascripts/billings/seat_usage/store/mutations.js → ee/app/assets/javascripts/seat_usage/store/mutations.js

@@ -3,7 +3,7 @@ import {
   HEADER_TOTAL_ENTRIES,
   HEADER_PAGE_NUMBER,
   HEADER_ITEMS_PER_PAGE,
-} from 'ee/billings/constants';
+} from 'ee/seat_usage/constants';
 import * as types from './mutation_types';
 export default {

ee/app/controllers/groups/seat_usage_controller.rb

@@ -12,6 +12,7 @@ class Groups::SeatUsageController < Groups::ApplicationController
   def show
     respond_to do |format|
       format.html do
+        redirect_to_seat_usage_tab
       end
       format.csv do
@@ -24,7 +25,7 @@ def show
         else
           flash[:alert] = _('Failed to generate export, please try again later.')
-          redirect_to group_seat_usage_path(group)
+          redirect_to_seat_usage_tab
         end
       end
     end
@@ -32,6 +33,10 @@ def show
   private
+  def redirect_to_seat_usage_tab
+    redirect_to group_usage_quotas_path(group, anchor: 'seats-quota-tab')
+  end
+
   def csv_filename
     "seat-usage-export-#{Time.current.to_s(:number)}.csv"
   end

ee/app/helpers/billing_plans_helper.rb

@@ -172,7 +172,7 @@ def plan_renew_url(group)
   def billable_seats_href(namespace)
     return unless namespace.group?
-    group_seat_usage_path(namespace)
+    group_usage_quotas_path(namespace, anchor: 'seats-quota-tab')
   end
   def offer_from_previous_tier?(namespace_id, plan_id)

ee/app/views/groups/seat_usage/show.html.haml

-- page_title s_('SeatUsage|Seat usage')
-- add_to_breadcrumbs _('Billing'), group_billings_path(@group)
-
-#js-seat-usage{ data: { namespace_id: @group.id, namespace_name: @group.name, seat_usage_export_path: group_seat_usage_path(@group, format: :csv) } }

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

@@ -15,7 +15,10 @@
 .top-area.scrolling-tabs-container.inner-page-scroll-tabs
   %ul.nav.nav-tabs.nav-links.scrolling-tabs.separator.js-storage-tabs{ role: 'tablist' }
     %li.nav-item
-      %a.nav-link#pipelines-quota{ data: { toggle: "tab", action: '#pipelines-quota-tab' }, href: '#pipelines-quota-tab', 'aria-controls': '#pipelines-quota-tab', 'aria-selected': true }
+      %a.nav-link#seats-quota{ data: { toggle: "tab", action: '#seats-quota-tab' }, href: '#seats-quota-tab', 'aria-controls': '#seats-quota-tab', 'aria-selected': true }
+        = s_('UsageQuota|Seats')
+    %li.nav-item
+      %a.nav-link#pipelines-quota{ data: { toggle: "tab", action: '#pipelines-quota-tab' }, href: '#pipelines-quota-tab', 'aria-controls': '#pipelines-quota-tab', 'aria-selected': false }
         = s_('UsageQuota|Pipelines')
     %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 }
@@ -25,6 +28,8 @@
         %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) } }
   .tab-pane#pipelines-quota-tab
     = render "namespaces/pipelines_quota/list",
       locals: { namespace: @group, projects: @projects }