135 lines
3.3 KiB
Vue
135 lines
3.3 KiB
Vue
|
<script>
|
||
|
|
import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
|
||
|
|
import SafeHtml from '~/vue_shared/directives/safe_html';
|
||
|
|
import axios from '~/lib/utils/axios_utils';
|
||
|
|
import CompareDropdown from '~/merge_requests/components/compare_dropdown.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
GlIcon,
|
||
|
|
GlLoadingIcon,
|
||
|
|
CompareDropdown,
|
||
|
|
},
|
||
|
|
directives: {
|
||
|
|
SafeHtml,
|
||
|
|
},
|
||
|
|
inject: {
|
||
|
|
projectsPath: {
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
branchCommitPath: {
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
currentProject: {
|
||
|
|
default: () => ({}),
|
||
|
|
},
|
||
|
|
currentBranch: {
|
||
|
|
default: () => ({}),
|
||
|
|
},
|
||
|
|
inputs: {
|
||
|
|
default: () => ({}),
|
||
|
|
},
|
||
|
|
i18n: {
|
||
|
|
default: () => ({}),
|
||
|
|
},
|
||
|
|
toggleClass: {
|
||
|
|
default: () => ({}),
|
||
|
|
},
|
||
|
|
branchQaSelector: {
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
selectedProject: this.currentProject,
|
||
|
|
selectedBranch: this.currentBranch,
|
||
|
|
loading: false,
|
||
|
|
commitHtml: null,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
staticProjectData() {
|
||
|
|
if (this.projectsPath) return undefined;
|
||
|
|
|
||
|
|
return [this.currentProject];
|
||
|
|
},
|
||
|
|
showCommitBox() {
|
||
|
|
return this.commitHtml || this.loading || !this.selectedBranch.value;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.fetchCommit();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
selectProject(p) {
|
||
|
|
this.selectedProject = p;
|
||
|
|
},
|
||
|
|
selectBranch(branch) {
|
||
|
|
this.selectedBranch = branch;
|
||
|
|
this.fetchCommit();
|
||
|
|
},
|
||
|
|
async fetchCommit() {
|
||
|
|
if (!this.selectedBranch.value) return;
|
||
|
|
|
||
|
|
this.loading = true;
|
||
|
|
|
||
|
|
const { data } = await axios.get(this.branchCommitPath, {
|
||
|
|
params: { target_project_id: this.selectedProject.value, ref: this.selectedBranch.value },
|
||
|
|
});
|
||
|
|
|
||
|
|
this.loading = false;
|
||
|
|
this.commitHtml = data;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="clearfix">
|
||
|
|
<div class="merge-request-select gl-pl-0">
|
||
|
|
<compare-dropdown
|
||
|
|
:static-data="staticProjectData"
|
||
|
|
:endpoint="projectsPath"
|
||
|
|
:default="currentProject"
|
||
|
|
:dropdown-header="i18n.projectHeaderText"
|
||
|
|
:input-id="inputs.project.id"
|
||
|
|
:input-name="inputs.project.name"
|
||
|
|
:toggle-class="toggleClass.project"
|
||
|
|
is-project
|
||
|
|
@selected="selectProject"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="merge-request-select merge-request-branch-select gl-pr-0">
|
||
|
|
<compare-dropdown
|
||
|
|
:endpoint="selectedProject.refsUrl"
|
||
|
|
:dropdown-header="i18n.branchHeaderText"
|
||
|
|
:input-id="inputs.branch.id"
|
||
|
|
:input-name="inputs.branch.name"
|
||
|
|
:default="currentBranch"
|
||
|
|
:toggle-class="toggleClass.branch"
|
||
|
|
:qa-selector="branchQaSelector"
|
||
|
|
@selected="selectBranch"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
v-if="showCommitBox"
|
||
|
|
class="gl-bg-gray-50 gl-rounded-base gl-my-4"
|
||
|
|
data-testid="commit-box"
|
||
|
|
>
|
||
|
|
<gl-loading-icon v-if="loading" class="gl-py-3" />
|
||
|
|
<template v-else>
|
||
|
|
<div
|
||
|
|
v-if="!selectedBranch.value"
|
||
|
|
class="compare-commit-empty gl-display-flex gl-align-items-center gl-p-5"
|
||
|
|
>
|
||
|
|
<gl-icon name="branch" class="gl-mr-3" />
|
||
|
|
{{ __('Select a branch to compare') }}
|
||
|
|
</div>
|
||
|
|
<ul v-safe-html="commitHtml" class="list-unstyled mr_source_commit"></ul>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|