<script> import { GlLoadingIcon } from '@gitlab/ui'; export default { components: { GlLoadingIcon, }, props: { commitRef: { type: String, required: true, }, path: { type: String, required: true, }, loadingPath: { type: String, required: false, default: null, }, }, computed: { parentPath() { const splitArray = this.path.split('/'); splitArray.pop(); return splitArray.join('/'); }, parentRoute() { return { path: `/-/tree/${escape(this.commitRef)}/${this.parentPath}` }; }, }, methods: { clickRow() { this.$router.push(this.parentRoute); }, }, }; </script> <template> <tr class="tree-item"> <td colspan="3" class="tree-item-file-name" @click.self="clickRow"> <gl-loading-icon v-if="parentPath === loadingPath" size="sm" inline class="d-inline-block align-text-bottom" /> <router-link v-else :to="parentRoute" :aria-label="__('Go to parent')"> .. </router-link> </td> </tr> </template>