Merge pull request #803 from dod-ccpo/edit-environment-save-fail-refactor

Edit environment save fail refactor

atst/routes/applications/settings.py

@@ -85,21 +85,33 @@ def update_environment(environment_id):
     environment = Environments.get(environment_id)
     application = environment.application
 
-    form = EditEnvironmentForm(formdata=http_request.form)
+    env_form = EditEnvironmentForm(obj=environment, formdata=http_request.form)
 
-    if form.validate():
-        Environments.update(environment=environment, name=form.name.data)
+    if env_form.validate():
+        Environments.update(environment=environment, name=env_form.name.data)
 
-    flash("application_environments_updated")
+        flash("application_environments_updated")
 
-    return redirect(
-        url_for(
-            "applications.settings",
-            application_id=application.id,
-            fragment="application-environments",
-            _anchor="application-environments",
+        return redirect(
+            url_for(
+                "applications.settings",
+                application_id=application.id,
+                fragment="application-environments",
+                _anchor="application-environments",
+            )
+        )
+    else:
+        return (
+            render_template(
+                "portfolios/applications/settings.html",
+                application=application,
+                form=ApplicationForm(
+                    name=application.name, description=application.description
+                ),
+                environments_obj=get_environments_obj_for_app(application=application),
+            ),
+            400,
         )
-    )
 
 
 @applications_bp.route("/applications/<application_id>/edit", methods=["POST"])

js/components/toggler.js

@@ -12,7 +12,7 @@ export default {
 
   data: function() {
     return {
-      selectedSection: null,
+      selectedSection: this.initialSelectedSection,
     }
   },
 

js/mixins/form.js

@@ -1,23 +1,53 @@
 export default {
+  props: {
+    initialSelectedSection: String,
+  },
+
   mounted: function() {
     this.$root.$on('field-change', this.handleFieldChange)
   },
 
+  created: function() {
+    this.$root.$on('field-mount', this.handleFieldMount)
+  },
+
   methods: {
     handleFieldChange: function(event) {
-      const { value, name } = event
+      const { name, valid, parent_uid } = event
       if (typeof this[name] !== undefined) {
-        this[name] = value
-        if (event['parent_uid'] === this._uid) {
+        this.fields[name] = valid
+
+        if (parent_uid === this._uid) {
           this.changed = true
         }
       }
+
+      this.validateForm()
+    },
+
+    handleFieldMount: function(event) {
+      const { name, optional } = event
+      this.fields[name] = optional
+    },
+
+    validateForm: function() {
+      const valid = !Object.values(this.fields).some(field => field === false)
+      this.invalid = !valid
+      return valid
+    },
+
+    handleSubmit: function(event) {
+      if (this.invalid) {
+        event.preventDefault()
+      }
     },
   },
 
   data: function() {
     return {
       changed: this.hasChanges,
+      fields: {},
+      invalid: true,
     }
   },
 

script/format

@@ -9,6 +9,5 @@ if [ "$1" == "check" ]; then
 else
   pipenv run black ${FILES_TO_FORMAT}
   yarn run prettier --list-different --write "js/**/*.js" --config ./prettier.config.json
-  tt
   yarn run prettier --list-different --write "styles/**/*.scss"
 fi

templates/components/save_button.html

@@ -1,10 +1,10 @@
 {% macro SaveButton(text, element="button", additional_classes="", form=None) -%}
   {% set class = "usa-button usa-button-primary" + additional_classes %}
   {% if element == "button" %}
-    <button type="submit" class="{{ class }}" tabindex="0" v-bind:disabled="!changed" {{ form_attr }} >
+    <button type="submit" class="{{ class }}" tabindex="0" v-bind:disabled="!changed || invalid" {{ form_attr }} >
       {{ text }}
     </button>
   {% elif element == 'input' %}
-    <input type="submit" class="{{ class }}" tabindex="0" v-bind:disabled="!changed" value="{{ text }}" {% if form %}form="{{ form }}"{% endif %} />
+    <input type="submit" class="{{ class }}" tabindex="0" v-bind:disabled="!changed || invalid" value="{{ text }}" {% if form %}form="{{ form }}"{% endif %} />
   {% endif %}
 {%- endmacro %}

templates/fragments/applications/edit_environments.html

@@ -48,11 +48,12 @@
 
     <ul class="accordion-table__items">
       {% for env in environments_obj %}
+        {% set edit_form = env['edit_form'] %}
         {% set member_count = env['members_form'].data['team_roles'] | length %}
         {% set members_by_role = env['members'] %}
         {% set unassigned = members_by_role['no_access'] %}
 
-        <toggler inline-template>
+        <toggler inline-template {% if edit_form.errors %}initial-selected-section="edit"{% endif %}>
           <li class="accordion-table__item">
             <div class="accordion-table__item-content row">
               <div class="col col--grow">
@@ -107,10 +108,9 @@
             {% call ToggleSection(section_name="edit") %}
               <ul>
                 <li class="accordion-table__item__expanded">
-                  {% set edit_form = env['edit_form'] %}
-                  <form action="{{ url_for('applications.update_environment', environment_id=env['id']) }}" method="post">
+                  <form action="{{ url_for('applications.update_environment', environment_id=env['id']) }}" method="post" v-on:submit="handleSubmit">
                     {{ edit_form.csrf_token }}
-                    {{ TextInput(edit_form.name) }}
+                    {{ TextInput(edit_form.name, validation='requiredField') }}
                     {{
                       SaveButton(
                         text=("portfolios.applications.update_button_text" | translate)

tests/routes/applications/test_settings.py

@@ -27,7 +27,7 @@ from atst.forms.app_settings import EnvironmentRolesForm
 from tests.utils import captured_templates
 
 
-def test_updating_application_environments(client, user_session):
+def test_updating_application_environments_success(client, user_session):
     portfolio = PortfolioFactory.create()
     application = ApplicationFactory.create(portfolio=portfolio)
     environment = EnvironmentFactory.create(application=application)
@@ -52,6 +52,26 @@ def test_updating_application_environments(client, user_session):
     assert environment.name == "new name a"
 
 
+def test_updating_application_environments_failure(client, user_session):
+    portfolio = PortfolioFactory.create()
+    application = ApplicationFactory.create(portfolio=portfolio)
+    environment = EnvironmentFactory.create(
+        application=application, name="original name"
+    )
+
+    user_session(portfolio.owner)
+
+    form_data = {"name": ""}
+
+    response = client.post(
+        url_for("applications.update_environment", environment_id=environment.id),
+        data=form_data,
+    )
+
+    assert response.status_code == 400
+    assert environment.name == "original name"
+
+
 def test_application_settings(client, user_session):
     portfolio = PortfolioFactory.create()
     application = Applications.create(