diff options
Diffstat (limited to 'app/assets/javascripts/integrations/overrides')
3 files changed, 63 insertions, 1 deletions
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: { |