diff options
Diffstat (limited to 'app/assets/javascripts/environments/components/new_environment_folder.vue')
-rw-r--r-- | app/assets/javascripts/environments/components/new_environment_folder.vue | 26 |
1 files changed, 23 insertions, 3 deletions
diff --git a/app/assets/javascripts/environments/components/new_environment_folder.vue b/app/assets/javascripts/environments/components/new_environment_folder.vue index fe3d6f1e8ca..0d3867a4d74 100644 --- a/app/assets/javascripts/environments/components/new_environment_folder.vue +++ b/app/assets/javascripts/environments/components/new_environment_folder.vue @@ -2,9 +2,11 @@ import { GlButton, GlCollapse, GlIcon, GlBadge, GlLink } from '@gitlab/ui'; import { __, s__ } from '~/locale'; import folderQuery from '../graphql/queries/folder.query.graphql'; +import EnvironmentItem from './new_environment_item.vue'; export default { components: { + EnvironmentItem, GlButton, GlCollapse, GlIcon, @@ -51,17 +53,26 @@ export default { folderPath() { return this.nestedEnvironment.latest.folderPath; }, + environments() { + return this.folder?.environments; + }, }, methods: { toggleCollapse() { this.visible = !this.visible; }, + isFirstEnvironment(index) { + return index === 0; + }, }, }; </script> <template> - <div class="gl-border-b-solid gl-border-gray-100 gl-border-1 gl-px-3 gl-pt-3 gl-pb-5"> - <div class="gl-w-full gl-display-flex gl-align-items-center"> + <div + :class="{ 'gl-pb-5': !visible }" + class="gl-border-b-solid gl-border-gray-100 gl-border-1 gl-pt-3" + > + <div class="gl-w-full gl-display-flex gl-align-items-center gl-px-3"> <gl-button class="gl-mr-4 gl-fill-current-color gl-text-gray-500" :aria-label="label" @@ -77,6 +88,15 @@ export default { <gl-badge size="sm" class="gl-mr-auto">{{ count }}</gl-badge> <gl-link v-if="visible" :href="folderPath">{{ $options.i18n.link }}</gl-link> </div> - <gl-collapse :visible="visible" /> + <gl-collapse :visible="visible"> + <environment-item + v-for="(environment, index) in environments" + :key="environment.name" + :environment="environment" + :class="{ 'gl-mt-5': isFirstEnvironment(index) }" + class="gl-border-gray-100 gl-border-t-solid gl-border-1 gl-pt-3" + in-folder + /> + </gl-collapse> </div> </template> |