1 files changed, 15 insertions, 1 deletions
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index dc489c804e9..ec5b1092c14 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -15,8 +15,9 @@ import ActionsComponent from './environment_actions.vue';
 import ExternalUrlComponent from './environment_external_url.vue';
 import MonitoringButtonComponent from './environment_monitoring.vue';
 import PinComponent from './environment_pin.vue';
-import RollbackComponent from './environment_rollback.vue';
+import DeleteComponent from './environment_delete.vue';
 import StopComponent from './environment_stop.vue';
+import RollbackComponent from './environment_rollback.vue';
 import TerminalButtonComponent from './environment_terminal_button.vue';
 
 /**
@@ -33,6 +34,7 @@ export default {
     Icon,
     MonitoringButtonComponent,
     PinComponent,
+    DeleteComponent,
     RollbackComponent,
     StopComponent,
     TerminalButtonComponent,
@@ -113,6 +115,15 @@ export default {
     },
 
     /**
+     * Returns whether the environment can be deleted.
+     *
+     * @returns {Boolean}
+     */
+    canDeleteEnvironment() {
+      return Boolean(this.model && this.model.can_delete && this.model.delete_path);
+    },
+
+    /**
      * Verifies if the `deployable` key is present in `last_deployment` key.
      * Used to verify whether we should or not render the rollback partial.
      *
@@ -485,6 +496,7 @@ export default {
         this.externalURL ||
         this.monitoringUrl ||
         this.canStopEnvironment ||
+        this.canDeleteEnvironment ||
         this.canRetry
       );
     },
@@ -680,6 +692,8 @@ export default {
         />
 
         <stop-component v-if="canStopEnvironment" :environment="model" />
+
+        <delete-component v-if="canDeleteEnvironment" :environment="model" />
       </div>
     </div>
   </div>