Add latest changes from gitlab-org/gitlab@master

3 files changed, 47 insertions, 8 deletions

diff --git a/app/assets/javascripts/environments/components/deployment.vue b/app/assets/javascripts/environments/components/deployment.vue
new file mode 100644
index 00000000000..292f9a366c3
--- /dev/null
+++ b/app/assets/javascripts/environments/components/deployment.vue
@@ -0,0 +1,13 @@
+<script>
+export default {
+  props: {
+    deployment: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div></div>
+</template>
diff --git a/app/assets/javascripts/environments/components/new_environment_folder.vue b/app/assets/javascripts/environments/components/new_environment_folder.vue
index 0d8651b1d09..0d3867a4d74 100644
--- a/app/assets/javascripts/environments/components/new_environment_folder.vue
+++ b/app/assets/javascripts/environments/components/new_environment_folder.vue
@@ -70,9 +70,9 @@ export default {
 <template>
   <div
     :class="{ 'gl-pb-5': !visible }"
-    class="gl-border-b-solid gl-border-gray-100 gl-border-1 gl-px-3 gl-pt-3"
+    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">
+    <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"
@@ -94,7 +94,7 @@ export default {
         :key="environment.name"
         :environment="environment"
         :class="{ 'gl-mt-5': isFirstEnvironment(index) }"
-        class="gl-border-gray-100 gl-border-t-solid gl-border-1 gl-pl-7 gl-pt-3"
+        class="gl-border-gray-100 gl-border-t-solid gl-border-1 gl-pt-3"
         in-folder
       />
     </gl-collapse>
diff --git a/app/assets/javascripts/environments/components/new_environment_item.vue b/app/assets/javascripts/environments/components/new_environment_item.vue
index 883e887c1ae..d3624103c13 100644
--- a/app/assets/javascripts/environments/components/new_environment_item.vue
+++ b/app/assets/javascripts/environments/components/new_environment_item.vue
@@ -17,6 +17,7 @@ import Pin from './environment_pin.vue';
 import Monitoring from './environment_monitoring.vue';
 import Terminal from './environment_terminal_button.vue';
 import Delete from './environment_delete.vue';
+import Deployment from './deployment.vue';
 
 export default {
   components: {
@@ -25,6 +26,7 @@ export default {
     GlButton,
     GlLink,
     Actions,
+    Deployment,
     ExternalUrl,
     StopComponent,
     Rollback,
@@ -75,11 +77,17 @@ export default {
     label() {
       return this.visible ? this.$options.i18n.collapse : this.$options.i18n.expand;
     },
+    lastDeployment() {
+      return this.environment?.lastDeployment;
+    },
+    upcomingDeployment() {
+      return this.environment?.upcomingDeployment;
+    },
     actions() {
-      if (!this.environment?.lastDeployment) {
+      if (!this.lastDeployment) {
         return [];
       }
-      const { manualActions = [], scheduledActions = [] } = this.environment.lastDeployment;
+      const { manualActions = [], scheduledActions = [] } = this.lastDeployment;
       const combinedActions = [...manualActions, ...scheduledActions];
       return combinedActions.map((action) => ({
         ...action,
@@ -89,7 +97,7 @@ export default {
       return this.environment?.canStop;
     },
     retryPath() {
-      return this.environment?.lastDeployment?.deployable?.retryPath;
+      return this.lastDeployment?.deployable?.retryPath;
     },
     hasExtraActions() {
       return Boolean(
@@ -131,6 +139,14 @@ export default {
       this.visible = !this.visible;
     },
   },
+  deploymentClasses: [
+    'gl-border-gray-100',
+    'gl-border-t-solid',
+    'gl-border-1',
+    'gl-py-5',
+    'gl-pl-7',
+    'gl-bg-gray-10',
+  ],
 };
 </script>
 <template>
@@ -138,7 +154,10 @@ export default {
     <div
       class="gl-px-3 gl-pt-3 gl-pb-5 gl-display-flex gl-justify-content-space-between gl-align-items-center"
     >
-      <div class="gl-min-w-0 gl-mr-4 gl-display-flex gl-align-items-center">
+      <div
+        :class="{ 'gl-ml-7': inFolder }"
+        class="gl-min-w-0 gl-mr-4 gl-display-flex gl-align-items-center"
+      >
         <gl-button
           class="gl-mr-4 gl-min-w-fit-content"
           :icon="icon"
@@ -234,6 +253,13 @@ export default {
         </div>
       </div>
     </div>
-    <gl-collapse :visible="visible" />
+    <gl-collapse :visible="visible">
+      <div v-if="lastDeployment" :class="$options.deploymentClasses">
+        <deployment :deployment="lastDeployment" :class="{ 'gl-ml-7': inFolder }" />
+      </div>
+      <div v-if="upcomingDeployment" :class="$options.deploymentClasses">
+        <deployment :deployment="upcomingDeployment" :class="{ 'gl-ml-7': inFolder }" />
+      </div>
+    </gl-collapse>
   </div>
 </template>