Applies frontend review suggestions

Removes unnecessary attributes and
adds snapshot spec.

app/assets/javascripts/vue_shared/components/badges/beta_badge.stories.js

+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({});

app/assets/javascripts/vue_shared/components/badges/beta_badge.vue

+<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>

locale/gitlab.pot

@@ -7235,6 +7235,30 @@ msgstr ""
 msgid "Beta"
 msgstr ""
+msgid "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."
+msgstr ""
+
+msgid "BetaBadge|A Beta feature:"
+msgstr ""
+
+msgid "BetaBadge|Beta"
+msgstr ""
+
+msgid "BetaBadge|Is complete or near completion."
+msgstr ""
+
+msgid "BetaBadge|Is supported by a commercially reasonable effort."
+msgstr ""
+
+msgid "BetaBadge|May have performance or stability issues."
+msgstr ""
+
+msgid "BetaBadge|Should not cause data loss."
+msgstr ""
+
+msgid "BetaBadge|What's Beta?"
+msgstr ""
+
 msgid "Bi-weekly code coverage"
 msgstr ""

spec/frontend/vue_shared/components/badges/__snapshots__/beta_badge_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Beta badge component renders the badge 1`] = `
+<div>
+  <gl-badge-stub
+    class="gl-cursor-pointer"
+    iconsize="md"
+    size="md"
+    variant="muted"
+  >
+    Beta
+  </gl-badge-stub>
+   
+  <gl-popover-stub
+    cssclasses=""
+    data-testid="beta-badge"
+    showclosebutton="true"
+    target="[Function]"
+    title="What's Beta?"
+    triggers="hover focus click"
+  >
+    <p>
+      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.
+    </p>
+     
+    <p
+      class="gl-mb-0"
+    >
+      A Beta feature:
+    </p>
+     
+    <ul
+      class="gl-pl-4"
+    >
+      <li>
+        May have performance or stability issues.
+      </li>
+       
+      <li>
+        Should not cause data loss.
+      </li>
+       
+      <li>
+        Is supported by a commercially reasonable effort.
+      </li>
+       
+      <li>
+        Is complete or near completion.
+      </li>
+    </ul>
+  </gl-popover-stub>
+</div>
+`;

spec/frontend/vue_shared/components/badges/beta_badge_spec.js

+import { shallowMount } from '@vue/test-utils';
+import BetaBadge from '~/vue_shared/components/badges/beta_badge.vue';
+
+describe('Beta badge component', () => {
+  let wrapper;
+
+  it('renders the badge', () => {
+    wrapper = shallowMount(BetaBadge);
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});