2019-09-04 21:01:54 +05:30
|
|
|
<script>
|
2020-03-09 13:42:32 +05:30
|
|
|
import { escapeRegExp } from 'lodash';
|
|
|
|
import { GlBadge, GlLink, GlSkeletonLoading, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
|
2019-09-04 21:01:54 +05:30
|
|
|
import { visitUrl } from '~/lib/utils/url_utility';
|
2019-09-30 21:07:59 +05:30
|
|
|
import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
|
2019-12-26 22:10:19 +05:30
|
|
|
import Icon from '~/vue_shared/components/icon.vue';
|
2019-09-04 21:01:54 +05:30
|
|
|
import { getIconName } from '../../utils/icon';
|
|
|
|
import getRefMixin from '../../mixins/get_ref';
|
2019-09-30 21:07:59 +05:30
|
|
|
import getCommit from '../../queries/getCommit.query.graphql';
|
2019-09-04 21:01:54 +05:30
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
GlBadge,
|
2019-09-30 21:07:59 +05:30
|
|
|
GlLink,
|
|
|
|
GlSkeletonLoading,
|
2020-03-09 13:42:32 +05:30
|
|
|
GlLoadingIcon,
|
2019-09-30 21:07:59 +05:30
|
|
|
TimeagoTooltip,
|
2019-12-26 22:10:19 +05:30
|
|
|
Icon,
|
|
|
|
},
|
|
|
|
directives: {
|
|
|
|
GlTooltip: GlTooltipDirective,
|
2019-09-30 21:07:59 +05:30
|
|
|
},
|
|
|
|
apollo: {
|
|
|
|
commit: {
|
|
|
|
query: getCommit,
|
|
|
|
variables() {
|
|
|
|
return {
|
|
|
|
fileName: this.name,
|
|
|
|
type: this.type,
|
|
|
|
path: this.currentPath,
|
|
|
|
projectPath: this.projectPath,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
2019-09-04 21:01:54 +05:30
|
|
|
},
|
|
|
|
mixins: [getRefMixin],
|
|
|
|
props: {
|
|
|
|
id: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
2019-12-26 22:10:19 +05:30
|
|
|
sha: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
2019-09-30 21:07:59 +05:30
|
|
|
projectPath: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
2019-09-04 21:01:54 +05:30
|
|
|
currentPath: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
2019-09-30 21:07:59 +05:30
|
|
|
name: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
2019-09-04 21:01:54 +05:30
|
|
|
path: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
type: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
url: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: null,
|
|
|
|
},
|
|
|
|
lfsOid: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: null,
|
|
|
|
},
|
2019-09-30 21:07:59 +05:30
|
|
|
submoduleTreeUrl: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: null,
|
|
|
|
},
|
2020-03-09 13:42:32 +05:30
|
|
|
loadingPath: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: '',
|
|
|
|
},
|
2019-09-30 21:07:59 +05:30
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
commit: null,
|
|
|
|
};
|
2019-09-04 21:01:54 +05:30
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
routerLinkTo() {
|
2020-03-09 13:42:32 +05:30
|
|
|
return this.isFolder
|
|
|
|
? { path: `/-/tree/${escape(this.ref)}/${encodeURIComponent(this.path)}` }
|
|
|
|
: null;
|
2019-09-04 21:01:54 +05:30
|
|
|
},
|
|
|
|
iconName() {
|
|
|
|
return `fa-${getIconName(this.type, this.path)}`;
|
|
|
|
},
|
|
|
|
isFolder() {
|
|
|
|
return this.type === 'tree';
|
|
|
|
},
|
|
|
|
isSubmodule() {
|
|
|
|
return this.type === 'commit';
|
|
|
|
},
|
|
|
|
linkComponent() {
|
|
|
|
return this.isFolder ? 'router-link' : 'a';
|
|
|
|
},
|
|
|
|
fullPath() {
|
2020-03-09 13:42:32 +05:30
|
|
|
return this.path.replace(new RegExp(`^${escapeRegExp(this.currentPath)}/`), '');
|
2019-09-04 21:01:54 +05:30
|
|
|
},
|
|
|
|
shortSha() {
|
2019-12-26 22:10:19 +05:30
|
|
|
return this.sha.slice(0, 8);
|
|
|
|
},
|
|
|
|
hasLockLabel() {
|
|
|
|
return this.commit && this.commit.lockLabel;
|
2019-09-04 21:01:54 +05:30
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
2019-12-26 22:10:19 +05:30
|
|
|
openRow(e) {
|
|
|
|
if (e.target.tagName === 'A') return;
|
|
|
|
|
|
|
|
if (this.isFolder && !e.metaKey) {
|
2019-09-04 21:01:54 +05:30
|
|
|
this.$router.push(this.routerLinkTo);
|
|
|
|
} else {
|
2019-12-26 22:10:19 +05:30
|
|
|
visitUrl(this.url, e.metaKey);
|
2019-09-04 21:01:54 +05:30
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2019-09-30 21:07:59 +05:30
|
|
|
<tr :class="`file_${id}`" class="tree-item" @click="openRow">
|
2019-09-04 21:01:54 +05:30
|
|
|
<td class="tree-item-file-name">
|
2020-03-09 13:42:32 +05:30
|
|
|
<gl-loading-icon
|
|
|
|
v-if="path === loadingPath"
|
|
|
|
size="sm"
|
|
|
|
inline
|
|
|
|
class="d-inline-block align-text-bottom fa-fw"
|
|
|
|
/>
|
|
|
|
<i v-else :aria-label="type" role="img" :class="iconName" class="fa fa-fw"></i>
|
|
|
|
<component
|
|
|
|
:is="linkComponent"
|
|
|
|
ref="link"
|
|
|
|
:to="routerLinkTo"
|
|
|
|
:href="url"
|
|
|
|
class="str-truncated"
|
|
|
|
data-qa-selector="file_name_link"
|
|
|
|
>
|
2019-09-04 21:01:54 +05:30
|
|
|
{{ fullPath }}
|
|
|
|
</component>
|
2019-10-12 21:52:04 +05:30
|
|
|
<!-- eslint-disable-next-line @gitlab/vue-i18n/no-bare-strings -->
|
2019-09-30 21:07:59 +05:30
|
|
|
<gl-badge v-if="lfsOid" variant="default" class="label-lfs ml-1">LFS</gl-badge>
|
2019-09-04 21:01:54 +05:30
|
|
|
<template v-if="isSubmodule">
|
2019-09-30 21:07:59 +05:30
|
|
|
@ <gl-link :href="submoduleTreeUrl" class="commit-sha">{{ shortSha }}</gl-link>
|
2019-09-04 21:01:54 +05:30
|
|
|
</template>
|
2019-12-26 22:10:19 +05:30
|
|
|
<icon
|
|
|
|
v-if="hasLockLabel"
|
|
|
|
v-gl-tooltip
|
|
|
|
:title="commit.lockLabel"
|
|
|
|
name="lock"
|
|
|
|
:size="12"
|
|
|
|
class="ml-2 vertical-align-middle"
|
|
|
|
/>
|
2019-09-04 21:01:54 +05:30
|
|
|
</td>
|
2019-09-30 21:07:59 +05:30
|
|
|
<td class="d-none d-sm-table-cell tree-commit">
|
2019-12-26 22:10:19 +05:30
|
|
|
<gl-link
|
|
|
|
v-if="commit"
|
|
|
|
:href="commit.commitPath"
|
|
|
|
:title="commit.message"
|
|
|
|
class="str-truncated-100 tree-commit-link"
|
|
|
|
>
|
2019-09-30 21:07:59 +05:30
|
|
|
{{ commit.message }}
|
|
|
|
</gl-link>
|
|
|
|
<gl-skeleton-loading v-else :lines="1" class="h-auto" />
|
|
|
|
</td>
|
|
|
|
<td class="tree-time-ago text-right">
|
2019-12-26 22:10:19 +05:30
|
|
|
<timeago-tooltip v-if="commit" :time="commit.committedDate" />
|
2019-09-30 21:07:59 +05:30
|
|
|
<gl-skeleton-loading v-else :lines="1" class="ml-auto h-auto w-50" />
|
|
|
|
</td>
|
2019-09-04 21:01:54 +05:30
|
|
|
</tr>
|
|
|
|
</template>
|