diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-19 04:45:44 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-19 04:45:44 +0300 |
commit | 85dc423f7090da0a52c73eb66faf22ddb20efff9 (patch) | |
tree | 9160f299afd8c80c038f08e1545be119f5e3f1e1 /app/assets/javascripts/related_issues/components/issue_token.vue | |
parent | 15c2c8c66dbe422588e5411eee7e68f1fa440bb8 (diff) |
Add latest changes from gitlab-org/gitlab@13-4-stable-ee
Diffstat (limited to 'app/assets/javascripts/related_issues/components/issue_token.vue')
-rw-r--r-- | app/assets/javascripts/related_issues/components/issue_token.vue | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/app/assets/javascripts/related_issues/components/issue_token.vue b/app/assets/javascripts/related_issues/components/issue_token.vue new file mode 100644 index 00000000000..31d0c7dbbb0 --- /dev/null +++ b/app/assets/javascripts/related_issues/components/issue_token.vue @@ -0,0 +1,115 @@ +<script> +import { GlIcon } from '@gitlab/ui'; +import { __, sprintf } from '~/locale'; +import relatedIssuableMixin from '~/vue_shared/mixins/related_issuable_mixin'; + +export default { + name: 'IssueToken', + components: { + GlIcon, + }, + mixins: [relatedIssuableMixin], + props: { + isCondensed: { + type: Boolean, + required: false, + default: false, + }, + }, + computed: { + removeButtonLabel() { + const { displayReference } = this; + /* + * Giving false as third argument to prevent unescaping of ampersand in + * epic reference. Eg. &42 will remain &42 instead of &42 + * + * https://docs.gitlab.com/ee/development/i18n/externalization.html#interpolation + */ + return sprintf(__('Remove %{displayReference}'), { displayReference }, false); + }, + stateTitle() { + if (this.isCondensed) return ''; + + return this.isOpen ? __('Open') : __('Closed'); + }, + innerComponentType() { + return this.isCondensed ? 'span' : 'div'; + }, + issueTitle() { + return this.isCondensed ? this.title : ''; + }, + }, +}; +</script> + +<template> + <div + :class="{ + 'issue-token': isCondensed, + 'flex-row issuable-info-container': !isCondensed, + }" + > + <component + :is="computedLinkElementType" + ref="link" + v-tooltip + :class="{ + 'issue-token-link': isCondensed, + 'issuable-main-info': !isCondensed, + }" + :href="computedPath" + :title="issueTitle" + data-placement="top" + > + <component + :is="innerComponentType" + v-if="hasTitle" + ref="title" + :class="{ + 'issue-token-title issue-token-end': isCondensed, + 'issue-title block-truncated': !isCondensed, + 'issue-token-title-standalone': !canRemove, + }" + class="js-issue-token-title" + > + <span class="issue-token-title-text">{{ title }}</span> + </component> + <component + :is="innerComponentType" + ref="reference" + :class="{ + 'issue-token-reference': isCondensed, + 'issuable-info': !isCondensed, + }" + > + <gl-icon + v-if="hasState" + v-tooltip + :class="iconClass" + :name="iconName" + :size="12" + :title="stateTitle" + :aria-label="state" + /> + {{ displayReference }} + </component> + </component> + <button + v-if="canRemove" + ref="removeButton" + v-tooltip + :class="{ + 'issue-token-remove-button': isCondensed, + 'btn btn-default': !isCondensed, + }" + :title="removeButtonLabel" + :aria-label="removeButtonLabel" + :disabled="removeDisabled" + type="button" + class="js-issue-token-remove-button" + @click="onRemoveRequest" + > + <gl-icon name="close" aria-hidden="true" /> + </button> + </div> +</template> |