Aborted refactoring [ci skip]

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

@@ -25,11 +25,6 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      modalStatus: false,
-    };
-  },
   computed: {
     leaveBtnTitle() {
       return COMMON_STR.LEAVE_BTN_TITLE;
@@ -43,13 +38,11 @@ export default {
   },
   methods: {
     onLeaveGroup() {
-      this.modalStatus = true;
+      this.$refs.modal.show();
     },
-    leaveGroup(leaveConfirmed) {
-      this.modalStatus = false;
-      if (leaveConfirmed) {
-        eventHub.$emit('leaveGroup', this.group, this.parentGroup);
-      }
+    leaveGroup() {
+      eventHub.$emit('leaveGroup', this.group, this.parentGroup);
+      this.$refs.modal.hide();
     },
   },
 };
@@ -83,7 +76,7 @@ export default {
         aria-hidden="true"/>
     </a>
     <modal
-      v-show="modalStatus"
+      ref="modal"
       :primary-button-label="__('Leave')"
       kind="warning"
       :title="__('Are you sure?')"

app/assets/javascripts/profile/account/components/delete_account_modal.vue

@@ -22,7 +22,6 @@
       return {
         enteredPassword: '',
         enteredUsername: '',
-        isOpen: false,
       };
     },
     components: {
@@ -70,32 +69,28 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
         return this.enteredUsername === this.username;
       },
       onSubmit(status) {
-        if (status) {
-          if (!this.canSubmit()) {
-            return;
-          }
-
-          this.$refs.form.submit();
+        if (!this.canSubmit()) {
+          return;
         }
-        this.toggleOpen(false);
-      },
-      toggleOpen(isOpen) {
-        this.isOpen = isOpen;
+        this.$refs.form.submit();
+        this.$refs.modal.hide();
       },
     },
+    mounted() {
+      this.$nextTick(() => this.$refs.modal.show());
+    },
   };
 </script>
 <template>
   <div>
     <modal
-      v-if="isOpen"
+      ref="modal"
       :title="s__('Profiles|Delete your account?')"
       :text="text"
       :kind="`danger ${!canSubmit() && 'disabled'}`"
       :primary-button-label="s__('Profiles|Delete account')"
-      @toggle="toggleOpen"
       @submit="onSubmit">
       <template slot="body" slot-scope="props">

app/assets/javascripts/repo/components/new_dropdown/index.vue

@@ -12,7 +12,6 @@
     },
     data() {
       return {
-        openModal: false,
         modalType: '',
       };
     },
@@ -24,10 +23,7 @@
     methods: {
       createNewItem(type) {
         this.modalType = type;
-        this.toggleModalOpen();
-      },
-      toggleModalOpen() {
-        this.openModal = !this.openModal;
+        this.$refs.newModal.show();
       },
     },
   };
@@ -80,10 +76,9 @@
       </li>
     </ul>
     <new-modal
-      v-if="openModal"
+      ref="newModal"
       :type="modalType"
       :path="path"
-      @toggle="toggleModalOpen"
     />
   </div>
 </template>

app/assets/javascripts/repo/components/new_dropdown/modal.vue

@@ -32,10 +32,10 @@
           type: this.type,
         });
-        this.toggleModalOpen();
+        this.$refs.modal.hide();
       },
