diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-29 18:10:45 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-29 18:10:45 +0300 |
commit | 51a7dc1b9d146b33ddf8ec167944151f4b58e620 (patch) | |
tree | 704e26d941c90ecc6215053a5f855174cc9a0e5c /app/assets/javascripts/repository | |
parent | 21a78a7f74298cfd1a27b490bf6c94d2652e1167 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/repository')
3 files changed, 133 insertions, 0 deletions
diff --git a/app/assets/javascripts/repository/components/blob_controls.vue b/app/assets/javascripts/repository/components/blob_controls.vue new file mode 100644 index 00000000000..4041315f5ec --- /dev/null +++ b/app/assets/javascripts/repository/components/blob_controls.vue @@ -0,0 +1,98 @@ +<script> +import { GlButton } from '@gitlab/ui'; +import { __ } from '~/locale'; +import createFlash from '~/flash'; +import getRefMixin from '~/repository/mixins/get_ref'; +import { updateElementsVisibility } from '../utils/dom'; +import blobControlsQuery from '../queries/blob_controls.query.graphql'; + +export default { + i18n: { + findFile: __('Find file'), + blame: __('Blame'), + history: __('History'), + permalink: __('Permalink'), + errorMessage: __('An error occurred while loading the blob controls.'), + }, + buttonClassList: 'gl-sm-w-auto gl-w-full gl-sm-mt-0 gl-mt-3', + components: { + GlButton, + }, + mixins: [getRefMixin], + apollo: { + project: { + query: blobControlsQuery, + variables() { + return { + projectPath: this.projectPath, + filePath: this.filePath, + ref: this.ref, + }; + }, + skip() { + return !this.filePath; + }, + error() { + createFlash({ message: this.$options.i18n.errorMessage }); + }, + }, + }, + props: { + projectPath: { + type: String, + required: true, + }, + }, + data() { + return { + project: { + repository: { + blobs: { + nodes: [ + { + findFilePath: null, + blamePath: null, + historyPath: null, + permalinkPath: null, + }, + ], + }, + }, + }, + }; + }, + computed: { + filePath() { + const { path } = this.$route.params; + updateElementsVisibility('.tree-controls', !path); + return path; + }, + blobInfo() { + return this.project?.repository?.blobs?.nodes[0] || {}; + }, + }, +}; +</script> + +<template> + <div v-if="filePath"> + <gl-button data-testid="find" :href="blobInfo.findFilePath" :class="$options.buttonClassList"> + {{ $options.i18n.findFile }} + </gl-button> + <gl-button data-testid="blame" :href="blobInfo.blamePath" :class="$options.buttonClassList"> + {{ $options.i18n.blame }} + </gl-button> + + <gl-button data-testid="history" :href="blobInfo.historyPath" :class="$options.buttonClassList"> + {{ $options.i18n.history }} + </gl-button> + + <gl-button + data-testid="permalink" + :href="blobInfo.permalinkPath" + :class="$options.buttonClassList" + > + {{ $options.i18n.permalink }} + </gl-button> + </div> +</template> diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js index 197b19387cf..9946e1e302c 100644 --- a/app/assets/javascripts/repository/index.js +++ b/app/assets/javascripts/repository/index.js @@ -9,6 +9,7 @@ import App from './components/app.vue'; import Breadcrumbs from './components/breadcrumbs.vue'; import DirectoryDownloadLinks from './components/directory_download_links.vue'; import LastCommit from './components/last_commit.vue'; +import BlobControls from './components/blob_controls.vue'; import apolloProvider from './graphql'; import commitsQuery from './queries/commits.query.graphql'; import projectPathQuery from './queries/project_path.query.graphql'; @@ -71,8 +72,26 @@ export default function setupVueRepositoryList() { }, }); + const initBlobControlsApp = () => + new Vue({ + el: document.getElementById('js-blob-controls'), + router, + apolloProvider, + render(h) { + return h(BlobControls, { + props: { + projectPath, + }, + }); + }, + }); + initLastCommitApp(); + if (gon.features.refactorBlobViewer) { + initBlobControlsApp(); + } + router.afterEach(({ params: { path } }) => { setTitle(path, ref, fullName); }); diff --git a/app/assets/javascripts/repository/queries/blob_controls.query.graphql b/app/assets/javascripts/repository/queries/blob_controls.query.graphql new file mode 100644 index 00000000000..f859afd3e3e --- /dev/null +++ b/app/assets/javascripts/repository/queries/blob_controls.query.graphql @@ -0,0 +1,16 @@ +query getBlobControls($projectPath: ID!, $filePath: String!, $ref: String!) { + project(fullPath: $projectPath) { + id + repository { + blobs(paths: [$filePath], ref: $ref) { + nodes { + id + findFilePath + blamePath + historyPath + permalinkPath + } + } + } + } +} |