Rename modal.vue to deprecated_modal.vue (EE port)

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,9 +73,17 @@ 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) => {
+    fetchGroups({
+      parentId,
+      page,
+      filterGroupsBy,
+      sortBy,
+      archived,
+      updatePagination,
+    }) {
+      return this.service
+        .getGroups(parentId, page, filterGroupsBy, sortBy, archived)
+        .then(res => {
           if (updatePagination) {
             this.updatePagination(res.headers);
           }
@@ -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({
+        window.history.replaceState(
+          {
             page: currentPath,
-        }, document.title, currentPath);
+          },
+          document.title,
+          currentPath,
+        );
 
         this.updateGroups(res);
       });
@@ -138,9 +151,11 @@ export default {
           // eslint-disable-next-line promise/catch-or-return
           this.fetchGroups({
             parentId: parentGroup.id,
-          }).then((res) => {
+          })
+            .then(res => {
               this.store.setGroupChildren(parentGroup, res);
-          }).catch(() => {
+            })
+            .catch(() => {
               parentGroup.isChildrenLoading = false;
             });
         } else {
@@ -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?')"

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

 <script>
-  import { __ } from '~/locale';
-  import modal from '~/vue_shared/components/modal.vue';
+import { __ } from '~/locale';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 
-  export default {
+export default {
   components: {
-      modal,
+    DeprecatedModal,
   },
   props: {
     branchId: {
@@ -65,11 +65,11 @@
       this.$emit('hide');
     },
   },
-  };
+};
 </script>
 
 <template>
-  <modal
+  <deprecated-modal
     :title="modalTitle"
     :primary-button-label="buttonLabel"
     kind="success"
@@ -95,5 +95,5 @@
         </div>
       </fieldset>
     </form>
-  </modal>
+  </deprecated-modal>
 </template>

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

@@ -2,7 +2,7 @@
 import { mapState, mapActions, mapGetters } from 'vuex';
 import tooltip from '~/vue_shared/directives/tooltip';
 import icon from '~/vue_shared/components/icon.vue';
-import modal from '~/vue_shared/components/modal.vue';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import commitFilesList from './commit_sidebar/list.vue';
 import * as consts from '../stores/modules/commit/constants';
@@ -10,7 +10,7 @@ import Actions from './commit_sidebar/actions.vue';
 
 export default {
   components: {
-    modal,
+    DeprecatedModal,
     icon,
     commitFilesList,
     Actions,
@@ -37,23 +37,20 @@ export default {
       'lastCommitMsg',
       'changedFiles',
     ]),
-    ...mapState('commit', [
-      'commitMessage',
-      'submitCommitLoading',
-    ]),
+    ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
     ...mapGetters('commit', [
       'commitButtonDisabled',
       'discardDraftButtonDisabled',
       'branchName',
     ]),
     statusSvg() {
-      return this.lastCommitMsg ? this.committedStateSvgPath : this.noChangesStateSvgPath;
+      return this.lastCommitMsg
+        ? this.committedStateSvgPath
+        : this.noChangesStateSvgPath;
     },
   },
   methods: {
-    ...mapActions([
-      'setPanelCollapsedStatus',
-    ]),
+    ...mapActions(['setPanelCollapsedStatus']),
     ...mapActions('commit', [
       'updateCommitMessage',
       'discardDraft',
@@ -67,8 +64,9 @@ export default {
       });
     },
     forceCreateNewBranch() {
-      return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH)
-        .then(() => this.commitChanges());
+      return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH).then(() =>
+        this.commitChanges(),
+      );
     },
   },
 };
@@ -81,7 +79,7 @@ export default {
       'multi-file-commit-empty-state-container': !changedFiles.length
     }"
   >
-    <modal
+    <deprecated-modal
       id="ide-create-branch-modal"
       :primary-button-label="__('Create new branch')"
       kind="success"
