Rename modal.vue to deprecated_modal.vuewinh-deprecate-old-modal

1 files changed, 54 insertions, 34 deletions

diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue
index 63bb5832bd0..22eb7bd44c5 100644
--- a/app/assets/javascripts/groups/components/app.vue
+++ b/app/assets/javascripts/groups/components/app.vue
@@ -4,7 +4,7 @@
 import $ from 'jquery';
 import { s__ } from '~/locale';
 import loadingIcon from '~/vue_shared/components/loading_icon.vue';
-import modal from '~/vue_shared/components/modal.vue';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import { getParameterByName } from '~/lib/utils/common_utils';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 
@@ -15,7 +15,7 @@ import groupsComponent from './groups.vue';
 export default {
   components: {
     loadingIcon,
-    modal,
+    DeprecatedModal,
     groupsComponent,
   },
   props: {
@@ -52,8 +52,9 @@ export default {
     },
   },
   created() {
-    this.searchEmptyMessage = this.hideProjects ?
-      COMMON_STR.GROUP_SEARCH_EMPTY : COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY;
+    this.searchEmptyMessage = this.hideProjects
+      ? COMMON_STR.GROUP_SEARCH_EMPTY
+      : COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY;
 
     eventHub.$on('fetchPage', this.fetchPage);
     eventHub.$on('toggleChildren', this.toggleChildren);
@@ -72,22 +73,30 @@ export default {
     eventHub.$off('updateGroups', this.updateGroups);
   },
   methods: {
-    fetchGroups({ parentId, page, filterGroupsBy, sortBy, archived, updatePagination }) {
-      return this.service.getGroups(parentId, page, filterGroupsBy, sortBy, archived)
-                .then((res) => {
-                  if (updatePagination) {
-                    this.updatePagination(res.headers);
-                  }
+    fetchGroups({
+      parentId,
+      page,
+      filterGroupsBy,
+      sortBy,
+      archived,
+      updatePagination,
+    }) {
+      return this.service
+        .getGroups(parentId, page, filterGroupsBy, sortBy, archived)
+        .then(res => {
+          if (updatePagination) {
+            this.updatePagination(res.headers);
+          }
 
-                  return res;
-                })
-                .then(res => res.json())
-                .catch(() => {
-                  this.isLoading = false;
-                  $.scrollTo(0);
+          return res;
+        })
+        .then(res => res.json())
+        .catch(() => {
+          this.isLoading = false;
+          $.scrollTo(0);
 
-                  Flash(COMMON_STR.FAILURE);
-                });
+          Flash(COMMON_STR.FAILURE);
+        });
     },
     fetchAllGroups() {
       const page = getParameterByName('page') || null;
@@ -103,7 +112,7 @@ export default {
         sortBy,
         archived,
         updatePagination: true,
-      }).then((res) => {
+      }).then(res => {
         this.isLoading = false;
         this.updateGroups(res, Boolean(filterGroupsBy));
       });
@@ -118,14 +127,18 @@ export default {
         sortBy,
         archived,
         updatePagination: true,
-      }).then((res) => {
+      }).then(res => {
         this.isLoading = false;
         $.scrollTo(0);
 
         const currentPath = mergeUrlParams({ page }, window.location.href);
-        window.history.replaceState({
-          page: currentPath,
-        }, document.title, currentPath);
+        window.history.replaceState(
+          {
+            page: currentPath,
+          },
+          document.title,
+          currentPath,
+        );
 
         this.updateGroups(res);
       });
@@ -138,11 +151,13 @@ export default {
           // eslint-disable-next-line promise/catch-or-return
           this.fetchGroups({
             parentId: parentGroup.id,
-          }).then((res) => {
-            this.store.setGroupChildren(parentGroup, res);
-          }).catch(() => {
-            parentGroup.isChildrenLoading = false;
-          });
+          })
+            .then(res => {
+              this.store.setGroupChildren(parentGroup, res);
+            })
+            .catch(() => {
+              parentGroup.isChildrenLoading = false;
+            });
         } else {
           parentGroup.isOpen = true;
         }
@@ -154,7 +169,11 @@ export default {
       this.targetGroup = group;
       this.targetParentGroup = parentGroup;
       this.showModal = true;
-      this.groupLeaveConfirmationMessage = s__(`GroupsTree|Are you sure you want to leave the "${group.fullName}" group?`);
+      this.groupLeaveConfirmationMessage = s__(
+        `GroupsTree|Are you sure you want to leave the "${
+          group.fullName
+        }" group?`,
+      );
     },
     hideLeaveGroupModal() {
       this.showModal = false;
@@ -162,14 +181,15 @@ export default {
     leaveGroup() {
       this.showModal = false;
       this.targetGroup.isBeingRemoved = true;
-      this.service.leaveGroup(this.targetGroup.leavePath)
+      this.service
+        .leaveGroup(this.targetGroup.leavePath)
         .then(res => res.json())
-        .then((res) => {
+        .then(res => {
           $.scrollTo(0);
           this.store.removeGroup(this.targetGroup, this.targetParentGroup);
           Flash(res.notice, 'notice');
         })
-        .catch((err) => {
+        .catch(err => {
           let message = COMMON_STR.FAILURE;
           if (err.status === 403) {
             message = COMMON_STR.LEAVE_FORBIDDEN;
@@ -208,8 +228,8 @@ export default {
       :search-empty-message="searchEmptyMessage"
       :page-info="pageInfo"
     />
-    <modal
-      v-if="showModal"
+    <deprecated-modal
+      v-show="showModal"
       kind="warning"
       :primary-button-label="__('Leave')"
       :title="__('Are you sure?')"