Add empty deployment component

This sets up the deployment space to allow the addition of all the
deployment details later on.

app/assets/javascripts/environments/components/deployment.vue

+<script>
+export default {
+  props: {
+    deployment: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div></div>
+</template>

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>

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>

spec/frontend/environments/new_environment_item_spec.js

@@ -6,6 +6,7 @@ import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { stubTransition } from 'helpers/stub_transition';
 import { __, s__ } from '~/locale';
 import EnvironmentItem from '~/environments/components/new_environment_item.vue';
+import Deployment from '~/environments/components/deployment.vue';
 import { resolvedEnvironment } from './graphql/mock_data';
 
 Vue.use(VueApollo);
@@ -24,6 +25,8 @@ describe('~/environments/components/new_environment_item.vue', () => {
       stubs: { transition: stubTransition() },
     });
 
+  const findDeployment = () => wrapper.findComponent(Deployment);
+
   afterEach(() => {
     wrapper?.destroy();
   });
@@ -273,12 +276,37 @@ describe('~/environments/components/new_environment_item.vue', () => {
     });
 
     it('opens on click', async () => {
+      expect(findDeployment().isVisible()).toBe(false);
+
       await button.trigger('click');
 
       expect(button.attributes('aria-label')).toBe(__('Collapse'));
       expect(collapse.attributes('visible')).toBe('visible');
       expect(icon.props('name')).toEqual('angle-down');
       expect(environmentName.classes('gl-font-weight-bold')).toBe(true);
+      expect(findDeployment().isVisible()).toBe(true);
+    });
+  });
+  describe('last deployment', () => {
+    it('should pass the last deployment to the deployment component when it exists', () => {
+      wrapper = createWrapper({ apolloProvider: createApolloProvider() });
+
+      const deployment = findDeployment();
+      expect(deployment.props('deployment')).toEqual(resolvedEnvironment.lastDeployment);
+    });
+    it('should not show the last deployment to the deployment component when it is missing', () => {
+      const environment = {
+        ...resolvedEnvironment,
+        lastDeployment: null,
+      };
+
+      wrapper = createWrapper({
+        propsData: { environment },
+        apolloProvider: createApolloProvider(),
+      });
+
+      const deployment = findDeployment();
+      expect(deployment.exists()).toBe(false);
     });
   });
 });