diff --git a/app/assets/javascripts/confirm_modal.js b/app/assets/javascripts/confirm_modal.js index 1c9346e35e0..ff29d5fa355 100644 --- a/app/assets/javascripts/confirm_modal.js +++ b/app/assets/javascripts/confirm_modal.js @@ -1,26 +1,45 @@ import Vue from 'vue'; import ConfirmModal from '~/vue_shared/components/confirm_modal.vue'; -const mountConfirmModal = button => { - const props = { - path: button.dataset.path, - method: button.dataset.method, - modalAttributes: JSON.parse(button.dataset.modalAttributes), - }; - +const mountConfirmModal = () => { return new Vue({ + data() { + return { + path: '', + method: '', + modalAttributes: null, + showModal: false, + }; + }, + mounted() { + document.querySelectorAll('.js-confirm-modal-button').forEach(button => { + button.addEventListener('click', e => { + e.preventDefault(); + + this.path = button.dataset.path; + this.method = button.dataset.method; + this.modalAttributes = JSON.parse(button.dataset.modalAttributes); + this.showModal = true; + }); + }); + }, + methods: { + dismiss() { + this.showModal = false; + }, + }, render(h) { - return h(ConfirmModal, { props }); + return h(ConfirmModal, { + props: { + path: this.path, + method: this.method, + modalAttributes: this.modalAttributes, + showModal: this.showModal, + }, + on: { dismiss: this.dismiss }, + }); }, }).$mount(); }; -export default () => { - document.getElementsByClassName('js-confirm-modal-button').forEach(button => { - button.addEventListener('click', e => { - e.preventDefault(); - - mountConfirmModal(button); - }); - }); -}; +export default () => mountConfirmModal(); diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js b/app/assets/javascripts/filtered_search/dropdown_utils.js index 274c08e6955..43de86b09ee 100644 --- a/app/assets/javascripts/filtered_search/dropdown_utils.js +++ b/app/assets/javascripts/filtered_search/dropdown_utils.js @@ -1,4 +1,4 @@ -import _ from 'underscore'; +import { last } from 'lodash'; import FilteredSearchContainer from './container'; import FilteredSearchTokenizer from './filtered_search_tokenizer'; import FilteredSearchDropdownManager from './filtered_search_dropdown_manager'; @@ -70,11 +70,11 @@ export default class DropdownUtils { if (!allowMultiple && itemInExistingTokens) { updatedItem.droplab_hidden = true; - } else if (!isSearchItem && (!lastKey || _.last(searchInput.split('')) === ' ')) { + } else if (!isSearchItem && (!lastKey || last(searchInput.split('')) === ' ')) { updatedItem.droplab_hidden = false; } else if (lastKey) { const split = lastKey.split(':'); - const tokenName = _.last(split[0].split(' ')); + const tokenName = last(split[0].split(' ')); const match = isSearchItem ? allowedKeys.some(key => key.startsWith(tokenName.toLowerCase())) @@ -129,7 +129,7 @@ export default class DropdownUtils { const values = []; if (untilInput) { - const inputIndex = _.findIndex(tokens, t => t.classList.contains('input-token')); + const inputIndex = tokens.findIndex(t => t.classList.contains('input-token')); // Add one to include input-token to the tokens array tokens.splice(inputIndex + 1); } diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js index 03f65612b60..d051b60814e 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js @@ -1,5 +1,5 @@ +import { last } from 'lodash'; import AvailableDropdownMappings from 'ee_else_ce/filtered_search/available_dropdown_mappings'; -import _ from 'underscore'; import DropLab from '~/droplab/drop_lab'; import FilteredSearchContainer from './container'; import FilteredSearchTokenKeys from './filtered_search_token_keys'; @@ -184,8 +184,8 @@ export default class FilteredSearchDropdownManager { // Eg. token = 'label:' const split = lastToken.split(':'); - const dropdownName = _.last(split[0].split(' ')); - const possibleOperatorToken = _.last(split[1]); + const dropdownName = last(split[0].split(' ')); + const possibleOperatorToken = last(split[1]); const hasOperator = FilteredSearchVisualTokens.permissibleOperatorValues.includes( possibleOperatorToken && possibleOperatorToken.trim(), diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js index 88737396113..7ea7313f648 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js @@ -1,4 +1,4 @@ -import _ from 'underscore'; +import { last } from 'lodash'; import recentSearchesStorageKeys from 'ee_else_ce/filtered_search/recent_searches_storage_keys'; import { getParameterByName, getUrlParamsArray } from '~/lib/utils/common_utils'; import IssuableFilteredSearchTokenKeys from '~/filtered_search/issuable_filtered_search_token_keys'; @@ -456,7 +456,7 @@ export default class FilteredSearchManager { if (fragments.length > 1) { const inputValues = fragments[0].split(' '); - const tokenKey = _.last(inputValues); + const tokenKey = last(inputValues); if (inputValues.length > 1) { inputValues.pop(); diff --git a/app/assets/javascripts/filtered_search/issuable_filtered_search_token_keys.js b/app/assets/javascripts/filtered_search/issuable_filtered_search_token_keys.js index 8722fc64b62..9bea7aa7b04 100644 --- a/app/assets/javascripts/filtered_search/issuable_filtered_search_token_keys.js +++ b/app/assets/javascripts/filtered_search/issuable_filtered_search_token_keys.js @@ -1,4 +1,4 @@ -import { flatten } from 'underscore'; +import { flattenDeep } from 'lodash'; import FilteredSearchTokenKeys from './filtered_search_token_keys'; import { __ } from '~/locale'; @@ -73,7 +73,7 @@ export const alternativeTokenKeys = [ }, ]; -export const conditions = flatten( +export const conditions = flattenDeep( [ { url: 'assignee_id=None', diff --git a/app/assets/javascripts/filtered_search/stores/recent_searches_store.js b/app/assets/javascripts/filtered_search/stores/recent_searches_store.js index 76d40bfdaf8..b3eb0475d6f 100644 --- a/app/assets/javascripts/filtered_search/stores/recent_searches_store.js +++ b/app/assets/javascripts/filtered_search/stores/recent_searches_store.js @@ -1,4 +1,4 @@ -import _ from 'underscore'; +import { uniq } from 'lodash'; class RecentSearchesStore { constructor(initialState = {}, allowedKeys) { @@ -20,7 +20,7 @@ class RecentSearchesStore { setRecentSearches(searches = []) { const trimmedSearches = searches.map(search => search.trim()); - this.state.recentSearches = _.uniq(trimmedSearches).slice(0, 5); + this.state.recentSearches = uniq(trimmedSearches).slice(0, 5); return this.state.recentSearches; } } diff --git a/app/assets/javascripts/filtered_search/visual_token_value.js b/app/assets/javascripts/filtered_search/visual_token_value.js index b7ac655b619..b8f4cd8a1e1 100644 --- a/app/assets/javascripts/filtered_search/visual_token_value.js +++ b/app/assets/javascripts/filtered_search/visual_token_value.js @@ -1,4 +1,4 @@ -import _ from 'underscore'; +import { escape as esc } from 'lodash'; import { USER_TOKEN_TYPES } from 'ee_else_ce/filtered_search/constants'; import FilteredSearchContainer from '~/filtered_search/container'; import FilteredSearchVisualTokens from '~/filtered_search/filtered_search_visual_tokens'; @@ -48,7 +48,7 @@ export default class VisualTokenValue { tokenValueContainer.dataset.originalValue = tokenValue; tokenValueElement.innerHTML = ` - ${_.escape(user.name)} + ${esc(user.name)} `; /* eslint-enable no-param-reassign */ }) diff --git a/app/assets/javascripts/vue_shared/components/confirm_modal.vue b/app/assets/javascripts/vue_shared/components/confirm_modal.vue index 21722f62133..c77827205d6 100644 --- a/app/assets/javascripts/vue_shared/components/confirm_modal.vue +++ b/app/assets/javascripts/vue_shared/components/confirm_modal.vue @@ -9,34 +9,43 @@ export default { props: { modalAttributes: { type: Object, - required: true, + required: false, + default: () => { + return {}; + }, }, path: { type: String, - required: true, + required: false, + default: '', }, method: { type: String, - required: true, + required: false, + default: '', + }, + showModal: { + type: Boolean, + required: false, + default: false, }, }, - data() { - return { - isDismissed: false, - }; - }, - mounted() { - this.openModal(); + watch: { + showModal(val) { + if (val) { + // Wait for v-if to render + this.$nextTick(() => { + this.openModal(); + }); + } + }, }, methods: { openModal() { this.$refs.modal.show(); }, submitModal() { - this.$refs.form.requestSubmit(); - }, - dismiss() { - this.isDismissed = true; + this.$refs.form.submit(); }, }, csrf, @@ -45,11 +54,11 @@ export default {