Add latest changes from gitlab-org/gitlab@master

2 files changed, 79 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/help_page_link/help_page_link.stories.js b/app/assets/javascripts/vue_shared/components/help_page_link/help_page_link.stories.js
new file mode 100644
index 00000000000..0576e9796fc
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/help_page_link/help_page_link.stories.js
@@ -0,0 +1,35 @@
+import HelpPageLink from './help_page_link.vue';
+
+export default {
+  component: HelpPageLink,
+  title: 'vue_shared/help_page_link',
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { HelpPageLink },
+  props: Object.keys(argTypes),
+  template: '<help-page-link v-bind="$props">link</help-page-link>',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  href: 'user/usage_quotas',
+};
+
+export const LinkWithAnAnchor = Template.bind({});
+LinkWithAnAnchor.args = {
+  ...Default.args,
+  anchor: 'namespace-storage-limit',
+};
+
+export const LinkWithAnchorInPath = Template.bind({});
+LinkWithAnchorInPath.args = {
+  ...Default.args,
+  href: 'user/usage_quotas#namespace-storage-limit',
+};
+
+export const CustomAttributes = Template.bind({});
+CustomAttributes.args = {
+  ...Default.args,
+  target: '_blank',
+};
diff --git a/app/assets/javascripts/vue_shared/components/help_page_link/help_page_link.vue b/app/assets/javascripts/vue_shared/components/help_page_link/help_page_link.vue
new file mode 100644
index 00000000000..11b269855ad
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/help_page_link/help_page_link.vue
@@ -0,0 +1,44 @@
+<script>
+import { GlLink } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+/**
+ * Component to link to GitLab docs.
+ *
+ * @example
+ * <help-page-link href="user/usage_quotas">
+ *   Usage Quotas help.
+ * <help-page-link>
+ */
+export default {
+  name: 'HelpPageLink',
+  components: {
+    GlLink,
+  },
+  props: {
+    href: {
+      type: String,
+      required: true,
+    },
+    anchor: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    compiledHref() {
+      return helpPagePath(this.href, { anchor: this.anchor });
+    },
+    attributes() {
+      const { href, anchor, ...attrs } = this.$attrs;
+      return attrs;
+    },
+  },
+};
+</script>
+<template>
+  <gl-link v-bind="attributes" :href="compiledHref" v-on="$listeners">
+    <slot></slot>
+  </gl-link>
+</template>