-      toggleModalOpen() {
-        this.$emit('toggle');
+      show() {
+        this.$refs.modal.show();
       },
     },
     computed: {
@@ -69,10 +69,10 @@
 <template>
   <modal
+    ref="modal"
     :title="modalTitle"
     :primary-button-label="buttonLabel"
     kind="success"
-    @toggle="toggleModalOpen"
     @submit="createEntryInStore"
   >
     <form

app/assets/javascripts/repo/components/repo_commit_section.vue

@@ -16,7 +16,6 @@ export default {
   },
   data() {
     return {
-      showNewBranchModal: false,
       submitCommitsLoading: false,
       startNewMR: false,
       commitMessage: '',
@@ -58,7 +57,7 @@ export default {
         start_branch: createNewBranch ? this.currentBranch : undefined,
       };
-      this.showNewBranchModal = false;
+      this.$refs.modal.hide();
       this.submitCommitsLoading = true;
       this.commitChanges({ payload, newMr: this.startNewMR })
@@ -76,7 +75,7 @@ export default {
       this.checkCommitStatus()
         .then((branchChanged) => {
           if (branchChanged) {
-            this.showNewBranchModal = true;
+            this.$refs.modal.show();
           } else {
             this.makeCommit();
           }
@@ -100,12 +99,11 @@ export default {
   }"
 >
   <modal
-    v-if="showNewBranchModal"
+    ref="modal"
     :primary-button-label="__('Create new branch')"
     kind="primary"
     :title="__('Branch has changed')"
     :text="__('This branch has changed since you started editing. Would you like to create a new branch?')"
-    @toggle="showNewBranchModal = false"
     @submit="makeCommit(true)"
   />
   <button

app/assets/javascripts/repo/components/repo_edit_button.vue

@@ -9,7 +9,6 @@ export default {
   computed: {
     ...mapState([
       'editMode',
-      'discardPopupOpen',
     ]),
     ...mapGetters([
       'canEditFile',
@@ -44,13 +43,12 @@ export default {
       </span>
     </button>
     <modal
-      v-if="discardPopupOpen"
+      ref="modal"
       class="text-left"
       :primary-button-label="__('Discard changes')"
       kind="warning"
       :title="__('Are you sure?')"
       :text="__('Are you sure you want to discard your changes?')"
-      @toggle="closeDiscardPopup"
       @submit="toggleEditMode(true)"
     />
   </div>

app/assets/javascripts/repo/stores/actions/file.js

@@ -103,7 +103,7 @@ export const createTempFile = ({ state, commit, dispatch }, { tree, name, conten
   dispatch('setFileActive', file);
   if (!state.editMode && !file.base64) {
-    dispatch('toggleEditMode', true);
+    dispatch('toggleEditMode');
   }
   return Promise.resolve(file);

app/assets/javascripts/repo/stores/mutation_types.js

@@ -25,6 +25,5 @@ export const CREATE_TMP_FILE = 'CREATE_TMP_FILE';
 export const SET_PREVIEW_MODE = 'SET_PREVIEW_MODE';
 export const SET_EDIT_MODE = 'SET_EDIT_MODE';
 export const TOGGLE_EDIT_MODE = 'TOGGLE_EDIT_MODE';
-export const TOGGLE_DISCARD_POPUP = 'TOGGLE_DISCARD_POPUP';
 export const SET_CURRENT_BRANCH = 'SET_CURRENT_BRANCH';

app/assets/javascripts/repo/stores/mutations.js

@@ -27,11 +27,6 @@ export default {
       editMode: !state.editMode,
     });
   },
-  [types.TOGGLE_DISCARD_POPUP](state, discardPopupOpen) {
-    Object.assign(state, {
-      discardPopupOpen,
-    });
-  },
   [types.SET_COMMIT_REF](state, ref) {
     Object.assign(state, {
       currentRef: ref,

app/assets/javascripts/repo/stores/state.js

@@ -3,7 +3,6 @@ export default () => ({
   currentBranch: '',
   currentBlobView: 'repo-preview',
   currentRef: '',
-  discardPopupOpen: false,
   editMode: false,
   endpoints: {},
   isRoot: false,

app/assets/javascripts/vue_shared/components/modal.vue

 <script>
+import { mapActions, mapState } from 'vuex';
+
+import store from '../stores/modal';
+
 export default {
   name: 'modal',
-
+  store,
   props: {
     title: {
       type: String,
@@ -49,6 +53,9 @@ export default {
   },
   computed: {
+    ...mapState([
+      'isVisible',
+    ]),
     btnKindClass() {
       return {
         [`btn-${this.kind}`]: true,
@@ -62,8 +69,12 @@ export default {
   },
   methods: {
+    ...mapActions([
+      'hide',
+    ]),
     close() {
       this.$emit('toggle', false);
+      this.hide();
     },
     emitSubmit(status) {
       this.$emit('submit', status);
@@ -73,7 +84,9 @@ export default {
 </script>
 <template>
-<div class="modal-open">
+<div
+  v-if="isVisible"
+  class="modal-open">
   <div
     class="modal show"
     role="dialog"

app/assets/javascripts/vue_shared/stores/modal/actions.js

+import * as types from './mutation_types'
+
+export const hide = ({ commit }) => {
+  commit(types.HIDE);
+};
+
+export const show = ({ commit }) => {
+  commit(types.SHOW);
+};

app/assets/javascripts/vue_shared/stores/modal/index.js

+import Vue from 'vue';
+import Vuex from 'vuex';
+import * as actions from './actions';
+import mutations from './mutations';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  actions,
+  mutations,
+  state: {
+    isVisible: false,
+  },
+});

app/assets/javascripts/vue_shared/stores/modal/mutation_types.js

+export const HIDE = 'HIDE';
+export const SHOW = 'SHOW';

app/assets/javascripts/vue_shared/stores/modal/mutations.js

+import * as types from './mutation_types'
+
+export default {
+  [types.HIDE](state) {
+    state.isVisible = false;
+  },
+  [types.SHOW](state) {
+    state.isVisible = true;
+  },
+};