Add projects overrides counter to tabs

Move override tabs to Vue

Changlog: changed

app/assets/javascripts/integrations/overrides/components/integration_overrides.vue

@@ -11,6 +11,8 @@ import { __, s__ } from '~/locale';
 import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
 import UrlSync from '~/vue_shared/components/url_sync.vue';
 
+import IntegrationTabs from './integration_tabs.vue';
+
 const DEFAULT_PAGE = 1;
 
 export default {
@@ -23,6 +25,7 @@ export default {
     GlAlert,
     ProjectAvatar,
     UrlSync,
+    IntegrationTabs,
   },
   props: {
     overridesPath: {
@@ -46,6 +49,9 @@ export default {
     };
   },
   computed: {
+    overridesCount() {
+      return this.isLoading ? null : this.totalItems;
+    },
     showPagination() {
       return this.totalItems > this.$options.DEFAULT_PER_PAGE && this.overrides.length > 0;
     },
@@ -100,6 +106,7 @@ export default {
 
 <template>
   <div>
+    <integration-tabs :project-overrides-count="overridesCount" />
     <gl-alert v-if="errorMessage" variant="danger" :dismissible="false">
       {{ errorMessage }}
     </gl-alert>

app/assets/javascripts/integrations/overrides/components/integration_tabs.vue

+<script>
+import { GlBadge, GlTabs, GlTab } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlBadge,
+    GlTabs,
+    GlTab,
+  },
+  inject: {
+    editPath: {
+      default: '',
+    },
+  },
+  props: {
+    projectOverridesCount: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-tabs>
+    <template #tabs-start>
+      <li class="nav-item" role="presentation">
+        <a class="nav-link gl-tab-nav-item" :href="editPath">{{ __('Settings') }}</a>
+      </li>
+    </template>
+
+    <gl-tab active>
+      <template #title>
+        {{ s__('Integrations|Projects using custom settings') }}
+        <gl-badge
+          v-if="projectOverridesCount !== null"
+          variant="muted"
+          size="sm"
+          class="gl-tab-counter-badge"
+          >{{ projectOverridesCount }}</gl-badge
+        >
+      </template>
+    </gl-tab>
+  </gl-tabs>
+</template>

app/assets/javascripts/integrations/overrides/index.js

@@ -8,10 +8,13 @@ export default () => {
     return null;
   }
 
-  const { overridesPath } = el.dataset;
+  const { editPath, overridesPath } = el.dataset;
 
   return new Vue({
     el,
+    provide: {
+      editPath,
+    },
     render(createElement) {
       return createElement(IntegrationOverrides, {
         props: {

app/helpers/integrations_helper.rb

@@ -101,8 +101,9 @@ module IntegrationsHelper
     form_data
   end
 
-  def integration_overrides_data(integration)
+  def integration_overrides_data(integration, project: nil, group: nil)
     {
+      edit_path: scoped_edit_integration_path(integration, project: project, group: group),
       overrides_path: scoped_overrides_integration_path(integration, format: :json)
     }
   end

app/views/shared/integrations/overrides.html.haml

@@ -6,5 +6,4 @@
 %h3.page-title
   = @integration.title
 
-= render 'shared/integrations/tabs', integration: @integration, active_tab: 'overrides' do
-  .js-vue-integration-overrides{ data: integration_overrides_data(@integration) }
+.js-vue-integration-overrides{ data: integration_overrides_data(@integration, project: @project, group: @group) }