Add latest changes from gitlab-org/gitlab@master

2 files changed, 63 insertions, 0 deletions

diff --git a/app/assets/javascripts/groups/components/invite_members_banner.vue b/app/assets/javascripts/groups/components/invite_members_banner.vue
new file mode 100644
index 00000000000..83a23134279
--- /dev/null
+++ b/app/assets/javascripts/groups/components/invite_members_banner.vue
@@ -0,0 +1,42 @@
+<script>
+import { GlBanner } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  components: {
+    GlBanner,
+  },
+  inject: ['svgPath', 'inviteMembersPath'],
+  data() {
+    return {
+      visible: true,
+    };
+  },
+  methods: {
+    handleClose() {
+      this.visible = false;
+    },
+  },
+  i18n: {
+    title: s__('InviteMembersBanner|Collaborate with your team'),
+    body: s__(
+      "InviteMembersBanner|We noticed that you haven't invited anyone to this group. Invite your colleagues so you can discuss issues, collaborate on merge requests, and share your knowledge.",
+    ),
+    button_text: s__('InviteMembersBanner|Invite your colleagues'),
+  },
+};
+</script>
+
+<template>
+  <gl-banner
+    v-if="visible"
+    ref="banner"
+    :title="$options.i18n.title"
+    :button-text="$options.i18n.button_text"
+    :svg-path="svgPath"
+    :button-link="inviteMembersPath"
+    @close="handleClose"
+  >
+    <p>{{ $options.i18n.body }}</p>
+  </gl-banner>
+</template>
diff --git a/app/assets/javascripts/groups/init_invite_members_banner.js b/app/assets/javascripts/groups/init_invite_members_banner.js
new file mode 100644
index 00000000000..dbc3ed65a4f
--- /dev/null
+++ b/app/assets/javascripts/groups/init_invite_members_banner.js
@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import InviteMembersBanner from '~/groups/components/invite_members_banner.vue';
+
+export default function initInviteMembersBanner() {
+  const el = document.querySelector('.js-group-invite-members-banner');
+
+  if (!el) {
+    return false;
+  }
+
+  const { svgPath, inviteMembersPath } = el.dataset;
+
+  return new Vue({
+    el,
+    provide: {
+      svgPath,
+      inviteMembersPath,
+    },
+    render: createElement => createElement(InviteMembersBanner),
+  });
+}