diff options
| -rw-r--r-- | app/assets/javascripts/ide/components/merge_requests/info.vue | 97 | ||||
| -rw-r--r-- | app/assets/javascripts/ide/components/panes/right.vue | 25 | ||||
| -rw-r--r-- | app/assets/javascripts/ide/constants.js | 1 |
3 files changed, 122 insertions, 1 deletions
diff --git a/app/assets/javascripts/ide/components/merge_requests/info.vue b/app/assets/javascripts/ide/components/merge_requests/info.vue new file mode 100644 index 00000000000..398d324f19f --- /dev/null +++ b/app/assets/javascripts/ide/components/merge_requests/info.vue @@ -0,0 +1,97 @@ +<script> +import { mapGetters } from 'vuex'; +import Icon from '../../../vue_shared/components/icon.vue'; +import timeago from '../../../vue_shared/mixins/timeago'; +import tooltip from '../../../vue_shared/directives/tooltip'; + +const states = { + open: 'open', + closed: 'closed', +}; + +export default { + directives: { + tooltip, + }, + components: { + Icon, + }, + mixins: [timeago], + computed: { + ...mapGetters(['currentMergeRequest']), + isOpen() { + return this.currentMergeRequest.state === states.open; + }, + isClosed() { + return this.currentMergeRequest.state === states.closed; + }, + authorUsername() { + return `@${this.currentMergeRequest.author.username}`; + }, + iconName() { + return this.isOpen ? 'issue-open-m' : 'close'; + }, + }, +}; +</script> + +<template> + <div class="ide-merge-request-info"> + <div class="detail-page-header"> + <div class="detail-page-header-body"> + <div + :class="{ + 'status-box-open': isOpen, + 'status-box-closed': isClosed + }" + class="issuable-status-box status-box d-flex h-100" + > + <icon + :name="iconName" + /> + </div> + <div class="issuable-meta"> + Opened + {{ timeFormated(currentMergeRequest.created_at) }} + by + <a + :href="currentMergeRequest.author.web_url" + class="author_link" + > + <img + :src="currentMergeRequest.author.avatar_url" + class="avatar avatar-inline s24" + /> + <strong + v-tooltip + :title="authorUsername" + > + {{ currentMergeRequest.author.name }} + </strong> + </a> + </div> + </div> + </div> + <div class="detail-page-description"> + <h2 class="title"> + {{ currentMergeRequest.title }} + </h2> + <div + v-if="currentMergeRequest.description" + class="description" + > + <div class="wiki"> + <p dir="auto"> + {{ currentMergeRequest.description }} + </p> + </div> + </div> + </div> + </div> +</template> + +<style scoped> +.ide-merge-request-info { + overflow: auto; +} +</style> diff --git a/app/assets/javascripts/ide/components/panes/right.vue b/app/assets/javascripts/ide/components/panes/right.vue index 5cd2c9ce188..4da51e2bb26 100644 --- a/app/assets/javascripts/ide/components/panes/right.vue +++ b/app/assets/javascripts/ide/components/panes/right.vue @@ -5,6 +5,7 @@ import Icon from '../../../vue_shared/components/icon.vue'; import { rightSidebarViews } from '../../constants'; import PipelinesList from '../pipelines/list.vue'; import JobsDetail from '../jobs/detail.vue'; +import MergeRequestInfo from '../merge_requests/info.vue'; import ResizablePanel from '../resizable_panel.vue'; export default { @@ -16,9 +17,10 @@ export default { PipelinesList, JobsDetail, ResizablePanel, + MergeRequestInfo, }, computed: { - ...mapState(['rightPane']), + ...mapState(['rightPane', 'currentMergeRequestId']), pipelinesActive() { return ( this.rightPane === rightSidebarViews.pipelines || @@ -54,6 +56,27 @@ export default { </resizable-panel> <nav class="ide-activity-bar"> <ul class="list-unstyled"> + <li + v-if="currentMergeRequestId" + > + <button + v-tooltip + :title="__('Merge Request')" + :class="{ + active: rightPane === $options.rightSidebarViews.mergeRequestInfo + }" + data-container="body" + data-placement="left" + class="ide-sidebar-link is-right" + type="button" + @click="clickTab($event, $options.rightSidebarViews.mergeRequestInfo)" + > + <icon + :size="16" + name="book" + /> + </button> + </li> <li> <button v-tooltip diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js index 12e0c3aeef0..45d36f6f42c 100644 --- a/app/assets/javascripts/ide/constants.js +++ b/app/assets/javascripts/ide/constants.js @@ -31,6 +31,7 @@ export const diffModes = { export const rightSidebarViews = { pipelines: 'pipelines-list', jobsDetail: 'jobs-detail', + mergeRequestInfo: 'merge-request-info', }; export const stageKeys = { |