Delete environments from an application

templates/fragments/applications/edit_environments.html

@@ -2,6 +2,7 @@
 {% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
 {% from "components/text_input.html" import TextInput %}
 {% from "components/save_button.html" import SaveButton %}
+{% from "components/modal.html" import Modal %}
 
 {% macro RolePanel(users=[], role='no_access') %}
   {% if role == 'no_access' %}
@@ -51,6 +52,7 @@
         {% set member_count = env['members_form'].data['team_roles'] | length %}
         {% set members_by_role = env['members'] %}
         {% set unassigned = members_by_role['no_access'] %}
+        {% set delete_environment_modal_id = 'delete' %}
 
         <toggler inline-template>
           <li class="accordion-table__item">
@@ -74,7 +76,7 @@
                 </span>
               </div>
               <div class="col col--grow">
-                <span class="icon-link icon-link--danger">
+                <span class="icon-link icon-link--danger" alt="Delete environment" v-on:click="openModal('{{ delete_environment_modal_id }}')">
                   {{ Icon('trash') }}
                 </span>
               </div>
@@ -122,6 +124,42 @@
             {% endcall %}
           </li>
         </toggler>
+
+        {% call Modal(name=delete_environment_modal_id, dismissable=True) %}
+          <h1>Are you sure you want to delete this environment?</h1>
+
+          {{
+            Alert(
+              level="warning",
+              title="Warning! This action is permanent",
+              message="You will no longer be able to access this environment",
+            )
+          }}
+
+          <delete-confirmation inline-template>
+            <div>
+              <div class="usa-input">
+                <label for="deleted-text">
+                  <span class="usa-input__help">
+                    {{ "common.delete_confirm" | translate }}
+                  </span>
+                </label>
+                <input id="deleted-text" v-model="deleteText">
+              </div>
+              <div class="action-group">
+                <form method="POST" action="{{ url_for('applications.delete_environment', environment_id=env['id']) }}">
+                  {{ form.csrf_token }}
+                  <button class="usa-button button-danger" v-bind:disabled="!valid">
+                    {{ "portfolios.applications.delete.button" | translate }}
+                  </button>
+                </form>
+                <div class="action-group">
+                  <a v-on:click="deleteText = ''; $root.closeModal('delete-application')" class="action-group__action icon-link icon-link--default">{{ "common.cancel" | translate }}</a>
+                </div>
+              </div>
+            </div>
+          </delete-confirmation>
+        {% endcall %}
       {% endfor %}
     </ul>
   </div>