diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-07-24 21:08:45 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-07-24 21:08:45 +0300 |
commit | 2ae564d6f59fc939bfdbb155d445efe97b34c1e1 (patch) | |
tree | 106ebc2021d84757ca03610747a60c8f47ac9fb0 /app/assets/javascripts/vue_shared/components | |
parent | 7308ec9d13fb69018200a40f287e76ef499ed47c (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_shared/components')
3 files changed, 79 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/badges/beta_badge.stories.js b/app/assets/javascripts/vue_shared/components/badges/beta_badge.stories.js new file mode 100644 index 00000000000..3cef1bf4ba5 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/badges/beta_badge.stories.js @@ -0,0 +1,19 @@ +import BetaBadge from './beta_badge.vue'; + +export default { + component: BetaBadge, + title: 'vue_shared/beta-badge', +}; + +const template = ` + <div style="height:600px;" class="gl-display-flex gl-justify-content-center gl-align-items-center"> + <beta-badge /> + </div> + `; + +const Template = () => ({ + components: { BetaBadge }, + template, +}); + +export const Default = Template.bind({}); diff --git a/app/assets/javascripts/vue_shared/components/badges/beta_badge.vue b/app/assets/javascripts/vue_shared/components/badges/beta_badge.vue new file mode 100644 index 00000000000..198b6580277 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/badges/beta_badge.vue @@ -0,0 +1,58 @@ +<script> +import { GlBadge, GlPopover } from '@gitlab/ui'; +import { s__ } from '~/locale'; + +export default { + name: 'BetaBadge', + components: { GlBadge, GlPopover }, + i18n: { + badgeLabel: s__('BetaBadge|Beta'), + popoverTitle: s__("BetaBadge|What's Beta?"), + descriptionParagraph: s__( + "BetaBadge|A Beta feature is not production-ready, but is unlikely to change drastically before it's released. We encourage users to try Beta features and provide feedback.", + ), + listIntroduction: s__('BetaBadge|A Beta feature:'), + listItemStability: s__('BetaBadge|May have performance or stability issues.'), + listItemDataLoss: s__('BetaBadge|Should not cause data loss.'), + listItemReasonableEffort: s__('BetaBadge|Is supported by a commercially reasonable effort.'), + listItemNearCompletion: s__('BetaBadge|Is complete or near completion.'), + }, + 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" 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> + + <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> +</template> diff --git a/app/assets/javascripts/vue_shared/components/blob_viewers/rich_viewer.vue b/app/assets/javascripts/vue_shared/components/blob_viewers/rich_viewer.vue index 3e24a35ea39..2ecf686b1c3 100644 --- a/app/assets/javascripts/vue_shared/components/blob_viewers/rich_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/blob_viewers/rich_viewer.vue @@ -2,6 +2,7 @@ import SafeHtml from '~/vue_shared/directives/safe_html'; import { handleBlobRichViewer } from '~/blob/viewer'; import MarkdownFieldView from '~/vue_shared/components/markdown/field_view.vue'; +import { handleLocationHash } from '~/lib/utils/common_utils'; import ViewerMixin from './mixins'; export default { @@ -27,6 +28,7 @@ export default { this.isLoading = false; await this.$nextTick(); handleBlobRichViewer(this.$refs.content, this.type); + handleLocationHash(); }); }, safeHtmlConfig: { |