diff options
Diffstat (limited to 'app/assets/javascripts/environments/components/new_environments_app.vue')
-rw-r--r-- | app/assets/javascripts/environments/components/new_environments_app.vue | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/app/assets/javascripts/environments/components/new_environments_app.vue b/app/assets/javascripts/environments/components/new_environments_app.vue new file mode 100644 index 00000000000..a5526f9cd71 --- /dev/null +++ b/app/assets/javascripts/environments/components/new_environments_app.vue @@ -0,0 +1,47 @@ +<script> +import { GlBadge, GlTab, GlTabs } from '@gitlab/ui'; +import environmentAppQuery from '../graphql/queries/environmentApp.query.graphql'; +import EnvironmentFolder from './new_environment_folder.vue'; + +export default { + components: { + EnvironmentFolder, + GlBadge, + GlTab, + GlTabs, + }, + apollo: { + environmentApp: { + query: environmentAppQuery, + }, + }, + computed: { + folders() { + return this.environmentApp?.environments.filter((e) => e.size > 1) ?? []; + }, + availableCount() { + return this.environmentApp?.availableCount; + }, + }, +}; +</script> +<template> + <div> + <gl-tabs> + <gl-tab> + <template #title> + <span>{{ __('Available') }}</span> + <gl-badge size="sm" class="gl-tab-counter-badge"> + {{ availableCount }} + </gl-badge> + </template> + <environment-folder + v-for="folder in folders" + :key="folder.name" + class="gl-mb-3" + :nested-environment="folder" + /> + </gl-tab> + </gl-tabs> + </div> +</template> |