@@ -92,7 +90,7 @@ export default {
         {{ __(`This branch has changed since you started editing.
           Would you like to create a new branch?`) }}
       </template>
-    </modal>
+    </deprecated-modal>
     <commit-files-list
       title="Staged"
       :file-list="changedFiles"

app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue

 <script>
   import _ from 'underscore';
-  import modal from '~/vue_shared/components/modal.vue';
+  import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
   import { s__, sprintf } from '~/locale';
 
   export default {
     components: {
-      modal,
+      DeprecatedModal,
     },
     props: {
       deleteProjectUrl: {
@@ -79,7 +79,7 @@
 </script>
 
 <template>
-  <modal
+  <deprecated-modal
     id="delete-project-modal"
     :title="title"
     :text="text"
@@ -121,5 +121,5 @@
         />
       </form>
     </template>
-  </modal>
+  </deprecated-modal>
 </template>

app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue

 <script>
   import _ from 'underscore';
-  import modal from '~/vue_shared/components/modal.vue';
+  import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
   import { s__, sprintf } from '~/locale';
 
   export default {
     components: {
-      modal,
+      DeprecatedModal,
     },
     props: {
       deleteUserUrl: {
@@ -113,7 +113,7 @@
 </script>
 
 <template>
-  <modal
+  <deprecated-modal
     id="delete-user-modal"
     :title="title"
     :text="text"
@@ -170,5 +170,5 @@
         {{ secondaryButtonLabel }}
       </button>
     </template>
-  </modal>
+  </deprecated-modal>
 </template>

app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue

@@ -2,14 +2,14 @@
   import axios from '~/lib/utils/axios_utils';
 
   import Flash from '~/flash';
-  import modal from '~/vue_shared/components/modal.vue';
+  import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
   import { n__, s__, sprintf } from '~/locale';
   import { redirectTo } from '~/lib/utils/url_utility';
   import eventHub from '../event_hub';
 
   export default {
     components: {
-      modal,
+      DeprecatedModal,
     },
     props: {
       issueCount: {
@@ -92,7 +92,7 @@ Once deleted, it cannot be undone or recovered.`),
 </script>
 
 <template>
-  <modal
+  <deprecated-modal
     id="delete-milestone-modal"
     :title="title"
     :text="text"
@@ -106,5 +106,5 @@ Once deleted, it cannot be undone or recovered.`),
       <p v-html="props.text"></p>
     </template>
 
-  </modal>
+  </deprecated-modal>
 </template>

app/assets/javascripts/pipelines/components/pipelines_table.vue

 <script>
-  import modal from '~/vue_shared/components/modal.vue';
+  import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
   import { s__, sprintf } from '~/locale';
   import pipelinesTableRowComponent from './pipelines_table_row.vue';
   import eventHub from '../event_hub';
@@ -12,7 +12,7 @@
   export default {
     components: {
       pipelinesTableRowComponent,
-      modal,
+      DeprecatedModal,
     },
     props: {
       pipelines: {
@@ -120,7 +120,7 @@
       :auto-devops-help-path="autoDevopsHelpPath"
       :view-type="viewType"
     />
-    <modal
+    <deprecated-modal
       id="confirmation-modal"
       :title="modalTitle"
       :text="modalText"
@@ -134,6 +134,6 @@
       >
         <p v-html="props.text"></p>
       </template>
-    </modal>
+    </deprecated-modal>
   </div>
 </template>

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

 <script>
-  import modal from '~/vue_shared/components/modal.vue';
+  import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
   import { __, s__, sprintf } from '~/locale';
   import csrf from '~/lib/utils/csrf';
 
   export default {
     components: {
-      modal,
+      DeprecatedModal,
     },
     props: {
       actionUrl: {
@@ -76,7 +76,7 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
 </script>
 
 <template>
-  <modal
+  <deprecated-modal
     id="delete-account-modal"
     :title="s__('Profiles|Delete your account?')"
     :text="text"
@@ -131,5 +131,5 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
       </form>
     </template>
 
-  </modal>
+  </deprecated-modal>
 </template>

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

 <script>
   /* eslint-disable vue/require-default-prop */
   export default {
-    name: 'Modal',
+    name: 'DeprecatedModal', // use GlModal instead
 
     props: {
       id: {

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

 <script>
-  import modal from './modal.vue';
+  import DeprecatedModal from './deprecated_modal.vue';
 
   export default {
     name: 'RecaptchaModal',
 
     components: {
-      modal,
+      DeprecatedModal,
     },
 
     props: {
@@ -65,7 +65,7 @@
 </script>
 
 <template>
-  <modal
+  <deprecated-modal
     kind="warning"
     class="recaptcha-modal js-recaptcha-modal"
     :hide-footer="true"
@@ -82,5 +82,5 @@
       >
       </div>
     </div>
-  </modal>
+  </deprecated-modal>
 </template>

changelogs/unreleased/winh-deprecate-old-modal.yml

+---
+title: Rename modal.vue to deprecated_modal.vue
+merge_request: 17438
+author:
+type: other

ee/app/assets/javascripts/boards/components/board_form.vue

@@ -3,7 +3,7 @@
 /* global BoardService */
 
 import Flash from '~/flash';
-import modal from '~/vue_shared/components/modal.vue';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import BoardLabelsSelect from '~/vue_shared/components/sidebar/labels_select/base.vue';
 import { visitUrl } from '~/lib/utils/url_utility';
 import BoardMilestoneSelect from './milestone_select.vue';
@@ -30,7 +30,7 @@ export default {
     BoardLabelsSelect,
     BoardMilestoneSelect,
     BoardWeightSelect,
-    modal,
+    DeprecatedModal,
   },
   props: {
     canAdminBoard: {
@@ -148,12 +148,14 @@ export default {
       if (label.isAny) {
         this.board.labels = [];
       } else if (!this.board.labels.find(l => l.id === label.id)) {
-        this.board.labels.push(new ListLabel({
+        this.board.labels.push(
+          new ListLabel({
             id: label.id,
             title: label.title,
             color: label.color[0],
             textColor: label.text_color,
-        }));
+          }),
+        );
       } else {
         let labels = this.board.labels;
         labels = labels.filter(selected => selected.id !== label.id);
@@ -164,7 +166,8 @@ export default {
       if (this.board.name.length === 0) return;
       this.isLoading = true;
       if (this.isDeleteForm) {
-        gl.boardService.deleteBoard(this.currentBoard)
+        gl.boardService
+          .deleteBoard(this.currentBoard)
           .then(() => {
             visitUrl(Store.rootPath);
           })
@@ -173,9 +176,10 @@ export default {
             this.isLoading = false;
           });
       } else {
-        gl.boardService.createBoard(this.board)
+        gl.boardService
+          .createBoard(this.board)
           .then(resp => resp.data)
-          .then((data) => {
+          .then(data => {
             visitUrl(data.board_path);
           })
           .catch(() => {
@@ -200,7 +204,7 @@ export default {
 </script>
 
 <template>
-  <modal
+  <deprecated-modal
     v-show="isVisible"
     modal-dialog-class="board-config-modal"
     :hide-footer="readonly"
@@ -300,5 +304,5 @@ export default {
         </div>
       </form>
     </template>
-  </modal>
+  </deprecated-modal>
 </template>

ee/app/assets/javascripts/geo_nodes/components/app.vue

 <script>
-  import { s__ } from '~/locale';
-  import Flash from '~/flash';
-  import statusCodes from '~/lib/utils/http_status';
-  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
-  import modal from '~/vue_shared/components/modal.vue';
-  import SmartInterval from '~/smart_interval';
+import { s__ } from '~/locale';
+import Flash from '~/flash';
+import statusCodes from '~/lib/utils/http_status';
+import loadingIcon from '~/vue_shared/components/loading_icon.vue';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
+import SmartInterval from '~/smart_interval';
 
-  import eventHub from '../event_hub';
+import eventHub from '../event_hub';
 
-  import { NODE_ACTIONS } from '../constants';
+import { NODE_ACTIONS } from '../constants';
 
-  import geoNodesList from './geo_nodes_list.vue';
+import geoNodesList from './geo_nodes_list.vue';
 
-  export default {
+export default {
   components: {
     loadingIcon,
-      modal,
+    DeprecatedModal,
     geoNodesList,
   },
   props: {
@@ -86,31 +86,36 @@
     },
     fetchGeoNodes() {
       this.hasError = false;
-        this.service.getGeoNodes()
+      this.service
+        .getGeoNodes()
         .then(res => res.data)
-          .then((nodes) => {
+        .then(nodes => {
           this.store.setNodes(nodes);
           this.isLoading = false;
         })
-          .catch((err) => {
+        .catch(err => {
           this.hasError = true;
           this.errorMessage = err;
         });
     },
     fetchNodeDetails(node) {
       const nodeId = node.id;
-        return this.service.getGeoNodeDetails(node)
+      return this.service
+        .getGeoNodeDetails(node)
         .then(res => res.data)
-          .then((nodeDetails) => {
+        .then(nodeDetails => {
           const primaryNodeVersion = this.store.getPrimaryNodeVersion();
           const updatedNodeDetails = Object.assign(nodeDetails, {
             primaryVersion: primaryNodeVersion.version,
             primaryRevision: primaryNodeVersion.revision,
           });
           this.store.setNodeDetails(nodeId, updatedNodeDetails);
-            eventHub.$emit('nodeDetailsLoaded', this.store.getNodeDetails(nodeId));
+          eventHub.$emit(
+            'nodeDetailsLoaded',
+            this.store.getNodeDetails(nodeId),
+          );
         })
-          .catch((err) => {
+        .catch(err => {
           if (err.response && err.response.status === statusCodes.NOT_FOUND) {
             this.store.setNodeDetails(nodeId, {
               geo_node_id: nodeId,
@@ -120,7 +125,10 @@
               sync_status_unavailable: true,
               storage_shards_match: null,
             });
-              eventHub.$emit('nodeDetailsLoaded', this.store.getNodeDetails(nodeId));
+            eventHub.$emit(
+              'nodeDetailsLoaded',
+              this.store.getNodeDetails(nodeId),
+            );
           } else {
             eventHub.$emit('nodeDetailsLoadFailed', nodeId, err);
           }
@@ -128,10 +136,14 @@
     },
     repairNode(targetNode) {
       this.setNodeActionStatus(targetNode, true);
-        this.service.repairNode(targetNode)
+      this.service
+        .repairNode(targetNode)
         .then(() => {
           this.setNodeActionStatus(targetNode, false);
-            Flash(s__('GeoNodes|Node Authentication was successfully repaired.'), 'notice');
+          Flash(
+            s__('GeoNodes|Node Authentication was successfully repaired.'),
+            'notice',
+          );
         })
         .catch(() => {
           this.setNodeActionStatus(targetNode, false);
@@ -140,19 +152,26 @@
     },
     toggleNode(targetNode) {
       this.setNodeActionStatus(targetNode, true);
-        this.service.toggleNode(targetNode)
+      this.service
+        .toggleNode(targetNode)
         .then(res => res.data)
-          .then((node) => {
-            Object.assign(targetNode, { enabled: node.enabled, nodeActionActive: false });
+        .then(node => {
+          Object.assign(targetNode, {
+            enabled: node.enabled,
+            nodeActionActive: false,
+          });
         })
         .catch(() => {
           this.setNodeActionStatus(targetNode, false);
-            Flash(s__('GeoNodes|Something went wrong while changing node status'));
+          Flash(
+            s__('GeoNodes|Something went wrong while changing node status'),
+          );
         });
     },
     removeNode(targetNode) {
       this.setNodeActionStatus(targetNode, true);
-        this.service.removeNode(targetNode)
+      this.service
+        .removeNode(targetNode)
         .then(() => {
           this.store.removeNode(targetNode);
           Flash(s__('GeoNodes|Node was successfully removed.'), 'notice');
@@ -171,7 +190,13 @@
         this.removeNode(this.targetNode);
       }
     },
-      showNodeActionModal({ actionType, node, modalKind = 'warning', modalMessage, modalActionLabel }) {
+    showNodeActionModal({
+      actionType,
+      node,
+      modalKind = 'warning',
+      modalMessage,
+      modalActionLabel,
+    }) {
       this.targetNode = node;
       this.targetNodeActionType = actionType;
       this.modalKind = modalKind;
@@ -188,7 +213,7 @@
       this.showModal = false;
     },
   },
-  };
+};
 </script>
 
 <template>
@@ -214,7 +239,7 @@
     >
       {{ errorMessage }}
     </p>
-    <modal
+    <deprecated-modal
       v-show="showModal"
       :title="__('Are you sure?')"
       :kind="modalKind"

spec/javascripts/vue_shared/components/modal_spec.js → spec/javascripts/vue_shared/components/deprecated_modal_spec.js

 import $ from 'jquery';
 import Vue from 'vue';
-import modal from '~/vue_shared/components/modal.vue';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
-const modalComponent = Vue.extend(modal);
+const modalComponent = Vue.extend(DeprecatedModal);
 
-describe('Modal', () => {
+describe('DeprecatedModal', () => {
   let vm;
 
   afterEach(() => {