debian-mirror-gitlab/app/assets/javascripts/repository/components/breadcrumbs.vue

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

342 lines
8.4 KiB
Vue
Raw Normal View History

2019-09-04 21:01:54 +05:30
<script>
2020-10-24 23:57:45 +05:30
import {
2021-01-03 14:25:43 +05:30
GlDropdown,
GlDropdownDivider,
GlDropdownSectionHeader,
GlDropdownItem,
2020-11-24 15:15:51 +05:30
GlIcon,
2021-04-29 21:17:54 +05:30
GlModalDirective,
2020-10-24 23:57:45 +05:30
} from '@gitlab/ui';
2021-01-29 00:20:46 +05:30
import permissionsQuery from 'shared_queries/repository/permissions.query.graphql';
2020-04-22 19:07:51 +05:30
import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility';
2022-06-21 17:19:12 +05:30
import { __ } from '~/locale';
2019-09-04 21:01:54 +05:30
import getRefMixin from '../mixins/get_ref';
2020-10-24 23:57:45 +05:30
import projectPathQuery from '../queries/project_path.query.graphql';
2021-03-11 19:13:27 +05:30
import projectShortPathQuery from '../queries/project_short_path.query.graphql';
2021-04-29 21:17:54 +05:30
import UploadBlobModal from './upload_blob_modal.vue';
2021-11-18 22:05:49 +05:30
import NewDirectoryModal from './new_directory_modal.vue';
2019-09-30 21:07:59 +05:30
const ROW_TYPES = {
header: 'header',
divider: 'divider',
};
2019-09-04 21:01:54 +05:30
2021-04-29 21:17:54 +05:30
const UPLOAD_BLOB_MODAL_ID = 'modal-upload-blob';
2021-11-18 22:05:49 +05:30
const NEW_DIRECTORY_MODAL_ID = 'modal-new-directory';
2021-04-29 21:17:54 +05:30
2019-09-04 21:01:54 +05:30
export default {
2019-09-30 21:07:59 +05:30
components: {
2021-01-03 14:25:43 +05:30
GlDropdown,
GlDropdownDivider,
GlDropdownSectionHeader,
GlDropdownItem,
2020-11-24 15:15:51 +05:30
GlIcon,
2021-04-29 21:17:54 +05:30
UploadBlobModal,
2021-11-18 22:05:49 +05:30
NewDirectoryModal,
2019-09-30 21:07:59 +05:30
},
2019-09-04 21:01:54 +05:30
apollo: {
projectShortPath: {
2020-10-24 23:57:45 +05:30
query: projectShortPathQuery,
2019-09-04 21:01:54 +05:30
},
2019-09-30 21:07:59 +05:30
projectPath: {
2020-10-24 23:57:45 +05:30
query: projectPathQuery,
2019-09-30 21:07:59 +05:30
},
userPermissions: {
2020-10-24 23:57:45 +05:30
query: permissionsQuery,
2019-09-30 21:07:59 +05:30
variables() {
return {
projectPath: this.projectPath,
};
},
2021-03-08 18:12:59 +05:30
update: (data) => data.project?.userPermissions,
2020-03-13 15:44:24 +05:30
error(error) {
throw error;
},
2019-09-30 21:07:59 +05:30
},
2019-09-04 21:01:54 +05:30
},
2021-04-29 21:17:54 +05:30
directives: {
GlModal: GlModalDirective,
},
2022-06-21 17:19:12 +05:30
mixins: [getRefMixin],
2019-09-04 21:01:54 +05:30
props: {
currentPath: {
type: String,
required: false,
2020-03-13 15:44:24 +05:30
default: '',
2019-09-04 21:01:54 +05:30
},
2019-09-30 21:07:59 +05:30
canCollaborate: {
type: Boolean,
required: false,
default: false,
},
canEditTree: {
type: Boolean,
required: false,
default: false,
},
2021-04-29 21:17:54 +05:30
canPushCode: {
type: Boolean,
required: false,
default: false,
},
selectedBranch: {
type: String,
required: false,
default: '',
},
originalBranch: {
type: String,
required: false,
default: '',
},
2019-09-30 21:07:59 +05:30
newBranchPath: {
type: String,
required: false,
default: null,
},
newTagPath: {
type: String,
required: false,
default: null,
},
newBlobPath: {
type: String,
required: false,
default: null,
},
forkNewBlobPath: {
type: String,
required: false,
default: null,
},
forkNewDirectoryPath: {
type: String,
required: false,
default: null,
},
forkUploadBlobPath: {
type: String,
required: false,
default: null,
},
2021-04-29 21:17:54 +05:30
uploadPath: {
type: String,
required: false,
default: '',
},
2021-11-18 22:05:49 +05:30
newDirPath: {
type: String,
required: false,
default: '',
},
2019-09-04 21:01:54 +05:30
},
2021-04-29 21:17:54 +05:30
uploadBlobModalId: UPLOAD_BLOB_MODAL_ID,
2021-11-18 22:05:49 +05:30
newDirectoryModalId: NEW_DIRECTORY_MODAL_ID,
2019-09-04 21:01:54 +05:30
data() {
return {
projectShortPath: '',
2019-09-30 21:07:59 +05:30
projectPath: '',
userPermissions: {},
2019-09-04 21:01:54 +05:30
};
},
computed: {
pathLinks() {
return this.currentPath
.split('/')
2021-03-08 18:12:59 +05:30
.filter((p) => p !== '')
2019-09-04 21:01:54 +05:30
.reduce(
(acc, name, i) => {
2020-04-22 19:07:51 +05:30
const path = joinPaths(i > 0 ? acc[i].path : '', escapeFileUrl(name));
2022-05-07 20:08:51 +05:30
const isLastPath = i === this.currentPath.split('/').length - 1;
const to =
this.isBlobPath && isLastPath
? `/-/blob/${joinPaths(this.escapedRef, path)}`
: `/-/tree/${joinPaths(this.escapedRef, path)}`;
2019-09-04 21:01:54 +05:30
return acc.concat({
name,
path,
2022-05-07 20:08:51 +05:30
to,
2019-09-04 21:01:54 +05:30
});
},
2020-03-13 15:44:24 +05:30
[
{
name: this.projectShortPath,
path: '/',
2020-05-05 14:28:15 +05:30
to: `/-/tree/${this.escapedRef}/`,
2020-03-13 15:44:24 +05:30
},
],
2019-09-30 21:07:59 +05:30
);
},
canCreateMrFromFork() {
2021-04-29 21:17:54 +05:30
return this.userPermissions?.forkProject && this.userPermissions?.createMergeRequestIn;
},
showUploadModal() {
return this.canEditTree && !this.$apollo.queries.userPermissions.loading;
2019-09-30 21:07:59 +05:30
},
2021-11-18 22:05:49 +05:30
showNewDirectoryModal() {
2022-06-21 17:19:12 +05:30
return this.canEditTree && !this.$apollo.queries.userPermissions.loading;
2021-11-18 22:05:49 +05:30
},
2019-09-30 21:07:59 +05:30
dropdownItems() {
const items = [];
if (this.canEditTree) {
items.push(
{
type: ROW_TYPES.header,
text: __('This directory'),
},
{
attrs: {
2020-04-22 19:07:51 +05:30
href: `${this.newBlobPath}/${
this.currentPath ? encodeURIComponent(this.currentPath) : ''
}`,
2019-09-30 21:07:59 +05:30
class: 'qa-new-file-option',
},
text: __('New file'),
},
{
attrs: {
href: '#modal-upload-blob',
},
text: __('Upload file'),
2021-04-29 21:17:54 +05:30
modalId: UPLOAD_BLOB_MODAL_ID,
2019-09-30 21:07:59 +05:30
},
2021-11-18 22:05:49 +05:30
);
2022-06-21 17:19:12 +05:30
items.push({
attrs: {
href: '#modal-create-new-dir',
},
text: __('New directory'),
modalId: NEW_DIRECTORY_MODAL_ID,
});
2019-09-30 21:07:59 +05:30
} else if (this.canCreateMrFromFork) {
items.push(
{
attrs: {
href: this.forkNewBlobPath,
'data-method': 'post',
},
text: __('New file'),
},
{
attrs: {
href: this.forkUploadBlobPath,
'data-method': 'post',
},
text: __('Upload file'),
},
{
attrs: {
href: this.forkNewDirectoryPath,
'data-method': 'post',
},
text: __('New directory'),
},
);
}
2020-03-13 15:44:24 +05:30
if (this.userPermissions?.pushCode) {
2019-09-30 21:07:59 +05:30
items.push(
{
type: ROW_TYPES.divider,
},
{
type: ROW_TYPES.header,
text: __('This repository'),
},
{
attrs: {
href: this.newBranchPath,
},
text: __('New branch'),
},
{
attrs: {
href: this.newTagPath,
},
text: __('New tag'),
},
2019-09-04 21:01:54 +05:30
);
2019-09-30 21:07:59 +05:30
}
return items;
},
2022-05-07 20:08:51 +05:30
isBlobPath() {
return this.$route.name === 'blobPath' || this.$route.name === 'blobPathDecoded';
},
2019-09-30 21:07:59 +05:30
renderAddToTreeDropdown() {
2022-05-07 20:08:51 +05:30
return !this.isBlobPath && (this.canCollaborate || this.canCreateMrFromFork);
2019-09-04 21:01:54 +05:30
},
2022-07-16 23:28:13 +05:30
newDirectoryPath() {
return joinPaths(this.newDirPath, this.currentPath);
},
2019-09-04 21:01:54 +05:30
},
methods: {
isLast(i) {
return i === this.pathLinks.length - 1;
},
2019-09-30 21:07:59 +05:30
getComponent(type) {
switch (type) {
case ROW_TYPES.divider:
2021-01-03 14:25:43 +05:30
return 'gl-dropdown-divider';
2019-09-30 21:07:59 +05:30
case ROW_TYPES.header:
2021-01-03 14:25:43 +05:30
return 'gl-dropdown-section-header';
2019-09-30 21:07:59 +05:30
default:
2021-01-03 14:25:43 +05:30
return 'gl-dropdown-item';
2019-09-30 21:07:59 +05:30
}
},
2019-09-04 21:01:54 +05:30
},
};
</script>
<template>
<nav :aria-label="__('Files breadcrumb')">
<ol class="breadcrumb repo-breadcrumb">
<li v-for="(link, i) in pathLinks" :key="i" class="breadcrumb-item">
<router-link :to="link.to" :aria-current="isLast(i) ? 'page' : null">
{{ link.name }}
</router-link>
</li>
2019-09-30 21:07:59 +05:30
<li v-if="renderAddToTreeDropdown" class="breadcrumb-item">
2021-01-03 14:25:43 +05:30
<gl-dropdown toggle-class="add-to-tree qa-add-to-tree gl-ml-2">
2020-05-24 23:13:21 +05:30
<template #button-content>
2019-09-30 21:07:59 +05:30
<span class="sr-only">{{ __('Add to tree') }}</span>
2020-11-24 15:15:51 +05:30
<gl-icon name="plus" :size="16" class="float-left" />
<gl-icon name="chevron-down" :size="16" class="float-left" />
2019-09-30 21:07:59 +05:30
</template>
<template v-for="(item, i) in dropdownItems">
2021-04-29 21:17:54 +05:30
<component
:is="getComponent(item.type)"
:key="i"
v-bind="item.attrs"
v-gl-modal="item.modalId || null"
>
2019-09-30 21:07:59 +05:30
{{ item.text }}
</component>
</template>
2021-01-03 14:25:43 +05:30
</gl-dropdown>
2019-09-30 21:07:59 +05:30
</li>
2019-09-04 21:01:54 +05:30
</ol>
2021-04-29 21:17:54 +05:30
<upload-blob-modal
v-if="showUploadModal"
:modal-id="$options.uploadBlobModalId"
:commit-message="__('Upload New File')"
:target-branch="selectedBranch"
:original-branch="originalBranch"
:can-push-code="canPushCode"
:path="uploadPath"
/>
2021-11-18 22:05:49 +05:30
<new-directory-modal
v-if="showNewDirectoryModal"
:can-push-code="canPushCode"
:modal-id="$options.newDirectoryModalId"
:commit-message="__('Add new directory')"
:target-branch="selectedBranch"
:original-branch="originalBranch"
2022-07-16 23:28:13 +05:30
:path="newDirectoryPath"
2021-11-18 22:05:49 +05:30
/>
2019-09-04 21:01:54 +05:30
</nav>
</template>