diff --git a/atst/routes/applications/settings.py b/atst/routes/applications/settings.py index 18b92603..8b92ca0f 100644 --- a/atst/routes/applications/settings.py +++ b/atst/routes/applications/settings.py @@ -183,11 +183,7 @@ def handle_create_member(application_id, form_data): token=invite.token, ) - flash( - "new_application_member", - user_name=invite.user_name, - application_name=application.name, - ) + flash("new_application_member", user_name=invite.first_name) except AlreadyExistsError: return render_template( diff --git a/atst/utils/flash.py b/atst/utils/flash.py index 623306d5..d0c812d4 100644 --- a/atst/utils/flash.py +++ b/atst/utils/flash.py @@ -8,9 +8,9 @@ MESSAGES = { "category": "success", }, "application_created": { - "title_template": translate("flash.success"), + "title_template": translate("flash.application.created.title"), "message_template": """ - {{ "flash.application.created" | translate({"application_name": application_name}) }} + {{ "flash.application.created.message" | translate({"application_name": application_name}) }} """, "category": "success", }, @@ -104,9 +104,9 @@ MESSAGES = { "category": "warning", }, "new_application_member": { - "title_template": translate("flash.success"), + "title_template": """{{ "flash.new_application_member.title" | translate({ "user_name": user_name }) }}""", "message_template": """ -

{{ "flash.new_application_member" | translate({ "user_name": user_name, "application_name": application_name }) }}

+

{{ "flash.new_application_member.message" | translate({ "user_name": user_name }) }}

""", "category": "success", }, diff --git a/js/components/forms/new_application/name_and_description.js b/js/components/forms/new_application/name_and_description.js index f39234f9..cabcd92c 100644 --- a/js/components/forms/new_application/name_and_description.js +++ b/js/components/forms/new_application/name_and_description.js @@ -10,6 +10,10 @@ export default { components: { textinput, }, + created: function() { + this.$root.$on('field-change', this.handleFieldChange) + if (this.initialData) this.changed = true + }, data: function() { return { diff --git a/styles/components/_footer.scss b/styles/components/_footer.scss index e5975115..2b7fc552 100644 --- a/styles/components/_footer.scss +++ b/styles/components/_footer.scss @@ -1,4 +1,5 @@ .app-footer { + z-index: 3; background-color: $color-white; border-top: 1px solid $color-gray-lightest; display: flex; diff --git a/styles/components/_global_navigation.scss b/styles/components/_global_navigation.scss index 75daa768..63bf0d41 100644 --- a/styles/components/_global_navigation.scss +++ b/styles/components/_global_navigation.scss @@ -1,6 +1,9 @@ .global-navigation { + z-index: 2; background-color: $color-white; height: auto; + box-shadow: $box-shadow; + margin-bottom: -$footer-height * 2.5; .sidenav__link { padding-right: $gap * 2; diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index c1af4db4..6a40d851 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -219,6 +219,8 @@ } .application-content { + margin-top: $gap * 4; + .subheading { @include subheading; position: relative; diff --git a/styles/elements/_action_group.scss b/styles/elements/_action_group.scss index 379c2642..1f79f7d2 100644 --- a/styles/elements/_action_group.scss +++ b/styles/elements/_action_group.scss @@ -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; +} diff --git a/templates/applications/new/step_1.html b/templates/applications/new/step_1.html index e6a2bd54..385d80de 100644 --- a/templates/applications/new/step_1.html +++ b/templates/applications/new/step_1.html @@ -23,29 +23,28 @@
-
- {{ form.csrf_token }} -
-
- {{ TextInput(form.name, optional=False) }} - {{ ('portfolios.applications.new.step_1_form_help_text.description' | translate | safe) }} -
-
-
-
-
- {{ TextInput(form.description, paragraph=True, optional=True) }} - {{ ('portfolios.applications.new.step_1_form_help_text.description' | translate | safe) }} -
-
+ {{ form.csrf_token }} +
+
+ {{ TextInput(form.name, optional=False) }} + {{ ('portfolios.applications.new.step_1_form_help_text.name' | translate | safe) }}
- +
+
+
+
+ {{ TextInput(form.description, paragraph=True, optional=True) }} + {{ ('portfolios.applications.new.step_1_form_help_text.description' | translate | safe) }} +
+
- + + {% block next_button %} {{ SaveButton(text=('portfolios.applications.new.step_1_button_text' | translate)) }} {% endblock %} - + + Cancel diff --git a/templates/applications/new/step_2.html b/templates/applications/new/step_2.html index 3f876b46..bb622f8f 100644 --- a/templates/applications/new/step_2.html +++ b/templates/applications/new/step_2.html @@ -16,66 +16,63 @@ {% set modalName = "newApplicationConfirmation" %} {% include "fragments/flash.html" %} -
-

- {{ 'portfolios.applications.new.step_2_description' | translate }} -

-
- - -
{{ 'portfolios.applications.environments_heading' | translate }}
-
-
- {{ form.csrf_token }} -
{# this extra div prevents this bug: https://www.pivotaltracker.com/story/show/160768940 #} -
- {{ Alert(message=None, level="error", vue_template=True) }} -
+

+ {{ 'portfolios.applications.new.step_2_description' | translate }} +

+
+ + +
{{ 'portfolios.applications.environments_heading' | translate }}
+
+
+ {{ form.csrf_token }} +
{# this extra div prevents this bug: https://www.pivotaltracker.com/story/show/160768940 #} +
+ {{ Alert(message=None, level="error", vue_template=True) }}
- -
-
    -
  • -
    - - -
    -
    - -
    -
    • -
- -
- -
-
-
-
- - - {% block next_button %} - {{ SaveButton(text=('portfolios.applications.new.step_2_button_text' | translate)) }} - {% endblock %} - - Previous - - - Cancel - - - - -
+
+ +
+
    +
  • +
    + + +
    +
    + +
    +
    • +
+ +
+ +
+
+
+
+ + {% block next_button %} + {{ SaveButton(text=('portfolios.applications.new.step_2_button_text' | translate)) }} + {% endblock %} + + Previous + + + Cancel + + + + {% endblock %} diff --git a/templates/applications/new/step_3.html b/templates/applications/new/step_3.html index 783af8d3..cdf458e4 100644 --- a/templates/applications/new/step_3.html +++ b/templates/applications/new/step_3.html @@ -11,31 +11,30 @@ {% block application_content %} {% include "fragments/flash.html" %} -
-

- {{ ('portfolios.applications.new.step_3_description' | translate) }} -

-
- - {{ MemberManagementTemplate( - application, - members, - new_member_form, - "applications.update_new_application_step_3", - user_can(permissions.CREATE_APPLICATION_MEMBER)) }} - +

+ {{ ('portfolios.applications.new.step_3_description' | translate) }} +

+
+ + {{ MemberManagementTemplate( + application, + members, + new_member_form, + "applications.update_new_application_step_3", + user_can(permissions.CREATE_APPLICATION_MEMBER)) }} + + + + + Return to Application Settings + + + Previous + + + Cancel + + - - - Return to Application Settings - - - Previous - - - Cancel - - -
{% endblock %} diff --git a/templates/components/alert.html b/templates/components/alert.html index 8406a3da..49f148b9 100644 --- a/templates/components/alert.html +++ b/templates/components/alert.html @@ -27,7 +27,7 @@ {% if vue_template %}

{% elif title %} -

{{title}}

+

{{ title | safe }}

{% endif %} {% if message %} diff --git a/translations.yaml b/translations.yaml index 268b7bd0..b40faa34 100644 --- a/translations.yaml +++ b/translations.yaml @@ -107,7 +107,9 @@ email: environment_ready: JEDI cloud environment ready flash: 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.' 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.' @@ -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_title: Primary point of contact updated 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.' logged_out: Logged out footer: @@ -311,12 +315,12 @@ portfolios: app_settings_text: App settings new: 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: name: |

- 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.

Writer's Block? A naming example includes: @@ -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.

- Writer's Block? A naming example includes: + Writer's Block? A description example includes:

  • Build security applications for FOB Clark
@@ -339,9 +343,9 @@ portfolios:
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_button_text: "Save and Add Members" - step_3_header: Invite 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_2_button_text: "Next: Add Members" + 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_button_text: Save Application 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.