Create shared gl-modal-vuex component and module

**Why?**
It is significantly easier to manage the visibility of the modal in
Vuex. The module contains the state and mutations to manage this.
The component wraps GlModal and syncs the visibility with the module.

1 files changed, 69 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/gl_modal_vuex.vue b/app/assets/javascripts/vue_shared/components/gl_modal_vuex.vue
new file mode 100644
index 00000000000..df6fadf10cd
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/gl_modal_vuex.vue
@@ -0,0 +1,69 @@
+<script>
+import { mapState, mapActions } from 'vuex';
+import { GlModal } from '@gitlab/ui';
+
+/**
+ * This component keeps the GlModal's visibility in sync with the given vuex module.
+ */
+export default {
+  components: {
+    GlModal,
+  },
+  props: {
+    modalId: {
+      type: String,
+      required: true,
+    },
+    modalModule: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState({
+      isVisible(state) {
+        return state[this.modalModule].isVisible;
+      },
+    }),
+    attrs() {
+      const { modalId, modalModule, ...attrs } = this.$attrs;
+
+      return attrs;
+    },
+  },
+  watch: {
+    isVisible(val) {
+      return val ? this.bsShow() : this.bsHide();
+    },
+  },
+  methods: {
+    ...mapActions({
+      syncShow(dispatch) {
+        return dispatch(`${this.modalModule}/show`);
+      },
+      syncHide(dispatch) {
+        return dispatch(`${this.modalModule}/hide`);
+      },
+    }),
+    bsShow() {
+      this.$root.$emit('bv::show::modal', this.modalId);
+    },
+    bsHide() {
+      // $root.$emit is a workaround because other b-modal approaches don't work yet with gl-modal
+      this.$root.$emit('bv::hide::modal', this.modalId);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    v-bind="attrs"
+    :modal-id="modalId"
+    v-on="$listeners"
+    @shown="syncShow"
+    @hidden="syncHide"
+  >
+    <slot></slot>
+  </gl-modal>
+</template>