{
+ const { globals, props, storeState } = data;
+
+ if (globals) Object.assign(globalThis, globals);
+
+ if (props) {
+ const store = createStore({
+ modules: {
+ diffs: diffsModule(storeState),
+ batchComments: { state() {} },
+ },
+ });
+ store.commit('diffs/' + types.SET_DIFF_DATA_BATCH, { diff_files: props.firstFiles });
+ const app = createSSRApp(DiffFiles, props);
+ app.use(store);
+ const stream = renderToWebStream(app);
+
+ self.postMessage(stream, [stream]);
+ }
+});
diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
index b4ff5e4f250e7050d97f8cc053bbac100246671d..0d743c452707cd13ef416044ff0a68b4142e0fe5 100644
--- a/app/assets/javascripts/diffs/index.js
+++ b/app/assets/javascripts/diffs/index.js
@@ -1,45 +1,105 @@
-import Vue from 'vue';
+import { ref, createApp } from 'vue';
import { mapActions, mapState, mapGetters } from 'vuex';
import { getCookie, parseBoolean, removeCookie } from '~/lib/utils/common_utils';
+import DiffRenderer from '~/diffs/diff_renderer_worker';
import eventHub from '../notes/event_hub';
import DiffsApp from './components/app.vue';
-import { TREE_LIST_STORAGE_KEY, DIFF_WHITESPACE_COOKIE_NAME } from './constants';
+import { DIFF_WHITESPACE_COOKIE_NAME } from './constants';
import { getReviewsForMergeRequest } from './utils/file_reviews';
import { getDerivedMergeRequestInformation } from './utils/merge_request';
+import axios from '~/lib/utils/axios_utils';
+import { mergeUrlParams } from '~/lib/utils/url_utility';
+
+const renderer = new DiffRenderer();
+
+renderer.postMessage({
+ globals: {
+ csrf: document.querySelector('meta[name=csrf-token]').getAttribute('content'),
+ gon: window.gon || {},
+ },
+});
+
+const PER_PAGE = 50;
export default function initDiffsApp(store) {
- const vm = new Vue({
- el: '#js-diffs-app',
+ const { dataset } = document.querySelector('#js-diffs-app');
+ const data = {
+ endpoint: dataset.endpoint,
+ endpointMetadata: dataset.endpointMetadata || '',
+ endpointBatch: dataset.endpointBatch || '',
+ endpointCoverage: dataset.endpointCoverage || '',
+ endpointCodequality: dataset.endpointCodequality || '',
+ endpointUpdateUser: dataset.updateCurrentUserPath,
+ projectPath: dataset.projectPath,
+ helpPagePath: dataset.helpPagePath,
+ currentUser: JSON.parse(dataset.currentUserData) || {},
+ changesEmptyStateIllustration: dataset.changesEmptyStateIllustration,
+ isFluidLayout: parseBoolean(dataset.isFluidLayout),
+ dismissEndpoint: dataset.dismissEndpoint,
+ showSuggestPopover: parseBoolean(dataset.showSuggestPopover),
+ showWhitespaceDefault: parseBoolean(dataset.showWhitespaceDefault),
+ viewDiffsFileByFile: parseBoolean(dataset.fileByFileDefault),
+ defaultSuggestionCommitMessage: dataset.defaultSuggestionCommitMessage,
+ sourceProjectDefaultUrl: dataset.sourceProjectDefaultUrl,
+ sourceProjectFullPath: dataset.sourceProjectFullPath,
+ isForked: parseBoolean(dataset.isForked),
+ };
+
+ const { endpointBatch, helpPagePath, viewDiffsFileByFile, showWhitespaceDefault } = data;
+
+ const endpoint = new URL(endpointBatch, window.location.origin);
+
+ const stream = ref(null);
+
+ const makeRequest = async () => {
+ const urlParams = {
+ w: showWhitespaceDefault ? '0' : '1',
+ view: 'inline',
+ };
+ const {
+ data: { diff_files: filesBatch },
+ } = await axios.get(
+ mergeUrlParams({ ...urlParams, page: 0, per_page: PER_PAGE }, endpoint.toString()),
+ );
+ return filesBatch;
+ };
+
+ const terminate = () => renderer.terminate();
+
+ renderer.addEventListener('message', ({ data: sharedStream }) => {
+ stream.value = sharedStream;
+ });
+
+ makeRequest().then((firstFiles) => {
+ renderer.postMessage({
+ props: {
+ diffFilesLength: parseInt(document.querySelector('.diffs-tab .badge').textContent, 10),
+ endpointBatch: endpoint.toString(),
+ showWhitespace: showWhitespaceDefault,
+ fileReviews: {},
+ helpPagePath,
+ canCurrentUserFork: false,
+ viewDiffsFileByFile,
+ firstFiles,
+ perPage: PER_PAGE,
+ },
+ storeState: {
+ diffViewType: store.state.diffs.diffViewType,
+ },
+ });
+ });
+
+ const app = createApp({
name: 'MergeRequestDiffs',
components: {
DiffsApp,
},
- store,
data() {
- const { dataset } = document.querySelector(this.$options.el);
-
return {
- endpoint: dataset.endpoint,
- endpointMetadata: dataset.endpointMetadata || '',
- endpointBatch: dataset.endpointBatch || '',
- endpointCoverage: dataset.endpointCoverage || '',
- endpointCodequality: dataset.endpointCodequality || '',
- endpointUpdateUser: dataset.updateCurrentUserPath,
- projectPath: dataset.projectPath,
- helpPagePath: dataset.helpPagePath,
- currentUser: JSON.parse(dataset.currentUserData) || {},
- changesEmptyStateIllustration: dataset.changesEmptyStateIllustration,
- isFluidLayout: parseBoolean(dataset.isFluidLayout),
- dismissEndpoint: dataset.dismissEndpoint,
- showSuggestPopover: parseBoolean(dataset.showSuggestPopover),
- showWhitespaceDefault: parseBoolean(dataset.showWhitespaceDefault),
- viewDiffsFileByFile: parseBoolean(dataset.fileByFileDefault),
- defaultSuggestionCommitMessage: dataset.defaultSuggestionCommitMessage,
- sourceProjectDefaultUrl: dataset.sourceProjectDefaultUrl,
- sourceProjectFullPath: dataset.sourceProjectFullPath,
- isForked: parseBoolean(dataset.isForked),
+ ...data,
+ stream,
};
},
computed: {
@@ -48,10 +108,7 @@ export default function initDiffsApp(store) {
}),
},
created() {
- const treeListStored = localStorage.getItem(TREE_LIST_STORAGE_KEY);
- const renderTreeList = treeListStored !== null ? parseBoolean(treeListStored) : true;
-
- this.setRenderTreeList({ renderTreeList, trackClick: false });
+ let showWhitespace = showWhitespaceDefault;
// NOTE: A "true" or "checked" value for `showWhitespace` is '0' not '1'.
// Check for cookie and save that setting for future use.
@@ -59,16 +116,17 @@ export default function initDiffsApp(store) {
// NOTE: This can/should be removed later
if (getCookie(DIFF_WHITESPACE_COOKIE_NAME)) {
const hideWhitespace = getCookie(DIFF_WHITESPACE_COOKIE_NAME);
+ showWhitespace = hideWhitespace !== '1';
this.setShowWhitespace({
url: this.endpointUpdateUser,
- showWhitespace: hideWhitespace !== '1',
+ showWhitespace,
trackClick: false,
});
removeCookie(DIFF_WHITESPACE_COOKIE_NAME);
} else {
// This is only to set the the user preference in Vuex for use later
this.setShowWhitespace({
- showWhitespace: this.showWhitespaceDefault,
+ showWhitespace,
updateDatabase: false,
trackClick: false,
});
@@ -102,18 +160,23 @@ export default function initDiffsApp(store) {
sourceProjectDefaultUrl: this.sourceProjectDefaultUrl,
sourceProjectFullPath: this.sourceProjectFullPath,
isForked: this.isForked,
+ stream: this.stream,
+ },
+ on: {
+ streamingEnd: terminate,
},
});
},
});
+ app.use(store);
+ app.mount('#js-diffs-app');
+
const fileFinderEl = document.getElementById('js-diff-file-finder');
if (fileFinderEl) {
// eslint-disable-next-line no-new
- new Vue({
- el: fileFinderEl,
- store,
+ const finderApp = createApp({
components: {
FindFile: () => import('~/vue_shared/components/file_finder/index.vue'),
},
@@ -152,7 +215,8 @@ export default function initDiffsApp(store) {
});
},
});
- }
- return vm;
+ finderApp.use(store);
+ finderApp.mount(fileFinderEl);
+ }
}
diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js
index 329db1fe2cf1ee283ff95b7be1a3087a22d50de3..c341a7ddb586dfc66be25f079e820f430a2808c7 100644
--- a/app/assets/javascripts/diffs/store/modules/diff_state.js
+++ b/app/assets/javascripts/diffs/store/modules/diff_state.js
@@ -7,7 +7,7 @@ const getViewTypeFromQueryString = () => getParameterValues('view')[0];
const viewTypeFromCookie = getCookie(DIFF_VIEW_COOKIE_NAME);
const defaultViewType = INLINE_DIFF_VIEW_TYPE;
-export default () => ({
+export default ({ diffViewType } = {}) => ({
isLoading: true,
isTreeLoaded: false,
batchLoadingState: null,
@@ -24,7 +24,8 @@ export default () => ({
coverageLoaded: false,
mergeRequestDiffs: [],
mergeRequestDiff: null,
- diffViewType: getViewTypeFromQueryString() || viewTypeFromCookie || defaultViewType,
+ diffViewType:
+ diffViewType || getViewTypeFromQueryString() || viewTypeFromCookie || defaultViewType,
tree: [],
treeEntries: {},
showTreeList: true,
@@ -42,5 +43,5 @@ export default () => ({
defaultSuggestionCommitMessage: '',
mrReviews: {},
latestDiff: true,
- disableVirtualScroller: false,
+ disableVirtualScroller: true,
});
diff --git a/app/assets/javascripts/diffs/store/modules/index.js b/app/assets/javascripts/diffs/store/modules/index.js
index 169502a957b4725f3070cd3e8c1c91c6d0cafc51..0fef603bdaf9a94ff8f807333e23f2b2e547970e 100644
--- a/app/assets/javascripts/diffs/store/modules/index.js
+++ b/app/assets/javascripts/diffs/store/modules/index.js
@@ -3,9 +3,9 @@ import * as getters from 'ee_else_ce/diffs/store/getters';
import createState from 'ee_else_ce/diffs/store/modules/diff_state';
import mutations from 'ee_else_ce/diffs/store/mutations';
-export default () => ({
+export default (storeState) => ({
namespaced: true,
- state: createState(),
+ state: createState(storeState),
getters,
actions,
mutations,
diff --git a/app/assets/javascripts/diffs/streaming.js b/app/assets/javascripts/diffs/streaming.js
new file mode 100644
index 0000000000000000000000000000000000000000..516a52416828acd1f294d0eae1b6bf35bc6e4c46
--- /dev/null
+++ b/app/assets/javascripts/diffs/streaming.js
@@ -0,0 +1,64 @@
+class BackpressureBuffer {
+ threshold = 30000;
+ bufferLength = 0;
+ buffer = [];
+
+ constructor(onOverflow) {
+ this.onOverflow = onOverflow;
+ }
+
+ push(string) {
+ if (this.bufferLength >= this.threshold) {
+ this.release();
+ }
+ this.buffer.push(string);
+ this.bufferLength += string.length;
+ }
+
+ release() {
+ this.onOverflow(this.buffer);
+ this.buffer = [];
+ this.bufferLength = 0;
+ }
+}
+
+export const renderStream = (stream, element) => {
+ const reader = stream.getReader();
+ const decoder = new TextDecoder('utf-8');
+
+ const streamDocument = document.implementation.createHTMLDocument('stream');
+
+ streamDocument.open();
+ streamDocument.write('
');
+
+ const virtualStreamingElement = streamDocument.querySelector('streaming-element');
+ element.appendChild(virtualStreamingElement);
+
+ // we need a backpressure mitigation mechanism here
+ // because inserting very small chunks of html (20-50 chars) causes layout thrashing
+ // and worsens streaming overhead
+ const backpressure = new BackpressureBuffer((buffer) => {
+ streamDocument.write(buffer.join(''));
+ });
+
+ let res;
+ const result = new Promise((resolve) => {
+ res = resolve;
+ });
+
+ reader.read().then(function processText({ done, value }) {
+ if (done) {
+ backpressure.release();
+ streamDocument.write('');
+ streamDocument.close();
+ res();
+ return;
+ }
+
+ backpressure.push(decoder.decode(value).normalize('NFC'));
+
+ reader.read().then(processText);
+ });
+
+ return result;
+};
diff --git a/app/assets/javascripts/emoji/components/emoji_group.vue b/app/assets/javascripts/emoji/components/emoji_group.vue
index 4f4c32af113426fd85cd6595b1eefe64d0822159..2da0b23250b537c332a2d0562c50daf20d74f823 100644
--- a/app/assets/javascripts/emoji/components/emoji_group.vue
+++ b/app/assets/javascripts/emoji/components/emoji_group.vue
@@ -18,7 +18,7 @@ export default {
-
+
+
{
removeUnsafeHref(node, 'xlink:href');
};
-addHook('afterSanitizeAttributes', (node) => {
+addHook?.('afterSanitizeAttributes', (node) => {
if (node.tagName.toLowerCase() === 'use') {
sanitizeSvgIcon(node);
}
@@ -86,13 +86,13 @@ addHook('afterSanitizeAttributes', (node) => {
const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';
-addHook('beforeSanitizeAttributes', (node) => {
+addHook?.('beforeSanitizeAttributes', (node) => {
if (node.tagName === 'A' && node.hasAttribute('target')) {
node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target'));
}
});
-addHook('afterSanitizeAttributes', (node) => {
+addHook?.('afterSanitizeAttributes', (node) => {
if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE));
node.removeAttribute(TEMPORARY_ATTRIBUTE);
diff --git a/app/assets/javascripts/lib/utils/axios_startup_calls.js b/app/assets/javascripts/lib/utils/axios_startup_calls.js
index f9d58ff9b1dae7fa218415694ecbc62aff693c96..15c179c59be20a677edf10694d7fd322059888ec 100644
--- a/app/assets/javascripts/lib/utils/axios_startup_calls.js
+++ b/app/assets/javascripts/lib/utils/axios_startup_calls.js
@@ -37,7 +37,7 @@ const handleStartupCall = async ({ fetchCall }, req) => {
};
const setupAxiosStartupCalls = (axios) => {
- const { startup_calls: startupCalls } = window.gl || {};
+ const { startup_calls: startupCalls } = globalThis.gl || {};
if (!startupCalls || isEmpty(startupCalls)) {
return;
diff --git a/app/assets/javascripts/lib/utils/axios_utils.js b/app/assets/javascripts/lib/utils/axios_utils.js
index de6d85b8a189f4282cf0102f505491a038051526..abf11ffe8591b7b46f725dd5d32c47c93dd1bdf4 100644
--- a/app/assets/javascripts/lib/utils/axios_utils.js
+++ b/app/assets/javascripts/lib/utils/axios_utils.js
@@ -12,8 +12,8 @@ axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
// Maintain a global counter for active requests
// see: spec/support/wait_for_requests.rb
axios.interceptors.request.use((config) => {
- window.pendingRequests = window.pendingRequests || 0;
- window.pendingRequests += 1;
+ globalThis.pendingRequests = globalThis.pendingRequests || 0;
+ globalThis.pendingRequests += 1;
return config;
});
@@ -22,11 +22,11 @@ setupAxiosStartupCalls(axios);
// Remove the global counter
axios.interceptors.response.use(
(response) => {
- window.pendingRequests -= 1;
+ globalThis.pendingRequests -= 1;
return response;
},
(err) => {
- window.pendingRequests -= 1;
+ globalThis.pendingRequests -= 1;
return Promise.reject(err);
},
);
diff --git a/app/assets/javascripts/lib/utils/color_utils.js b/app/assets/javascripts/lib/utils/color_utils.js
index 3d8df4fde0589591349c20427c161efe9943585f..dc713a681137a5fbba652dd7204bb70c30d8218a 100644
--- a/app/assets/javascripts/lib/utils/color_utils.js
+++ b/app/assets/javascripts/lib/utils/color_utils.js
@@ -1,4 +1,4 @@
-const colorValidatorEl = document.createElement('div');
+const colorValidatorEl = globalThis?.document?.createElement('div');
/**
* Validates whether the specified color expression
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index beced4f9144d6e04b0ed712142d97cf408b63b2b..149e82002986f78466de7fc81aee9a1376a793d1 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -683,7 +683,7 @@ export const removeCookie = (name) => Cookies.remove(name);
* @param {String} flag Feature flag
* @returns {Boolean} on/off
*/
-export const isFeatureFlagEnabled = (flag) => window.gon.features?.[flag];
+export const isFeatureFlagEnabled = (flag) => globalThis?.gon?.features?.[flag];
/**
* This method takes in array with snake_case strings
@@ -694,7 +694,7 @@ export const isFeatureFlagEnabled = (flag) => window.gon.features?.[flag];
*/
export const convertArrayToCamelCase = (array) => array.map((i) => convertToCamelCase(i));
-export const isLoggedIn = () => Boolean(window.gon?.current_user_id);
+export const isLoggedIn = () => Boolean(globalThis?.gon?.current_user_id);
/**
* This method takes in array of objects with snake_case
diff --git a/app/assets/javascripts/lib/utils/cookies.js b/app/assets/javascripts/lib/utils/cookies.js
index be0491376c9b36a051ce4c123d2d2cc660fbdcfc..18996a81d3e54e668e87c8301dc1e0936a51c6af 100644
--- a/app/assets/javascripts/lib/utils/cookies.js
+++ b/app/assets/javascripts/lib/utils/cookies.js
@@ -2,7 +2,7 @@ import CookiesBuilder from 'js-cookie';
// set default path for cookies
const Cookies = CookiesBuilder.withAttributes({
- path: gon.relative_url_root || '/',
+ path: globalThis?.gon?.relative_url_root || '/',
});
export default Cookies;
diff --git a/app/assets/javascripts/lib/utils/csrf.js b/app/assets/javascripts/lib/utils/csrf.js
index 3114a2a0dfbc847d30f6fc5fa26f4b482d8d0572..6269b34174aa1da11bba6ec2c23d8d29ac2e12da 100644
--- a/app/assets/javascripts/lib/utils/csrf.js
+++ b/app/assets/javascripts/lib/utils/csrf.js
@@ -20,9 +20,9 @@ and https://github.com/rails/jquery-rails/blob/v4.3.1/vendor/assets/javascripts/
*/
const csrf = {
init() {
- const tokenEl = document.querySelector('meta[name=csrf-token]');
+ const tokenEl = globalThis.document?.querySelector('meta[name=csrf-token]');
- if (tokenEl !== null) {
+ if (tokenEl != null) {
this.csrfToken = tokenEl.getAttribute('content');
} else {
this.csrfToken = null;
@@ -30,7 +30,7 @@ const csrf = {
},
get token() {
- return this.csrfToken;
+ return globalThis.csrf || this.csrfToken;
},
get headerKey() {
diff --git a/app/assets/javascripts/lib/utils/icons_path.js b/app/assets/javascripts/lib/utils/icons_path.js
index 1a1c3c8e7b35280e8e7e50978a40e0e26b7d5fe2..e47fdecaf9581c8124fe65b09b6b9b39581b46a5 100644
--- a/app/assets/javascripts/lib/utils/icons_path.js
+++ b/app/assets/javascripts/lib/utils/icons_path.js
@@ -1,3 +1,9 @@
// any import of '@gitlab/svgs/dist/icons.svg' will be overridden with this
// to avoid asset duplication between sprockets and webpack
-export default gon && gon.sprite_icons;
+const resolveIcon = () => globalThis.gon?.sprite_icons;
+
+const obj = {
+ toString: resolveIcon,
+ toPrimitive: resolveIcon,
+};
+export default obj;
diff --git a/app/assets/javascripts/lib/utils/is_navigating_away.js b/app/assets/javascripts/lib/utils/is_navigating_away.js
index 7df00b4537994007a76f00e62f750dca303d1de6..7d4ec51754201f5d42961530c616141ecb1d68d2 100644
--- a/app/assets/javascripts/lib/utils/is_navigating_away.js
+++ b/app/assets/javascripts/lib/utils/is_navigating_away.js
@@ -1,6 +1,6 @@
let navigating = false;
-window.addEventListener('beforeunload', () => {
+globalThis.addEventListener('beforeunload', () => {
navigating = true;
});
diff --git a/app/assets/javascripts/lib/utils/vue3compat/vue_apollo.js b/app/assets/javascripts/lib/utils/vue3compat/vue_apollo.js
new file mode 100644
index 0000000000000000000000000000000000000000..574a633d2fc211dcf1c38bb6ba1967034e466c78
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/vue3compat/vue_apollo.js
@@ -0,0 +1,22 @@
+import Vue from 'vue';
+import { createApolloProvider } from '@vue/apollo-option';
+import { ApolloMutation } from '@vue/apollo-components';
+
+export { ApolloMutation };
+
+export default class VueApollo {
+ constructor(...args) {
+ // eslint-disable-next-line no-constructor-return
+ return createApolloProvider(...args);
+ }
+
+ static install() {
+ Vue.mixin({
+ beforeCreate() {
+ if (this.$options.apolloProvider) {
+ this.$.appContext.app.use(this.$options.apolloProvider);
+ }
+ },
+ });
+ }
+}
diff --git a/app/assets/javascripts/locale/index.js b/app/assets/javascripts/locale/index.js
index ad01da2eb1724f2dd162fe492bd2c5473490f973..f34ba72a8b133c2e9503a7f7bcf65056d8a816c5 100644
--- a/app/assets/javascripts/locale/index.js
+++ b/app/assets/javascripts/locale/index.js
@@ -5,9 +5,9 @@ import sprintf from './sprintf';
const GITLAB_FALLBACK_LANGUAGE = 'en';
const languageCode = () =>
- document.querySelector('html').getAttribute('lang') || GITLAB_FALLBACK_LANGUAGE;
-const locale = new Jed(window.translations || {});
-delete window.translations;
+ globalThis?.document?.querySelector('html')?.getAttribute('lang') || globalThis.lang || GITLAB_FALLBACK_LANGUAGE;
+const locale = new Jed(globalThis.translations || {});
+delete globalThis.translations;
/**
Translates `text`
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 17ee2a0d8b6b5192925eb3541351bcaa986a30d5..aa2226a982971eceb984165f79c9c84a752994c4 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -277,7 +277,7 @@ export default class MergeRequestTabs {
});
}
- const tabPane = this.mergeRequestTabPanes.querySelector(`#${action}`);
+ const tabPane = this.mergeRequestTabPanes.querySelector(`.${action}`);
if (tabPane) tabPane.style.display = 'block';
const tab = this.mergeRequestTabs.querySelector(`.${action}-tab`);
if (tab) tab.classList.add('active');
diff --git a/app/assets/javascripts/mr_notes/index.js b/app/assets/javascripts/mr_notes/index.js
index c32a1f4c2acf69d4a902ff7c0b48f839455f49c3..97ea8827115a225f2c4af47585dfcfb70f4e5796 100644
--- a/app/assets/javascripts/mr_notes/index.js
+++ b/app/assets/javascripts/mr_notes/index.js
@@ -6,8 +6,38 @@ import initDiffsApp from '../diffs';
import { resetServiceWorkersPublicPath } from '../lib/utils/webpack';
import MergeRequest from '../merge_request';
import DiscussionCounter from '../notes/components/discussion_counter.vue';
+import types from './stores/mutation_types';
import initNotesApp from './init_notes';
+function initPage() {
+ store.commit(types.SET_ACTIVE_TAB, window.mrTabs.currentAction);
+ if (window.mrTabs.currentAction === 'show') {
+ initNotesApp();
+ } else {
+ initDiffsApp(store);
+ }
+}
+
+function initMetadataEvents() {
+ let stop;
+ window.mrTabs.eventHub.$on('MergeRequestTabChange', (action) => {
+ if (action !== 'show') {
+ if (stop) stop();
+ return;
+ }
+ stop = store.watch(
+ () => store.state.page.mrMetadata,
+ (metadata) => {
+ if (!metadata) return;
+ window.mrTabs.eventHub.$emit('MergeRequestMetadataLoaded');
+ if (stop) stop();
+ stop = undefined;
+ },
+ { immediate: true },
+ );
+ });
+}
+
export default function initMrNotes() {
resetServiceWorkersPublicPath();
@@ -17,8 +47,10 @@ export default function initMrNotes() {
action: mrShowNode.dataset.mrAction,
});
- initDiffsApp(store);
- initNotesApp();
+ initMetadataEvents();
+
+ initPage();
+ window.mrTabs.eventHub.$once('MergeRequestTabChange', initPage);
document.addEventListener('merged:UpdateActions', () => {
initRevertCommitModal('i_code_review_post_merge_submit_revert_modal');
diff --git a/app/assets/javascripts/mr_notes/init_notes.js b/app/assets/javascripts/mr_notes/init_notes.js
index 3a67e7925c34e3afc0b6987d99c058c532cfa3d5..3e7b411a278ec4b45ef71bc8be0f1b98fb3ec043 100644
--- a/app/assets/javascripts/mr_notes/init_notes.js
+++ b/app/assets/javascripts/mr_notes/init_notes.js
@@ -70,7 +70,6 @@ export default () => {
},
},
created() {
- this.setActiveTab(window.mrTabs.getCurrentAction());
this.setEndpoints(this.endpoints);
this.fetchMrMetadata();
@@ -87,7 +86,7 @@ export default () => {
methods: {
...mapActions(['setActiveTab', 'setEndpoints', 'fetchMrMetadata']),
updateDiscussionTabCounter() {
- this.notesCountBadge.text(this.discussionTabCounter);
+ this.notesCountBadge?.text(this.discussionTabCounter);
},
},
render(createElement) {
diff --git a/app/assets/javascripts/mr_notes/stores/index.js b/app/assets/javascripts/mr_notes/stores/index.js
index 7527c685c71e081eeb56f8a0f4b1d9d452365200..c8e9515170e48cd36a70082cc4a4b7c2d6c35e87 100644
--- a/app/assets/javascripts/mr_notes/stores/index.js
+++ b/app/assets/javascripts/mr_notes/stores/index.js
@@ -1,12 +1,9 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
+import { createStore } from 'vuex';
import batchCommentsModule from '~/batch_comments/stores/modules/batch_comments';
import diffsModule from '~/diffs/store/modules';
import notesModule from '~/notes/stores/modules';
import mrPageModule from './modules';
-Vue.use(Vuex);
-
export const createModules = () => ({
page: mrPageModule(),
notes: notesModule(),
@@ -14,9 +11,9 @@ export const createModules = () => ({
batchComments: batchCommentsModule(),
});
-export const createStore = () =>
- new Vuex.Store({
+export const createMrStore = () =>
+ createStore({
modules: createModules(),
});
-export default createStore();
+export default createMrStore();
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index 3bdf8349a12b60826634b3d0e35bda2b2fcc62c1..ce6db028a514f7d9d623bc54662c530df4a8ecea 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -52,6 +52,10 @@ export default {
isCollapsed() {
return isCollapsed(this.discussion.diff_file);
},
+ // gon is not available in worker on the import phase
+ userColorSchemeClass() {
+ return globalThis?.gon?.user_color_scheme || 'white'
+ },
},
mounted() {
if (this.isTextFile && !this.hasTruncatedDiffLines) {
@@ -72,7 +76,6 @@ export default {
return line.replace(FIRST_CHAR_REGEX, '');
},
},
- userColorSchemeClass: window.gon.user_color_scheme,
};
@@ -85,11 +88,10 @@ export default {
:expanded="!isCollapsed"
/>
-
+
diff --git a/app/assets/javascripts/pages/import/history/index.js b/app/assets/javascripts/pages/import/history/index.js
index d540272c26615f5d4526d2f861a588a15179fbf0..ddcce7a6929c2b894c272a7b75268d5a97694d15 100644
--- a/app/assets/javascripts/pages/import/history/index.js
+++ b/app/assets/javascripts/pages/import/history/index.js
@@ -4,6 +4,7 @@ import ImportHistoryApp from './components/import_history_app.vue';
function mountImportHistoryApp(mountElement) {
if (!mountElement) return undefined;
+ debugger;
return new Vue({
el: mountElement,
name: 'ImportHistoryRoot',
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue
index 1cd28e027f3bf992e7d02bd3c38d5486c7946182..2974bd2dd37031cb95ac8f2c869435e588d476f4 100644
--- a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue
@@ -100,7 +100,7 @@ export default {
{{ __('Duration') }}
- {{ __('Details'), }}
+ {{ __('Details') }}
@@ -162,7 +162,7 @@ export default {
-
+
{{
__('View details')
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue b/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue
index 7ab48da1a9d722800d3881dc2757abf90a2cd228..2b7b2d78424569d0b650f152982726354ca3cd1e 100644
--- a/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue
@@ -50,13 +50,13 @@ export default {
{{ __('Failed') }}
- {{ __('Errors'), }}
+ {{ __('Errors') }}
- {{ __('Skipped'), }}
+ {{ __('Skipped') }}
- {{ __('Passed'), }}
+ {{ __('Passed') }}
{{ __('Total') }}
diff --git a/app/assets/javascripts/sidebar/event_hub.js b/app/assets/javascripts/sidebar/event_hub.js
index dd4bd9a5ab77d4a99985b1e12263b56d94bae433..387f4da64ba8d098d05b2eb79ff1b0c8d7f42519 100644
--- a/app/assets/javascripts/sidebar/event_hub.js
+++ b/app/assets/javascripts/sidebar/event_hub.js
@@ -3,6 +3,6 @@ import createEventHub from '~/helpers/event_hub_factory';
const eventHub = createEventHub();
// TODO: remove eventHub hack after code splitting refactor
-window.emitSidebarEvent = (...args) => eventHub.$emit(...args);
+globalThis.emitSidebarEvent = (...args) => eventHub.$emit(...args);
export default eventHub;
diff --git a/app/assets/javascripts/vue_shared/components/form/form_footer_actions.vue b/app/assets/javascripts/vue_shared/components/form/form_footer_actions.vue
index 26c50345c19f0f2fb448af90a1d1de6baa278bf5..95928dce5b46a8f977c2fcf3091c81ac7e3f12b9 100644
--- a/app/assets/javascripts/vue_shared/components/form/form_footer_actions.vue
+++ b/app/assets/javascripts/vue_shared/components/form/form_footer_actions.vue
@@ -1,5 +1,5 @@
-
+