Add latest changes from gitlab-org/gitlab@master

6 files changed, 143 insertions, 0 deletions

diff --git a/app/assets/javascripts/invite_member/components/invite_member_modal.vue b/app/assets/javascripts/invite_member/components/invite_member_modal.vue
new file mode 100644
index 00000000000..3df99bccdb0
--- /dev/null
+++ b/app/assets/javascripts/invite_member/components/invite_member_modal.vue
@@ -0,0 +1,64 @@
+<script>
+import { GlModal, GlLink } from '@gitlab/ui';
+import eventHub from '../event_hub';
+import { s__, __ } from '~/locale';
+import { OPEN_MODAL, MODAL_ID } from '../constants';
+
+export default {
+  cancelProps: {
+    text: __('Got it'),
+    attributes: [
+      {
+        variant: 'info',
+      },
+    ],
+  },
+  modalId: MODAL_ID,
+  components: {
+    GlLink,
+    GlModal,
+  },
+  inject: {
+    membersPath: {
+      default: '',
+    },
+  },
+  i18n: {
+    modalTitle: s__("InviteMember|Oops, this feature isn't ready yet"),
+    bodyTopMessage: s__(
+      "InviteMember|We're working to allow everyone to invite new members, making it easier for teams to get started with GitLab",
+    ),
+    bodyMiddleMessage: s__(
+      'InviteMember|Until then, ask an owner to invite new project members for you',
+    ),
+    linkText: s__('InviteMember|See who can invite members for you'),
+  },
+  mounted() {
+    eventHub.$on(OPEN_MODAL, this.openModal);
+  },
+  methods: {
+    openModal() {
+      this.$root.$emit('bv::show::modal', MODAL_ID);
+    },
+  },
+};
+</script>
+<template>
+  <gl-modal :modal-id="$options.modalId" size="sm" :action-cancel="$options.cancelProps">
+    <template #modal-title>
+      {{ $options.i18n.modalTitle }}
+      <gl-emoji
+        class="gl-vertical-align-baseline font-size-inherit gl-mr-1"
+        data-name="sweat_smile"
+      />
+    </template>
+    <p>{{ $options.i18n.bodyTopMessage }}</p>
+    <p>{{ $options.i18n.bodyMiddleMessage }}</p>
+    <gl-link
+      :href="membersPath"
+      data-track-event="click_who_can_invite_link"
+      data-track-label="invite_members_message"
+      >{{ $options.i18n.linkText }}</gl-link
+    >
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/invite_member/components/invite_member_trigger.vue b/app/assets/javascripts/invite_member/components/invite_member_trigger.vue
new file mode 100644
index 00000000000..6e886e0e002
--- /dev/null
+++ b/app/assets/javascripts/invite_member/components/invite_member_trigger.vue
@@ -0,0 +1,37 @@
+<script>
+import { GlLink } from '@gitlab/ui';
+import eventHub from '../event_hub';
+import { OPEN_MODAL } from '../constants';
+
+export default {
+  components: {
+    GlLink,
+  },
+  inject: {
+    displayText: {
+      default: '',
+    },
+    event: {
+      default: '',
+    },
+    label: {
+      default: '',
+    },
+  },
+  methods: {
+    openModal() {
+      eventHub.$emit(OPEN_MODAL);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-link
+    data-is-link="true"
+    :data-track-event="event"
+    :data-track-label="label"
+    @click="openModal"
+    >{{ displayText }}
+  </gl-link>
+</template>
diff --git a/app/assets/javascripts/invite_member/constants.js b/app/assets/javascripts/invite_member/constants.js
new file mode 100644
index 00000000000..fee6e7a260a
--- /dev/null
+++ b/app/assets/javascripts/invite_member/constants.js
@@ -0,0 +1,2 @@
+export const OPEN_MODAL = 'openModal';
+export const MODAL_ID = 'invite-member-modal';
diff --git a/app/assets/javascripts/invite_member/event_hub.js b/app/assets/javascripts/invite_member/event_hub.js
new file mode 100644
index 00000000000..e31806ad199
--- /dev/null
+++ b/app/assets/javascripts/invite_member/event_hub.js
@@ -0,0 +1,3 @@
+import createEventHub from '~/helpers/event_hub_factory';
+
+export default createEventHub();
diff --git a/app/assets/javascripts/invite_member/init_invite_member_modal.js b/app/assets/javascripts/invite_member/init_invite_member_modal.js
new file mode 100644
index 00000000000..7d60d78d3d9
--- /dev/null
+++ b/app/assets/javascripts/invite_member/init_invite_member_modal.js
@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import { GlToast } from '@gitlab/ui';
+import InviteMemberModal from './components/invite_member_modal.vue';
+
+Vue.use(GlToast);
+
+export default function initInviteMembersModal() {
+  const el = document.querySelector('.js-invite-member-modal');
+
+  if (!el) {
+    return false;
+  }
+
+  const { membersPath } = el.dataset;
+
+  return new Vue({
+    el,
+    provide: { membersPath },
+    render: createElement => createElement(InviteMemberModal),
+  });
+}
diff --git a/app/assets/javascripts/invite_member/init_invite_member_trigger.js b/app/assets/javascripts/invite_member/init_invite_member_trigger.js
new file mode 100644
index 00000000000..a5f904b87a6
--- /dev/null
+++ b/app/assets/javascripts/invite_member/init_invite_member_trigger.js
@@ -0,0 +1,16 @@
+import Vue from 'vue';
+import InviteMemberTrigger from './components/invite_member_trigger.vue';
+
+export default function initInviteMembersTrigger() {
+  const el = document.querySelector('.js-invite-member-trigger');
+
+  if (!el) {
+    return false;
+  }
+
+  return new Vue({
+    el,
+    provide: { ...el.dataset },
+    render: createElement => createElement(InviteMemberTrigger),
+  });
+}