diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-08-04 09:10:16 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-08-04 09:10:16 +0300 |
commit | 10fb317361b93a1a54b17444dec80f5758151a85 (patch) | |
tree | d62fcaa655f9b9796bfcbe75f5aacb3882c6f94b /app/assets/javascripts/reports | |
parent | 5da864991125a56a48b005389f84ecedf46f09eb (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/reports')
-rw-r--r-- | app/assets/javascripts/reports/components/modal_open_name.vue | 22 |
1 files changed, 20 insertions, 2 deletions
diff --git a/app/assets/javascripts/reports/components/modal_open_name.vue b/app/assets/javascripts/reports/components/modal_open_name.vue index 4f81cee2a38..78e1fcb205b 100644 --- a/app/assets/javascripts/reports/components/modal_open_name.vue +++ b/app/assets/javascripts/reports/components/modal_open_name.vue @@ -1,7 +1,12 @@ <script> +import { GlTooltipDirective, GlResizeObserverDirective } from '@gitlab/ui'; import { mapActions } from 'vuex'; export default { + directives: { + GlTooltip: GlTooltipDirective, + GlResizeObserverDirective, + }, props: { issue: { type: Object, @@ -13,19 +18,32 @@ export default { required: true, }, }, + data: () => ({ + tooltipTitle: '', + }), + mounted() { + this.updateTooltipTitle(); + }, methods: { ...mapActions(['openModal']), handleIssueClick() { const { issue, status, openModal } = this; openModal({ issue, status }); }, + updateTooltipTitle() { + // Only show the tooltip if the text is truncated with an ellipsis. + this.tooltipTitle = this.$el.offsetWidth < this.$el.scrollWidth ? this.issue.title : ''; + }, }, }; </script> <template> <button - type="button" - class="btn-link btn-blank text-left break-link vulnerability-name-button" + v-gl-tooltip="{ boundary: 'viewport' }" + v-gl-resize-observer-directive="updateTooltipTitle" + class="btn-link gl-text-truncate" + :aria-label="s__('Reports|Vulnerability Name')" + :title="tooltipTitle" @click="handleIssueClick()" > {{ issue.title }} |