Merge pull request #1111 from dod-ccpo/multistep-app-provisioning-design-tweaks
More multistep app provisioning design tweaks
This commit is contained in:
@@ -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(
|
||||||
|
@@ -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",
|
||||||
},
|
},
|
||||||
|
@@ -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 {
|
||||||
|
@@ -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;
|
||||||
|
@@ -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;
|
||||||
|
@@ -219,6 +219,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.application-content {
|
.application-content {
|
||||||
|
margin-top: $gap * 4;
|
||||||
|
|
||||||
.subheading {
|
.subheading {
|
||||||
@include subheading;
|
@include subheading;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@@ -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;
|
||||||
|
}
|
||||||
|
@@ -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>
|
||||||
|
@@ -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 %}
|
||||||
|
@@ -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 %}
|
||||||
|
|
||||||
|
@@ -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 %}
|
||||||
|
@@ -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.
|
||||||
|
Reference in New Issue
Block a user