Merge pull request #1111 from dod-ccpo/multistep-app-provisioning-design-tweaks

More multistep app provisioning design tweaks
This commit is contained in:
graham-dds
2019-10-14 15:40:04 -04:00
committed by GitHub
12 changed files with 147 additions and 121 deletions

View File

@@ -183,11 +183,7 @@ def handle_create_member(application_id, form_data):
token=invite.token, token=invite.token,
) )
flash( flash("new_application_member", user_name=invite.first_name)
"new_application_member",
user_name=invite.user_name,
application_name=application.name,
)
except AlreadyExistsError: except AlreadyExistsError:
return render_template( return render_template(

View File

@@ -8,9 +8,9 @@ MESSAGES = {
"category": "success", "category": "success",
}, },
"application_created": { "application_created": {
"title_template": translate("flash.success"), "title_template": translate("flash.application.created.title"),
"message_template": """ "message_template": """
{{ "flash.application.created" | translate({"application_name": application_name}) }} {{ "flash.application.created.message" | translate({"application_name": application_name}) }}
""", """,
"category": "success", "category": "success",
}, },
@@ -104,9 +104,9 @@ MESSAGES = {
"category": "warning", "category": "warning",
}, },
"new_application_member": { "new_application_member": {
"title_template": translate("flash.success"), "title_template": """{{ "flash.new_application_member.title" | translate({ "user_name": user_name }) }}""",
"message_template": """ "message_template": """
<p>{{ "flash.new_application_member" | translate({ "user_name": user_name, "application_name": application_name }) }}</p> <p>{{ "flash.new_application_member.message" | translate({ "user_name": user_name }) }}</p>
""", """,
"category": "success", "category": "success",
}, },

View File

