diff --git a/app/assets/javascripts/alert_management/components/alert_details.vue b/app/assets/javascripts/alert_management/components/alert_details.vue index c1ebd234088..c6605452616 100644 --- a/app/assets/javascripts/alert_management/components/alert_details.vue +++ b/app/assets/javascripts/alert_management/components/alert_details.vue @@ -10,7 +10,6 @@ import { GlTabs, GlTab, GlButton, - GlTable, } from '@gitlab/ui'; import { s__ } from '~/locale'; import alertQuery from '../graphql/queries/details.query.graphql'; @@ -28,6 +27,7 @@ import { toggleContainerClasses } from '~/lib/utils/dom_utils'; import SystemNote from './system_notes/system_note.vue'; import AlertSidebar from './alert_sidebar.vue'; import AlertMetrics from './alert_metrics.vue'; +import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue'; const containerEl = document.querySelector('.page-with-contextual-sidebar'); @@ -55,6 +55,7 @@ export default { }, ], components: { + AlertDetailsTable, GlBadge, GlAlert, GlIcon, @@ -63,7 +64,6 @@ export default { GlTab, GlTabs, GlButton, - GlTable, TimeAgoTooltip, AlertSidebar, SystemNote, @@ -331,20 +331,7 @@ export default {
{{ alert.runbook }}
- - - - + diff --git a/app/assets/javascripts/behaviors/index.js b/app/assets/javascripts/behaviors/index.js index 8060938c72a..fd12c282b62 100644 --- a/app/assets/javascripts/behaviors/index.js +++ b/app/assets/javascripts/behaviors/index.js @@ -1,7 +1,7 @@ +import $ from 'jquery'; import './autosize'; import './bind_in_out'; import './markdown/render_gfm'; -import initGFMInput from './markdown/gfm_auto_complete'; import initCopyAsGFM from './markdown/copy_as_gfm'; import initCopyToClipboard from './copy_to_clipboard'; import './details_behavior'; @@ -15,9 +15,27 @@ import initCollapseSidebarOnWindowResize from './collapse_sidebar_on_window_resi import initSelect2Dropdowns from './select2'; installGlEmojiElement(); -initGFMInput(); + initCopyAsGFM(); initCopyToClipboard(); + initPageShortcuts(); initCollapseSidebarOnWindowResize(); initSelect2Dropdowns(); + +document.addEventListener('DOMContentLoaded', () => { + window.requestIdleCallback( + () => { + // Check if we have to Load GFM Input + const $gfmInputs = $('.js-gfm-input:not(.js-gfm-input-initialized)'); + if ($gfmInputs.length) { + import(/* webpackChunkName: 'initGFMInput' */ './markdown/gfm_auto_complete') + .then(({ default: initGFMInput }) => { + initGFMInput($gfmInputs); + }) + .catch(() => {}); + } + }, + { timeout: 500 }, + ); +}); diff --git a/app/assets/javascripts/behaviors/markdown/gfm_auto_complete.js b/app/assets/javascripts/behaviors/markdown/gfm_auto_complete.js index 6bbd2133344..83f2ca0bdc2 100644 --- a/app/assets/javascripts/behaviors/markdown/gfm_auto_complete.js +++ b/app/assets/javascripts/behaviors/markdown/gfm_auto_complete.js @@ -2,8 +2,8 @@ import $ from 'jquery'; import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete'; import { parseBoolean } from '~/lib/utils/common_utils'; -export default function initGFMInput() { - $('.js-gfm-input:not(.js-vue-textarea)').each((i, el) => { +export default function initGFMInput($els) { + $els.each((i, el) => { const gfm = new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources); const enableGFM = parseBoolean(el.dataset.supportsAutocomplete); diff --git a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue index 9251af01aff..06f436adb8e 100644 --- a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue +++ b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue @@ -1,5 +1,4 @@ - - diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue index a841cca8c95..09e893ff285 100644 --- a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue +++ b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue @@ -6,7 +6,6 @@ import { GlModal, GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { deprecatedCreateFlash as createFlash } from '~/flash'; import { __, s__ } from '~/locale'; import Api from '~/api'; -import eventHub from './event_hub'; import EmojiMenuInModal from './emoji_menu_in_modal'; import * as Emoji from '~/emoji'; @@ -48,15 +47,12 @@ export default { }, }, mounted() { - eventHub.$on('openModal', this.openModal); + this.$root.$emit('bv::show::modal', this.modalId); }, beforeDestroy() { this.emojiMenu.destroy(); }, methods: { - openModal() { - this.$root.$emit('bv::show::modal', this.modalId); - }, closeModal() { this.$root.$emit('bv::hide::modal', this.modalId); }, diff --git a/app/assets/javascripts/vue_shared/components/alert_details_table.vue b/app/assets/javascripts/vue_shared/components/alert_details_table.vue new file mode 100644 index 00000000000..2cd71669ecb --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/alert_details_table.vue @@ -0,0 +1,47 @@ + + diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue index f6d0fa9d8ed..f30676e8ef3 100644 --- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue +++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue @@ -1,4 +1,6 @@