confirmation modal for deleting an application

- adds delete-confirmation Vue component
- refactors some button styles to make them globally available

js/components/delete_confirmation.js

@@ -0,0 +1,15 @@
+export default {
+  name: 'delete-confirmation',
+
+  data: function() {
+    return {
+      deleteText: '',
+    }
+  },
+
+  computed: {
+    valid: function() {
+      return this.deleteText.toLowerCase() === 'delete'
+    },
+  },
+}

js/index.js

@@ -35,6 +35,7 @@ import DateSelector from './components/date_selector'
 import SidenavToggler from './components/sidenav_toggler'
 import KoReview from './components/forms/ko_review'
 import BaseForm from './components/forms/base_form'
+import DeleteConfirmation from './components/delete_confirmation'
 
 Vue.config.productionTip = false
 
@@ -72,6 +73,7 @@ const app = new Vue({
     SidenavToggler,
     KoReview,
     BaseForm,
+    DeleteConfirmation,
   },
 
   mounted: function() {

styles/components/_portfolio_layout.scss

@@ -213,12 +213,6 @@
           border-top: 0;
           padding: 3 * $gap 2 * $gap;
 
-          .usa-button-secondary {
-            color: $color-red;
-            background-color: $color-red-lightest;
-            box-shadow: inset 0 0 0 1px $color-red;
-          }
-
           .usa-button-disabled {
             color: $color-gray-medium;
             background-color: $color-gray-lightest;
@@ -271,10 +265,6 @@
       height: 4rem;
     }
 
-    .usa-button-danger {
-      background: $color-red;
-    }
-
     select {
       padding-left: 1.2rem
     }

styles/elements/_buttons.scss

@@ -11,3 +11,23 @@ button,
     opacity: 0.75;
   }
 }
+
+.button-danger {
+  background: $color-red;
+
+  &:hover {
+    background-color: $color-red-darkest;
+  }
+}
+
+.button-danger-outline, input[type="button"].button-danger-outline {
+  color: $color-red;
+  background-color: $color-red-lightest;
+  box-shadow: inset 0 0 0 1px $color-red;
+
+  &:hover {
+    color: white;
+    background-color: $color-red-darkest;
+    box-shadow: inset 0 0 0 1px $color-red-darkest;
+  }
+}

templates/fragments/admin/members_edit.html

@@ -12,7 +12,7 @@
       {% elif ppoc %}
         {% set archive_button_class = 'usa-button-disabled' %}
       {% else %}
-        {% set archive_button_class = 'usa-button-secondary' %}
+        {% set archive_button_class = 'button-danger-outline' %}
       {% endif %}
     </td>
 

templates/portfolios/applications/edit.html

@@ -1,7 +1,9 @@
 {% extends "portfolios/applications/base.html" %}
 
+{% from "components/alert.html" import Alert %}
 {% from "components/text_input.html" import TextInput %}
 {% from "components/icon.html" import Icon %}
+{% from "components/modal.html" import Modal %}
 
 {% set secondary_breadcrumb = 'portfolios.applications.existing_application_title' | translate({ "application_name": application.name }) %}
 
@@ -14,6 +16,58 @@
       <div class="panel__content">
 
         {% include "fragments/applications/edit_application_form.html" %}
+        {{ form.csrf_token }}
+        <p>
+          {{ "fragments.edit_application_form.explain" | translate }}
+        </p>
+        <div class="form-row">
+          <div class="form-col form-col--half">
+            {{ TextInput(form.name) }}
+          </div>
+          <div class="form-col form-col--half">
+            {% if user_can(permissions.DELETE_APPLICATION) %}
+            <div class="usa-input">
+              <label for="delete-application">
+                <div class="usa-input__title">
+                  &nbsp;
+                </div>
+              </label>
+              <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>
+            {% endif %}
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="form-col form-col--half">
+            {{ TextInput(form.description, paragraph=True) }}
+          </div>
+        </div>
+
+        <div class="application-list-item">
+          <header>
+            <h2 class="block-list__title">{{ 'portfolios.applications.environments_heading' | translate }}</h2>
+            <p>
+              {{ 'portfolios.applications.environments_description' | translate }}
+            </p>
+          </header>
+
+          <ul>
+            {% for environment in application.environments %}
+              <li class="application-edit__env-list-item">
+                <div class="usa-input input--disabled">
+                  <label>Environment Name</label>
+                  <input type="text" disabled value="{{ environment.name }}" readonly />
+                </div>
+              </li>
+            {% endfor %}
+          </ul>
+        </div>
 
       </div>
       <div class="panel__footer">
@@ -36,5 +90,42 @@
         </div>
       </div>
     </div>
+  {% if user_can(permissions.DELETE_APPLICATION) %}
+    {% call Modal(name="delete-application") %}
+      <h1>{{ "portfolios.applications.delete.header" | translate }}</h1>
+
+      {{
+        Alert(
+          title="portfolios.applications.delete.alert.title" | translate,
+          message="portfolios.applications.delete.alert.message" | translate,
+          level="warning"
+        )
+      }}
+
+      <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('portfolios.delete_application', portfolio_id=portfolio.id, application_id=application.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 %}
+  {% endif %}
 
 {% endblock %}

translations.yaml

@@ -43,6 +43,7 @@ common:
       contracting_officer: Contracting Officer
       security_officer: Security Officer
       contracting_officer_representative: Contracting Officer Representative
+  delete_confirm: "Please type the word DELETE to confirm:"
 components:
   modal:
     close: Close
@@ -599,6 +600,12 @@ portfolios:
       name: Name
       members: Members
     add_environment: Add New Environment
+    delete:
+      button: Delete Application
+      header: Are you sure you want to delete this application?
+      alert:
+        title: Warning! This action is permanent.
+        message: You will lose access to this application and all of its reporting and metrics tools. The activity log will be retained.
   admin:
     portfolio_members_title: Portfolio members
     portfolio_members_subheading: These members have different levels of access to the portfolio.