Display when environments will auto-stop

Show a relative time for when the environment is set to auto stop as
well as a tooltip with the absolute time.

Only displays future stop dates (Auto stop in <relative time>) as
opposed to past dates (Auto stopped <relative time> ago)

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

@@ -9,6 +9,7 @@ import {
 } from '@gitlab/ui';
 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';
@@ -35,6 +36,7 @@ export default {
     Monitoring,
     Pin,
     Terminal,
+    TimeAgoTooltip,
     Delete,
   },
   directives: {
@@ -66,6 +68,7 @@ export default {
     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 };
@@ -185,7 +188,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"

locale/gitlab.pot

@@ -13776,6 +13776,9 @@ msgstr ""
 msgid "Environments|protected"
 msgstr ""
 
+msgid "Environment|Auto stop %{time}"
+msgstr ""
+
 msgid "Epic"
 msgstr ""
 

spec/frontend/environments/new_environment_item_spec.js

@@ -4,7 +4,8 @@ import { GlCollapse, GlIcon } from '@gitlab/ui';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { mountExtended, extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { stubTransition } from 'helpers/stub_transition';
-import { __, s__ } from '~/locale';
+import { formatDate, getTimeago } from '~/lib/utils/datetime_utility';
+import { __, s__, sprintf } from '~/locale';
 import EnvironmentItem from '~/environments/components/new_environment_item.vue';
 import Deployment from '~/environments/components/deployment.vue';
 import { resolvedEnvironment } from './graphql/mock_data';
@@ -173,25 +174,92 @@ describe('~/environments/components/new_environment_item.vue', () => {
   });
 
   describe('pin', () => {
-    it('shows the option to pin the environment if there is an autostop date', () => {
-      wrapper = createWrapper({
-        propsData: {
-          environment: { ...resolvedEnvironment, autoStopAt: new Date(Date.now() + 100000) },
-        },
-        apolloProvider: createApolloProvider(),
+    describe('with autostop', () => {
+      let environment;
+
+      beforeEach(() => {
+        environment = {
+          ...resolvedEnvironment,
+          autoStopAt: new Date(Date.now() + 100000).toString(),
+        };
+        wrapper = createWrapper({
+          propsData: {
+            environment,
+          },
+          apolloProvider: createApolloProvider(),
+        });
       });
 
-      const rollback = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });
+      it('shows the option to pin the environment if there is an autostop date', () => {
+        const rollback = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });
 
-      expect(rollback.exists()).toBe(true);
+        expect(rollback.exists()).toBe(true);
+      });
+
+      it('shows when the environment auto stops', () => {
+        const autoStop = wrapper.findByTitle(formatDate(environment.autoStopAt));
+
+        expect(autoStop.text()).toBe('in 1 minute');
+      });
     });
 
-    it('does not show the option to pin the environment if there is no autostop date', () => {
-      wrapper = createWrapper({ apolloProvider: createApolloProvider() });
+    describe('without autostop', () => {
+      beforeEach(() => {
+        wrapper = createWrapper({ apolloProvider: createApolloProvider() });
+      });
 
-      const rollback = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });
+      it('does not show the option to pin the environment if there is no autostop date', () => {
+        wrapper = createWrapper({ apolloProvider: createApolloProvider() });
 
-      expect(rollback.exists()).toBe(false);
+        const rollback = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });
+
+        expect(rollback.exists()).toBe(false);
+      });
+
+      it('does not show when the environment auto stops', () => {
+        const autoStop = wrapper.findByText(
+          sprintf(s__('Environment|Auto stop %{time}'), {
+            time: getTimeago().format(resolvedEnvironment.autoStopAt),
+          }),
+        );
+
+        expect(autoStop.exists()).toBe(false);
+      });
+    });
+
+    describe('with past autostop', () => {
+      let environment;
+
+      beforeEach(() => {
+        environment = {
+          ...resolvedEnvironment,
+          autoStopAt: new Date(Date.now() - 100000).toString(),
+        };
+        wrapper = createWrapper({
+          propsData: {
+            environment,
+          },
+          apolloProvider: createApolloProvider(),
+        });
+      });
+
+      it('does not show the option to pin the environment if there is no autostop date', () => {
+        wrapper = createWrapper({ apolloProvider: createApolloProvider() });
+
+        const rollback = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });
+
+        expect(rollback.exists()).toBe(false);
+      });
+
+      it('does not show when the environment auto stops', () => {
+        const autoStop = wrapper.findByText(
+          sprintf(s__('Environment|Auto stop %{time}'), {
+            time: getTimeago().format(environment.autoStopAt),
+          }),
+        );
+
+        expect(autoStop.exists()).toBe(false);
+      });
     });
   });