Add latest changes from gitlab-org/gitlab@master

4 files changed, 66 insertions, 1 deletions

diff --git a/app/assets/javascripts/integrations/constants.js b/app/assets/javascripts/integrations/constants.js
index 84656bd41bb..7d32fafdf92 100644
--- a/app/assets/javascripts/integrations/constants.js
+++ b/app/assets/javascripts/integrations/constants.js
@@ -23,3 +23,6 @@ export const I18N_FETCH_TEST_SETTINGS_DEFAULT_ERROR_MESSAGE = s__(
 );
 export const I18N_DEFAULT_ERROR_MESSAGE = __('Something went wrong on our end.');
 export const I18N_SUCCESSFUL_CONNECTION_MESSAGE = s__('Integrations|Connection successful.');
+
+export const settingsTabTitle = __('Settings');
+export const overridesTabTitle = s__('Integrations|Projects using custom settings');
diff --git a/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue b/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue
index 3fc554c5371..f2d3e6489ee 100644
--- a/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue
+++ b/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>
diff --git a/app/assets/javascripts/integrations/overrides/components/integration_tabs.vue b/app/assets/javascripts/integrations/overrides/components/integration_tabs.vue
new file mode 100644
index 00000000000..3f67c987231
--- /dev/null
+++ b/app/assets/javascripts/integrations/overrides/components/integration_tabs.vue
@@ -0,0 +1,52 @@
+<script>
+import { GlBadge, GlNavItem, GlTabs, GlTab } from '@gitlab/ui';
+import { settingsTabTitle, overridesTabTitle } from '~/integrations/constants';
+
+export default {
+  components: {
+    GlBadge,
+    GlNavItem,
+    GlTabs,
+    GlTab,
+  },
+  inject: {
+    editPath: {
+      default: '',
+    },
+  },
+  props: {
+    projectOverridesCount: {
+      type: [Number, String],
+      required: false,
+      default: null,
+    },
+  },
+  i18n: {
+    settingsTabTitle,
+    overridesTabTitle,
+  },
+};
+</script>
+
+<template>
+  <gl-tabs>
+    <template #tabs-start>
+      <gl-nav-item role="presentation" link-classes="gl-tab-nav-item" :href="editPath">{{
+        $options.i18n.settingsTabTitle
+      }}</gl-nav-item>
+    </template>
+
+    <gl-tab active>
+      <template #title>
+        {{ $options.i18n.overridesTabTitle }}
+        <gl-badge
+          v-if="projectOverridesCount !== null"
+          variant="muted"
+          size="sm"
+          class="gl-tab-counter-badge"
+          >{{ projectOverridesCount }}</gl-badge
+        >
+      </template>
+    </gl-tab>
+  </gl-tabs>
+</template>
diff --git a/app/assets/javascripts/integrations/overrides/index.js b/app/assets/javascripts/integrations/overrides/index.js
index 0f03b23ba21..f289a2d3d1a 100644
--- a/app/assets/javascripts/integrations/overrides/index.js
+++ b/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: {