diff options
Diffstat (limited to 'app/assets/javascripts/ci/runner/components/runner_tag.vue')
-rw-r--r-- | app/assets/javascripts/ci/runner/components/runner_tag.vue | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/runner/components/runner_tag.vue b/app/assets/javascripts/ci/runner/components/runner_tag.vue new file mode 100644 index 00000000000..6ad2023a866 --- /dev/null +++ b/app/assets/javascripts/ci/runner/components/runner_tag.vue @@ -0,0 +1,56 @@ +<script> +import { GlBadge, GlTooltipDirective, GlResizeObserverDirective } from '@gitlab/ui'; +import { RUNNER_TAG_BADGE_VARIANT } from '../constants'; + +export default { + components: { + GlBadge, + }, + directives: { + GlTooltip: GlTooltipDirective, + GlResizeObserver: GlResizeObserverDirective, + }, + props: { + tag: { + type: String, + required: true, + }, + size: { + type: String, + required: false, + default: 'sm', + }, + }, + data() { + return { + overflowing: false, + }; + }, + computed: { + tooltip() { + if (this.overflowing) { + return this.tag; + } + return ''; + }, + }, + methods: { + onResize() { + const { scrollWidth, offsetWidth } = this.$el; + this.overflowing = scrollWidth > offsetWidth; + }, + }, + RUNNER_TAG_BADGE_VARIANT, +}; +</script> +<template> + <gl-badge + v-gl-tooltip="tooltip" + v-gl-resize-observer="onResize" + class="gl-display-inline-block gl-max-w-full gl-text-truncate" + :size="size" + :variant="$options.RUNNER_TAG_BADGE_VARIANT" + > + {{ tag }} + </gl-badge> +</template> |