4 files changed, 23 insertions, 7 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
index 144c1a2c22a..ec77e49ae53 100644
--- a/app/assets/javascripts/invite_member/components/invite_member_modal.vue
+++ b/app/assets/javascripts/invite_member/components/invite_member_modal.vue
@@ -19,8 +19,10 @@ export default {
     GlLink,
     GlModal,
   },
-  inject: {
+  props: {
     membersPath: {
+      type: String,
+      required: false,
       default: '',
     },
   },
diff --git a/app/assets/javascripts/invite_member/components/invite_member_trigger.vue b/app/assets/javascripts/invite_member/components/invite_member_trigger.vue
index 56cf1ab2fc2..ee89e0bbf71 100644
--- a/app/assets/javascripts/invite_member/components/invite_member_trigger.vue
+++ b/app/assets/javascripts/invite_member/components/invite_member_trigger.vue
@@ -7,14 +7,20 @@ export default {
   components: {
     GlLink,
   },
-  inject: {
+  props: {
     displayText: {
+      type: String,
+      required: false,
       default: '',
     },
     event: {
+      type: String,
+      required: false,
       default: '',
     },
     label: {
+      type: String,
+      required: false,
       default: '',
     },
   },
diff --git a/app/assets/javascripts/invite_member/init_invite_member_modal.js b/app/assets/javascripts/invite_member/init_invite_member_modal.js
index c292bda1931..a50d31c9e7a 100644
--- a/app/assets/javascripts/invite_member/init_invite_member_modal.js
+++ b/app/assets/javascripts/invite_member/init_invite_member_modal.js
@@ -1,13 +1,17 @@
 import { GlToast } from '@gitlab/ui';
 import Vue from 'vue';
+import { isInIssuePage, isInDesignPage } from '~/lib/utils/common_utils';
 import InviteMemberModal from './components/invite_member_modal.vue';
 
 Vue.use(GlToast);
 
+const isAssigneesWidgetShown =
+  (isInIssuePage() || isInDesignPage()) && gon.features.issueAssigneesWidget;
+
 export default function initInviteMembersModal() {
   const el = document.querySelector('.js-invite-member-modal');
 
-  if (!el) {
+  if (!el || isAssigneesWidgetShown) {
     return false;
   }
 
@@ -15,7 +19,9 @@ export default function initInviteMembersModal() {
 
   return new Vue({
     el,
-    provide: { membersPath },
-    render: (createElement) => createElement(InviteMemberModal),
+    render: (createElement) =>
+      createElement(InviteMemberModal, {
+        props: { membersPath },
+      }),
   });
 }
diff --git a/app/assets/javascripts/invite_member/init_invite_member_trigger.js b/app/assets/javascripts/invite_member/init_invite_member_trigger.js
index 5e763e4f47d..eb765ae83b0 100644
--- a/app/assets/javascripts/invite_member/init_invite_member_trigger.js
+++ b/app/assets/javascripts/invite_member/init_invite_member_trigger.js
@@ -10,7 +10,9 @@ export default function initInviteMembersTrigger() {
 
   return new Vue({
     el,
-    provide: { ...el.dataset },
-    render: (createElement) => createElement(InviteMemberTrigger),
+    render: (createElement) =>
+      createElement(InviteMemberTrigger, {
+        props: { ...el.dataset },
+      }),
   });
 }