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

265 lines
6.3 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,
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';
2019-09-30 21:07:59 +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';
2019-09-30 21:07:59 +05:30
const ROW_TYPES = {
header: 'header',
divider: 'divider',
};
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,
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
},
mixins: [getRefMixin],
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,
},
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,
},
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));
2019-09-04 21:01:54 +05:30
return acc.concat({
name,
path,
2020-05-05 14:28:15 +05:30
to: `/-/tree/${joinPaths(this.escapedRef, path)}`,
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() {
return this.userPermissions.forkProject && this.userPermissions.createMergeRequestIn;
},
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',
'data-target': '#modal-upload-blob',
'data-toggle': 'modal',
},
text: __('Upload file'),
},
{
attrs: {
href: '#modal-create-new-dir',
'data-target': '#modal-create-new-dir',
'data-toggle': 'modal',
},
text: __('New directory'),
},
);
} 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;
},
renderAddToTreeDropdown() {
return this.canCollaborate || this.canCreateMrFromFork;
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">
<component :is="getComponent(item.type)" :key="i" v-bind="item.attrs">
{{ 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>
</nav>
</template>