pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Reskin application settings page
This commit is contained in:
patricksmithdds 2019-02-11 12:59:58 -05:00 committed by GitHub
commit 20d1ffecd9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 151 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
styles/components/_portfolio_layout.scss
View File

@ -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;

4
styles/elements/_inputs.scss
View File

@ -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');
}

18
templates/fragments/edit_application_form.html
View File

@ -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>
<p>
{{ "fragments.edit_application_form.explain" | translate }}
</p>
{{ TextInput(form.name) }}
{{ TextInput(form.description, paragraph=True) }}
</div>
</div>
</p>
{{ TextInput(form.name) }}
{{ TextInput(form.description, paragraph=True) }}

15
templates/portfolios/applications/base.html Normal file
View File

@ -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 %}

28
templates/portfolios/applications/edit.html
View File

@ -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">
<header class="block-list__header block-list__header--grow">
<h2 class="block-list__title">Application Environments</h2>
<div class="application-list-item">
<header>
<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">
<div class="usa-input">
<li class="application-edit__env-list-item">
<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>

30
templates/portfolios/applications/new.html
View File

@ -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">
<header class="block-list__header block-list__header--grow">
<h2 class="block-list__title">Application Environments</h2>
<div class="application-list-item">
<header>
<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>

12
translations.yaml
View File

@ -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 organize your portfolio into multiple applications, each of which may have environments.'
explain: 'AT-AT allows you to create multiple applications within a portfolio. Each application can then be broken down into its own customizable 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}!'