diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue')
-rw-r--r-- | app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue | 107 |
1 files changed, 58 insertions, 49 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue index 54a98abf860..48dff8c4916 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue @@ -1,56 +1,61 @@ <script> - /* eslint-disable vue/require-default-prop */ - import pipelineStage from '~/pipelines/components/stage.vue'; - import ciIcon from '~/vue_shared/components/ci_icon.vue'; - import icon from '~/vue_shared/components/icon.vue'; +/* eslint-disable vue/require-default-prop */ +import PipelineStage from '~/pipelines/components/stage.vue'; +import CiIcon from '~/vue_shared/components/ci_icon.vue'; +import Icon from '~/vue_shared/components/icon.vue'; - export default { - name: 'MRWidgetPipeline', - components: { - pipelineStage, - ciIcon, - icon, +export default { + name: 'MRWidgetPipeline', + components: { + PipelineStage, + CiIcon, + Icon, + }, + props: { + pipeline: { + type: Object, + required: true, }, - props: { - pipeline: { - type: Object, - required: true, - }, - // This prop needs to be camelCase, html attributes are case insensive - // https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case - hasCi: { - type: Boolean, - required: false, - }, - ciStatus: { - type: String, - required: false, - }, + // This prop needs to be camelCase, html attributes are case insensive + // https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case + hasCi: { + type: Boolean, + required: false, }, - computed: { - hasPipeline() { - return this.pipeline && Object.keys(this.pipeline).length > 0; - }, - hasCIError() { - return this.hasCi && !this.ciStatus; - }, - status() { - return this.pipeline.details && - this.pipeline.details.status ? this.pipeline.details.status : {}; - }, - hasStages() { - return this.pipeline.details && - this.pipeline.details.stages && - this.pipeline.details.stages.length; - }, + ciStatus: { + type: String, + required: false, }, - }; + }, + computed: { + hasPipeline() { + return this.pipeline && Object.keys(this.pipeline).length > 0; + }, + hasCIError() { + return this.hasCi && !this.ciStatus; + }, + status() { + return this.pipeline.details && this.pipeline.details.status + ? this.pipeline.details.status + : {}; + }, + hasStages() { + return ( + this.pipeline.details && this.pipeline.details.stages && this.pipeline.details.stages.length + ); + }, + hasCommitInfo() { + return this.pipeline.commit && Object.keys(this.pipeline.commit).length > 0; + }, + }, +}; </script> <template> <div v-if="hasPipeline || hasCIError" - class="mr-widget-heading"> + class="mr-widget-heading" + > <div class="ci-widget media"> <template v-if="hasCIError"> <div class="ci-status-icon ci-status-icon-failed ci-error js-ci-error append-right-10"> @@ -77,13 +82,17 @@ #{{ pipeline.id }} </a> - {{ pipeline.details.status.label }} for + {{ pipeline.details.status.label }} - <a - :href="pipeline.commit.commit_path" - class="commit-sha js-commit-link" - > - {{ pipeline.commit.short_id }}</a>. + <template v-if="hasCommitInfo"> + for + + <a + :href="pipeline.commit.commit_path" + class="commit-sha js-commit-link" + > + {{ pipeline.commit.short_id }}</a>. + </template> <span class="mr-widget-pipeline-graph"> <span |