diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-09 00:20:24 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-09 00:20:24 +0300 |
commit | 94cb5cf7da670f11b320741a1c1c8605abcb86d7 (patch) | |
tree | ab787d56484ec72d9f475718107cd95e9f30cee4 /app/assets/javascripts/merge_request_tabs.js | |
parent | 2fc7db3159afc0d67a60dbe76e27df93078f33ca (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/merge_request_tabs.js')
-rw-r--r-- | app/assets/javascripts/merge_request_tabs.js | 238 |
1 files changed, 119 insertions, 119 deletions
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js index ad0117844cd..5d28c95d8a2 100644 --- a/app/assets/javascripts/merge_request_tabs.js +++ b/app/assets/javascripts/merge_request_tabs.js @@ -70,6 +70,103 @@ const FAST_DELAY_FOR_RERENDER = 75; // Store the `location` object, allowing for easier stubbing in tests let { location } = window; +function scrollToContainer(container) { + if (location.hash) { + const $el = $(`${container} ${location.hash}:not(.match)`); + + if ($el.length) { + scrollToElement($el[0]); + } + } +} + +function computeTopOffset(tabs) { + const navbar = document.querySelector('.navbar-gitlab'); + const peek = document.getElementById('js-peek'); + let stickyTop; + + stickyTop = navbar ? navbar.offsetHeight : 0; + stickyTop = peek ? stickyTop + peek.offsetHeight : stickyTop; + stickyTop = tabs ? stickyTop + tabs.offsetHeight : stickyTop; + + return stickyTop; +} + +function mountPipelines() { + const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view'); + const { mrWidgetData } = gl; + const table = new Vue({ + components: { + CommitPipelinesTable: () => import('~/commit/pipelines/pipelines_table.vue'), + }, + provide: { + artifactsEndpoint: pipelineTableViewEl.dataset.artifactsEndpoint, + artifactsEndpointPlaceholder: pipelineTableViewEl.dataset.artifactsEndpointPlaceholder, + targetProjectFullPath: mrWidgetData?.target_project_full_path || '', + }, + render(createElement) { + return createElement('commit-pipelines-table', { + props: { + endpoint: pipelineTableViewEl.dataset.endpoint, + emptyStateSvgPath: pipelineTableViewEl.dataset.emptyStateSvgPath, + errorStateSvgPath: pipelineTableViewEl.dataset.errorStateSvgPath, + canCreatePipelineInTargetProject: Boolean( + mrWidgetData?.can_create_pipeline_in_target_project, + ), + sourceProjectFullPath: mrWidgetData?.source_project_full_path || '', + targetProjectFullPath: mrWidgetData?.target_project_full_path || '', + projectId: pipelineTableViewEl.dataset.projectId, + mergeRequestId: mrWidgetData ? mrWidgetData.iid : null, + }, + }); + }, + }).$mount(); + + // $mount(el) replaces the el with the new rendered component. We need it in order to mount + // it everytime this tab is clicked - https://vuejs.org/v2/api/#vm-mount + pipelineTableViewEl.appendChild(table.$el); + + return table; +} + +function destroyPipelines(app) { + if (app && app.$destroy) { + app.$destroy(); + + document.querySelector('#commit-pipeline-table-view').innerHTML = ''; + } + + return null; +} + +function loadDiffs({ url, sticky }) { + return axios.get(`${url}.json${location.search}`).then(({ data }) => { + const $container = $('#diffs'); + $container.html(data.html); + initDiffStatsDropdown(sticky); + + localTimeAgo(document.querySelectorAll('#diffs .js-timeago')); + syntaxHighlight($('#diffs .js-syntax-highlight')); + + new Diff(); + scrollToContainer('#diffs'); + + $('.diff-file').each((i, el) => { + new BlobForkSuggestion({ + openButtons: $(el).find('.js-edit-blob-link-fork-toggler'), + forkButtons: $(el).find('.js-fork-suggestion-button'), + cancelButtons: $(el).find('.js-cancel-fork-suggestion-button'), + suggestionSections: $(el).find('.js-file-fork-suggestion-section'), + actionTextPieces: $(el).find('.js-file-fork-suggestion-section-action'), + }).init(); + }); + }); +} + +function toggleLoader(state) { + $('.mr-loading-status .loading').toggleClass('hide', !state); +} + export default class MergeRequestTabs { constructor({ action, setUrl, stubLocation } = {}) { this.mergeRequestTabs = document.querySelector('.merge-request-tabs-container'); @@ -107,13 +204,7 @@ export default class MergeRequestTabs { } this.bindEvents(); - if ( - this.mergeRequestTabs && - this.mergeRequestTabs.querySelector(`a[data-action='${action}']`) && - this.mergeRequestTabs.querySelector(`a[data-action='${action}']`).click - ) { - this.mergeRequestTabs.querySelector(`a[data-action='${action}']`).click(); - } + this.mergeRequestTabs?.querySelector(`a[data-action='${action}']`)?.click?.(); } bindEvents() { @@ -132,15 +223,6 @@ export default class MergeRequestTabs { $('.merge-request-tabs a[data-toggle="tabvue"]').off('click', this.clickTab); } - destroyPipelinesView() { - if (this.commitPipelinesTable) { - this.commitPipelinesTable.$destroy(); - this.commitPipelinesTable = null; - - document.querySelector('#commit-pipeline-table-view').innerHTML = ''; - } - } - storeScroll() { if (this.currentTab) { this.scrollPositions[this.currentTab] = document.documentElement.scrollTop; @@ -207,11 +289,11 @@ export default class MergeRequestTabs { this.loadCommits(href); this.expandView(); this.resetViewContainer(); - this.destroyPipelinesView(); + this.commitPipelinesTable = destroyPipelines(this.commitPipelinesTable); } else if (action === 'new') { this.expandView(); this.resetViewContainer(); - this.destroyPipelinesView(); + this.commitPipelinesTable = destroyPipelines(this.commitPipelinesTable); } else if (this.isDiffAction(action)) { if (!isInVueNoteablePage()) { /* @@ -228,7 +310,7 @@ export default class MergeRequestTabs { this.shrinkView(); } this.expandViewContainer(); - this.destroyPipelinesView(); + this.commitPipelinesTable = destroyPipelines(this.commitPipelinesTable); this.commitsTab.classList.remove('active'); } else if (action === 'pipelines') { this.resetViewContainer(); @@ -247,7 +329,7 @@ export default class MergeRequestTabs { this.expandView(); } this.resetViewContainer(); - this.destroyPipelinesView(); + this.commitPipelinesTable = destroyPipelines(this.commitPipelinesTable); } $('.detail-page-description').renderGFM(); @@ -280,16 +362,6 @@ export default class MergeRequestTabs { this.eventHub.$emit('MergeRequestTabChange', action); } - scrollToContainerElement(container) { - if (location.hash) { - const $el = $(`${container} ${location.hash}:not(.match)`); - - if ($el.length) { - scrollToElement($el[0]); - } - } - } - // Replaces the current merge request-specific action in the URL with a new one // // If the action is "notes", the URL is reset to the standard @@ -356,7 +428,7 @@ export default class MergeRequestTabs { return; } - this.toggleLoading(true); + toggleLoader(true); axios .get(`${source}.json`) @@ -365,15 +437,15 @@ export default class MergeRequestTabs { commitsDiv.innerHTML = data.html; localTimeAgo(commitsDiv.querySelectorAll('.js-timeago')); this.commitsLoaded = true; - this.scrollToContainerElement('#commits'); + scrollToContainer('#commits'); - this.toggleLoading(false); + toggleLoader(false); return import('./add_context_commits_modal'); }) .then((m) => m.default()) .catch(() => { - this.toggleLoading(false); + toggleLoader(false); createFlash({ message: __('An error occurred while fetching this tab.'), }); @@ -381,39 +453,7 @@ export default class MergeRequestTabs { } mountPipelinesView() { - const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view'); - const { mrWidgetData } = gl; - - this.commitPipelinesTable = new Vue({ - components: { - CommitPipelinesTable: () => import('~/commit/pipelines/pipelines_table.vue'), - }, - provide: { - artifactsEndpoint: pipelineTableViewEl.dataset.artifactsEndpoint, - artifactsEndpointPlaceholder: pipelineTableViewEl.dataset.artifactsEndpointPlaceholder, - targetProjectFullPath: mrWidgetData?.target_project_full_path || '', - }, - render(createElement) { - return createElement('commit-pipelines-table', { - props: { - endpoint: pipelineTableViewEl.dataset.endpoint, - emptyStateSvgPath: pipelineTableViewEl.dataset.emptyStateSvgPath, - errorStateSvgPath: pipelineTableViewEl.dataset.errorStateSvgPath, - canCreatePipelineInTargetProject: Boolean( - mrWidgetData?.can_create_pipeline_in_target_project, - ), - sourceProjectFullPath: mrWidgetData?.source_project_full_path || '', - targetProjectFullPath: mrWidgetData?.target_project_full_path || '', - projectId: pipelineTableViewEl.dataset.projectId, - mergeRequestId: mrWidgetData ? mrWidgetData.iid : null, - }, - }); - }, - }).$mount(); - - // $mount(el) replaces the el with the new rendered component. We need it in order to mount - // it everytime this tab is clicked - https://vuejs.org/v2/api/#vm-mount - pipelineTableViewEl.appendChild(this.commitPipelinesTable.$el); + this.commitPipelinesTable = mountPipelines(); } // load the diff tab content from the backend @@ -423,57 +463,31 @@ export default class MergeRequestTabs { return; } - // We extract pathname for the current Changes tab anchor href - // some pages like MergeRequestsController#new has query parameters on that anchor - const urlPathname = parseUrlPathname(source); - - this.toggleLoading(true); - - axios - .get(`${urlPathname}.json${location.search}`) - .then(({ data }) => { - const $container = $('#diffs'); - $container.html(data.html); - initDiffStatsDropdown(this.stickyTop); - - localTimeAgo(document.querySelectorAll('#diffs .js-timeago')); - syntaxHighlight($('#diffs .js-syntax-highlight')); + toggleLoader(true); + loadDiffs({ + // We extract pathname for the current Changes tab anchor href + // some pages like MergeRequestsController#new has query parameters on that anchor + url: parseUrlPathname(source), + sticky: computeTopOffset(this.mergeRequestTabs), + }) + .then(() => { if (this.isDiffAction(this.currentAction)) { this.expandViewContainer(); } - this.diffsLoaded = true; - new Diff(); - this.scrollToContainerElement('#diffs'); - - $('.diff-file').each((i, el) => { - new BlobForkSuggestion({ - openButtons: $(el).find('.js-edit-blob-link-fork-toggler'), - forkButtons: $(el).find('.js-fork-suggestion-button'), - cancelButtons: $(el).find('.js-cancel-fork-suggestion-button'), - suggestionSections: $(el).find('.js-file-fork-suggestion-section'), - actionTextPieces: $(el).find('.js-file-fork-suggestion-section-action'), - }).init(); - }); - - this.toggleLoading(false); + this.diffsLoaded = true; }) .catch(() => { - this.toggleLoading(false); createFlash({ message: __('An error occurred while fetching this tab.'), }); + }) + .finally(() => { + toggleLoader(false); }); } - // Show or hide the loading spinner - // - // status - Boolean, true to show, false to hide - toggleLoading(status) { - $('.mr-loading-status .loading').toggleClass('hide', !status); - } - diffViewType() { return $('.js-diff-view-buttons button.active').data('viewType'); } @@ -529,18 +543,4 @@ export default class MergeRequestTabs { } }, 0); } - - get stickyTop() { - let stickyTop = this.navbar ? this.navbar.offsetHeight : 0; - - if (this.peek) { - stickyTop += this.peek.offsetHeight; - } - - if (this.mergeRequestTabs) { - stickyTop += this.mergeRequestTabs.offsetHeight; - } - - return stickyTop; - } } |