Move modal dialog to app root component

app/assets/javascripts/groups/components/item_actions.vue

 <script>
-  import { s__ } from '~/locale';
-  import tooltip from '~/vue_shared/directives/tooltip';
-  import icon from '~/vue_shared/components/icon.vue';
-  import modal from '~/vue_shared/components/modal.vue';
-  import eventHub from '../event_hub';
-  import { COMMON_STR } from '../constants';
+import tooltip from '~/vue_shared/directives/tooltip';
+import icon from '~/vue_shared/components/icon.vue';
+import eventHub from '../event_hub';
+import { COMMON_STR } from '../constants';
 
-  export default {
+export default {
   components: {
     icon,
-      modal,
   },
   directives: {
     tooltip,
@@ -25,11 +22,6 @@
       required: true,
     },
   },
-    data() {
-      return {
-        modalStatus: false,
-      };
-    },
   computed: {
     leaveBtnTitle() {
       return COMMON_STR.LEAVE_BTN_TITLE;
@@ -37,20 +29,13 @@
     editBtnTitle() {
       return COMMON_STR.EDIT_BTN_TITLE;
     },
-      leaveConfirmationMessage() {
-        return s__(`GroupsTree|Are you sure you want to leave the "${this.group.fullName}" group?`);
-      },
   },
   methods: {
     onLeaveGroup() {
-        this.modalStatus = true;
-      },
-      leaveGroup() {
-        this.modalStatus = false;
-        eventHub.$emit('leaveGroup', this.group, this.parentGroup);
+      eventHub.$emit('showLeaveGroupModal', this.group, this.parentGroup);
     },
   },
-  };
+};
 </script>
 
 <template>
@@ -78,14 +63,5 @@
       class="leave-group btn no-expand">
       <icon name="leave"/>
     </a>
-    <modal
-      v-show="modalStatus"
-      :primary-button-label="__('Leave')"
-      kind="warning"
-      :title="__('Are you sure?')"
-      :text="__('Are you sure you want to leave this group?')"
-      :body="leaveConfirmationMessage"
-      @submit="leaveGroup"
-    />
   </div>
 </template>