Merge branch '20620-delete-an-environment-via-ui' into 'master'

Resolve "Delete an environment via UI"

Closes #20620

See merge request gitlab-org/gitlab!22629

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

+<script>
+import { GlTooltipDirective } from '@gitlab/ui';
+import GlModal from '~/vue_shared/components/gl_modal.vue';
+import { s__, sprintf } from '~/locale';
+import eventHub from '../event_hub';
+
+export default {
+  id: 'delete-environment-modal',
+  name: 'DeleteEnvironmentModal',
+
+  components: {
+    GlModal,
+  },
+
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+
+  props: {
+    environment: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    confirmDeleteMessage() {
+      return sprintf(
+        s__(
+          `Environments|Deleting the '%{environmentName}' environment cannot be undone. Do you want to delete it anyway?`,
+        ),
+        {
+          environmentName: this.environment.name,
+        },
+        false,
+      );
+    },
+  },
+
+  methods: {
+    onSubmit() {
+      eventHub.$emit('deleteEnvironment', this.environment);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    :id="$options.id"
+    :footer-primary-button-text="s__('Environments|Delete environment')"
+    footer-primary-button-variant="danger"
+    @submit="onSubmit"
+  >
+    <template slot="header">
+      <h4 class="modal-title d-flex mw-100">
+        {{ __('Delete') }}
+        <span v-gl-tooltip :title="environment.name" class="text-truncate mx-1 flex-fill">
+          {{ environment.name }}?
+        </span>
+      </h4>
+    </template>
+
+    <p>{{ confirmDeleteMessage }}</p>
+  </gl-modal>
+</template>

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

+<script>
+/**
+ * Renders the delete button that allows deleting a stopped environment.
+ * Used in the environments table and the environment detail view.
+ */
+
+import $ from 'jquery';
+import { GlTooltipDirective } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+import { s__ } from '~/locale';
+import eventHub from '../event_hub';
+import LoadingButton from '../../vue_shared/components/loading_button.vue';
+
+export default {
+  components: {
+    Icon,
+    LoadingButton,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    environment: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+  computed: {
+    title() {
+      return s__('Environments|Delete environment');
+    },
+  },
+  mounted() {
+    eventHub.$on('deleteEnvironment', this.onDeleteEnvironment);
+  },
+  beforeDestroy() {
+    eventHub.$off('deleteEnvironment', this.onDeleteEnvironment);
+  },
+  methods: {
+    onClick() {
+      $(this.$el).tooltip('dispose');
+      eventHub.$emit('requestDeleteEnvironment', this.environment);
+    },
+    onDeleteEnvironment(environment) {
+      if (this.environment.id === environment.id) {
+        this.isLoading = true;
+      }
+    },
+  },
+};
+</script>
+<template>
+  <loading-button
+    v-gl-tooltip
+    :loading="isLoading"
+    :title="title"
+    :aria-label="title"
+    container-class="btn btn-danger d-none d-sm-none d-md-block"
+    data-toggle="modal"
+    data-target="#delete-environment-modal"
+    @click="onClick"
+  >
+    <icon name="remove" />
+  </loading-button>
+</template>

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,
@@ -112,6 +114,15 @@ export default {
       return this.model && this.model.can_stop;
     },
 
+    /**
+     * 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>

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

@@ -9,6 +9,7 @@ import environmentsMixin from '../mixins/environments_mixin';
 import CIPaginationMixin from '~/vue_shared/mixins/ci_pagination_api_mixin';
 import EnableReviewAppButton from './enable_review_app_button.vue';
 import StopEnvironmentModal from './stop_environment_modal.vue';
+import DeleteEnvironmentModal from './delete_environment_modal.vue';
 import ConfirmRollbackModal from './confirm_rollback_modal.vue';
 
 export default {
@@ -18,6 +19,7 @@ export default {
     EnableReviewAppButton,
     GlButton,
     StopEnvironmentModal,
+    DeleteEnvironmentModal,
   },
 
   mixins: [CIPaginationMixin, environmentsMixin, envrionmentsAppMixin],
@@ -95,6 +97,7 @@ export default {
 <template>
   <div>
     <stop-environment-modal :environment="environmentInStopModal" />
+    <delete-environment-modal :environment="environmentInDeleteModal" />
     <confirm-rollback-modal :environment="environmentInRollbackModal" />
 
     <div class="top-area">

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

@@ -63,10 +63,9 @@ export default {
     <template slot="header">
       <h4 class="modal-title d-flex mw-100">
         Stopping
-        <span v-gl-tooltip :title="environment.name" class="text-truncate ml-1 mr-1 flex-fill">{{
-          environment.name
-        }}</span>
-        ?
+        <span v-gl-tooltip :title="environment.name" class="text-truncate ml-1 mr-1 flex-fill">
+          {{ environment.name }}?
+        </span>
       </h4>
     </template>
 

app/assets/javascripts/environments/folder/environments_folder_view.vue

@@ -3,10 +3,12 @@ import folderMixin from 'ee_else_ce/environments/mixins/environments_folder_view
 import environmentsMixin from '../mixins/environments_mixin';
 import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
 import StopEnvironmentModal from '../components/stop_environment_modal.vue';
+import DeleteEnvironmentModal from '../components/delete_environment_modal.vue';
 
 export default {
   components: {
     StopEnvironmentModal,
+    DeleteEnvironmentModal,
   },
 
   mixins: [environmentsMixin, CIPaginationMixin, folderMixin],
@@ -39,6 +41,7 @@ export default {
 <template>
   <div :class="cssContainerClass">
     <stop-environment-modal :environment="environmentInStopModal" />
+    <delete-environment-modal :environment="environmentInDeleteModal" />
 
     <h4 class="js-folder-name environments-folder-name">
       {{ s__('Environments|Environments') }} /

app/assets/javascripts/environments/mixins/environments_mixin.js

@@ -27,6 +27,10 @@ export default {
   data() {
     const store = new EnvironmentsStore();
 
+    const isDetailView = document.body.contains(
+      document.getElementById('environments-detail-view'),
+    );
+
     return {
       store,
       state: store.state,
@@ -36,7 +40,9 @@ export default {
       page: getParameterByName('page') || '1',
       requestData: {},
       environmentInStopModal: {},
+      environmentInDeleteModal: {},
       environmentInRollbackModal: {},
+      isDetailView,
     };
   },
 
@@ -121,6 +127,10 @@ export default {
       this.environmentInStopModal = environment;
     },
 
+    updateDeleteModal(environment) {
+      this.environmentInDeleteModal = environment;
+    },
+
     updateRollbackModal(environment) {
       this.environmentInRollbackModal = environment;
     },
@@ -133,6 +143,30 @@ export default {
       this.postAction({ endpoint, errorMessage });
     },
 
+    deleteEnvironment(environment) {
+      const endpoint = environment.delete_path;
+      const mountedToShow = environment.mounted_to_show;
+      const errorMessage = s__(
+        'Environments|An error occurred while deleting the environment. Check if the environment stopped; if not, stop it and try again.',
+      );
+
+      this.service
+        .deleteAction(endpoint)
+        .then(() => {
+          if (!mountedToShow) {
+            // Reload as a first solution to bust the ETag cache
+            window.location.reload();
+            return;
+          }
+          const url = window.location.href.split('/');
+          url.pop();
+          window.location.href = url.join('/');
+        })
+        .catch(() => {
+          Flash(errorMessage);
+        });
+    },
+
     rollbackEnvironment(environment) {
       const { retryUrl, isLastDeployment } = environment;
       const errorMessage = isLastDeployment
@@ -178,6 +212,7 @@ export default {
     this.service = new EnvironmentsService(this.endpoint);
     this.requestData = { page: this.page, scope: this.scope, nested: true };
 
+    if (!this.isDetailView) {
       this.poll = new Poll({
         resource: this.service,
         method: 'fetchEnvironments',
@@ -203,11 +238,16 @@ export default {
           this.poll.stop();
         }
       });
+    }
 
     eventHub.$on('postAction', this.postAction);
+
     eventHub.$on('requestStopEnvironment', this.updateStopModal);
     eventHub.$on('stopEnvironment', this.stopEnvironment);
 
+    eventHub.$on('requestDeleteEnvironment', this.updateDeleteModal);
+    eventHub.$on('deleteEnvironment', this.deleteEnvironment);
+
     eventHub.$on('requestRollbackEnvironment', this.updateRollbackModal);
     eventHub.$on('rollbackEnvironment', this.rollbackEnvironment);
 
@@ -216,9 +256,13 @@ export default {
 
   beforeDestroy() {
     eventHub.$off('postAction', this.postAction);
+
     eventHub.$off('requestStopEnvironment', this.updateStopModal);
     eventHub.$off('stopEnvironment', this.stopEnvironment);
 
+    eventHub.$off('requestDeleteEnvironment', this.updateDeleteModal);
+    eventHub.$off('deleteEnvironment', this.deleteEnvironment);
+
     eventHub.$off('requestRollbackEnvironment', this.updateRollbackModal);
     eventHub.$off('rollbackEnvironment', this.rollbackEnvironment);
 

app/assets/javascripts/environments/mount_show.js

+import Vue from 'vue';
+import DeleteEnvironmentModal from './components/delete_environment_modal.vue';
+import environmentsMixin from './mixins/environments_mixin';
+
+export default () => {
+  const el = document.getElementById('delete-environment-modal');
+  const container = document.getElementById('environments-detail-view');
+
+  return new Vue({
+    el,
+    components: {
+      DeleteEnvironmentModal,
+    },
+    mixins: [environmentsMixin],
+    data() {
+      const environment = JSON.parse(JSON.stringify(container.dataset));
+      environment.delete_path = environment.deletePath;
+      environment.mounted_to_show = true;
+
+      return {
+        environment,
+      };
+    },
+    render(createElement) {
+      return createElement('delete-environment-modal', {
+        props: {
+          environment: this.environment,
+        },
+      });
+    },
+  });
+};

app/assets/javascripts/environments/services/environments_service.js

@@ -16,6 +16,11 @@ export default class EnvironmentsService {
     return axios.post(endpoint, {});
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  deleteAction(endpoint) {
+    return axios.delete(endpoint, {});
+  }
+
   getFolderContent(folderUrl) {
     return axios.get(`${folderUrl}.json?per_page=${this.folderResults}`);
   }

app/assets/javascripts/pages/projects/environments/show/index.js

+import initShowEnvironment from '~/environments/mount_show';
+
+document.addEventListener('DOMContentLoaded', () => initShowEnvironment());

app/helpers/environments_helper.rb

@@ -50,4 +50,8 @@ module EnvironmentsHelper
       "cluster-applications-documentation-path" => help_page_path('user/clusters/applications.md', anchor: 'elastic-stack')
     }
   end
+
+  def can_destroy_environment?(environment)
+    can?(current_user, :destroy_environment, environment)
+  end
 end

app/helpers/gitlab_routing_helper.rb

@@ -4,6 +4,7 @@
 module GitlabRoutingHelper
   extend ActiveSupport::Concern
 
+  include API::Helpers::RelatedResourcesHelpers
   included do
     Gitlab::Routing.includes_helpers(self)
   end
@@ -29,6 +30,10 @@ module GitlabRoutingHelper
     metrics_project_environment_path(environment.project, environment, *args)
   end
 
+  def environment_delete_path(environment, *args)
+    expose_path(api_v4_projects_environments_path(id: environment.project.id, environment_id: environment.id))
+  end
+
   def issue_path(entity, *args)
     project_issue_path(entity.project, entity, *args)
   end

app/policies/environment_policy.rb

@@ -12,7 +12,13 @@ class EnvironmentPolicy < BasePolicy
     !@subject.stop_action_available? && can?(:update_environment, @subject)
   end
 
+  condition(:stopped) do
+    @subject.stopped?
+  end
+
   rule { stop_with_deployment_allowed | stop_with_update_allowed }.enable :stop_environment
+
+  rule { ~stopped }.prevent(:destroy_environment)
 end
 
 EnvironmentPolicy.prepend_if_ee('EE::EnvironmentPolicy')

app/policies/project_policy.rb

@@ -271,6 +271,7 @@ class ProjectPolicy < BasePolicy
     enable :destroy_container_image
     enable :create_environment
     enable :update_environment
+    enable :destroy_environment
     enable :create_deployment
     enable :update_deployment
     enable :create_release

app/serializers/environment_entity.rb

@@ -28,6 +28,10 @@ class EnvironmentEntity < Grape::Entity
     cancel_auto_stop_project_environment_path(environment.project, environment)
   end
 
+  expose :delete_path do |environment|
+    environment_delete_path(environment)
+  end
+
   expose :cluster_type, if: ->(environment, _) { cluster_platform_kubernetes? } do |environment|
     cluster.cluster_type
   end
@@ -63,6 +67,10 @@ class EnvironmentEntity < Grape::Entity
     environment.elastic_stack_available?
   end
 
+  expose :can_delete do |environment|
+    can?(current_user, :destroy_environment, environment)
+  end
+
   private
 
   alias_method :environment, :object

app/views/projects/environments/show.html.haml

@@ -5,7 +5,8 @@
 - content_for :page_specific_javascripts do
   = stylesheet_link_tag 'page_bundles/xterm'
 
-- if @environment.available? && can?(current_user, :stop_environment, @environment)
+#environments-detail-view{ data: { name: @environment.name, id: @environment.id, delete_path: environment_delete_path(@environment)} }
+  - if @environment.available? && can?(current_user, :stop_environment, @environment)
     #stop-environment-modal.modal.fade{ tabindex: -1 }
       .modal-dialog
         .modal-content
@@ -13,8 +14,7 @@
             %h4.modal-title.d-flex.mw-100
               = s_("Environments|Stopping")
               %span.has-tooltip.text-truncate.ml-1.mr-1.flex-fill{ title: @environment.name, data: { container: '#stop-environment-modal' } }
-              = @environment.name
-            ?
+                #{@environment.name}?
           .modal-body
             %p= s_('Environments|Are you sure you want to stop this environment?')
             - unless @environment.stop_action_available?
@@ -32,7 +32,10 @@
             = button_to stop_project_environment_path(@project, @environment), class: 'btn btn-danger has-tooltip', method: :post do
               = s_('Environments|Stop environment')
 
-.top-area.justify-content-between
+  - if can_destroy_environment?(@environment)
+    #delete-environment-modal
+
+  .top-area.justify-content-between
     .d-flex
       %h3.page-title= @environment.name
       - if @environment.auto_stop_at?
@@ -50,8 +53,12 @@
           target: '#stop-environment-modal' } do
           = sprite_icon('stop')
           = s_('Environments|Stop')
+      - if can_destroy_environment?(@environment)
+        = button_tag class: 'btn btn-danger', type: 'button', data: { toggle: 'modal',
+          target: '#delete-environment-modal' } do
+          = s_('Environments|Delete')
 
-.environments-container
+  .environments-container
     - if @deployments.blank?
       .empty-state
         .text-content

changelogs/unreleased/41845-delete-environment.yml

+---
+title: Adds features to delete stopped environments
+merge_request: 22629
+author:
+type: added

doc/ci/environments.md

@@ -761,6 +761,33 @@ runs once every hour. This means environments will not be stopped at the exact
 timestamp as the specified period, but will be stopped when the hourly cron worker
 detects expired environments.
 
+#### Delete a stopped environment
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/22629) in GitLab 12.9.
+
+You can delete [stopped environments](#stopping-an-environment) in one of two
+ways: through the GitLab UI or through the API.
+
+##### Delete environments through the UI
+
+To view the list of **Stopped** environments, navigate to **Operations > Environments**
+and click the **Stopped** tab.
+
+From there, you can click the **Delete** button directly, or you can click the
+environment name to see its details and **Delete** it from there.
+
+You can also delete environments by viewing the details for a
+stopped environment:
+
+  1. Navigate to **Operations > Environments**.
+  1. Click on the name of an environment within the **Stopped** environments list.
+  1. Click on the **Delete** button that appears at the top for all stopped environments.
+  1. Finally, confirm your chosen environment in the modal that appears to delete it.
+
+##### Delete environments through the API
+
+Environments can also be deleted by using the [Environments API](../api/environments.md#delete-an-environment).
+
 ### Grouping similar environments
 
 > [Introduced](https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/7015) in GitLab 8.14.

ee/app/helpers/ee/gitlab_routing_helper.rb

@@ -4,7 +4,6 @@ module EE
   module GitlabRoutingHelper
     include ::ProjectsHelper
     include ::ApplicationSettingsHelper
-    include ::API::Helpers::RelatedResourcesHelpers
 
     def geo_primary_web_url(project_or_wiki)
       File.join(::Gitlab::Geo.primary_node.url, project_or_wiki.full_path)

ee/app/policies/ee/environment_policy.rb

@@ -12,6 +12,7 @@ module EE
         prevent :create_deployment
         prevent :update_deployment
         prevent :update_environment
+        prevent :destroy_environment
       end
 
       private

ee/spec/fixtures/api/schemas/environment.json

@@ -76,6 +76,12 @@
       "type": "boolean"
     },
     "cancel_auto_stop_path": { "type": "string" },
-    "auto_stop_at": { "type": "string", "format": "date-time" }
+    "auto_stop_at": { "type": "string", "format": "date-time" },
+    "can_delete": {
+      "type": "boolean"
+    },
+    "delete_path": {
+      "type": "string"
+    }
   }
 }

ee/spec/policies/environment_policy_spec.rb

@@ -18,6 +18,16 @@ describe EnvironmentPolicy do
     it_behaves_like 'protected environments access'
   end
 
+  describe '#destroy_environment' do
+    subject { user.can?(:destroy_environment, environment) }
+
+    before do
+      environment.stop!
+    end
+
+    it_behaves_like 'protected environments access'
+  end
+
   describe '#create_environment_terminal' do
     subject { user.can?(:create_environment_terminal, environment) }
 

lib/api/environments.rb

@@ -82,9 +82,10 @@ module API
         requires :environment_id, type: Integer, desc: 'The environment ID'
       end
       delete ':id/environments/:environment_id' do
-        authorize! :update_environment, user_project
+        authorize! :read_environment, user_project
 
         environment = user_project.environments.find(params[:environment_id])
+        authorize! :destroy_environment, environment
 
         destroy_conditionally!(environment)
       end

locale/gitlab.pot

@@ -7695,6 +7695,9 @@ msgstr ""
 msgid "Environments|An error occurred while canceling the auto stop, please try again"
 msgstr ""
 
+msgid "Environments|An error occurred while deleting the environment. Check if the environment stopped; if not, stop it and try again."
+msgstr ""
+
 msgid "Environments|An error occurred while fetching the environments."
 msgstr ""
 
@@ -7728,6 +7731,15 @@ msgstr ""
 msgid "Environments|Currently showing all results."
 msgstr ""
 
+msgid "Environments|Delete"
+msgstr ""
+
+msgid "Environments|Delete environment"
+msgstr ""
+
+msgid "Environments|Deleting the '%{environmentName}' environment cannot be undone. Do you want to delete it anyway?"
+msgstr ""
+
 msgid "Environments|Deploy to..."
 msgstr ""
 

spec/fixtures/api/schemas/environment.json

@@ -44,7 +44,10 @@
           "build_path": { "type": "string" }
         }
       ]
-    }
+    },
+    "can_delete": { "type": "boolean" }
+    ,
+    "delete_path": { "type": "string" }
   },
   "additionalProperties": false
 }

spec/frontend/environments/environment_delete_spec.js

+import $ from 'jquery';
+import { shallowMount } from '@vue/test-utils';
+import DeleteComponent from '~/environments/components/environment_delete.vue';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import eventHub from '~/environments/event_hub';
+
+$.fn.tooltip = () => {};
+
+describe('External URL Component', () => {
+  let wrapper;
+
+  const createWrapper = () => {
+    wrapper = shallowMount(DeleteComponent, {
+      propsData: {
+        environment: {},
+      },
+    });
+  };
+
+  const findButton = () => wrapper.find(LoadingButton);
+
+  beforeEach(() => {
+    jest.spyOn(window, 'confirm');
+
+    createWrapper();
+  });
+
+  it('should render a button to delete the environment', () => {
+    expect(findButton().exists()).toBe(true);
+    expect(wrapper.attributes('title')).toEqual('Delete environment');
+  });
+
+  it('emits requestDeleteEnvironment in the event hub when button is clicked', () => {
+    jest.spyOn(eventHub, '$emit');
+    findButton().vm.$emit('click');
+    expect(eventHub.$emit).toHaveBeenCalledWith('requestDeleteEnvironment', wrapper.vm.environment);
+  });
+});

spec/frontend/environments/environment_item_spec.js

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils';
 import { format } from 'timeago.js';
 import EnvironmentItem from '~/environments/components/environment_item.vue';
 import PinComponent from '~/environments/components/environment_pin.vue';
+import DeleteComponent from '~/environments/components/environment_delete.vue';
 
 import { environment, folder, tableData } from './mock_data';
 
@@ -54,6 +55,10 @@ describe('Environment item', () => {
         expect(wrapper.find('.environment-created-date-timeago').text()).toContain(formattedDate);
       });
 
+      it('should not render the delete button', () => {
+        expect(wrapper.find(DeleteComponent).exists()).toBe(false);
+      });
+
       describe('With user information', () => {
         it('should render user avatar with link to profile', () => {
           expect(wrapper.find('.js-deploy-user-container').attributes('href')).toEqual(
@@ -98,7 +103,7 @@ describe('Environment item', () => {
           expect(findAutoStop().exists()).toBe(false);
         });
 
-        it('should not render the suto-stop button', () => {
+        it('should not render the auto-stop button', () => {
           expect(wrapper.find(PinComponent).exists()).toBe(false);
         });
       });
@@ -205,4 +210,22 @@ describe('Environment item', () => {
       expect(wrapper.find('.folder-name .badge').text()).toContain(folder.size);
     });
   });
+
+  describe('When environment can be deleted', () => {
+    beforeEach(() => {
+      factory({
+        propsData: {
+          model: {
+            can_delete: true,
+            delete_path: 'http://0.0.0.0:3000/api/v4/projects/8/environments/45',
+          },
+          tableData,
+        },
+      });
+    });
+
+    it('should render the delete button', () => {
+      expect(wrapper.find(DeleteComponent).exists()).toBe(true);
+    });
+  });
 });

spec/policies/environment_policy_spec.rb

@@ -86,6 +86,50 @@ describe EnvironmentPolicy do
           it { expect(policy).to be_allowed :stop_environment }
         end
       end
+
+      describe '#destroy_environment' do
+        let(:environment) do
+          create(:environment, project: project)
+        end
+
+        where(:access_level, :allowed?) do
+          nil         | false
+          :guest      | false
+          :reporter   | false
+          :developer  | true
+          :maintainer | true
+        end
+
+        with_them do
+          before do
+            project.add_user(user, access_level) unless access_level.nil?
+          end
+
+          it { expect(policy).to be_disallowed :destroy_environment }
+
+          context 'when environment is stopped' do
+            before do
+              environment.stop!
+            end
+
+            it { expect(policy.allowed?(:destroy_environment)).to be allowed? }
+          end
+        end
+
+        context 'when an admin user' do
+          let(:user) { create(:user, :admin) }
+
+          it { expect(policy).to be_disallowed :destroy_environment }
+
+          context 'when environment is stopped' do
+            before do
+              environment.stop!
+            end
+
+            it { expect(policy).to be_allowed :destroy_environment }
+          end
+        end
+      end
     end
 
     context 'when project is public' do

spec/requests/api/environments_spec.rb

@@ -171,7 +171,15 @@ describe API::Environments do
 
   describe 'DELETE /projects/:id/environments/:environment_id' do
     context 'as a maintainer' do
-      it 'returns a 200 for an existing environment' do
+      it "rejects the requests in environment isn't stopped" do
+        delete api("/projects/#{project.id}/environments/#{environment.id}", user)
+
+        expect(response).to have_gitlab_http_status(:forbidden)
+      end
+
+      it 'returns a 200 for stopped environment' do
+        environment.stop
+
         delete api("/projects/#{project.id}/environments/#{environment.id}", user)
 
         expect(response).to have_gitlab_http_status(:no_content)
@@ -185,6 +193,10 @@ describe API::Environments do
       end
 
       it_behaves_like '412 response' do
+        before do
+          environment.stop
+        end
+
         let(:request) { api("/projects/#{project.id}/environments/#{environment.id}", user) }
       end
     end