Create shared gl-modal-vuex component and moduleee1979-gl-modal-vuex

**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.

6 files changed, 122 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>
diff --git a/app/assets/javascripts/vuex_shared/modules/modal/actions.js b/app/assets/javascripts/vuex_shared/modules/modal/actions.js
new file mode 100644
index 00000000000..552237e05c5
--- /dev/null
+++ b/app/assets/javascripts/vuex_shared/modules/modal/actions.js
@@ -0,0 +1,17 @@
+import * as types from './mutation_types';
+
+export const open = ({ commit }, data) => {
+  commit(types.OPEN, data);
+};
+
+export const close = ({ commit }) => {
+  commit(types.CLOSE);
+};
+
+export const show = ({ commit }) => {
+  commit(types.SHOW);
+};
+
+export const hide = ({ commit }) => {
+  commit(types.HIDE);
+};
diff --git a/app/assets/javascripts/vuex_shared/modules/modal/index.js b/app/assets/javascripts/vuex_shared/modules/modal/index.js
new file mode 100644
index 00000000000..c349d875c24
--- /dev/null
+++ b/app/assets/javascripts/vuex_shared/modules/modal/index.js
@@ -0,0 +1,10 @@
+import state from './state';
+import mutations from './mutations';
+import * as actions from './actions';
+
+export default () => ({
+  namespaced: true,
+  state: state(),
+  mutations,
+  actions,
+});
diff --git a/app/assets/javascripts/vuex_shared/modules/modal/mutation_types.js b/app/assets/javascripts/vuex_shared/modules/modal/mutation_types.js
new file mode 100644
index 00000000000..f8259736009
--- /dev/null
+++ b/app/assets/javascripts/vuex_shared/modules/modal/mutation_types.js
@@ -0,0 +1,4 @@
+export const HIDE = 'HIDE';
+export const SHOW = 'SHOW';
+export const OPEN = 'OPEN';
+export const CLOSE = 'CLOSE';
diff --git a/app/assets/javascripts/vuex_shared/modules/modal/mutations.js b/app/assets/javascripts/vuex_shared/modules/modal/mutations.js
new file mode 100644
index 00000000000..9e96ae8b5a9
--- /dev/null
+++ b/app/assets/javascripts/vuex_shared/modules/modal/mutations.js
@@ -0,0 +1,18 @@
+import * as types from './mutation_types';
+
+export default {
+  [types.SHOW](state) {
+    state.isVisible = true;
+  },
+  [types.HIDE](state) {
+    state.isVisible = false;
+  },
+  [types.OPEN](state, data) {
+    state.data = data;
+    state.isVisible = true;
+  },
+  [types.CLOSE](state) {
+    state.data = null;
+    state.isVisible = false;
+  },
+};
diff --git a/app/assets/javascripts/vuex_shared/modules/modal/state.js b/app/assets/javascripts/vuex_shared/modules/modal/state.js
new file mode 100644
index 00000000000..5d0955aa9b0
--- /dev/null
+++ b/app/assets/javascripts/vuex_shared/modules/modal/state.js
@@ -0,0 +1,4 @@
+export default () => ({
+  isVisible: false,
+  data: null,
+});