diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_list.vue')
-rw-r--r-- | app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_list.vue | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_list.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_list.vue new file mode 100644 index 00000000000..d23c7f016fb --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_list.vue @@ -0,0 +1,92 @@ +<script> +import { GlSprintf } from '@gitlab/ui'; +import { n__ } from '~/locale'; +import MrCollapsibleExtension from '../mr_collapsible_extension.vue'; + +export default { + components: { + Deployment: () => import('./deployment.vue'), + GlSprintf, + MrCollapsibleExtension, + }, + props: { + deployments: { + type: Array, + required: true, + }, + deploymentClass: { + type: String, + required: true, + }, + hasDeploymentMetrics: { + type: Boolean, + required: true, + }, + visualReviewAppMeta: { + type: Object, + required: false, + default: () => ({ + sourceProjectId: '', + sourceProjectPath: '', + mergeRequestId: '', + appUrl: '', + }), + }, + showVisualReviewAppLink: { + type: Boolean, + required: false, + default: false, + }, + }, + computed: { + showCollapsedDeployments() { + return this.deployments.length > 3; + }, + multipleDeploymentsTitle() { + return n__( + 'Deployments|%{deployments} environment impacted.', + 'Deployments|%{deployments} environments impacted.', + this.deployments.length, + ); + }, + }, +}; +</script> +<template> + <mr-collapsible-extension + v-if="showCollapsedDeployments" + :title="__('View all environments.')" + data-testid="mr-collapsed-deployments" + > + <template #header> + <div class="gl-mr-3 gl-line-height-normal"> + <gl-sprintf :message="multipleDeploymentsTitle"> + <template #deployments> + <span class="gl-font-weight-bold gl-mr-2">{{ deployments.length }}</span> + </template> + </gl-sprintf> + </div> + </template> + <deployment + v-for="deployment in deployments" + :key="deployment.id" + :class="deploymentClass" + class="gl-bg-gray-50" + :deployment="deployment" + :show-metrics="hasDeploymentMetrics" + :show-visual-review-app="showVisualReviewAppLink" + :visual-review-app-meta="visualReviewAppMeta" + /> + </mr-collapsible-extension> + <div v-else class="mr-widget-extension"> + <deployment + v-for="deployment in deployments" + :key="deployment.id" + :class="deploymentClass" + :deployment="deployment" + :show-metrics="hasDeploymentMetrics" + :show-visual-review-app="showVisualReviewAppLink" + :visual-review-app-meta="visualReviewAppMeta" + /> + </div> +</template> |