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>