From 7a62133bc32eeaa85049522afaa9e484904080cf Mon Sep 17 00:00:00 2001
From: graham-dds <graham.beckley-ctr@friends.dds.mil>
Date: Thu, 3 Oct 2019 17:41:55 -0400
Subject: [PATCH] Minor adjustments new application flow step 2

- rearrange markup
- add previous and cancel button
---
 styles/elements/_panels.scss           |   3 +-
 templates/applications/new/step_2.html | 113 +++++++++++++------------
 translations.yaml                      |   4 +-
 3 files changed, 63 insertions(+), 57 deletions(-)

diff --git a/styles/elements/_panels.scss b/styles/elements/_panels.scss
index 89877659..97353795 100644
--- a/styles/elements/_panels.scss
+++ b/styles/elements/_panels.scss
@@ -120,7 +120,8 @@
     @include panel-actions;
   }
 
-  hr, &__break {
+  hr,
+  &__break {
     border: 0;
     border-bottom: 1px solid $color-gray-light;
     margin: ($gap * 4) ($site-margins * -4);
diff --git a/templates/applications/new/step_2.html b/templates/applications/new/step_2.html
index 6760333c..75b5f280 100644
--- a/templates/applications/new/step_2.html
+++ b/templates/applications/new/step_2.html
@@ -16,61 +16,66 @@
 
   {% set modalName = "newApplicationConfirmation" %}
   {% include "fragments/flash.html" %}
-
-  <application-environments inline-template v-bind:initial-data='{{ form.data|tojson }}'>
-    <form method="POST" action="{{ url_for('applications.update_new_application_step_2', portfolio_id=portfolio.id, application_id=application.id) }}" v-on:submit="handleSubmit">
-      <div class="panel">
-        <div class="panel__content">
-          {{ form.csrf_token }}
-          <div> {# this extra div prevents this bug: https://www.pivotaltracker.com/story/show/160768940 #}
-            <div v-cloak v-for="title in errors" :key="title">
-              {{ Alert(message=None, level="error", vue_template=True) }}
+  <div class="panel__content">
+    <p>
+      {{ 'portfolios.applications.new.step_2_description' | translate }}
+    </p>
+    <hr class="panel__break">
+    <application-environments inline-template v-bind:initial-data='{{ form.data|tojson }}'>
+      <form method="POST" action="{{ url_for('applications.update_new_application_step_2', portfolio_id=portfolio.id, application_id=application.id) }}" v-on:submit="handleSubmit">
+        <div class="subheading">{{ 'portfolios.applications.environments_heading' | translate }}</div>
+        <div class="panel">
+          <div class="panel__content">
+            {{ form.csrf_token }}
+            <div> {# this extra div prevents this bug: https://www.pivotaltracker.com/story/show/160768940 #}
+              <div v-cloak v-for="title in errors" :key="title">
+                {{ Alert(message=None, level="error", vue_template=True) }}
+              </div>
             </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>
-              <li v-for="(environment, i) in environments" class="application-edit__env-list-item">
-                <div class="usa-input">
-                  <label :for="'environment_names-' + i">Environment Name</label>
-                  <input type="text" :id="'environment_names-' + i" v-model="environment.name" @input="onInput" placeholder="e.g. Development, Staging, Production"/> <input type="hidden" :name="'environment_names-' + i" v-model="environment.name"/>
-                </div>
-                <div class="application-edit__env-list-item-block">
-                  <button v-on:click="removeEnvironment(i)" v-if="environments.length > 1" type="button" class="application-edit__env-list-item__remover">
-                    {{ Icon('trash') }}
-                    <span>Remove</span>
-                  </button>
-                </div>
-              </li>
-            </ul>
-
-            <div class="block-list__footer">
-              <button
-                v-on:click="addEnvironment"
-                class="icon-link"
-                tabindex="0"
-                type="button">
-                {{ 'portfolios.applications.add_another_environment' | translate }}
-                {{ Icon("plus") }}
-              </button>
-            </div>
-          </div>
+  
+            <div class="application-list-item">
+              <ul>
+                <li v-for="(environment, i) in environments" class="application-edit__env-list-item">
+                  <div class="usa-input">
+                    <label :for="'environment_names-' + i">Environment Name</label>
+                    <input type="text" :id="'environment_names-' + i" v-model="environment.name" @input="onInput" placeholder="e.g. Development, Staging, Production"/> <input type="hidden" :name="'environment_names-' + i" v-model="environment.name"/>
+                  </div>
+                  <div class="application-edit__env-list-item-block">
+                    <button v-on:click="removeEnvironment(i)" v-if="environments.length > 1" type="button" class="application-edit__env-list-item__remover">
+                      {{ Icon('trash') }}
+                      <span>Remove</span>
+                    </button>
+                  </div>
+                </li>
+              </ul>
+  
+              <div class="block-list__footer">
+                <button
+                  v-on:click="addEnvironment"
+                  class="icon-link"
+                  tabindex="0"
+                  type="button">
+                  {{ 'portfolios.applications.add_another_environment' | translate }}
+                  {{ Icon("plus") }}
+                </button>
+              </div>
+          </div>    
         </div>
-      </div>
-
-      <span class="action-group">
-        {% block next_button %}
-          {{ SaveButton(text=('portfolios.applications.new.step_2_button_text' | translate)) }}
-        {% endblock %}
-      </span>
-    </form>
-  </application-environments>
+      </div>    
+  
+        <span class="action-group">
+          {% block next_button %}
+            {{ SaveButton(text=('portfolios.applications.new.step_2_button_text' | translate)) }}
+          {% endblock %}
+          <a class="usa-button usa-button-secondary" href="{{ url_for('applications.view_new_application_step_1', application_id=application.id) }}">
+            Previous
+          </a>
+          <a href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
+            Cancel
+          </a>
+        </span>
+      </form>
+    </application-environments>
+  </div>
 
 {% endblock %}
diff --git a/translations.yaml b/translations.yaml
index e90ea453..e55ce7e1 100644
--- a/translations.yaml
+++ b/translations.yaml
@@ -337,6 +337,7 @@ portfolios:
             </p>
           </div>
       step_2_header: Add Environments to {application_name}
+      step_2_description: "Production, Staging, Testing, and Development environments are included by default. However, you can add, edit, and delete environments based on the needs of your Project."
       step_2_button_text: "Save and Add Members"
       step_3_header: Invite Members to {application_name}
       step_3_button_text: Save Application
@@ -362,8 +363,7 @@ portfolios:
       delete:
         button: Delete environment
       edit_name: Edit name
-    environments_description: Each environment created within an application is logically separated from one another for easier management and security.
-    environments_heading: Application environments
+    environments_heading: Project Environments
     existing_application_title: '{application_name} Application Settings'
     member_count: '{count} members'
     new_application_title: New Application