@@ -10,6 +10,10 @@ export default {
components: { components: {
textinput, textinput,
}, },
created: function() {
this.$root.$on('field-change', this.handleFieldChange)
if (this.initialData) this.changed = true
},
data: function() { data: function() {
return { return {

View File

@@ -1,4 +1,5 @@
.app-footer { .app-footer {
z-index: 3;
background-color: $color-white; background-color: $color-white;
border-top: 1px solid $color-gray-lightest; border-top: 1px solid $color-gray-lightest;
display: flex; display: flex;

View File

@@ -1,6 +1,9 @@
.global-navigation { .global-navigation {
z-index: 2;
background-color: $color-white; background-color: $color-white;
height: auto; height: auto;
box-shadow: $box-shadow;
margin-bottom: -$footer-height * 2.5;
.sidenav__link { .sidenav__link {
padding-right: $gap * 2; padding-right: $gap * 2;

View File

@@ -219,6 +219,8 @@
} }
.application-content { .application-content {
margin-top: $gap * 4;
.subheading { .subheading {
@include subheading; @include subheading;
position: relative; position: relative;

View File

@@ -29,3 +29,24 @@
} }
} }
} }
.action-group-footer {
@extend .action-group;
&:last-child {
margin-bottom: 0;
}
margin-top: 0;
margin-bottom: 0;
padding-top: $gap;
padding-bottom: $gap;
position: fixed;
bottom: $footer-height;
background: white;
right: 0;
padding-right: $gap * 4;
border-top: 1px solid $color-gray-light;
width: 100%;
z-index: 1;
}

View File

@@ -23,29 +23,28 @@
<application-name-and-description inline-template v-bind:initial-data='{{ form.data|tojson }}'> <application-name-and-description inline-template v-bind:initial-data='{{ form.data|tojson }}'>
<form method="POST" action="{{ action }}" v-on:submit="handleSubmit"> <form method="POST" action="{{ action }}" v-on:submit="handleSubmit">
<div class="panel__content"> {{ form.csrf_token }}
{{ form.csrf_token }} <div class="form-row">
<div class="form-row"> <div class="form-col">
<div class="form-col form-col--two-thirds"> {{ TextInput(form.name, optional=False) }}
{{ TextInput(form.name, optional=False) }} {{ ('portfolios.applications.new.step_1_form_help_text.name' | translate | safe) }}
{{ ('portfolios.applications.new.step_1_form_help_text.description' | translate | safe) }}
</div>
</div>
<hr>
<div class="form-row">
<div class="form-col form-col--two-thirds">
{{ TextInput(form.description, paragraph=True, optional=True) }}
{{ ('portfolios.applications.new.step_1_form_help_text.description' | translate | safe) }}
</div>
</div>
</div> </div>
</div>
<hr class="panel__break">
<div class="form-row">
<div class="form-col form-col--two-thirds">
{{ TextInput(form.description, paragraph=True, optional=True) }}
{{ ('portfolios.applications.new.step_1_form_help_text.description' | translate | safe) }}
</div>
</div>
<span class="action-group">
<span class="action-group-footer">
{% block next_button %} {% block next_button %}
{{ SaveButton(text=('portfolios.applications.new.step_1_button_text' | translate)) }} {{ SaveButton(text=('portfolios.applications.new.step_1_button_text' | translate)) }}
{% endblock %} {% endblock %}
<a class="usa-button usa-button-secondary" href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}"> <button disabled class="usa-button usa-button-secondary">Previous</button>
<a href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
Cancel Cancel
</a> </a>
</span> </span>

View File

@@ -16,66 +16,63 @@
{% set modalName = "newApplicationConfirmation" %} {% set modalName = "newApplicationConfirmation" %}
{% include "fragments/flash.html" %} {% include "fragments/flash.html" %}
<div class="panel__content"> <p>
<p> {{ 'portfolios.applications.new.step_2_description' | translate }}
{{ 'portfolios.applications.new.step_2_description' | translate }} </p>
</p> <hr class="panel__break">
<hr> <application-environments inline-template v-bind:initial-data='{{ form.data|tojson }}'>
<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">
<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="subheading">{{ 'portfolios.applications.environments_heading' | translate }}</div> <div class="panel">
<div class="panel"> <div class="panel__content">
<div class="panel__content"> {{ form.csrf_token }}
{{ form.csrf_token }} <div> {# this extra div prevents this bug: https://www.pivotaltracker.com/story/show/160768940 #}
<div> {# this extra div prevents this bug: https://www.pivotaltracker.com/story/show/160768940 #} <div v-cloak v-for="title in errors" :key="title">
<div v-cloak v-for="title in errors" :key="title"> {{ Alert(message=None, level="error", vue_template=True) }}
{{ Alert(message=None, level="error", vue_template=True) }}
</div>
</div> </div>
</div>
<div class="application-list-item">
<ul> <div class="application-list-item">
<li v-for="(environment, i) in environments" class="application-edit__env-list-item"> <ul>
<div class="usa-input"> <li v-for="(environment, i) in environments" class="application-edit__env-list-item">
<label :for="'environment_names-' + i">Environment Name</label> <div class="usa-input">
<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"/> <label :for="'environment_names-' + i">Environment Name</label>
</div> <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 class="application-edit__env-list-item-block"> </div>
<button v-on:click="removeEnvironment(i)" v-if="environments.length > 1" type="button" class="application-edit__env-list-item__remover"> <div class="application-edit__env-list-item-block">
{{ Icon('trash') }} <button v-on:click="removeEnvironment(i)" v-if="environments.length > 1" type="button" class="application-edit__env-list-item__remover">
<span>Remove</span> {{ Icon('trash') }}
</button> <span>Remove</span>
</div> </button>
</li> </div>
</ul> </li>
</ul>
<div class="block-list__footer">
<button <div class="block-list__footer">
v-on:click="addEnvironment" <button
class="icon-link" v-on:click="addEnvironment"
tabindex="0" class="icon-link"
type="button"> tabindex="0"
{{ 'portfolios.applications.add_another_environment' | translate }} type="button">
{{ Icon("plus") }} {{ 'portfolios.applications.add_another_environment' | translate }}
</button> {{ Icon("plus") }}
</div> </button>
</div> </div>
</div> </div>
</div> </div>
</div>
<span class="action-group"> <span class="action-group-footer">
{% block next_button %} {% block next_button %}
{{ SaveButton(text=('portfolios.applications.new.step_2_button_text' | translate)) }} {{ SaveButton(text=('portfolios.applications.new.step_2_button_text' | translate)) }}
{% endblock %} {% endblock %}
<a class="usa-button usa-button-secondary" href="{{ url_for('applications.view_new_application_step_1', application_id=application.id) }}"> <a class="usa-button usa-button-secondary" href="{{ url_for('applications.view_new_application_step_1', application_id=application.id) }}">
Previous Previous
</a> </a>
<a href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}"> <a href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
Cancel Cancel
</a> </a>
</span> </span>
</form> </form>
</application-environments> </application-environments>
</div>
{% endblock %} {% endblock %}

View File

@@ -11,31 +11,30 @@
{% block application_content %} {% block application_content %}
{% include "fragments/flash.html" %} {% include "fragments/flash.html" %}
<div class="panel__content"> <p>
<p> {{ ('portfolios.applications.new.step_3_description' | translate) }}
{{ ('portfolios.applications.new.step_3_description' | translate) }} </p>
</p> <hr class="panel__break">
<hr>
{{ MemberManagementTemplate(
{{ MemberManagementTemplate( application,
application, members,
members, new_member_form,
new_member_form, "applications.update_new_application_step_3",
"applications.update_new_application_step_3", user_can(permissions.CREATE_APPLICATION_MEMBER)) }}
user_can(permissions.CREATE_APPLICATION_MEMBER)) }}
<span class="action-group-footer">
<a class="usa-button" href="{{ url_for('applications.settings', application_id=application_id) }}">
Return to Application Settings
</a>
<a class="usa-button usa-button-secondary" href="{{ url_for('applications.view_new_application_step_2', application_id=application.id) }}">
Previous
</a>
<a href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
Cancel
</a>
</span>
<span class="action-group">
<a class="usa-button" href="{{ url_for('applications.settings', application_id=application_id) }}">
Return to Application Settings
</a>
<a class="usa-button usa-button-secondary" href="{{ url_for('applications.view_new_application_step_2', application_id=application.id) }}">
Previous
</a>
<a href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
Cancel
</a>
</span>
</div>
{% endblock %} {% endblock %}

View File

@@ -27,7 +27,7 @@
{% if vue_template %} {% if vue_template %}
<h3 class='usa-alert-heading' v-html='title'></h3> <h3 class='usa-alert-heading' v-html='title'></h3>
{% elif title %} {% elif title %}
<h3 class='usa-alert-heading'>{{title}}</h3> <h3 class='usa-alert-heading'>{{ title | safe }}</h3>
{% endif %} {% endif %}
{% if message %} {% if message %}

View File

@@ -107,7 +107,9 @@ email:
environment_ready: JEDI cloud environment ready environment_ready: JEDI cloud environment ready
flash: flash:
application: application:
created: 'You have successfully created the {application_name} application.' created:
title: Application Saved
message: '{application_name} has been successfully created. You may continue on to provision environments and assign team members now, or come back and complete these tasks at a later time.'
updated: 'You have successfully updated the {application_name} application.' updated: 'You have successfully updated the {application_name} application.'
deleted: 'You have successfully deleted the {application_name} application. To view the retained activity log, visit the portfolio administration page.' deleted: 'You have successfully deleted the {application_name} application. To view the retained activity log, visit the portfolio administration page.'
delete_member_success: 'You have successfully deleted {member_name} from the portfolio.' delete_member_success: 'You have successfully deleted {member_name} from the portfolio.'
@@ -119,7 +121,9 @@ flash:
new_ppoc_message: 'You have successfully added {ppoc_name} as the primary point of contact. You are no longer the PPoC.' new_ppoc_message: 'You have successfully added {ppoc_name} as the primary point of contact. You are no longer the PPoC.'
new_ppoc_title: Primary point of contact updated new_ppoc_title: Primary point of contact updated
success: Success! success: Success!
new_application_member: '{user_name} has been added to {application_name}. They will not have access until they accept the invitation e-mailed to them and CSP processing is complete.' new_application_member:
title: "{user_name}'s invitation has been sent"
message: "{user_name}'s access to this Application is pending until they sign in for the first time."
updated_application_team_settings: 'You have updated the {application_name} team settings.' updated_application_team_settings: 'You have updated the {application_name} team settings.'
logged_out: Logged out logged_out: Logged out
footer: footer:
@@ -311,12 +315,12 @@ portfolios:
app_settings_text: App settings app_settings_text: App settings
new: new:
step_1_header: Name and Describe New Application step_1_header: Name and Describe New Application
step_1_button_text: "Save and Add Environments" step_1_button_text: "Next: Add Environments"
step_1_form_help_text: step_1_form_help_text:
name: | name: |
<div style="margin-top: -3rem;"> <div style="margin-top: -3rem;">
<p> <p>
The name of your application should be intuitive and easily recognizable for all of your team members. The name of your Application should be intuitive and easily recognizable for all of your team members.
</p> </p>
<p> <p>
<strong>Writer's Block? A naming example includes:</strong> <strong>Writer's Block? A naming example includes:</strong>
@@ -331,7 +335,7 @@ portfolios:
Add a brief one to two sentence description of your application. You should be able to reference your TO Description of Work. Add a brief one to two sentence description of your application. You should be able to reference your TO Description of Work.
</p> </p>
<p> <p>
<strong>Writer's Block? A naming example includes:</strong> <strong>Writer's Block? A description example includes:</strong>
<ul> <ul>
<li>Build security applications for FOB Clark</li> <li>Build security applications for FOB Clark</li>
</ul> </ul>
@@ -339,9 +343,9 @@ portfolios:
</div> </div>
step_2_header: Add Environments to {application_name} 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 Application." 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 Application."
step_2_button_text: "Save and Add Members" step_2_button_text: "Next: Add Members"
step_3_header: Invite Members to {application_name} step_3_header: Add Members to {application_name}
step_3_description: "To proceed, you will need each member's email address and DOD ID. Within this section, you will also assign application-level permissions and environment-level roles for each member." step_3_description: "To proceed, you will need each member's email address and DOD ID. Within this section, you will also assign Application-level permissions and environment-level roles for each member."
step_3_button_text: Save Application step_3_button_text: Save Application
create_new_env: Create a new environment. create_new_env: Create a new environment.
create_new_env_info: Creating an environment gives you access to the Cloud Service Provider. This environment will function within the constraints of the task order, and any costs will be billed against the portfolio. create_new_env_info: Creating an environment gives you access to the Cloud Service Provider. This environment will function within the constraints of the task order, and any costs will be billed against the portfolio.