diff options
Diffstat (limited to 'app/assets/javascripts/frequent_items')
-rw-r--r-- | app/assets/javascripts/frequent_items/index.js | 82 | ||||
-rw-r--r-- | app/assets/javascripts/frequent_items/utils.js | 2 |
2 files changed, 47 insertions, 37 deletions
diff --git a/app/assets/javascripts/frequent_items/index.js b/app/assets/javascripts/frequent_items/index.js index 1998bf4358a..5b03e1d19db 100644 --- a/app/assets/javascripts/frequent_items/index.js +++ b/app/assets/javascripts/frequent_items/index.js @@ -16,53 +16,63 @@ const frequentItemDropdowns = [ }, ]; +const initFrequentItemList = (namespace, key) => { + const el = document.getElementById(`js-${namespace}-dropdown`); + + // Don't do anything if element doesn't exist (No groups dropdown) + // This is for when the user accesses GitLab without logging in + if (!el) { + return; + } + + import('./components/app.vue') + .then(({ default: FrequentItems }) => { + // eslint-disable-next-line no-new + new Vue({ + el, + data() { + const { dataset } = this.$options.el; + const item = { + id: Number(dataset[`${key}Id`]), + name: dataset[`${key}Name`], + namespace: dataset[`${key}Namespace`], + webUrl: dataset[`${key}WebUrl`], + avatarUrl: dataset[`${key}AvatarUrl`] || null, + lastAccessedOn: Date.now(), + }; + + return { + currentUserName: dataset.userName, + currentItem: item, + }; + }, + render(createElement) { + return createElement(FrequentItems, { + props: { + namespace, + currentUserName: this.currentUserName, + currentItem: this.currentItem, + }, + }); + }, + }); + }) + .catch(() => {}); +}; + export default function initFrequentItemDropdowns() { frequentItemDropdowns.forEach(dropdown => { const { namespace, key } = dropdown; - const el = document.getElementById(`js-${namespace}-dropdown`); const navEl = document.getElementById(`nav-${namespace}-dropdown`); // Don't do anything if element doesn't exist (No groups dropdown) // This is for when the user accesses GitLab without logging in - if (!el || !navEl) { + if (!navEl) { return; } - import('./components/app.vue') - .then(({ default: FrequentItems }) => { - // eslint-disable-next-line no-new - new Vue({ - el, - data() { - const { dataset } = this.$options.el; - const item = { - id: Number(dataset[`${key}Id`]), - name: dataset[`${key}Name`], - namespace: dataset[`${key}Namespace`], - webUrl: dataset[`${key}WebUrl`], - avatarUrl: dataset[`${key}AvatarUrl`] || null, - lastAccessedOn: Date.now(), - }; - - return { - currentUserName: dataset.userName, - currentItem: item, - }; - }, - render(createElement) { - return createElement(FrequentItems, { - props: { - namespace, - currentUserName: this.currentUserName, - currentItem: this.currentItem, - }, - }); - }, - }); - }) - .catch(() => {}); - $(navEl).on('shown.bs.dropdown', () => { + initFrequentItemList(namespace, key); eventHub.$emit(`${namespace}-dropdownOpen`); }); }); diff --git a/app/assets/javascripts/frequent_items/utils.js b/app/assets/javascripts/frequent_items/utils.js index 112e8eaaf17..954d426c86c 100644 --- a/app/assets/javascripts/frequent_items/utils.js +++ b/app/assets/javascripts/frequent_items/utils.js @@ -1,6 +1,6 @@ import { take } from 'lodash'; import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; -import { sanitize } from 'dompurify'; +import { sanitize } from '~/lib/dompurify'; import { FREQUENT_ITEMS, HOUR_IN_MS } from './constants'; export const isMobile = () => ['md', 'sm', 'xs'].includes(bp.getBreakpointSize()); |