diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-10-14 12:07:54 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-10-14 12:07:54 +0300 |
commit | 5ff1b520badaa2da217416964709f49f3ede350a (patch) | |
tree | 821ddbc4062a56fd2a7f26a0776457da3e074859 /app/assets/javascripts/vue_merge_request_widget/components | |
parent | eccfaf7c242ab8afec22cdaf68865763e780fdeb (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components')
4 files changed, 162 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/artifacts_list.vue b/app/assets/javascripts/vue_merge_request_widget/components/artifacts_list.vue new file mode 100644 index 00000000000..dc766176617 --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/components/artifacts_list.vue @@ -0,0 +1,40 @@ +<script> +import { GlLink } from '@gitlab/ui'; + +export default { + components: { + GlLink, + }, + props: { + artifacts: { + type: Array, + required: true, + }, + }, +}; +</script> +<template> + <table class="table m-0"> + <thead class="thead-white text-nowrap"> + <tr class="d-none d-sm-table-row"> + <th class="w-0"></th> + <th>{{ __('Artifact') }}</th> + <th class="w-50"></th> + <th>{{ __('Job') }}</th> + </tr> + </thead> + + <tbody> + <tr v-for="item in artifacts" :key="item.text"> + <td class="w-0"></td> + <td> + <gl-link :href="item.url" target="_blank">{{ item.text }}</gl-link> + </td> + <td class="w-0"></td> + <td> + <gl-link :href="item.job_path">{{ item.job_name }}</gl-link> + </td> + </tr> + </tbody> + </table> +</template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/artifacts_list_app.vue b/app/assets/javascripts/vue_merge_request_widget/components/artifacts_list_app.vue new file mode 100644 index 00000000000..730e67761be --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/components/artifacts_list_app.vue @@ -0,0 +1,36 @@ +<script> +import { mapActions, mapState, mapGetters } from 'vuex'; +import ArtifactsList from './artifacts_list.vue'; +import MrCollapsibleExtension from './mr_collapsible_extension.vue'; +import createStore from '../stores/artifacts_list'; + +export default { + store: createStore(), + components: { + ArtifactsList, + MrCollapsibleExtension, + }, + props: { + endpoint: { + type: String, + required: true, + }, + }, + computed: { + ...mapState(['artifacts', 'isLoading', 'hasError']), + ...mapGetters(['title']), + }, + created() { + this.setEndpoint(this.endpoint); + this.fetchArtifacts(); + }, + methods: { + ...mapActions(['setEndpoint', 'fetchArtifacts']), + }, +}; +</script> +<template> + <mr-collapsible-extension :title="title" :is-loading="isLoading" :has-error="hasError"> + <artifacts-list :artifacts="artifacts" /> + </mr-collapsible-extension> +</template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue new file mode 100644 index 00000000000..ae1d9368008 --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue @@ -0,0 +1,81 @@ +<script> +import { GlButton, GlLink, GlLoadingIcon } from '@gitlab/ui'; +import { __ } from '~/locale'; +import Icon from '~/vue_shared/components/icon.vue'; + +export default { + components: { + GlButton, + GlLink, + GlLoadingIcon, + Icon, + }, + props: { + title: { + type: String, + required: true, + }, + isLoading: { + type: Boolean, + required: false, + default: false, + }, + hasError: { + type: Boolean, + required: false, + default: false, + }, + }, + data() { + return { + isCollapsed: true, + }; + }, + + computed: { + arrowIconName() { + return this.isCollapsed ? 'angle-right' : 'angle-down'; + }, + ariaLabel() { + return this.isCollapsed ? __('Expand') : __('Collapse'); + }, + isButtonDisabled() { + return this.isLoading || this.hasError; + }, + }, + methods: { + toggleCollapsed() { + this.isCollapsed = !this.isCollapsed; + }, + }, +}; +</script> +<template> + <div> + <div class="mr-widget-extension d-flex align-items-center pl-3"> + <gl-button + class="btn-blank btn s32 square append-right-default" + :aria-label="ariaLabel" + :disabled="isButtonDisabled" + @click="toggleCollapsed" + > + <gl-loading-icon v-if="isLoading" /> + <icon v-else :name="arrowIconName" class="js-icon" /> + </gl-button> + <gl-button + variant="link" + class="js-title" + :disabled="isButtonDisabled" + :class="{ 'border-0': isButtonDisabled }" + @click="toggleCollapsed" + > + <template v-if="isCollapsed">{{ title }}</template> + <template v-else>{{ __('Collapse') }}</template> + </gl-button> + </div> + + <div v-if="!isCollapsed" class="border-top js-slot-container"> + <slot></slot> + </div> + </div> +</template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue index 8fdf61a6b8d..ffc3e0967d4 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue @@ -1,5 +1,6 @@ <script> import _ from 'underscore'; +import ArtifactsApp from './artifacts_list_app.vue'; import Deployment from './deployment.vue'; import MrWidgetContainer from './mr_widget_container.vue'; import MrWidgetPipeline from './mr_widget_pipeline.vue'; @@ -15,6 +16,7 @@ import MrWidgetPipeline from './mr_widget_pipeline.vue'; export default { name: 'MrWidgetPipelineContainer', components: { + ArtifactsApp, Deployment, MrWidgetContainer, MrWidgetPipeline, @@ -79,6 +81,9 @@ export default { :troubleshooting-docs-path="mr.troubleshootingDocsPath" /> <template v-slot:footer> + <div v-if="mr.exposedArtifactsPath" class="js-exposed-artifacts"> + <artifacts-app :endpoint="mr.exposedArtifactsPath" /> + </div> <div v-if="deployments.length" class="mr-widget-extension"> <deployment v-for="deployment in deployments" |