1 files changed, 17 insertions, 34 deletions

diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index b62a5bb1940..41f59447905 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -13,6 +13,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';
 
 /**
  * Environment Item Component
@@ -74,21 +75,6 @@ export default {
     },
 
     /**
-     * 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)
      *
@@ -154,23 +140,20 @@ 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 || !this.canCreateDeployment) {
+        return [];
       }
-      return [];
+
+      const { manualActions, scheduledActions } = convertObjectPropsToCamelCase(
+        this.model.last_deployment,
+        { deep: true },
+      );
+      const combinedActions = (manualActions || []).concat(scheduledActions || []);
+      return combinedActions.map(action => ({
+        ...action,
+        name: humanize(action.name),
+      }));
     },
 
     /**
@@ -443,7 +426,7 @@ export default {
 
     displayEnvironmentActions() {
       return (
-        this.hasManualActions ||
+        this.actions.length > 0 ||
         this.externalURL ||
         this.monitoringUrl ||
         this.canStopEnvironment ||
@@ -619,8 +602,8 @@ export default {
         />
 
         <actions-component
-          v-if="hasManualActions && canCreateDeployment"
-          :actions="manualActions"
+          v-if="actions.length > 0"
+          :actions="actions"
         />
 
         <terminal-button-component