Commit 963e445f authored by Filipa Lacerda's avatar Filipa Lacerda 🤸🏼

Merge branch 'winh-deprecate-old-modal' into 'master'

Rename modal.vue to deprecated_modal.vue

See merge request gitlab-org/gitlab-ce!17438
parents 28be0478 07487628
Pipeline #19369259 passed with stages
in 58 minutes and 28 seconds
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
import $ from 'jquery'; import $ from 'jquery';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import loadingIcon from '~/vue_shared/components/loading_icon.vue'; 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 { getParameterByName } from '~/lib/utils/common_utils';
import { mergeUrlParams } from '~/lib/utils/url_utility'; import { mergeUrlParams } from '~/lib/utils/url_utility';
...@@ -15,7 +15,7 @@ import groupsComponent from './groups.vue'; ...@@ -15,7 +15,7 @@ import groupsComponent from './groups.vue';
export default { export default {
components: { components: {
loadingIcon, loadingIcon,
modal, DeprecatedModal,
groupsComponent, groupsComponent,
}, },
props: { props: {
...@@ -52,8 +52,9 @@ export default { ...@@ -52,8 +52,9 @@ export default {
}, },
}, },
created() { created() {
this.searchEmptyMessage = this.hideProjects ? this.searchEmptyMessage = this.hideProjects
COMMON_STR.GROUP_SEARCH_EMPTY : COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY; ? COMMON_STR.GROUP_SEARCH_EMPTY
: COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY;
eventHub.$on('fetchPage', this.fetchPage); eventHub.$on('fetchPage', this.fetchPage);
eventHub.$on('toggleChildren', this.toggleChildren); eventHub.$on('toggleChildren', this.toggleChildren);
...@@ -72,22 +73,30 @@ export default { ...@@ -72,22 +73,30 @@ export default {
eventHub.$off('updateGroups', this.updateGroups); eventHub.$off('updateGroups', this.updateGroups);
}, },
methods: { methods: {
fetchGroups({ parentId, page, filterGroupsBy, sortBy, archived, updatePagination }) { fetchGroups({
return this.service.getGroups(parentId, page, filterGroupsBy, sortBy, archived) parentId,
.then((res) => { page,
if (updatePagination) { filterGroupsBy,
this.updatePagination(res.headers); sortBy,
} archived,
updatePagination,
}) {
return this.service
.getGroups(parentId, page, filterGroupsBy, sortBy, archived)
.then(res => {
if (updatePagination) {
this.updatePagination(res.headers);
}
return res; return res;
}) })
.then(res => res.json()) .then(res => res.json())
.catch(() => { .catch(() => {
this.isLoading = false; this.isLoading = false;
$.scrollTo(0); $.scrollTo(0);
Flash(COMMON_STR.FAILURE); Flash(COMMON_STR.FAILURE);
}); });
}, },
fetchAllGroups() { fetchAllGroups() {
const page = getParameterByName('page') || null; const page = getParameterByName('page') || null;
...@@ -103,7 +112,7 @@ export default { ...@@ -103,7 +112,7 @@ export default {
sortBy, sortBy,
archived, archived,
updatePagination: true, updatePagination: true,
}).then((res) => { }).then(res => {
this.isLoading = false; this.isLoading = false;
this.updateGroups(res, Boolean(filterGroupsBy)); this.updateGroups(res, Boolean(filterGroupsBy));
}); });
...@@ -118,14 +127,18 @@ export default { ...@@ -118,14 +127,18 @@ export default {
sortBy, sortBy,
archived, archived,
updatePagination: true, updatePagination: true,
}).then((res) => { }).then(res => {
this.isLoading = false; this.isLoading = false;
$.scrollTo(0); $.scrollTo(0);
const currentPath = mergeUrlParams({ page }, window.location.href); const currentPath = mergeUrlParams({ page }, window.location.href);
window.history.replaceState({ window.history.replaceState(
page: currentPath, {
}, document.title, currentPath); page: currentPath,
},
document.title,
currentPath,
);
this.updateGroups(res); this.updateGroups(res);
}); });
...@@ -138,11 +151,13 @@ export default { ...@@ -138,11 +151,13 @@ export default {
// eslint-disable-next-line promise/catch-or-return // eslint-disable-next-line promise/catch-or-return
this.fetchGroups({ this.fetchGroups({
parentId: parentGroup.id, parentId: parentGroup.id,
}).then((res) => { })
this.store.setGroupChildren(parentGroup, res); .then(res => {
}).catch(() => { this.store.setGroupChildren(parentGroup, res);
parentGroup.isChildrenLoading = false; })
}); .catch(() => {
parentGroup.isChildrenLoading = false;
});
} else { } else {
parentGroup.isOpen = true; parentGroup.isOpen = true;
} }
...@@ -154,7 +169,11 @@ export default { ...@@ -154,7 +169,11 @@ export default {
this.targetGroup = group; this.targetGroup = group;
this.targetParentGroup = parentGroup; this.targetParentGroup = parentGroup;
this.showModal = true; 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() { hideLeaveGroupModal() {
this.showModal = false; this.showModal = false;
...@@ -162,14 +181,15 @@ export default { ...@@ -162,14 +181,15 @@ export default {
leaveGroup() { leaveGroup() {
this.showModal = false; this.showModal = false;
this.targetGroup.isBeingRemoved = true; this.targetGroup.isBeingRemoved = true;
this.service.leaveGroup(this.targetGroup.leavePath) this.service
.leaveGroup(this.targetGroup.leavePath)
.then(res => res.json()) .then(res => res.json())
.then((res) => { .then(res => {
$.scrollTo(0); $.scrollTo(0);
this.store.removeGroup(this.targetGroup, this.targetParentGroup); this.store.removeGroup(this.targetGroup, this.targetParentGroup);
Flash(res.notice, 'notice'); Flash(res.notice, 'notice');
}) })
.catch((err) => { .catch(err => {
let message = COMMON_STR.FAILURE; let message = COMMON_STR.FAILURE;
if (err.status === 403) { if (err.status === 403) {
message = COMMON_STR.LEAVE_FORBIDDEN; message = COMMON_STR.LEAVE_FORBIDDEN;
...@@ -208,8 +228,8 @@ export default { ...@@ -208,8 +228,8 @@ export default {
:search-empty-message="searchEmptyMessage" :search-empty-message="searchEmptyMessage"
:page-info="pageInfo" :page-info="pageInfo"
/> />
<modal <deprecated-modal
v-if="showModal" v-show="showModal"
kind="warning" kind="warning"
:primary-button-label="__('Leave')" :primary-button-label="__('Leave')"
:title="__('Are you sure?')" :title="__('Are you sure?')"
......
<script> <script>
import { __ } from '~/locale'; import { __ } from '~/locale';
import modal from '~/vue_shared/components/modal.vue'; import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
export default { export default {
components: { components: {
modal, DeprecatedModal,
},
props: {
branchId: {
type: String,
required: true,
}, },
props: { type: {
branchId: { type: String,
type: String, required: true,
required: true,
},
type: {
type: String,
required: true,
},
path: {
type: String,
required: true,
},
}, },
data() { path: {
return { type: String,
entryName: this.path !== '' ? `${this.path}/` : '', required: true,
};
}, },
computed: { },
modalTitle() { data() {
if (this.type === 'tree') { return {
return __('Create new directory'); entryName: this.path !== '' ? `${this.path}/` : '',
} };
},
computed: {
modalTitle() {
if (this.type === 'tree') {
return __('Create new directory');
}
return __('Create new file'); return __('Create new file');
}, },
buttonLabel() { buttonLabel() {
if (this.type === 'tree') { if (this.type === 'tree') {
return __('Create directory'); return __('Create directory');
} }
return __('Create file');
},
formLabelName() {
if (this.type === 'tree') {
return __('Directory name');
}
return __('File name'); return __('Create file');
},
}, },
mounted() { formLabelName() {
this.$refs.fieldName.focus(); if (this.type === 'tree') {
return __('Directory name');
}
return __('File name');
}, },
methods: { },
createEntryInStore() { mounted() {
this.$emit('create', { this.$refs.fieldName.focus();
branchId: this.branchId, },
name: this.entryName, methods: {
type: this.type, createEntryInStore() {
}); this.$emit('create', {
branchId: this.branchId,
name: this.entryName,
type: this.type,
});
this.hideModal(); this.hideModal();
}, },
hideModal() { hideModal() {
this.$emit('hide'); this.$emit('hide');
},
}, },
}; },
};
</script> </script>
<template> <template>
<modal <deprecated-modal
:title="modalTitle" :title="modalTitle"
:primary-button-label="buttonLabel" :primary-button-label="buttonLabel"
kind="success" kind="success"
...@@ -95,5 +95,5 @@ ...@@ -95,5 +95,5 @@
</div> </div>
</fieldset> </fieldset>
</form> </form>
</modal> </deprecated-modal>
</template> </template>
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import { mapState, mapActions, mapGetters } from 'vuex'; import { mapState, mapActions, mapGetters } from 'vuex';
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
import icon from '~/vue_shared/components/icon.vue'; 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 LoadingButton from '~/vue_shared/components/loading_button.vue';
import commitFilesList from './commit_sidebar/list.vue'; import commitFilesList from './commit_sidebar/list.vue';
import * as consts from '../stores/modules/commit/constants'; import * as consts from '../stores/modules/commit/constants';
...@@ -10,7 +10,7 @@ import Actions from './commit_sidebar/actions.vue'; ...@@ -10,7 +10,7 @@ import Actions from './commit_sidebar/actions.vue';
export default { export default {
components: { components: {
modal, DeprecatedModal,
icon, icon,
commitFilesList, commitFilesList,
Actions, Actions,
...@@ -37,23 +37,20 @@ export default { ...@@ -37,23 +37,20 @@ export default {
'lastCommitMsg', 'lastCommitMsg',
'changedFiles', 'changedFiles',
]), ]),
...mapState('commit', [ ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
'commitMessage',
'submitCommitLoading',
]),
...mapGetters('commit', [ ...mapGetters('commit', [
'commitButtonDisabled', 'commitButtonDisabled',
'discardDraftButtonDisabled', 'discardDraftButtonDisabled',
'branchName', 'branchName',
]), ]),
statusSvg() { statusSvg() {
return this.lastCommitMsg ? this.committedStateSvgPath : this.noChangesStateSvgPath; return this.lastCommitMsg
? this.committedStateSvgPath
: this.noChangesStateSvgPath;
}, },
}, },
methods: { methods: {
...mapActions([ ...mapActions(['setPanelCollapsedStatus']),
'setPanelCollapsedStatus',
]),
...mapActions('commit', [ ...mapActions('commit', [
'updateCommitMessage', 'updateCommitMessage',
'discardDraft', 'discardDraft',
...@@ -67,8 +64,9 @@ export default { ...@@ -67,8 +64,9 @@ export default {
}); });
}, },
forceCreateNewBranch() { forceCreateNewBranch() {
return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH) return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH).then(() =>
.then(() => this.commitChanges()); this.commitChanges(),
);
}, },
}, },
}; };
...@@ -81,7 +79,7 @@ export default { ...@@ -81,7 +79,7 @@ export default {
'multi-file-commit-empty-state-container': !changedFiles.length 'multi-file-commit-empty-state-container': !changedFiles.length
}" }"
> >
<modal <deprecated-modal
id="ide-create-branch-modal" id="ide-create-branch-modal"
:primary-button-label="__('Create new branch')" :primary-button-label="__('Create new branch')"
kind="success" kind="success"
...@@ -92,7 +90,7 @@ export default { ...@@ -92,7 +90,7 @@ export default {
{{ __(`This branch has changed since you started editing. {{ __(`This branch has changed since you started editing.
Would you like to create a new branch?`) }} Would you like to create a new branch?`) }}
</template> </template>
</modal> </deprecated-modal>
<commit-files-list <commit-files-list
title="Staged" title="Staged"
:file-list="changedFiles" :file-list="changedFiles"
......
<script> <script>
import _ from 'underscore'; 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'; import { s__, sprintf } from '~/locale';
export default { export default {
components: { components: {
modal, DeprecatedModal,
}, },
props: { props: {
deleteProjectUrl: { deleteProjectUrl: {
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
</script> </script>
<template> <template>
<modal <deprecated-modal
id="delete-project-modal" id="delete-project-modal"
:title="title" :title="title"
:text="text" :text="text"
...@@ -121,5 +121,5 @@ ...@@ -121,5 +121,5 @@
/> />
</form> </form>
</template> </template>
</modal> </deprecated-modal>
</template> </template>
<script> <script>
import _ from 'underscore'; 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'; import { s__, sprintf } from '~/locale';
export default { export default {
components: { components: {
modal, DeprecatedModal,
}, },
props: { props: {
deleteUserUrl: { deleteUserUrl: {
...@@ -113,7 +113,7 @@ ...@@ -113,7 +113,7 @@
</script> </script>
<template> <template>
<modal <deprecated-modal
id="delete-user-modal" id="delete-user-modal"
:title="title" :title="title"
:text="text" :text="text"
...@@ -170,5 +170,5 @@ ...@@ -170,5 +170,5 @@
{{ secondaryButtonLabel }} {{ secondaryButtonLabel }}
</button> </button>
</template> </template>
</modal> </deprecated-modal>
</template> </template>
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
import axios from '~/lib/utils/axios_utils'; import axios from '~/lib/utils/axios_utils';
import Flash from '~/flash'; 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 { n__, s__, sprintf } from '~/locale';
import { redirectTo } from '~/lib/utils/url_utility'; import { redirectTo } from '~/lib/utils/url_utility';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
export default { export default {
components: { components: {
modal, DeprecatedModal,
}, },
props: { props: {
issueCount: { issueCount: {
...@@ -92,7 +92,7 @@ Once deleted, it cannot be undone or recovered.`), ...@@ -92,7 +92,7 @@ Once deleted, it cannot be undone or recovered.`),
</script> </script>
<template> <template>
<modal <deprecated-modal
id="delete-milestone-modal" id="delete-milestone-modal"
:title="title" :title="title"
:text="text" :text="text"
...@@ -106,5 +106,5 @@ Once deleted, it cannot be undone or recovered.`), ...@@ -106,5 +106,5 @@ Once deleted, it cannot be undone or recovered.`),
<p v-html="props.text"></p> <p v-html="props.text"></p>
</template> </template>
</modal> </deprecated-modal>
</template> </template>
<script> <script>
import modal from '~/vue_shared/components/modal.vue'; import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
import { s__, sprintf } from '~/locale'; import { s__, sprintf } from '~/locale';
import pipelinesTableRowComponent from './pipelines_table_row.vue'; import pipelinesTableRowComponent from './pipelines_table_row.vue';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
export default { export default {
components: { components: {
pipelinesTableRowComponent, pipelinesTableRowComponent,
modal, DeprecatedModal,
}, },
props: { props: {
pipelines: { pipelines: {
...@@ -120,7 +120,7 @@ ...@@ -120,7 +120,7 @@
:auto-devops-help-path="autoDevopsHelpPath" :auto-devops-help-path="autoDevopsHelpPath"
:view-type="viewType" :view-type="viewType"
/> />
<modal <deprecated-modal
id="confirmation-modal" id="confirmation-modal"
:title="modalTitle" :title="modalTitle"
:text="modalText" :text="modalText"
...@@ -134,6 +134,6 @@ ...@@ -134,6 +134,6 @@
> >
<p v-html="props.text"></p> <p v-html="props.text"></p>
</template> </template>
</modal> </deprecated-modal>
</div> </div>
</template> </template>
<script> <script>
import modal from '~/vue_shared/components/modal.vue'; import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
import { __, s__, sprintf } from '~/locale'; import { __, s__, sprintf } from '~/locale';
import csrf from '~/lib/utils/csrf'; import csrf from '~/lib/utils/csrf';
export default { export default {
components: { components: {
modal, DeprecatedModal,
}, },
props: { props: {
actionUrl: { actionUrl: {
...@@ -76,7 +76,7 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`), ...@@ -76,7 +76,7 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
</script> </script>
<template> <template>
<modal <deprecated-modal
id="delete-account-modal" id="delete-account-modal"
:title="s__('Profiles|Delete your account?')" :title="s__('Profiles|Delete your account?')"
:text="text" :text="text"
...@@ -131,5 +131,5 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`), ...@@ -131,5 +131,5 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
</form> </form>
</template> </template>