Add latest changes from gitlab-org/gitlab@master

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: {