From 07487628f4c900f4eb09e3cf11a525be0498bd58 Mon Sep 17 00:00:00 2001 From: Winnie Hellmann Date: Wed, 28 Feb 2018 21:47:44 +0000 Subject: Rename modal.vue to deprecated_modal.vue --- app/assets/javascripts/groups/components/app.vue | 88 +++++++---- .../ide/components/new_dropdown/modal.vue | 118 +++++++------- .../ide/components/repo_commit_section.vue | 26 ++-- .../index/components/delete_project_modal.vue | 8 +- .../admin/users/components/delete_user_modal.vue | 8 +- .../shared/components/delete_milestone_modal.vue | 8 +- .../pipelines/components/pipelines_table.vue | 8 +- .../account/components/delete_account_modal.vue | 8 +- .../vue_shared/components/deprecated_modal.vue | 173 +++++++++++++++++++++ .../javascripts/vue_shared/components/modal.vue | 173 --------------------- .../vue_shared/components/recaptcha_modal.vue | 8 +- changelogs/unreleased/winh-deprecate-old-modal.yml | 5 + .../vue_shared/components/deprecated_modal_spec.js | 67 ++++++++ .../vue_shared/components/modal_spec.js | 67 -------- 14 files changed, 394 insertions(+), 371 deletions(-) create mode 100644 app/assets/javascripts/vue_shared/components/deprecated_modal.vue delete mode 100644 app/assets/javascripts/vue_shared/components/modal.vue create mode 100644 changelogs/unreleased/winh-deprecate-old-modal.yml create mode 100644 spec/javascripts/vue_shared/components/deprecated_modal_spec.js delete mode 100644 spec/javascripts/vue_shared/components/modal_spec.js 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" /> - - 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 { - components: { - modal, +export default { + components: { + DeprecatedModal, + }, + props: { + branchId: { + type: String, + required: true, }, - props: { - branchId: { - type: String, - required: true, - }, - type: { - type: String, - required: true, - }, - path: { - type: String, - required: true, - }, + type: { + type: String, + required: true, }, - data() { - return { - entryName: this.path !== '' ? `${this.path}/` : '', - }; + path: { + type: String, + required: true, }, - computed: { - modalTitle() { - if (this.type === 'tree') { - return __('Create new directory'); - } + }, + data() { + return { + entryName: this.path !== '' ? `${this.path}/` : '', + }; + }, + computed: { + modalTitle() { + if (this.type === 'tree') { + return __('Create new directory'); + } - return __('Create new file'); - }, - buttonLabel() { - if (this.type === 'tree') { - return __('Create directory'); - } - - return __('Create file'); - }, - formLabelName() { - if (this.type === 'tree') { - return __('Directory name'); - } + return __('Create new file'); + }, + buttonLabel() { + if (this.type === 'tree') { + return __('Create directory'); + } - return __('File name'); - }, + return __('Create file'); }, - mounted() { - this.$refs.fieldName.focus(); + formLabelName() { + if (this.type === 'tree') { + return __('Directory name'); + } + + return __('File name'); }, - methods: { - createEntryInStore() { - this.$emit('create', { - branchId: this.branchId, - name: this.entryName, - type: this.type, - }); + }, + mounted() { + this.$refs.fieldName.focus(); + }, + methods: { + createEntryInStore() { + this.$emit('create', { + branchId: this.branchId, + name: this.entryName, + type: this.type, + }); - this.hideModal(); - }, - hideModal() { - this.$emit('hide'); - }, + this.hideModal(); + }, + hideModal() { + this.$emit('hide'); }, - }; + }, +}; diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue index d772cab2d0e..d885ed5e301 100644 --- a/app/assets/javascripts/ide/components/repo_commit_section.vue +++ b/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 }" > - - + 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 @@ - + diff --git a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue index 7b5e333011e..0e3ac636661 100644 --- a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue +++ b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue @@ -1,11 +1,11 @@ - + diff --git a/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue index c43e0a0490f..16f792d635a 100644 --- a/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue +++ b/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.`), - + diff --git a/app/assets/javascripts/pipelines/components/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_table.vue index c9028952ddd..714aed1333e 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_table.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_table.vue @@ -1,5 +1,5 @@ - + diff --git a/app/assets/javascripts/vue_shared/components/deprecated_modal.vue b/app/assets/javascripts/vue_shared/components/deprecated_modal.vue new file mode 100644 index 00000000000..dcf1489b37c --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/deprecated_modal.vue @@ -0,0 +1,173 @@ + + + diff --git a/app/assets/javascripts/vue_shared/components/modal.vue b/app/assets/javascripts/vue_shared/components/modal.vue deleted file mode 100644 index 5f1364421aa..00000000000 --- a/app/assets/javascripts/vue_shared/components/modal.vue +++ /dev/null @@ -1,173 +0,0 @@ - - - diff --git a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue index c35621c9ef3..21ffdc1dc86 100644 --- a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue +++ b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue @@ -1,11 +1,11 @@ diff --git a/changelogs/unreleased/winh-deprecate-old-modal.yml b/changelogs/unreleased/winh-deprecate-old-modal.yml new file mode 100644 index 00000000000..4fae1fafbea --- /dev/null +++ b/changelogs/unreleased/winh-deprecate-old-modal.yml @@ -0,0 +1,5 @@ +--- +title: Rename modal.vue to deprecated_modal.vue +merge_request: 17438 +author: +type: other diff --git a/spec/javascripts/vue_shared/components/deprecated_modal_spec.js b/spec/javascripts/vue_shared/components/deprecated_modal_spec.js new file mode 100644 index 00000000000..59d4e549a91 --- /dev/null +++ b/spec/javascripts/vue_shared/components/deprecated_modal_spec.js @@ -0,0 +1,67 @@ +import $ from 'jquery'; +import Vue from 'vue'; +import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; + +const modalComponent = Vue.extend(DeprecatedModal); + +describe('DeprecatedModal', () => { + let vm; + + afterEach(() => { + vm.$destroy(); + }); + + describe('props', () => { + describe('without primaryButtonLabel', () => { + beforeEach(() => { + vm = mountComponent(modalComponent, { + primaryButtonLabel: null, + }); + }); + + it('does not render a primary button', () => { + expect(vm.$el.querySelector('.js-primary-button')).toBeNull(); + }); + }); + + describe('with id', () => { + describe('does not render a primary button', () => { + beforeEach(() => { + vm = mountComponent(modalComponent, { + id: 'my-modal', + }); + }); + + it('assigns the id to the modal', () => { + expect(vm.$el.querySelector('#my-modal.modal')).not.toBeNull(); + }); + + it('does not show the modal immediately', () => { + expect(vm.$el.querySelector('#my-modal.modal')).not.toHaveClass('show'); + }); + + it('does not show a backdrop', () => { + expect(vm.$el.querySelector('modal-backdrop')).toBeNull(); + }); + }); + }); + + it('works with data-toggle="modal"', (done) => { + setFixtures(` + + + `); + + const modalContainer = document.getElementById('modal-container'); + const modalButton = document.getElementById('modal-button'); + vm = mountComponent(modalComponent, { + id: 'my-modal', + }, modalContainer); + const modalElement = vm.$el.querySelector('#my-modal'); + $(modalElement).on('shown.bs.modal', () => done()); + + modalButton.click(); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/modal_spec.js b/spec/javascripts/vue_shared/components/modal_spec.js deleted file mode 100644 index d01a94c25e5..00000000000 --- a/spec/javascripts/vue_shared/components/modal_spec.js +++ /dev/null @@ -1,67 +0,0 @@ -import $ from 'jquery'; -import Vue from 'vue'; -import modal from '~/vue_shared/components/modal.vue'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; - -const modalComponent = Vue.extend(modal); - -describe('Modal', () => { - let vm; - - afterEach(() => { - vm.$destroy(); - }); - - describe('props', () => { - describe('without primaryButtonLabel', () => { - beforeEach(() => { - vm = mountComponent(modalComponent, { - primaryButtonLabel: null, - }); - }); - - it('does not render a primary button', () => { - expect(vm.$el.querySelector('.js-primary-button')).toBeNull(); - }); - }); - - describe('with id', () => { - describe('does not render a primary button', () => { - beforeEach(() => { - vm = mountComponent(modalComponent, { - id: 'my-modal', - }); - }); - - it('assigns the id to the modal', () => { - expect(vm.$el.querySelector('#my-modal.modal')).not.toBeNull(); - }); - - it('does not show the modal immediately', () => { - expect(vm.$el.querySelector('#my-modal.modal')).not.toHaveClass('show'); - }); - - it('does not show a backdrop', () => { - expect(vm.$el.querySelector('modal-backdrop')).toBeNull(); - }); - }); - }); - - it('works with data-toggle="modal"', (done) => { - setFixtures(` - - - `); - - const modalContainer = document.getElementById('modal-container'); - const modalButton = document.getElementById('modal-button'); - vm = mountComponent(modalComponent, { - id: 'my-modal', - }, modalContainer); - const modalElement = vm.$el.querySelector('#my-modal'); - $(modalElement).on('shown.bs.modal', () => done()); - - modalButton.click(); - }); - }); -}); -- cgit v1.2.3