Update delete app button and section

Pipfile

@@ -26,6 +26,7 @@ azure-storage = "*"
 azure-storage-common = "*"
 boto3 = "*"
 celery = "*"
+inflect = "*"
 
 [dev-packages]
 bandit = "*"

atst/filters.py

@@ -1,5 +1,6 @@
 import re
 import datetime
+import inflect
 from atst.utils.localization import translate
 from flask import render_template
 from jinja2 import contextfilter
@@ -67,6 +68,14 @@ def renderAuditEvent(event):
         return render_template("audit_log/events/default.html", event=event)
 
 
+def numberToWords(integer):
+    return inflect.engine().number_to_words(integer)
+
+
+def pluralize(word, number):
+    return inflect.engine().plural(word, number)
+
+
 def register_filters(app):
     app.jinja_env.filters["iconSvg"] = iconSvg
     app.jinja_env.filters["dollars"] = dollars
@@ -76,6 +85,8 @@ def register_filters(app):
     app.jinja_env.filters["pageWindow"] = pageWindow
     app.jinja_env.filters["renderAuditEvent"] = renderAuditEvent
     app.jinja_env.filters["withExtraParams"] = with_extra_params
+    app.jinja_env.filters["numberToWords"] = numberToWords
+    app.jinja_env.filters["pluralize"] = pluralize
 
     @contextfilter
     def translateWithoutCache(context, *kwargs):

templates/portfolios/applications/settings.html

@@ -176,15 +176,35 @@
     </div>
   </div>
 
+  <hr>
+
   {% if user_can(permissions.DELETE_APPLICATION) %}
-    <div class="usa-input">
+    {% set env_count = application.environments | length %}
-      <input
+    {% set pluralized_env = "environment" | pluralize(env_count) %}
-        id="delete-application"
+
-        type="button"
+    <div class='subheading'>
-        v-on:click="openModal('delete-application')"
+      {{ "portfolios.applications.delete.subheading" | translate }}
-        class='usa-button button-danger-outline'
+    </div>
-        value="{{ 'portfolios.applications.delete.button' | translate }}"
+
-        >
+    <div class="panel">
+      <div class="panel__content">
+        <div class="form-row">
+          <div class="form-col form-col--two-thirds">
+            {{ "portfolios.applications.delete.panel_text" | translate({"name": application.name, "env_count": env_count | numberToWords, "pluralized_env": pluralized_env}) | safe }}
+          </div>
+          <div class="form-col form-col--third">
+            <div class="usa-input">
+              <input
+                id="delete-application"
+                type="button"
+                v-on:click="openModal('delete-application')"
+                class='usa-button button-danger-outline'
+                value="{{ 'portfolios.applications.delete.button' | translate }}"
+                >
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
 
     {% call Modal(name="delete-application") %}

translations.yaml

@@ -298,6 +298,8 @@ portfolios:
         message: You will lose access to this application and all environments will be removed from the CSP. Your reporting and activity will still be accessible.
       button: Delete application
       header: Are you sure you want to delete this application?
+      panel_text: 'Deleting {name} will delete this applicaiton along with all {env_count} {pluralized_env}. <strong>This cannot be undone.</strong>'
+      subheading: Delete Application
     enter_env_name: "Enter environment name:"
     environments:
       name: Name