diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-09-25 18:10:16 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-09-25 18:10:16 +0300 |
commit | 02e4b2d0043b416314ffb76694aff200584352d5 (patch) | |
tree | a7d027891f3089960950d7ec75ba60d981623ab4 /app/assets/javascripts/vue_shared | |
parent | 7a3aca2b5b3bfdebbd7bb6353d5bdcdc422670da (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_shared')
6 files changed, 138 insertions, 50 deletions
diff --git a/app/assets/javascripts/vue_shared/components/badges/beta_badge.vue b/app/assets/javascripts/vue_shared/components/badges/beta_badge.vue index e8d33b5538e..9cac176a06f 100644 --- a/app/assets/javascripts/vue_shared/components/badges/beta_badge.vue +++ b/app/assets/javascripts/vue_shared/components/badges/beta_badge.vue @@ -1,10 +1,10 @@ <script> -import { GlBadge, GlPopover } from '@gitlab/ui'; import { s__ } from '~/locale'; +import HoverBadge from './hover_badge.vue'; export default { name: 'BetaBadge', - components: { GlBadge, GlPopover }, + components: { HoverBadge }, i18n: { badgeLabel: s__('BetaBadge|Beta'), popoverTitle: s__("BetaBadge|What's Beta?"), @@ -41,27 +41,16 @@ export default { </script> <template> - <div> - <gl-badge ref="badge" href="#" :size="size" variant="neutral" class="gl-cursor-pointer">{{ - $options.i18n.badgeLabel - }}</gl-badge> - <gl-popover - triggers="hover focus click" - :show-close-button="true" - :target="target" - :title="$options.i18n.popoverTitle" - data-testid="beta-badge" - > - <p>{{ $options.i18n.descriptionParagraph }}</p> + <hover-badge :label="$options.i18n.badgeLabel" :size="size" :title="$options.i18n.popoverTitle"> + <p>{{ $options.i18n.descriptionParagraph }}</p> - <p class="gl-mb-0">{{ $options.i18n.listIntroduction }}</p> + <p class="gl-mb-0">{{ $options.i18n.listIntroduction }}</p> - <ul class="gl-pl-4"> - <li>{{ $options.i18n.listItemStability }}</li> - <li>{{ $options.i18n.listItemDataLoss }}</li> - <li>{{ $options.i18n.listItemReasonableEffort }}</li> - <li>{{ $options.i18n.listItemNearCompletion }}</li> - </ul> - </gl-popover> - </div> + <ul class="gl-pl-4"> + <li>{{ $options.i18n.listItemStability }}</li> + <li>{{ $options.i18n.listItemDataLoss }}</li> + <li>{{ $options.i18n.listItemReasonableEffort }}</li> + <li>{{ $options.i18n.listItemNearCompletion }}</li> + </ul> + </hover-badge> </template> diff --git a/app/assets/javascripts/vue_shared/components/badges/experiment_badge.stories.js b/app/assets/javascripts/vue_shared/components/badges/experiment_badge.stories.js new file mode 100644 index 00000000000..8e964c9bdf8 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/badges/experiment_badge.stories.js @@ -0,0 +1,24 @@ +import ExperimentBadge from './experiment_badge.vue'; + +export default { + component: ExperimentBadge, + title: 'vue_shared/experiment-badge', +}; + +const template = ` + <div style="height:600px;" class="gl-display-flex gl-justify-content-center gl-align-items-center"> + <experiment-badge :size="size" /> + </div> + `; + +const Template = (args, { argTypes }) => ({ + components: { ExperimentBadge }, + data() { + return { value: args.value }; + }, + props: Object.keys(argTypes), + template, +}); + +export const Default = Template.bind({}); +Default.args = {}; diff --git a/app/assets/javascripts/vue_shared/components/badges/experiment_badge.vue b/app/assets/javascripts/vue_shared/components/badges/experiment_badge.vue new file mode 100644 index 00000000000..26bae71ddb8 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/badges/experiment_badge.vue @@ -0,0 +1,43 @@ +<script> +import { s__ } from '~/locale'; +import HoverBadge from './hover_badge.vue'; + +export default { + name: 'ExperimentBadge', + components: { HoverBadge }, + i18n: { + badgeLabel: s__('ExperimentBadge|Experiment'), + popoverTitle: s__("ExperimentBadge|What's an Experiment?"), + descriptionParagraph: s__( + "ExperimentBadge|An Experiment is a feature that's in the process of being developed. It's not production-ready. We encourage users to try Experimental features and provide feedback.", + ), + listIntroduction: s__('ExperimentBadge|An Experiment:'), + listItemStability: s__('ExperimentBadge|May be unstable.'), + listItemDataLoss: s__('ExperimentBadge|Can cause data loss.'), + listItemNoSupport: s__('ExperimentBadge|Has no support and might not be documented.'), + listItemCanBeRemoved: s__('ExperimentBadge|Can be removed at any time.'), + }, + props: { + size: { + type: String, + required: false, + default: 'md', + }, + }, +}; +</script> + +<template> + <hover-badge :label="$options.i18n.badgeLabel" :size="size" :title="$options.i18n.popoverTitle"> + <p>{{ $options.i18n.descriptionParagraph }}</p> + + <p class="gl-mb-0">{{ $options.i18n.listIntroduction }}</p> + + <ul class="gl-pl-4"> + <li>{{ $options.i18n.listItemStability }}</li> + <li>{{ $options.i18n.listItemDataLoss }}</li> + <li>{{ $options.i18n.listItemNoSupport }}</li> + <li>{{ $options.i18n.listItemCanBeRemoved }}</li> + </ul> + </hover-badge> +</template> diff --git a/app/assets/javascripts/vue_shared/components/badges/hover_badge.vue b/app/assets/javascripts/vue_shared/components/badges/hover_badge.vue new file mode 100644 index 00000000000..351c7bd9da0 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/badges/hover_badge.vue @@ -0,0 +1,52 @@ +<script> +import { GlBadge, GlPopover } from '@gitlab/ui'; + +export default { + name: 'HoverBadge', + components: { GlBadge, GlPopover }, + props: { + label: { + type: String, + required: true, + }, + title: { + type: String, + required: true, + }, + size: { + type: String, + required: false, + default: 'md', + }, + }, + methods: { + target() { + /** + * BVPopover retrieves the target during the `beforeDestroy` hook to deregister attached + * events. Since during `beforeDestroy` refs are `undefined`, it throws a warning in the + * console because we're trying to access the `$el` property of `undefined`. Optional + * chaining is not working in templates, which is why the method is used. + * + * See more on https://gitlab.com/gitlab-org/gitlab/-/merge_requests/49628#note_464803276 + */ + return this.$refs.badge?.$el; + }, + }, +}; +</script> + +<template> + <div> + <gl-badge ref="badge" href="#" :size="size" variant="neutral" class="gl-cursor-pointer">{{ + label + }}</gl-badge> + <gl-popover + triggers="hover focus click" + :show-close-button="true" + :target="target" + :title="title" + > + <slot></slot> + </gl-popover> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue index d9e750b9c45..4657954c8cc 100644 --- a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue +++ b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue @@ -261,7 +261,7 @@ export default { v-if="issuable.hidden" v-gl-tooltip name="spam" - :title="__('This issue is hidden because its author has been banned')" + :title="__('This issue is hidden because its author has been banned.')" :aria-label="__('Hidden')" /> <gl-link diff --git a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue index c4b92454ac0..a9b5e3a66a8 100644 --- a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue +++ b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_header.vue @@ -1,6 +1,8 @@ <script> import { GlIcon, GlBadge, GlButton, GlLink, GlSprintf, GlTooltipDirective } from '@gitlab/ui'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import HiddenBadge from '~/issuable/components/hidden_badge.vue'; +import LockedBadge from '~/issuable/components/locked_badge.vue'; import { issuableStatusText, STATUS_OPEN, STATUS_REOPENED } from '~/issues/constants'; import { isExternal } from '~/lib/utils/url_utility'; import { __, n__, sprintf } from '~/locale'; @@ -16,6 +18,8 @@ export default { GlButton, GlLink, GlSprintf, + HiddenBadge, + LockedBadge, TimeAgoTooltip, WorkItemTypeIcon, }, @@ -101,16 +105,6 @@ export default { ? 'success' : 'info'; }, - blockedTooltip() { - return sprintf(__('This %{issuable} is locked. Only project members can comment.'), { - issuable: this.issuableType, - }); - }, - hiddenTooltip() { - return sprintf(__('This %{issuable} is hidden because its author has been banned'), { - issuable: this.issuableType, - }); - }, shouldShowWorkItemTypeIcon() { return this.showWorkItemTypeIcon && this.issuableType; }, @@ -174,22 +168,8 @@ export default { :issuable-type="issuableType" :workspace-type="workspaceType" /> - <span v-if="blocked" class="issuable-warning-icon"> - <gl-icon - v-gl-tooltip.bottom - name="lock" - :title="blockedTooltip" - :aria-label="__('Blocked')" - /> - </span> - <span v-if="isHidden" class="issuable-warning-icon"> - <gl-icon - v-gl-tooltip.bottom - name="spam" - :title="hiddenTooltip" - :aria-label="__('Hidden')" - /> - </span> + <locked-badge v-if="blocked" :issuable-type="issuableType" /> + <hidden-badge v-if="isHidden" :issuable-type="issuableType" /> <work-item-type-icon v-if="shouldShowWorkItemTypeIcon" show-text |