Add latest changes from gitlab-org/gitlab@14-8-stable-eev14.8.0-rc42

1 files changed, 68 insertions, 9 deletions

diff --git a/app/assets/javascripts/environments/components/new_environment_item.vue b/app/assets/javascripts/environments/components/new_environment_item.vue
index d3624103c13..27a763fb9c4 100644
--- a/app/assets/javascripts/environments/components/new_environment_item.vue
+++ b/app/assets/javascripts/environments/components/new_environment_item.vue
@@ -4,10 +4,12 @@ import {
   GlDropdown,
   GlButton,
   GlLink,
+  GlSprintf,
   GlTooltipDirective as GlTooltip,
 } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
 import { truncate } from '~/lib/utils/text_utility';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import isLastDeployment from '../graphql/queries/is_last_deployment.query.graphql';
 import ExternalUrl from './environment_external_url.vue';
 import Actions from './environment_actions.vue';
@@ -18,6 +20,7 @@ import Monitoring from './environment_monitoring.vue';
 import Terminal from './environment_terminal_button.vue';
 import Delete from './environment_delete.vue';
 import Deployment from './deployment.vue';
+import DeployBoardWrapper from './deploy_board_wrapper.vue';
 
 export default {
   components: {
@@ -25,19 +28,23 @@ export default {
     GlDropdown,
     GlButton,
     GlLink,
+    GlSprintf,
     Actions,
     Deployment,
+    DeployBoardWrapper,
     ExternalUrl,
     StopComponent,
     Rollback,
     Monitoring,
     Pin,
     Terminal,
+    TimeAgoTooltip,
     Delete,
   },
   directives: {
     GlTooltip,
   },
+  inject: ['helpPagePath'],
   props: {
     environment: {
       required: true,
@@ -60,6 +67,10 @@ export default {
   i18n: {
     collapse: __('Collapse'),
     expand: __('Expand'),
+    emptyState: s__(
+      'Environments|There are no deployments for this environment yet. %{linkStart}Learn more about setting up deployments.%{linkEnd}',
+    ),
+    autoStopIn: s__('Environment|Auto stop %{time}'),
   },
   data() {
     return { visible: false };
@@ -83,12 +94,15 @@ export default {
     upcomingDeployment() {
       return this.environment?.upcomingDeployment;
     },
+    hasDeployment() {
+      return Boolean(this.environment?.upcomingDeployment || this.environment?.lastDeployment);
+    },
     actions() {
       if (!this.lastDeployment) {
         return [];
       }
-      const { manualActions = [], scheduledActions = [] } = this.lastDeployment;
-      const combinedActions = [...manualActions, ...scheduledActions];
+      const { manualActions, scheduledActions } = this.lastDeployment;
+      const combinedActions = [...(manualActions ?? []), ...(scheduledActions ?? [])];
       return combinedActions.map((action) => ({
         ...action,
       }));
@@ -133,6 +147,9 @@ export default {
     displayName() {
       return truncate(this.name, 80);
     },
+    rolloutStatus() {
+      return this.environment?.rolloutStatus;
+    },
   },
   methods: {
     toggleCollapse() {
@@ -144,7 +161,15 @@ export default {
     'gl-border-t-solid',
     'gl-border-1',
     'gl-py-5',
-    'gl-pl-7',
+    'gl-md-pl-7',
+    'gl-bg-gray-10',
+  ],
+  deployBoardClasses: [
+    'gl-border-gray-100',
+    'gl-border-t-solid',
+    'gl-border-1',
+    'gl-py-4',
+    'gl-md-pl-7',
     'gl-bg-gray-10',
   ],
 };
@@ -176,7 +201,14 @@ export default {
           {{ displayName }}
         </gl-link>
       </div>
-      <div>
+      <div class="gl-display-flex gl-align-items-center">
+        <p v-if="canShowAutoStopDate" class="gl-font-sm gl-text-gray-700 gl-mr-5 gl-mb-0">
+          <gl-sprintf :message="$options.i18n.autoStopIn">
+            <template #time>
+              <time-ago-tooltip :time="environment.autoStopAt" css-class="gl-font-weight-bold" />
+            </template>
+          </gl-sprintf>
+        </p>
         <div class="btn-group table-action-buttons" role="group">
           <external-url
             v-if="externalUrl"
@@ -224,6 +256,7 @@ export default {
             <pin
               v-if="canShowAutoStopDate"
               :auto-stop-url="autoStopPath"
+              graphql
               data-track-action="click_button"
               data-track-label="environment_pin"
             />
@@ -254,11 +287,37 @@ export default {
       </div>
     </div>
     <gl-collapse :visible="visible">
-      <div v-if="lastDeployment" :class="$options.deploymentClasses">
-        <deployment :deployment="lastDeployment" :class="{ 'gl-ml-7': inFolder }" />
+      <template v-if="hasDeployment">
+        <div v-if="lastDeployment" :class="$options.deploymentClasses">
+          <deployment
+            :deployment="lastDeployment"
+            :class="{ 'gl-ml-7': inFolder }"
+            latest
+            class="gl-pl-4"
+          />
+        </div>
+        <div v-if="upcomingDeployment" :class="$options.deploymentClasses">
+          <deployment
+            :deployment="upcomingDeployment"
+            :class="{ 'gl-ml-7': inFolder }"
+            class="gl-pl-4"
+          />
+        </div>
+      </template>
+      <div v-else :class="$options.deploymentClasses">
+        <gl-sprintf :message="$options.i18n.emptyState">
+          <template #link="{ content }">
+            <gl-link :href="helpPagePath">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
       </div>
-      <div v-if="upcomingDeployment" :class="$options.deploymentClasses">
-        <deployment :deployment="upcomingDeployment" :class="{ 'gl-ml-7': inFolder }" />
+      <div v-if="rolloutStatus" :class="$options.deployBoardClasses">
+        <deploy-board-wrapper
+          :rollout-status="rolloutStatus"
+          :environment="environment"
+          :class="{ 'gl-ml-7': inFolder }"
+          class="gl-pl-4"
+        />
       </div>
     </gl-collapse>
   </div>