Merge pull request #619 from dod-ccpo/reskin-app-settings-page

Reskin application settings page

styles/components/_portfolio_layout.scss

@@ -91,10 +91,6 @@
   }
 }
 
-.portfolio-content {
-  margin: 6 * $gap $gap 0 $gap;
-}
-
 @mixin subheading {
   color: $color-gray-dark;
   padding: $gap 0;
@@ -104,6 +100,37 @@
   font-weight: bold;
 }
 
+.portfolio-content {
+  margin: 6 * $gap $gap 0 $gap;
+
+  .application-content {
+    .subheading {
+      @include subheading;
+    }
+
+    .panel {
+      padding: $gap / 2 0;
+      box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
+      border-top: none;
+      border-bottom: none;
+    }
+
+    .application-list-item {
+      ul {
+        padding-left: 0;
+      }
+      .block-list__footer {
+        border-bottom: none;
+      }
+      .application-edit__env-list-item {
+        label {
+          color: $color-black;
+        }
+      }
+    }
+  }
+}
+
 .portfolio-applications {
   .portfolio-applications__header {
     margin-bottom: 4 * $gap;

styles/elements/_inputs.scss

@@ -12,7 +12,7 @@
 
 @mixin input-state($state) {
   $border-width: 1px;
-  $state-color: $color-gray;
+  $state-color: $color-blue;
 
   @if $state == 'error' {
     $border-width: 2px;
@@ -283,6 +283,8 @@
     }
   }
 
+  @include input-state('default');
+
   &.usa-input--error {
     @include input-state('error');
   }

templates/fragments/edit_application_form.html

@@ -1,18 +1,8 @@
 {% from "components/text_input.html" import TextInput %}
 
-{% set title_text = ('fragments.edit_application_form.existing_application_title' | translate({ "application_name": application.name })) if application else ('fragments.edit_application_form.new_application_title' | translate) %}
-
 {{ form.csrf_token }}
-<div class="panel">
-  <div class="panel__heading panel__heading--grow">
-    <h1>{{ title_text }}</h1>
-  </div>
-
-  <div class="panel__content">
 <p>
   {{ "fragments.edit_application_form.explain" | translate }}
 </p>
 {{ TextInput(form.name) }}
 {{ TextInput(form.description, paragraph=True) }}
-  </div>
-</div>

templates/portfolios/applications/base.html

@@ -0,0 +1,15 @@
+{% extends "portfolios/base.html" %}
+
+{% block portfolio_header %}
+<div class='portfolio-header'>
+  <div class='portfolio-header__name'>
+    {{ secondary_breadcrumb }}
+  </div>
+</div>
+{% endblock %}
+
+{% block portfolio_content %}
+  <div class='application-content'>
+    {% block application_content %}{% endblock %}
+  </div>
+{% endblock %}

templates/portfolios/applications/edit.html

@@ -1,35 +1,43 @@
-{% extends "portfolios/base.html" %}
+{% extends "portfolios/applications/base.html" %}
 
 {% from "components/text_input.html" import TextInput %}
 
-{% block portfolio_content %}
+{% set secondary_breadcrumb = 'portfolios.applications.existing_application_title' | translate({ "application_name": application.name }) %}
+
+{% block application_content %}
+
+  <div class='subheading'>{{ 'portfolios.applications.settings_heading' | translate }}</div>
 
   <form method="POST" action="{{ url_for('portfolios.edit_application', portfolio_id=portfolio.id, application_id=application.id) }}">
+    <div class="panel">
+      <div class="panel__content">
 
         {% include "fragments/edit_application_form.html" %}
 
-    <div class="block-list application-list-item">
+        <div class="application-list-item">
-      <header class="block-list__header block-list__header--grow">
+          <header>
-        <h2 class="block-list__title">Application Environments</h2>
+            <h2 class="block-list__title">{{ 'portfolios.applications.environments_heading' | translate }}</h2>
             <p>
-          Each environment created within an application is an enclave of cloud resources that is logically separated from each other for increased security.
+              {{ 'portfolios.applications.environments_description' | translate }}
             </p>
           </header>
 
           <ul>
             {% for environment in application.environments %}
-          <li class="block-list__item application-edit__env-list-item">
+              <li class="application-edit__env-list-item">
-            <div class="usa-input">
+                <div class="usa-input input--disabled">
                   <label>Environment Name</label>
-              <input type="text" value="{{ environment.name }}" readonly />
+                  <input type="text" disabled value="{{ environment.name }}" readonly />
                 </div>
               </li>
             {% endfor %}
           </ul>
         </div>
 
+      </div>
+    </div>
     <div class="action-group">
-      <button class="usa-button usa-button-primary" tabindex="0" type="submit">Update Application</button>
+      <button class="usa-button usa-button-primary" tabindex="0" type="submit">{{ 'portfolios.applications.update_button_text' | translate }}</button>
     </div>
   </form>
 

templates/portfolios/applications/new.html

@@ -1,23 +1,29 @@
-{% extends "portfolios/base.html" %}
+{% extends "portfolios/applications/base.html" %}
 
 {% from "components/alert.html" import Alert %}
 {% from "components/icon.html" import Icon %}
 {% from "components/modal.html" import Modal %}
 {% from "components/text_input.html" import TextInput %}
 
-{% block portfolio_content %}
+{% set secondary_breadcrumb = 'portfolios.applications.new_application_title' | translate %}
+
+{% block application_content %}
 
   {% set modalName = "newApplicationConfirmation" %}
   {% include "fragments/flash.html" %}
 
+  <div class='subheading'>{{ 'portfolios.applications.settings_heading' | translate }}</div>
+
   <new-application inline-template v-bind:initial-data='{{ form.data|tojson }}' modal-name='{{ modalName }}'>
     <form method="POST" action="{{ url_for('portfolios.create_application', portfolio_id=portfolio.id) }}" v-on:submit="handleSubmit">
+      <div class="panel">
+        <div class="panel__content">
 
           {% call Modal(name=modalName, dismissable=False) %}
             <h1>Create application !{ name }</h1>
 
             <p>
-        When you click <em>Create Application</em>, the environments
+            When you click <em>{{ 'portfolios.applications.create_button_text' | translate }}</em>, the environments
             <span v-for="(environment, index) in environments">
               <strong>!{environment.name}</strong><template v-if="index < (environments.length - 1)">, </template>
             </span>
@@ -25,7 +31,7 @@
             </p>
 
             <div class='action-group'>
-          <button autofocus type='submit' class='action-group__action usa-button' tabindex='0'>Create Application</button>
+              <button autofocus type='submit' class='action-group__action usa-button' tabindex='0'>{{ 'portfolios.applications.create_button_text' | translate }}</button>
               <button type='button' v-on:click="handleCancelSubmit" class='icon-link action-group__action' tabindex='0'>Cancel</button>
             </div>
           {% endcall %}
@@ -38,16 +44,16 @@
             </div>
           </div>
 
-      <div class="block-list application-list-item">
+          <div class="application-list-item">
-        <header class="block-list__header block-list__header--grow">
+            <header>
-          <h2 class="block-list__title">Application Environments</h2>
+              <h2 class="block-list__title">{{ 'portfolios.applications.environments_heading' | translate }}</h2>
               <p>
-            Each environment created within an application is an enclave of cloud resources that is logically separated from each other for increased security.
+                {{ 'portfolios.applications.environments_description' | translate }}
               </p>
             </header>
 
             <ul>
-          <li v-for="(environment, i) in environments" class="block-list__item application-edit__env-list-item">
+              <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" placeholder="e.g. Development, Staging, Production"/>
@@ -65,8 +71,12 @@
             </div>
           </div>
 
+
+        </div>
+      </div>
+
       <div class="action-group">
-        <button class="usa-button usa-button-primary" tabindex="0" type="submit">Create Application</button>
+        <button class="usa-button usa-button-primary" tabindex="0" type="submit">{{ 'portfolios.applications.create_button_text' | translate }}</button>
       </div>
     </form>
   </new-application>

translations.yaml

@@ -173,7 +173,7 @@ forms:
     environment_names_label: Environment Name
     environment_names_required_validation_message: Provide at least one environment name.
     environment_names_unique_validation_message: Environment names must be unique.
-    name_label: Application Name
+    name_label: Name
   task_order:
     portfolio_name_label: Organization Portfolio Name
     portfolio_name_description: The name of your office or organization. You can add multiple applications to your portfolio. Your task orders are used to pay for these applications and their environments.
@@ -257,8 +257,7 @@ forms:
     name_length_validation_message: Portfolio names must be at least 4 and not more than 100 characters
 fragments:
   edit_application_form:
-    existing_application_title: 'Edit {application_name} application'
+    explain: 'AT-AT allows you to create multiple applications within a portfolio. Each application can then be broken down into its own customizable environments.'
-    explain: 'AT-AT allows you to organize your portfolio into multiple applications, each of which may have environments.'
     new_application_title: Add a new application
   edit_user_form:
     date_last_training_tooltip: When was the last time you completed the IA training? <br> Information Assurance (IA) training is an important step in cyber awareness.
@@ -487,6 +486,13 @@ portfolios:
     app_settings_text: App Settings
     team_text: Team
     csp_console_text: CSP Console
+    existing_application_title: '{application_name} Application Settings'
+    new_application_title: New Application
+    settings_heading: Application Settings
+    environments_heading: Environments
+    environments_description: Each environment created within an application is logically separated from one another for easier management and security.
+    update_button_text: Save Changes
+    create_button_text: Create Application
 testing:
   example_string: Hello World
   example_with_variables: 'Hello, {name}!'