diff options
Diffstat (limited to 'app/assets/javascripts/repository')
9 files changed, 75 insertions, 60 deletions
diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue index 05d64077866..4d3c1521559 100644 --- a/app/assets/javascripts/repository/components/last_commit.vue +++ b/app/assets/javascripts/repository/components/last_commit.vue @@ -1,12 +1,6 @@ <script> -import { - GlTooltipDirective, - GlLink, - GlButton, - GlButtonGroup, - GlLoadingIcon, - GlSafeHtmlDirective, -} from '@gitlab/ui'; +import { GlTooltipDirective, GlLink, GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui'; +import SafeHtml from '~/vue_shared/directives/safe_html'; import defaultAvatarUrl from 'images/no_avatar.png'; import pathLastCommitQuery from 'shared_queries/repository/path_last_commit.query.graphql'; import { sprintf, s__ } from '~/locale'; @@ -32,7 +26,7 @@ export default { }, directives: { GlTooltip: GlTooltipDirective, - SafeHtml: GlSafeHtmlDirective, + SafeHtml, }, mixins: [getRefMixin], apollo: { diff --git a/app/assets/javascripts/repository/components/preview/index.vue b/app/assets/javascripts/repository/components/preview/index.vue index 4935b8029f9..8feac6b8e35 100644 --- a/app/assets/javascripts/repository/components/preview/index.vue +++ b/app/assets/javascripts/repository/components/preview/index.vue @@ -1,8 +1,8 @@ <script> -import { GlIcon, GlLink, GlLoadingIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; -import $ from 'jquery'; -import '~/behaviors/markdown/render_gfm'; +import { GlIcon, GlLink, GlLoadingIcon } from '@gitlab/ui'; +import SafeHtml from '~/vue_shared/directives/safe_html'; import { handleLocationHash } from '~/lib/utils/common_utils'; +import { renderGFM } from '~/behaviors/markdown/render_gfm'; import readmeQuery from '../../queries/readme.query.graphql'; export default { @@ -42,7 +42,7 @@ export default { if (newVal) { this.$nextTick(() => { handleLocationHash(); - $(this.$refs.readme).renderGFM(); + renderGFM(this.$refs.readme); }); } }, diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue index 99eb167172b..46d546c2ee4 100644 --- a/app/assets/javascripts/repository/components/table/index.vue +++ b/app/assets/javascripts/repository/components/table/index.vue @@ -1,6 +1,5 @@ <script> import { GlSkeletonLoader, GlButton } from '@gitlab/ui'; -import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { sprintf, __ } from '~/locale'; import { joinPaths } from '~/lib/utils/url_utility'; import getRefMixin from '../../mixins/get_ref'; @@ -17,7 +16,7 @@ export default { ParentRow, GlButton, }, - mixins: [getRefMixin, glFeatureFlagMixin()], + mixins: [getRefMixin], apollo: { projectPath: { query: projectPathQuery, @@ -93,9 +92,6 @@ export default { }, generateRowNumber(path, id, index) { const key = `${path}-${id}-${index}`; - if (!this.glFeatures.lazyLoadCommits) { - return 0; - } if (!this.rowNumbers[key] && this.rowNumbers[key] !== 0) { this.$options.totalRowsLoaded += 1; @@ -105,10 +101,6 @@ export default { return this.rowNumbers[key]; }, getCommit(fileName) { - if (!this.glFeatures.lazyLoadCommits) { - return {}; - } - return this.commits.find( (commitEntry) => commitEntry.filePath === joinPaths(this.path, fileName), ); diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue index f3c5ace75fc..27ac11f3c58 100644 --- a/app/assets/javascripts/repository/components/table/row.vue +++ b/app/assets/javascripts/repository/components/table/row.vue @@ -7,10 +7,10 @@ import { GlLoadingIcon, GlIcon, GlHoverLoadDirective, - GlSafeHtmlDirective, GlIntersectionObserver, } from '@gitlab/ui'; import { escapeRegExp } from 'lodash'; +import SafeHtml from '~/vue_shared/directives/safe_html'; import paginatedTreeQuery from 'shared_queries/repository/paginated_tree.query.graphql'; import { escapeFileUrl } from '~/lib/utils/url_utility'; import { TREE_PAGE_SIZE, ROW_APPEAR_DELAY } from '~/repository/constants'; @@ -19,7 +19,6 @@ import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import blobInfoQuery from 'shared_queries/repository/blob_info.query.graphql'; import getRefMixin from '../../mixins/get_ref'; -import commitQuery from '../../queries/commit.query.graphql'; export default { components: { @@ -35,23 +34,7 @@ export default { directives: { GlTooltip: GlTooltipDirective, GlHoverLoad: GlHoverLoadDirective, - SafeHtml: GlSafeHtmlDirective, - }, - apollo: { - commit: { - query: commitQuery, - variables() { - return { - fileName: this.name, - path: this.currentPath, - projectPath: this.projectPath, - maxOffset: this.totalEntries, - }; - }, - skip() { - return this.glFeatures.lazyLoadCommits; - }, - }, + SafeHtml, }, mixins: [getRefMixin, glFeatureFlagMixin()], props: { @@ -125,14 +108,13 @@ export default { }, data() { return { - commit: null, hasRowAppeared: false, delayedRowAppear: null, }; }, computed: { commitData() { - return this.glFeatures.lazyLoadCommits ? this.commitInfo : this.commit; + return this.commitInfo; }, routerLinkTo() { const blobRouteConfig = { path: `/-/blob/${this.escapedRef}/${escapeFileUrl(this.path)}` }; @@ -200,12 +182,10 @@ export default { return; } - if (this.glFeatures.lazyLoadCommits) { - this.delayedRowAppear = setTimeout( - () => this.$emit('row-appear', this.rowNumber), - ROW_APPEAR_DELAY, - ); - } + this.delayedRowAppear = setTimeout( + () => this.$emit('row-appear', this.rowNumber), + ROW_APPEAR_DELAY, + ); }, rowDisappeared() { clearTimeout(this.delayedRowAppear); diff --git a/app/assets/javascripts/repository/components/tree_content.vue b/app/assets/javascripts/repository/components/tree_content.vue index 8a45a351c35..4a8f83458f4 100644 --- a/app/assets/javascripts/repository/components/tree_content.vue +++ b/app/assets/javascripts/repository/components/tree_content.vue @@ -157,7 +157,7 @@ export default { .find(({ hasNextPage }) => hasNextPage); }, handleRowAppear(rowNumber) { - if (!this.glFeatures.lazyLoadCommits || isRequested(rowNumber)) { + if (isRequested(rowNumber)) { return; } diff --git a/app/assets/javascripts/repository/constants.js b/app/assets/javascripts/repository/constants.js index 3a6d7d2f779..e194bddcc56 100644 --- a/app/assets/javascripts/repository/constants.js +++ b/app/assets/javascripts/repository/constants.js @@ -99,5 +99,4 @@ export const LEGACY_FILE_TYPES = [ 'requirements_txt', 'cargo_toml', 'go_mod', - 'go_sum', ]; diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js index 1d295e18332..e9214e3acff 100644 --- a/app/assets/javascripts/repository/index.js +++ b/app/assets/javascripts/repository/index.js @@ -2,11 +2,12 @@ import { GlButton } from '@gitlab/ui'; import Vue from 'vue'; import Vuex from 'vuex'; import { parseBoolean } from '~/lib/utils/common_utils'; -import { escapeFileUrl } from '~/lib/utils/url_utility'; +import { escapeFileUrl, visitUrl } from '~/lib/utils/url_utility'; import { __ } from '~/locale'; import initWebIdeLink from '~/pages/projects/shared/web_ide_link'; import PerformancePlugin from '~/performance/vue_performance_plugin'; import createStore from '~/code_navigation/store'; +import RefSelector from '~/ref/components/ref_selector.vue'; import App from './components/app.vue'; import Breadcrumbs from './components/breadcrumbs.vue'; import DirectoryDownloadLinks from './components/directory_download_links.vue'; @@ -20,6 +21,7 @@ import refsQuery from './queries/ref.query.graphql'; import createRouter from './router'; import { updateFormAction } from './utils/dom'; import { setTitle } from './utils/title'; +import { generateRefDestinationPath } from './utils/ref_switcher_utils'; Vue.use(Vuex); Vue.use(PerformancePlugin, { @@ -89,9 +91,34 @@ export default function setupVueRepositoryList() { }, }); - initLastCommitApp(); + const initRefSwitcher = () => { + const refSwitcherEl = document.getElementById('js-tree-ref-switcher'); + + if (!refSwitcherEl) return false; + + const { projectId, projectRootPath } = refSwitcherEl.dataset; + + return new Vue({ + el: refSwitcherEl, + render(createElement) { + return createElement(RefSelector, { + props: { + projectId, + value: ref, + }, + on: { + input(selectedRef) { + visitUrl(generateRefDestinationPath(projectRootPath, selectedRef)); + }, + }, + }); + }, + }); + }; + initLastCommitApp(); initBlobControlsApp(); + initRefSwitcher(); router.afterEach(({ params: { path } }) => { setTitle(path, ref, fullName); diff --git a/app/assets/javascripts/repository/queries/commit.query.graphql b/app/assets/javascripts/repository/queries/commit.query.graphql deleted file mode 100644 index 1a01462bd19..00000000000 --- a/app/assets/javascripts/repository/queries/commit.query.graphql +++ /dev/null @@ -1,7 +0,0 @@ -#import "ee_else_ce/repository/queries/commit.fragment.graphql" - -query getCommit($fileName: String!, $path: String!, $maxOffset: Number!) { - commit(path: $path, fileName: $fileName, maxOffset: $maxOffset) @client { - ...TreeEntryCommit - } -} diff --git a/app/assets/javascripts/repository/utils/ref_switcher_utils.js b/app/assets/javascripts/repository/utils/ref_switcher_utils.js new file mode 100644 index 00000000000..8ff52104c93 --- /dev/null +++ b/app/assets/javascripts/repository/utils/ref_switcher_utils.js @@ -0,0 +1,30 @@ +import { joinPaths } from '~/lib/utils/url_utility'; + +/** + * Matches the namespace and target directory/blob in a path + * Example: /root/Flight/-/blob/fix/main/test/spec/utils_spec.js + * Group 1: /-/blob + * Group 2: blob + * Group 3: main/test/spec/utils_spec.js + */ +const NAMESPACE_TARGET_REGEX = /(\/-\/(blob|tree))\/.*?\/(.*)/; + +/** + * Generates a ref destination path based on the selected ref and current path. + * A user could either be in the project root, a directory on the blob view. + * @param {string} projectRootPath - The root path for a project. + * @param {string} selectedRef - The selected ref from the ref dropdown. + */ +export function generateRefDestinationPath(projectRootPath, selectedRef) { + const currentPath = window.location.pathname; + let namespace = '/-/tree'; + let target; + const match = NAMESPACE_TARGET_REGEX.exec(currentPath); + if (match) { + [, namespace, , target] = match; + } + + const destinationPath = joinPaths(projectRootPath, namespace, selectedRef, target); + + return `${destinationPath}${window.location.hash}`; +} |