Display scheduled job actions on environments list

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

 <script>
+import { s__, sprintf } from '~/locale';
+import { formatTime } from '~/lib/utils/datetime_utility';
 import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../event_hub';
 import tooltip from '../../vue_shared/directives/tooltip';
@@ -28,10 +30,19 @@ export default {
     },
   },
   methods: {
-    onClickAction(endpoint) {
+    onClickAction(action) {
+      if (action.scheduledAt) {
+        const confirmationMessage = sprintf(s__("DelayedJobs|Are you sure you want to run %{jobName} immediately? This job will run automatically after it's timer finishes."), { jobName: action.name });
+        // https://gitlab.com/gitlab-org/gitlab-ce/issues/52099
+        // eslint-disable-next-line no-alert
+        if (!window.confirm(confirmationMessage)) {
+          return;
+        }
+      }
+
       this.isLoading = true;
 
-      eventHub.$emit('postAction', { endpoint });
+      eventHub.$emit('postAction', { endpoint: action.playPath });
     },
 
     isActionDisabled(action) {
@@ -41,6 +52,11 @@ export default {
 
       return !action.playable;
     },
+
+    remainingTime(action) {
+      const remainingMilliseconds = new Date(action.scheduledAt).getTime() - Date.now();
+      return formatTime(Math.max(0, remainingMilliseconds));
+    },
   },
 };
 </script>
@@ -77,12 +93,16 @@ export default {
           :class="{ disabled: isActionDisabled(action) }"
           :disabled="isActionDisabled(action)"
           type="button"
-          class="js-manual-action-link no-btn btn"
-          @click="onClickAction(action.play_path)"
+          class="js-manual-action-link no-btn btn d-flex align-items-center"
+          @click="onClickAction(action)"
         >
-          <span>
+          <span class="flex-fill">
             {{ action.name }}
           </span>
+          <span v-if="action.scheduledAt">
+            <icon name="clock" />
+            {{ remainingTime(action) }}
+          </span>
         </button>
       </li>
     </ul>

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

@@ -12,6 +12,7 @@ import TerminalButtonComponent from './environment_terminal_button.vue';
 import MonitoringButtonComponent from './environment_monitoring.vue';
 import CommitComponent from '../../vue_shared/components/commit.vue';
 import eventHub from '../event_hub';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 /**
  * Envrionment Item Component
@@ -71,21 +72,6 @@ export default {
       return false;
     },
 
-    /**
-     * Verifies is the given environment has manual actions.
-     * Used to verify if we should render them or nor.
-     *
-     * @returns {Boolean|Undefined}
-     */
-    hasManualActions() {
-      return (
-        this.model &&
-        this.model.last_deployment &&
-        this.model.last_deployment.manual_actions &&
-        this.model.last_deployment.manual_actions.length > 0
-      );
-    },
-
     /**
      * Checkes whether the environment is protected.
      * (`is_protected` currently only set in EE)
@@ -152,23 +138,24 @@ export default {
       return '';
     },
 
-    /**
-     * Returns the manual actions with the name parsed.
-     *
-     * @returns {Array.<Object>|Undefined}
-     */
-    manualActions() {
-      if (this.hasManualActions) {
-        return this.model.last_deployment.manual_actions.map(action => {
-          const parsedAction = {
-            name: humanize(action.name),
-            play_path: action.play_path,
-            playable: action.playable,
-          };
-          return parsedAction;
-        });
+    actions() {
+      if (!this.model || !this.model.last_deployment) {
+        return [];
+      }
+
+      const { manualActions, scheduledActions } = convertObjectPropsToCamelCase(
+        this.model.last_deployment,
+        { deep: true },
+      );
+      let combinedActions = [];
+      if (this.canCreateDeployment) {
+        combinedActions = combinedActions.concat(manualActions || []);
       }
-      return [];
+      combinedActions = combinedActions.concat(scheduledActions || []);
+      return combinedActions.map(action => ({
+        ...action,
+        name: humanize(action.name),
+      }));
     },
 
     /**
@@ -624,8 +611,8 @@ export default {
         />
 
         <actions-component
-          v-if="hasManualActions && canCreateDeployment"
-          :actions="manualActions"
+          v-if="actions.length > 0"
+          :actions="actions"
         />
 
         <terminal-button-component

app/assets/stylesheets/pages/environments.scss

@@ -44,11 +44,6 @@
       margin: 0;
     }
 
-    .icon-play {
-      height: 13px;
-      width: 12px;
-    }
-
     .external-url,
     .dropdown-new {
       color: $gl-text-color-secondary;