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>