Add latest changes from gitlab-org/gitlab@master

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