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.

5 files changed, 53 insertions, 0 deletions

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,
+});