From 4c40c9238e6a7ad41962358b0d61f7487cc5e343 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Fri, 26 Apr 2019 10:48:58 -0400
Subject: [PATCH 01/14] Sort env members by role

---
 atst/routes/applications/settings.py | 2 ++
 tests/test_access.py                 | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/atst/routes/applications/settings.py b/atst/routes/applications/settings.py
index 21ea67a8..a87415a2 100644
--- a/atst/routes/applications/settings.py
+++ b/atst/routes/applications/settings.py
@@ -9,6 +9,7 @@ from atst.forms.application import ApplicationForm, EditEnvironmentForm
 from atst.domain.authz.decorator import user_can_access_decorator as user_can
 from atst.models.environment_role import CSPRole
 from atst.domain.exceptions import NotFoundError
+from atst.models.environment_role import CSPRole
 from atst.models.permissions import Permissions
 from atst.utils.flash import formatted_flash as flash
 
@@ -70,6 +71,7 @@ def settings(application_id):
     # refactor like portfolio admin render function
     application = Applications.get(application_id)
     form = ApplicationForm(name=application.name, description=application.description)
+    csp_roles = [role.value for role in CSPRole]
 
     return render_template(
         "portfolios/applications/settings.html",
diff --git a/tests/test_access.py b/tests/test_access.py
index 84f1d167..43d4a5f4 100644
--- a/tests/test_access.py
+++ b/tests/test_access.py
@@ -16,7 +16,7 @@ from tests.factories import (
     ApplicationRoleFactory,
     EnvironmentFactory,
     EnvironmentRoleFactory,
-    PortfolioInvitationFactory,
+    InvitationFactory,
     PortfolioFactory,
     PortfolioRoleFactory,
     TaskOrderFactory,

From aab01b3947c4048ac2f7fb6969bef7270f8d1988 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 1 May 2019 13:16:25 -0400
Subject: [PATCH 02/14] Remove save button and move footer into file with env
 panel

---
 .../fragments/applications/edit_environments.html      |  8 ++++++++
 templates/portfolios/applications/settings.html        | 10 +---------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/templates/fragments/applications/edit_environments.html b/templates/fragments/applications/edit_environments.html
index f6dc4912..05b2ff1d 100644
--- a/templates/fragments/applications/edit_environments.html
+++ b/templates/fragments/applications/edit_environments.html
@@ -152,3 +152,11 @@
     </ul>
   </div>
 </div>
+<div class="panel__footer">
+  <div class="action-group">
+    <a class='icon-link'>
+      {{ "portfolios.applications.add_environment" | translate }}
+      {{ Icon('plus-circle-solid') }}
+    </a>
+  </div>
+</div>
diff --git a/templates/portfolios/applications/settings.html b/templates/portfolios/applications/settings.html
index 7de3e1b5..efa44f0f 100644
--- a/templates/portfolios/applications/settings.html
+++ b/templates/portfolios/applications/settings.html
@@ -68,15 +68,7 @@
 
       {% if user_can(permissions.EDIT_APPLICATION) %}
         {% include "fragments/applications/edit_environments.html" %}
-        <div class="panel__footer">
-          <div class="action-group">
-            <button class="usa-button usa-button-primary" tabindex="0" type="submit">{{ 'portfolios.applications.update_button_text' | translate }}</button>
-            <a class='icon-link'>
-              {{ "portfolios.applications.add_environment" | translate }}
-              {{ Icon('plus') }}
-            </a>
-          </div>
-        </div>
+
       {% elif user_can(permissions.VIEW_ENVIRONMENT) %}
         {% include "fragments/applications/read_only_environments.html" %}
       {% endif %}

From 060c6834bff249d590b517f18e70b67d47d4507d Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 1 May 2019 13:52:49 -0400
Subject: [PATCH 03/14] Add save button and temp member role toggle to env
 member form

---
 atst/domain/environments.py                   |  2 +-
 atst/forms/app_settings.py                    | 11 +++-
 atst/forms/data.py                            |  4 +-
 atst/routes/applications/settings.py          | 35 ++++++++----
 atst/utils/flash.py                           |  5 ++
 js/components/toggler.js                      |  1 +
 styles/sections/_application_edit.scss        | 48 +++++++++++++++-
 templates/components/toggle_list.html         |  4 +-
 .../applications/edit_environments.html       | 55 +++++++++++++++++--
 tests/domain/test_environments.py             |  8 ++-
 tests/routes/applications/test_settings.py    | 12 ++--
 tests/test_access.py                          |  2 +-
 12 files changed, 148 insertions(+), 39 deletions(-)

diff --git a/atst/domain/environments.py b/atst/domain/environments.py
index 9c8e4d52..50484bad 100644
--- a/atst/domain/environments.py
+++ b/atst/domain/environments.py
@@ -73,7 +73,7 @@ class Environments(object):
     def update_env_role(cls, environment, user, new_role):
         updated = False
 
-        if new_role is None:
+        if new_role == "no_access":
             updated = EnvironmentRoles.delete(user.id, environment.id)
         else:
             env_role = EnvironmentRoles.get(user.id, environment.id)
diff --git a/atst/forms/app_settings.py b/atst/forms/app_settings.py
index 44bcbc8e..c6320371 100644
--- a/atst/forms/app_settings.py
+++ b/atst/forms/app_settings.py
@@ -1,14 +1,19 @@
 from flask_wtf import FlaskForm
-from wtforms.fields import StringField, HiddenField, RadioField, FieldList, FormField
+from wtforms.fields import FieldList, FormField, HiddenField, RadioField
 
 from .forms import BaseForm
 from .data import ENV_ROLES
 
 
 class EnvMemberRoleForm(FlaskForm):
-    name = StringField()
     user_id = HiddenField()
-    role = RadioField(choices=ENV_ROLES, coerce=BaseForm.remove_empty_string)
+    role = RadioField(choices=ENV_ROLES, default="no_access")
+
+    @property
+    def data(self):
+        _data = super().data
+        _data.pop("csrf_token", None)
+        return _data
 
 
 class EnvironmentRolesForm(BaseForm):
diff --git a/atst/forms/data.py b/atst/forms/data.py
index 2e0b689d..2ddc3124 100644
--- a/atst/forms/data.py
+++ b/atst/forms/data.py
@@ -217,4 +217,6 @@ REQUIRED_DISTRIBUTIONS = [
     ("other", "Other as necessary"),
 ]
 
-ENV_ROLES = [(role.value, role.value) for role in CSPRole] + [(None, "No access")]
+ENV_ROLES = [(role.value, role.value) for role in CSPRole] + [
+    ("no_access", "No access")
+]
diff --git a/atst/routes/applications/settings.py b/atst/routes/applications/settings.py
index a87415a2..283dfce4 100644
--- a/atst/routes/applications/settings.py
+++ b/atst/routes/applications/settings.py
@@ -9,7 +9,6 @@ from atst.forms.application import ApplicationForm, EditEnvironmentForm
 from atst.domain.authz.decorator import user_can_access_decorator as user_can
 from atst.models.environment_role import CSPRole
 from atst.domain.exceptions import NotFoundError
-from atst.models.environment_role import CSPRole
 from atst.models.permissions import Permissions
 from atst.utils.flash import formatted_flash as flash
 
@@ -48,11 +47,15 @@ def sort_env_users_by_role(env):
 
 def data_for_env_members_form(environment):
     data = {"env_id": environment.id, "team_roles": []}
-    for user in environment.users:
+    for user in environment.application.users:
         env_role = EnvironmentRoles.get(user.id, environment.id)
-        data["team_roles"].append(
-            {"name": user.full_name, "user_id": user.id, "role": env_role.displayname}
-        )
+
+        if env_role:
+            role = env_role.displayname
+        else:
+            role = "no_access"
+
+        data["team_roles"].append({"user_id": user.id, "role": role})
 
     return data
 
@@ -68,10 +71,8 @@ def check_users_are_in_application(user_ids, application):
 @applications_bp.route("/applications/<application_id>/settings")
 @user_can(Permissions.VIEW_APPLICATION, message="view application edit form")
 def settings(application_id):
-    # refactor like portfolio admin render function
     application = Applications.get(application_id)
     form = ApplicationForm(name=application.name, description=application.description)
-    csp_roles = [role.value for role in CSPRole]
 
     return render_template(
         "portfolios/applications/settings.html",
@@ -145,12 +146,12 @@ def update(application_id):
 def update_env_roles(environment_id):
     environment = Environments.get(environment_id)
     application = environment.application
-    env_roles_form = EnvironmentRolesForm(http_request.form)
+    form = EnvironmentRolesForm(formdata=http_request.form)
 
-    if env_roles_form.validate():
+    if form.validate():
 
         try:
-            user_ids = [user["user_id"] for user in env_roles_form.data["team_roles"]]
+            user_ids = [user["user_id"] for user in form.data["team_roles"]]
             check_users_are_in_application(user_ids, application)
         except NotFoundError as err:
             app.logger.warning(
@@ -161,11 +162,21 @@ def update_env_roles(environment_id):
             )
 
             raise (err)
-        env_data = env_roles_form.data
+        env_data = form.data
         Environments.update_env_roles_by_environment(
             environment_id=environment_id, team_roles=env_data["team_roles"]
         )
-        return redirect(url_for("applications.settings", application_id=application.id))
+
+        flash("application_environment_members_updated")
+
+        return redirect(
+            url_for(
+                "applications.settings",
+                application_id=application.id,
+                fragment="application-environments",
+                _anchor="application-environments",
+            )
+        )
     else:
         # TODO: Create a better pattern to handle when a form doesn't validate
         # if a user is submitting the data via the web page then they
diff --git a/atst/utils/flash.py b/atst/utils/flash.py
index f2b07ed6..c411e22e 100644
--- a/atst/utils/flash.py
+++ b/atst/utils/flash.py
@@ -7,6 +7,11 @@ MESSAGES = {
         "message_template": 'The environment "{{ environment_name }}" has been deleted',
         "category": "success",
     },
+    "application_environment_members_updated": {
+        "title_template": "Application environment members updated",
+        "message_template": "Application environment members have been updated",
+        "category": "success",
+    },
     "application_environments_updated": {
         "title_template": "Application environments updated",
         "message_template": "Application environments have been updated",
diff --git a/js/components/toggler.js b/js/components/toggler.js
index f1c34c96..2f1c1f0b 100644
--- a/js/components/toggler.js
+++ b/js/components/toggler.js
@@ -8,6 +8,7 @@ export default {
   mixins: [FormMixin],
 
   components: {
+    optionsinput,
     textinput,
     optionsinput,
   },
diff --git a/styles/sections/_application_edit.scss b/styles/sections/_application_edit.scss
index a24d9373..846ae3b1 100644
--- a/styles/sections/_application_edit.scss
+++ b/styles/sections/_application_edit.scss
@@ -25,11 +25,14 @@
 .app-team-settings-link {
   font-size: $small-font-size;
   font-weight: $font-normal;
-  padding-left: $gap * 2;
+}
+
+.environment-roles {
+  padding: 0 ($gap * 3) ($gap * 3);
 }
 
 .environment-role {
-  padding: $gap * 3;
+  padding: ($gap * 2) 0;
 
   h4 {
     margin-bottom: $gap / 4;
@@ -50,10 +53,35 @@
       margin: $gap;
       white-space: nowrap;
       width: 20rem;
+      position: relative;
 
       &.unassigned {
         border: solid 1px $color-gray-light;
       }
+
+      .icon-link {
+        padding: 0;
+      }
+
+      .environment-role__user-field {
+        position: absolute;
+        background-color: $color-white;
+        margin-top: $gap * 2;
+        padding: $gap;
+        left: -0.1rem;
+        border: solid 1px $color-gray-light;
+        width: 20rem;
+        z-index: 3;
+
+        .usa-input {
+          margin: 0;
+
+          li {
+            background-color: white;
+            border: none;
+          }
+        }
+      }
     }
 
     .environment-role__no-user {
@@ -94,3 +122,19 @@
   font-weight: $font-normal;
   color: $color-gray-medium;
 }
+
+.application-list-item {
+  .usa-button-primary {
+    width: $search-button-width * 2;
+  }
+
+  .action-group-cancel {
+    position: relative;
+
+    .action-group-cancel__action {
+      position: absolute;
+      right: ($search-button-width * 2) + ($gap * 2);
+      top: -($gap * 8);
+    }
+  }
+}
diff --git a/templates/components/toggle_list.html b/templates/components/toggle_list.html
index 08526c5a..64f85b66 100644
--- a/templates/components/toggle_list.html
+++ b/templates/components/toggle_list.html
@@ -9,8 +9,8 @@
   </span>
 {% endmacro %}
 
-{% macro ToggleSection(section_name) %}
-  <div v-show="selectedSection === '{{ section_name }}'">
+{% macro ToggleSection(section_name, classes) %}
+  <div v-show="selectedSection === '{{ section_name }}'" class='{{ classes }}'>
     {{ caller() }}
   </div>
 {% endmacro %}
diff --git a/templates/fragments/applications/edit_environments.html b/templates/fragments/applications/edit_environments.html
index 05b2ff1d..776731e3 100644
--- a/templates/fragments/applications/edit_environments.html
+++ b/templates/fragments/applications/edit_environments.html
@@ -1,11 +1,12 @@
 {% from "components/delete_confirmation.html" import DeleteConfirmation %}
 {% from "components/icon.html" import Icon %}
 {% from "components/modal.html" import Modal %}
+{% from "components/options_input.html" import OptionsInput %}
 {% from "components/save_button.html" import SaveButton %}
 {% from "components/text_input.html" import TextInput %}
 {% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
 
-{% macro RolePanel(users=[], role='no_access') %}
+{% macro RolePanel(users=[], role='no_access', members_form=[]) %}
   {% if role == 'no_access' %}
     {% set role = 'Unassigned (No Access)' %}
     {% set unassigned = True %}
@@ -15,8 +16,31 @@
     <h4>{{ role }}</h4>
       <ul class='environment-role__users'>
         {% for user in users %}
+          {% set section_name = "env_member_{}".format(user.user_id) %}
+
           <li class="environment-role__user {{ 'unassigned' if unassigned }}">
-            {{ user.name }}{{ Icon('edit', classes="icon--medium right") }}
+            {{ user.name }}
+            <span class="icon-link right">
+              {% set edit_env_members_button %}
+                {{ Icon('edit', classes="icon--medium") }}
+              {% endset %}
+
+              {{
+                ToggleButton(
+                  open_html=edit_env_members_button,
+                  close_html=edit_env_members_button,
+                  section_name=section_name
+                )
+              }}
+            </span>
+            {% call ToggleSection(section_name=section_name, classes="environment-role__user-field") %}
+                {% for member in members_form %}
+                  {% if member.user_id.data == user.user_id %}
+                    {{ OptionsInput(member.role, label=False) }}
+                    {{ member.user_id() }}
+                  {% endif %}
+                {% endfor %}
+            {% endcall %}
           </li>
         {% endfor %}
 
@@ -101,11 +125,30 @@
               </div>
             </div>
 
-            {% call ToggleSection(section_name="members") %}
+            {% call ToggleSection(section_name="members", classes="environment-roles") %}
                 <div class='app-team-settings-link'>Need to add someone new to the team? <a href='{{ url_for("applications.team", application_id=application.id) }}'>Jump to Team Settings</a></div>
-                {% for role, members in members_by_role.items() %}
-                  {{ RolePanel(users=members, role=role) }}
-                {% endfor %}
+                <toggler inline-template>
+                  {% set members_form = env['members_form'] %}
+                  <form action="{{ url_for('applications.update_env_roles', environment_id=env['id']) }}" method="post">
+                    {{ members_form.csrf_token }}
+                    {% for role, members in members_by_role.items() %}
+                      {{ RolePanel(users=members, role=role, members_form=env['members_form']['team_roles']) }}
+                    {% endfor %}
+                    {{ env['members_form'].env_id() }}
+                    <div class='action-group'>
+                      {{
+                        SaveButton(
+                          text=("portfolios.applications.update_button_text" | translate)
+                        )
+                      }}
+                    </div>
+                  </form>
+                </toggler>
+                <div class='action-group-cancel'>
+                  <a class='action-group-cancel__action icon-link icon-link--default' v-on:click="toggleSection('members')">
+                    {{ "common.cancel" | translate }}
+                  </a>
+                </div>
             {% endcall %}
 
             {% call ToggleSection(section_name="edit") %}
diff --git a/tests/domain/test_environments.py b/tests/domain/test_environments.py
index 1db1b437..315397a4 100644
--- a/tests/domain/test_environments.py
+++ b/tests/domain/test_environments.py
@@ -39,7 +39,9 @@ def test_update_env_role_no_access():
         user=env_role.user, application=env_role.environment.application
     )
 
-    assert Environments.update_env_role(env_role.environment, env_role.user, None)
+    assert Environments.update_env_role(
+        env_role.environment, env_role.user, "no_access"
+    )
     assert not EnvironmentRoles.get(env_role.user.id, env_role.environment.id)
 
 
@@ -90,7 +92,7 @@ def test_update_env_roles_by_environment():
         {
             "user_id": env_role_3.user.id,
             "name": env_role_3.user.full_name,
-            "role": None,
+            "role": "no_access",
         },
     ]
 
@@ -125,7 +127,7 @@ def test_update_env_roles_by_member():
         {"id": dev.id, "role": CSPRole.NETWORK_ADMIN.value},
         {"id": staging.id, "role": CSPRole.BUSINESS_READ.value},
         {"id": prod.id, "role": CSPRole.TECHNICAL_READ.value},
-        {"id": testing.id, "role": None},
+        {"id": testing.id, "role": "no_access"},
     ]
 
     Environments.update_env_roles_by_member(user, env_roles)
diff --git a/tests/routes/applications/test_settings.py b/tests/routes/applications/test_settings.py
index d335e4bb..15f8b3c7 100644
--- a/tests/routes/applications/test_settings.py
+++ b/tests/routes/applications/test_settings.py
@@ -123,13 +123,13 @@ def test_edit_application_environments_obj(app, client, user_session):
         assert isinstance(env_obj["members_form"], EnvironmentRolesForm)
         assert env_obj["members"] == {
             "no_access": [
-                {"name": app_role.user.full_name, "user_id": app_role.user_id}
+                {"user_id": app_role.user_id, "name": app_role.user.full_name}
             ],
             CSPRole.BASIC_ACCESS.value: [
-                {"name": env_role1.user.full_name, "user_id": env_role1.user_id}
+                {"user_id": env_role1.user_id, "name": env_role1.user.full_name}
             ],
             CSPRole.NETWORK_ADMIN.value: [
-                {"name": env_role2.user.full_name, "user_id": env_role2.user_id}
+                {"user_id": env_role2.user_id, "name": env_role2.user.full_name}
             ],
             CSPRole.BUSINESS_READ.value: [],
             CSPRole.TECHNICAL_READ.value: [],
@@ -236,16 +236,12 @@ def test_update_team_env_roles(client, user_session):
     form_data = {
         "env_id": environment.id,
         "team_roles-0-user_id": env_role_1.user.id,
-        "team_roles-0-name": env_role_1.user.full_name,
         "team_roles-0-role": CSPRole.NETWORK_ADMIN.value,
         "team_roles-1-user_id": env_role_2.user.id,
-        "team_roles-1-name": env_role_2.user.full_name,
         "team_roles-1-role": CSPRole.BASIC_ACCESS.value,
         "team_roles-2-user_id": env_role_3.user.id,
-        "team_roles-2-name": env_role_3.user.full_name,
-        "team_roles-2-role": "",
+        "team_roles-2-role": "no_access",
         "team_roles-3-user_id": app_role.user.id,
-        "team_roles-3-name": app_role.user.full_name,
         "team_roles-3-role": CSPRole.TECHNICAL_READ.value,
     }
 
diff --git a/tests/test_access.py b/tests/test_access.py
index 43d4a5f4..84f1d167 100644
--- a/tests/test_access.py
+++ b/tests/test_access.py
@@ -16,7 +16,7 @@ from tests.factories import (
     ApplicationRoleFactory,
     EnvironmentFactory,
     EnvironmentRoleFactory,
-    InvitationFactory,
+    PortfolioInvitationFactory,
     PortfolioFactory,
     PortfolioRoleFactory,
     TaskOrderFactory,

From addf2e97a1ffeb841b6867ebd0f06de8c5aa93a8 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Mon, 6 May 2019 13:00:01 -0400
Subject: [PATCH 04/14] Update form to nest all envs in one form

---
 atst/domain/environments.py                   |  23 +++-
 atst/forms/app_settings.py                    |  22 +++-
 atst/models/environment.py                    |   2 +-
 atst/routes/applications/settings.py          |  75 ++++++------
 styles/sections/_application_edit.scss        |   2 +-
 .../applications/edit_environments.html       |  40 +++----
 .../applications/read_only_environments.html  |   6 +-
 tests/domain/test_environments.py             |  58 ++++++++-
 tests/routes/applications/test_settings.py    | 111 ++++++++++++++----
 9 files changed, 244 insertions(+), 95 deletions(-)

diff --git a/atst/domain/environments.py b/atst/domain/environments.py
index 50484bad..2bb0e60f 100644
--- a/atst/domain/environments.py
+++ b/atst/domain/environments.py
@@ -73,7 +73,7 @@ class Environments(object):
     def update_env_role(cls, environment, user, new_role):
         updated = False
 
-        if new_role == "no_access":
+        if new_role == None:
             updated = EnvironmentRoles.delete(user.id, environment.id)
         else:
             env_role = EnvironmentRoles.get(user.id, environment.id)
@@ -113,6 +113,27 @@ class Environments(object):
                 environment=environment, user=member, new_role=new_role
             )
 
+    @classmethod
+    def get_members_by_role(cls, env, role):
+        env_roles = (
+            db.session.query(EnvironmentRole)
+            .filter(EnvironmentRole.environment_id == env.id)
+            .filter(EnvironmentRole.role == role)
+            .all()
+        )
+
+        members_list = []
+        for env_role in env_roles:
+            members_list.append(
+                {
+                    "user_id": env_role.user_id,
+                    "user_name": env_role.user.full_name,
+                    "role": role,
+                }
+            )
+
+        return members_list
+
     @classmethod
     def revoke_access(cls, environment, target_user):
         EnvironmentRoles.delete(environment.id, target_user.id)
diff --git a/atst/forms/app_settings.py b/atst/forms/app_settings.py
index c6320371..094c1fb6 100644
--- a/atst/forms/app_settings.py
+++ b/atst/forms/app_settings.py
@@ -1,21 +1,33 @@
 from flask_wtf import FlaskForm
-from wtforms.fields import FieldList, FormField, HiddenField, RadioField
+from wtforms.fields import FieldList, FormField, HiddenField, RadioField, StringField
 
 from .forms import BaseForm
 from .data import ENV_ROLES
 
 
-class EnvMemberRoleForm(FlaskForm):
+class MemberForm(FlaskForm):
     user_id = HiddenField()
+    user_name = StringField()
     role = RadioField(choices=ENV_ROLES, default="no_access")
 
     @property
     def data(self):
         _data = super().data
-        _data.pop("csrf_token", None)
+        for field in _data:
+            if field == "role" and _data[field] == "no_access":
+                _data[field] = None
         return _data
 
 
-class EnvironmentRolesForm(BaseForm):
-    team_roles = FieldList(FormField(EnvMemberRoleForm))
+class RoleForm(FlaskForm):
+    role = HiddenField()
+    members = FieldList(FormField(MemberForm))
+
+
+class EnvironmentRolesForm(FlaskForm):
+    team_roles = FieldList(FormField(RoleForm))
     env_id = HiddenField()
+
+
+class AppEnvRolesForm(BaseForm):
+    envs = FieldList(FormField(EnvironmentRolesForm))
diff --git a/atst/models/environment.py b/atst/models/environment.py
index 410d9e91..1817517b 100644
--- a/atst/models/environment.py
+++ b/atst/models/environment.py
@@ -21,7 +21,7 @@ class Environment(
 
     @property
     def users(self):
-        return [r.user for r in self.roles]
+        return {r.user for r in self.roles}
 
     @property
     def num_users(self):
diff --git a/atst/routes/applications/settings.py b/atst/routes/applications/settings.py
index 283dfce4..f363487e 100644
--- a/atst/routes/applications/settings.py
+++ b/atst/routes/applications/settings.py
@@ -1,10 +1,9 @@
 from flask import redirect, render_template, request as http_request, url_for
 
 from . import applications_bp
-from atst.domain.environment_roles import EnvironmentRoles
 from atst.domain.environments import Environments
 from atst.domain.applications import Applications
-from atst.forms.app_settings import EnvironmentRolesForm
+from atst.forms.app_settings import AppEnvRolesForm
 from atst.forms.application import ApplicationForm, EditEnvironmentForm
 from atst.domain.authz.decorator import user_can_access_decorator as user_can
 from atst.models.environment_role import CSPRole
@@ -20,8 +19,8 @@ def get_environments_obj_for_app(application):
             "id": env.id,
             "name": env.name,
             "edit_form": EditEnvironmentForm(obj=env),
-            "members_form": EnvironmentRolesForm(data=data_for_env_members_form(env)),
-            "members": sort_env_users_by_role(env),
+            "member_count": len(env.users),
+            "members": [user.full_name for user in env.users],
         }
         environments_obj.append(env_data)
 
@@ -29,33 +28,34 @@ def get_environments_obj_for_app(application):
 
 
 def sort_env_users_by_role(env):
-    users_dict = {"no_access": []}
+    users_list = []
+    no_access_users = env.application.users - env.users
+    no_access_list = [
+        {"user_id": user.id, "user_name": user.full_name, "role": "no_access"}
+        for user in no_access_users
+    ]
+    users_list.append({"role": "no_access", "members": no_access_list})
+
     for role in CSPRole:
-        users_dict[role.value] = []
+        users_list.append(
+            {
+                "role": role.value,
+                "members": Environments.get_members_by_role(env, role.value),
+            }
+        )
 
-    for user in env.application.users:
-        if user in env.users:
-            role = EnvironmentRoles.get(user.id, env.id)
-            users_dict[role.displayname].append(
-                {"name": user.full_name, "user_id": user.id}
-            )
-        else:
-            users_dict["no_access"].append({"name": user.full_name, "user_id": user.id})
-
-    return users_dict
+    return users_list
 
 
-def data_for_env_members_form(environment):
-    data = {"env_id": environment.id, "team_roles": []}
-    for user in environment.application.users:
-        env_role = EnvironmentRoles.get(user.id, environment.id)
-
-        if env_role:
-            role = env_role.displayname
-        else:
-            role = "no_access"
-
-        data["team_roles"].append({"user_id": user.id, "role": role})
+def data_for_app_env_roles_form(application):
+    data = {"envs": []}
+    for environment in application.environments:
+        data["envs"].append(
+            {
+                "env_id": environment.id,
+                "team_roles": sort_env_users_by_role(environment),
+            }
+        )
 
     return data
 
@@ -73,12 +73,15 @@ def check_users_are_in_application(user_ids, application):
 def settings(application_id):
     application = Applications.get(application_id)
     form = ApplicationForm(name=application.name, description=application.description)
+    environments_obj = get_environments_obj_for_app(application=application)
+    members_form = AppEnvRolesForm(data=data_for_app_env_roles_form(application))
 
     return render_template(
         "portfolios/applications/settings.html",
         application=application,
         form=form,
-        environments_obj=get_environments_obj_for_app(application=application),
+        environments_obj=environments_obj,
+        members_form=members_form,
     )
 
 
@@ -146,13 +149,17 @@ def update(application_id):
 def update_env_roles(environment_id):
     environment = Environments.get(environment_id)
     application = environment.application
-    form = EnvironmentRolesForm(formdata=http_request.form)
+    form = AppEnvRolesForm(formdata=http_request.form)
 
     if form.validate():
-
+        env_data = []
         try:
-            user_ids = [user["user_id"] for user in form.data["team_roles"]]
-            check_users_are_in_application(user_ids, application)
+            for env in form.envs.data:
+                if env["env_id"] == str(environment.id):
+                    for role in env["team_roles"]:
+                        user_ids = [user["user_id"] for user in role["members"]]
+                        check_users_are_in_application(user_ids, application)
+                        env_data = env_data + role["members"]
         except NotFoundError as err:
             app.logger.warning(
                 "User {} requested environment role change for unauthorized user {} in application {}.".format(
@@ -162,9 +169,9 @@ def update_env_roles(environment_id):
             )
 
             raise (err)
-        env_data = form.data
+
         Environments.update_env_roles_by_environment(
-            environment_id=environment_id, team_roles=env_data["team_roles"]
+            environment_id=environment_id, team_roles=env_data
         )
 
         flash("application_environment_members_updated")
diff --git a/styles/sections/_application_edit.scss b/styles/sections/_application_edit.scss
index 846ae3b1..73a32c7e 100644
--- a/styles/sections/_application_edit.scss
+++ b/styles/sections/_application_edit.scss
@@ -133,7 +133,7 @@
 
     .action-group-cancel__action {
       position: absolute;
-      right: ($search-button-width * 2) + ($gap * 2);
+      right: $search-button-width * 2 + $gap * 2;
       top: -($gap * 8);
     }
   }
diff --git a/templates/fragments/applications/edit_environments.html b/templates/fragments/applications/edit_environments.html
index 776731e3..2d64a0f2 100644
--- a/templates/fragments/applications/edit_environments.html
+++ b/templates/fragments/applications/edit_environments.html
@@ -6,7 +6,8 @@
 {% from "components/text_input.html" import TextInput %}
 {% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
 
-{% macro RolePanel(users=[], role='no_access', members_form=[]) %}
+{% macro RolePanel(role_form) %}
+  {% set role = role_form.role.data %}
   {% if role == 'no_access' %}
     {% set role = 'Unassigned (No Access)' %}
     {% set unassigned = True %}
@@ -15,11 +16,11 @@
   <div class='environment-role'>
     <h4>{{ role }}</h4>
       <ul class='environment-role__users'>
-        {% for user in users %}
-          {% set section_name = "env_member_{}".format(user.user_id) %}
+        {% for member in role_form.members %}
+          {% set section_name = "env_member_{}".format(member.user_id) %}
 
           <li class="environment-role__user {{ 'unassigned' if unassigned }}">
-            {{ user.name }}
+            {{ member.user_name.data }}
             <span class="icon-link right">
               {% set edit_env_members_button %}
                 {{ Icon('edit', classes="icon--medium") }}
@@ -34,17 +35,13 @@
               }}
             </span>
             {% call ToggleSection(section_name=section_name, classes="environment-role__user-field") %}
-                {% for member in members_form %}
-                  {% if member.user_id.data == user.user_id %}
-                    {{ OptionsInput(member.role, label=False) }}
-                    {{ member.user_id() }}
-                  {% endif %}
-                {% endfor %}
+              {{ OptionsInput(member.role, label=False) }}
+              {{ member.user_id() }}
             {% endcall %}
           </li>
         {% endfor %}
 
-        {% if users == [] %}
+        {% if role_form.members.data == [] %}
           <div class='environment-role__no-user'>Currently no members are in this role</div>
         {% endif %}
       </ul>
@@ -74,10 +71,6 @@
 
     <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'] %}
         {% set delete_environment_modal_id = "delete_modal_environment{}".format(env['id']) %}
 
         <toggler inline-template {% if edit_form.errors %}initial-selected-section="edit"{% endif %}>
@@ -108,11 +101,11 @@
               </div>
               <div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
                 {% set open_members_button %}
-                {{ "common.members" | translate }} ({{ member_count }}) {{ Icon('caret_down') }}
+                  {{ "common.members" | translate }} ({{ env['member_count'] }}) {{ Icon('caret_down') }}
                 {% endset %}
 
                 {% set close_members_button %}
-                {{ "common.members" | translate }} ({{ member_count }}) {{ Icon('caret_up') }}
+                  {{ "common.members" | translate }} ({{ env['member_count'] }}) {{ Icon('caret_up') }}
                 {% endset %}
 
                 {{
@@ -128,13 +121,16 @@
             {% call ToggleSection(section_name="members", classes="environment-roles") %}
                 <div class='app-team-settings-link'>Need to add someone new to the team? <a href='{{ url_for("applications.team", application_id=application.id) }}'>Jump to Team Settings</a></div>
                 <toggler inline-template>
-                  {% set members_form = env['members_form'] %}
                   <form action="{{ url_for('applications.update_env_roles', environment_id=env['id']) }}" method="post">
                     {{ members_form.csrf_token }}
-                    {% for role, members in members_by_role.items() %}
-                      {{ RolePanel(users=members, role=role, members_form=env['members_form']['team_roles']) }}
+                    {% for env_form in members_form.envs %}
+                      {{ env_form.env_id() }}
+                      {% if env_form.env_id.data == env['id'] %}
+                        {% for role_form in env_form.team_roles %}
+                          {{ RolePanel(role_form) }}
+                        {% endfor %}
+                      {% endif %}
                     {% endfor %}
-                    {{ env['members_form'].env_id() }}
                     <div class='action-group'>
                       {{
                         SaveButton(
@@ -199,7 +195,7 @@
   <div class="action-group">
     <a class='icon-link'>
       {{ "portfolios.applications.add_environment" | translate }}
-      {{ Icon('plus-circle-solid') }}
+      {{ Icon('plus') }}
     </a>
   </div>
 </div>
diff --git a/templates/fragments/applications/read_only_environments.html b/templates/fragments/applications/read_only_environments.html
index 4a91fb3f..90181a2d 100644
--- a/templates/fragments/applications/read_only_environments.html
+++ b/templates/fragments/applications/read_only_environments.html
@@ -26,11 +26,11 @@
 
               <span class="icon-link icon-link--large accordion-table__item__toggler">
                 {% set open_members_button %}
-                  {{ "common.members" | translate }} ({{ env['members'] | length }}) {{ Icon('caret_down') }}
+                  {{ "common.members" | translate }} ({{ env['member_count'] }}) {{ Icon('caret_down') }}
                 {% endset %}
 
                 {% set close_members_button %}
-                  {{ "common.members" | translate }} ({{ env['members'] | length }}) {{ Icon('caret_up') }}
+                  {{ "common.members" | translate }} ({{ env['member_count'] }}) {{ Icon('caret_up') }}
                 {% endset %}
 
                 {{
@@ -47,7 +47,7 @@
               <ul>
                 {% for member in env['members'] %}
                 <li class="accordion-table__item__expanded">
-                  <div class="accordion-table__item__expanded_first">{{ member.name }}</div>
+                  <div class="accordion-table__item__expanded_first">{{ member }}</div>
                 </li>
                 {% endfor %}
               </ul>
diff --git a/tests/domain/test_environments.py b/tests/domain/test_environments.py
index 315397a4..8eb66620 100644
--- a/tests/domain/test_environments.py
+++ b/tests/domain/test_environments.py
@@ -39,9 +39,7 @@ def test_update_env_role_no_access():
         user=env_role.user, application=env_role.environment.application
     )
 
-    assert Environments.update_env_role(
-        env_role.environment, env_role.user, "no_access"
-    )
+    assert Environments.update_env_role(env_role.environment, env_role.user, None)
     assert not EnvironmentRoles.get(env_role.user.id, env_role.environment.id)
 
 
@@ -92,7 +90,7 @@ def test_update_env_roles_by_environment():
         {
             "user_id": env_role_3.user.id,
             "name": env_role_3.user.full_name,
-            "role": "no_access",
+            "role": None,
         },
     ]
 
@@ -127,7 +125,7 @@ def test_update_env_roles_by_member():
         {"id": dev.id, "role": CSPRole.NETWORK_ADMIN.value},
         {"id": staging.id, "role": CSPRole.BUSINESS_READ.value},
         {"id": prod.id, "role": CSPRole.TECHNICAL_READ.value},
-        {"id": testing.id, "role": "no_access"},
+        {"id": testing.id, "role": None},
     ]
 
     Environments.update_env_roles_by_member(user, env_roles)
@@ -138,6 +136,56 @@ def test_update_env_roles_by_member():
     assert not EnvironmentRoles.get(user.id, testing.id)
 
 
+def test_get_members_by_role(db):
+    environment = EnvironmentFactory.create()
+    env_role_1 = EnvironmentRoleFactory.create(
+        environment=environment, role=CSPRole.BASIC_ACCESS.value
+    )
+    env_role_2 = EnvironmentRoleFactory.create(
+        environment=environment, role=CSPRole.TECHNICAL_READ.value
+    )
+    env_role_3 = EnvironmentRoleFactory.create(
+        environment=environment, role=CSPRole.TECHNICAL_READ.value
+    )
+    rando_env = EnvironmentFactory.create()
+    rando_env_role = EnvironmentRoleFactory.create(
+        environment=rando_env, role=CSPRole.BASIC_ACCESS.value
+    )
+
+    basic_access_members = Environments.get_members_by_role(
+        environment, CSPRole.BASIC_ACCESS.value
+    )
+    assert basic_access_members == [
+        {
+            "user_id": env_role_1.user_id,
+            "user_name": env_role_1.user.full_name,
+            "role": CSPRole.BASIC_ACCESS.value,
+        }
+    ]
+    assert {
+        "user_id": rando_env_role.user_id,
+        "user_name": rando_env_role.user.full_name,
+        "role": CSPRole.BASIC_ACCESS.value,
+    } not in basic_access_members
+    assert Environments.get_members_by_role(
+        environment, CSPRole.TECHNICAL_READ.value
+    ) == [
+        {
+            "user_id": env_role_2.user_id,
+            "user_name": env_role_2.user.full_name,
+            "role": CSPRole.TECHNICAL_READ.value,
+        },
+        {
+            "user_id": env_role_3.user_id,
+            "user_name": env_role_3.user.full_name,
+            "role": CSPRole.TECHNICAL_READ.value,
+        },
+    ]
+    assert (
+        Environments.get_members_by_role(environment, CSPRole.BUSINESS_READ.value) == []
+    )
+
+
 def test_get_scoped_environments(db):
     developer = UserFactory.create()
     portfolio = PortfolioFactory.create(
diff --git a/tests/routes/applications/test_settings.py b/tests/routes/applications/test_settings.py
index 15f8b3c7..9ef8b269 100644
--- a/tests/routes/applications/test_settings.py
+++ b/tests/routes/applications/test_settings.py
@@ -22,7 +22,7 @@ from atst.domain.exceptions import NotFoundError
 from atst.models.environment_role import CSPRole
 from atst.models.portfolio_role import Status as PortfolioRoleStatus
 from atst.forms.application import EditEnvironmentForm
-from atst.forms.app_settings import EnvironmentRolesForm
+from atst.forms.app_settings import AppEnvRolesForm
 
 from tests.utils import captured_templates
 
@@ -116,23 +116,88 @@ def test_edit_application_environments_obj(app, client, user_session):
         assert response.status_code == 200
         _, context = templates[0]
 
+        assert isinstance(context["members_form"], AppEnvRolesForm)
         env_obj = context["environments_obj"][0]
         assert env_obj["name"] == env.name
         assert env_obj["id"] == env.id
         assert isinstance(env_obj["edit_form"], EditEnvironmentForm)
-        assert isinstance(env_obj["members_form"], EnvironmentRolesForm)
-        assert env_obj["members"] == {
-            "no_access": [
-                {"user_id": app_role.user_id, "name": app_role.user.full_name}
-            ],
-            CSPRole.BASIC_ACCESS.value: [
-                {"user_id": env_role1.user_id, "name": env_role1.user.full_name}
-            ],
-            CSPRole.NETWORK_ADMIN.value: [
-                {"user_id": env_role2.user_id, "name": env_role2.user.full_name}
-            ],
-            CSPRole.BUSINESS_READ.value: [],
-            CSPRole.TECHNICAL_READ.value: [],
+        assert (
+            env_obj["members"].sort()
+            == [env_role1.user.full_name, env_role2.user.full_name].sort()
+        )
+
+
+def test_data_for_app_env_roles_form(app, client, user_session):
+    portfolio = PortfolioFactory.create()
+    application = Applications.create(
+        portfolio,
+        "Snazzy Application",
+        "A new application for me and my friends",
+        {"env"},
+    )
+    env = application.environments[0]
+    app_role = ApplicationRoleFactory.create(application=application)
+    env_role1 = EnvironmentRoleFactory.create(
+        environment=env, role=CSPRole.BASIC_ACCESS.value
+    )
+    ApplicationRoleFactory.create(application=application, user=env_role1.user)
+    env_role2 = EnvironmentRoleFactory.create(
+        environment=env, role=CSPRole.NETWORK_ADMIN.value
+    )
+    ApplicationRoleFactory.create(application=application, user=env_role2.user)
+
+    user_session(portfolio.owner)
+
+    with captured_templates(app) as templates:
+        response = app.test_client().get(
+            url_for("applications.settings", application_id=application.id)
+        )
+
+        assert response.status_code == 200
+        _, context = templates[0]
+
+        members_form = context["members_form"]
+        assert isinstance(members_form, AppEnvRolesForm)
+        assert members_form.data == {
+            "envs": [
+                {
+                    "env_id": env.id,
+                    "team_roles": [
+                        {
+                            "role": "no_access",
+                            "members": [
+                                {
+                                    "user_id": app_role.user_id,
+                                    "user_name": app_role.user.full_name,
+                                    "role": None,
+                                }
+                            ],
+                        },
+                        {
+                            "role": CSPRole.BASIC_ACCESS.value,
+                            "members": [
+                                {
+                                    "user_id": env_role1.user_id,
+                                    "user_name": env_role1.user.full_name,
+                                    "role": CSPRole.BASIC_ACCESS.value,
+                                }
+                            ],
+                        },
+                        {
+                            "role": CSPRole.NETWORK_ADMIN.value,
+                            "members": [
+                                {
+                                    "user_id": env_role2.user_id,
+                                    "user_name": env_role2.user.full_name,
+                                    "role": CSPRole.NETWORK_ADMIN.value,
+                                }
+                            ],
+                        },
+                        {"role": CSPRole.BUSINESS_READ.value, "members": []},
+                        {"role": CSPRole.TECHNICAL_READ.value, "members": []},
+                    ],
+                }
+            ]
         }
 
 
@@ -234,15 +299,15 @@ def test_update_team_env_roles(client, user_session):
 
     app_role = ApplicationRoleFactory.create(application=application)
     form_data = {
-        "env_id": environment.id,
-        "team_roles-0-user_id": env_role_1.user.id,
-        "team_roles-0-role": CSPRole.NETWORK_ADMIN.value,
-        "team_roles-1-user_id": env_role_2.user.id,
-        "team_roles-1-role": CSPRole.BASIC_ACCESS.value,
-        "team_roles-2-user_id": env_role_3.user.id,
-        "team_roles-2-role": "no_access",
-        "team_roles-3-user_id": app_role.user.id,
-        "team_roles-3-role": CSPRole.TECHNICAL_READ.value,
+        "envs-0-env_id": environment.id,
+        "envs-0-team_roles-0-members-0-user_id": app_role.user.id,
+        "envs-0-team_roles-0-members-0-role": CSPRole.TECHNICAL_READ.value,
+        "envs-0-team_roles-1-members-0-user_id": env_role_1.user.id,
+        "envs-0-team_roles-1-members-0-role": CSPRole.NETWORK_ADMIN.value,
+        "envs-0-team_roles-1-members-1-user_id": env_role_2.user.id,
+        "envs-0-team_roles-1-members-1-role": CSPRole.BASIC_ACCESS.value,
+        "envs-0-team_roles-1-members-2-user_id": env_role_3.user.id,
+        "envs-0-team_roles-1-members-2-role": "no_access",
     }
 
     user_session(application.portfolio.owner)

From 319cc17c1ce178cca108219b8d0eaff8d4384a76 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Tue, 7 May 2019 16:59:33 -0400
Subject: [PATCH 05/14] Start vue component for edit-environment-role

---
 atst/domain/environments.py                   |   2 +-
 atst/routes/applications/settings.py          |  15 ++-
 js/components/forms/edit_environment_role.js  | 101 ++++++++++-------
 js/components/toggler.js                      |   9 ++
 styles/sections/_application_edit.scss        |   2 +-
 .../applications/edit_environments.html       | 107 ++++++++++++------
 tests/domain/test_environments.py             |   8 +-
 tests/routes/applications/test_settings.py    |   8 +-
 8 files changed, 172 insertions(+), 80 deletions(-)

diff --git a/atst/domain/environments.py b/atst/domain/environments.py
index 2bb0e60f..e0bd3fdb 100644
--- a/atst/domain/environments.py
+++ b/atst/domain/environments.py
@@ -126,7 +126,7 @@ class Environments(object):
         for env_role in env_roles:
             members_list.append(
                 {
-                    "user_id": env_role.user_id,
+                    "user_id": str(env_role.user_id),
                     "user_name": env_role.user.full_name,
                     "role": role,
                 }
diff --git a/atst/routes/applications/settings.py b/atst/routes/applications/settings.py
index f363487e..f7198c54 100644
--- a/atst/routes/applications/settings.py
+++ b/atst/routes/applications/settings.py
@@ -31,7 +31,7 @@ def sort_env_users_by_role(env):
     users_list = []
     no_access_users = env.application.users - env.users
     no_access_list = [
-        {"user_id": user.id, "user_name": user.full_name, "role": "no_access"}
+        {"user_id": str(user.id), "user_name": user.full_name, "role": "no_access"}
         for user in no_access_users
     ]
     users_list.append({"role": "no_access", "members": no_access_list})
@@ -82,6 +82,8 @@ def settings(application_id):
         form=form,
         environments_obj=environments_obj,
         members_form=members_form,
+        active_toggler=http_request.args.get("active_toggler"),
+        active_toggler_section=http_request.args.get("active_toggler_section"),
     )
 
 
@@ -104,6 +106,8 @@ def update_environment(environment_id):
                 application_id=application.id,
                 fragment="application-environments",
                 _anchor="application-environments",
+                active_toggler=environment.id,
+                active_toggler_section="edit",
             )
         )
     else:
@@ -115,6 +119,11 @@ def update_environment(environment_id):
                     name=application.name, description=application.description
                 ),
                 environments_obj=get_environments_obj_for_app(application=application),
+                members_form=AppEnvRolesForm(
+                    data=data_for_app_env_roles_form(application)
+                ),
+                active_toggler=environment.id,
+                active_toggler_section="edit",
             ),
             400,
         )
@@ -182,6 +191,8 @@ def update_env_roles(environment_id):
                 application_id=application.id,
                 fragment="application-environments",
                 _anchor="application-environments",
+                active_toggler=environment.id,
+                active_toggler_section="members",
             )
         )
     else:
@@ -195,6 +206,8 @@ def update_env_roles(environment_id):
                 name=application.name, description=application.description
             ),
             environments_obj=get_environments_obj_for_app(application=application),
+            active_toggler=environment.id,
+            active_toggler_section="edit",
         )
 
 
diff --git a/js/components/forms/edit_environment_role.js b/js/components/forms/edit_environment_role.js
index e9919f29..376fb039 100644
--- a/js/components/forms/edit_environment_role.js
+++ b/js/components/forms/edit_environment_role.js
@@ -1,63 +1,88 @@
 import FormMixin from '../../mixins/form'
-import textinput from '../text_input'
-import Selector from '../selector'
 import Modal from '../../mixins/modal'
-import toggler from '../toggler'
 
 export default {
   name: 'edit-environment-role',
 
-  mixins: [FormMixin, Modal],
-
-  components: {
-    toggler,
-    Modal,
-    Selector,
-    textinput,
-  },
+  mixins: [FormMixin],
 
   props: {
-    choices: Array,
-    initialData: String,
-    applicationId: String,
+    initialRoles: Array,
   },
 
   data: function() {
     return {
-      new_role: this.initialData,
+      selectedSection: null,
+      roles: this.sanitizeValues(this.initialRoles),
     }
   },
 
-  mounted: function() {
-    this.$root.$on('revoke-' + this.applicationId, this.revoke)
-  },
-
   methods: {
-    change: function(e) {
-      this.new_role = e.target.value
+    sanitizeValues: function(roles) {
+      roles.forEach(role => {
+        role.members.forEach(member => {
+          if (member.role === null) {
+            member.role = 'no_access'
+          }
+        })
+      })
+      return roles
     },
-    cancel: function() {
-      this.new_role = this.initialData
-    },
-    revoke: function() {
-      this.new_role = ''
-    },
-  },
 
-  computed: {
-    displayName: function() {
-      const newRole = this.newRole
-      for (var arr in this.choices) {
-        if (this.choices[arr][0] == newRole) {
-          return this.choices[arr][1].name
+    checkNoAccess: function(role) {
+      return role === 'no_access'
+    },
+
+    toggleSection: function(sectionName) {
+      if (this.selectedSection === sectionName) {
+        this.selectedSection = null
+      } else {
+        this.selectedSection = sectionName
+      }
+    },
+
+    onInput: function(e) {
+      this.changed = true
+      this.updateRoles(e.target.attributes['user-id'].value, e.target.value)
+      this.showError = false
+      this.showValid = true
+    },
+
+    getUserInfo: function(userId) {
+      for (let role of this.roles) {
+        for (let member of role.members) {
+          if (member.user_id === userId) {
+            return member
+          }
         }
       }
     },
-    label_class: function() {
-      return this.newRole === '' ? 'label' : 'label label--success'
+
+    removeUser: function(userId) {
+      for (let role of this.roles) {
+        role.members = role.members.filter(member => {
+          return member.user_id !== userId
+        })
+        if (!role.members) {
+          role.members = []
+        }
+      }
     },
-    newRole: function() {
-      return this.new_role
+
+    addUser: function(userInfo, newRole) {
+      this.roles.forEach(role => {
+        if (role.role === newRole) {
+          userInfo.role = newRole
+          role.members.push(userInfo)
+        }
+      })
+    },
+
+    updateRoles: function(userId, newRole) {
+      var userInfo = this.getUserInfo(userId)
+      this.removeUser(userId)
+      this.addUser(userInfo, newRole)
+      this.toggleSection()
     },
   },
 }
diff --git a/js/components/toggler.js b/js/components/toggler.js
index 2f1c1f0b..e433b294 100644
--- a/js/components/toggler.js
+++ b/js/components/toggler.js
@@ -1,3 +1,4 @@
+import editEnvironmentRole from './forms/edit_environment_role'
 import FormMixin from '../mixins/form'
 import optionsinput from './options_input'
 import textinput from './text_input'
@@ -7,7 +8,15 @@ export default {
 
   mixins: [FormMixin],
 
+  props: {
+    initialSelectedSection: {
+      type: String,
+      default: null,
+    },
+  },
+
   components: {
+    editEnvironmentRole,
     optionsinput,
     textinput,
     optionsinput,
diff --git a/styles/sections/_application_edit.scss b/styles/sections/_application_edit.scss
index 73a32c7e..75027e93 100644
--- a/styles/sections/_application_edit.scss
+++ b/styles/sections/_application_edit.scss
@@ -77,7 +77,7 @@
           margin: 0;
 
           li {
-            background-color: white;
+            background-color: $color-white;
             border: none;
           }
         }
diff --git a/templates/fragments/applications/edit_environments.html b/templates/fragments/applications/edit_environments.html
index 2d64a0f2..fe25d41b 100644
--- a/templates/fragments/applications/edit_environments.html
+++ b/templates/fragments/applications/edit_environments.html
@@ -72,8 +72,9 @@
     <ul class="accordion-table__items">
       {% for env in environments_obj %}
         {% set delete_environment_modal_id = "delete_modal_environment{}".format(env['id']) %}
+        {% set edit_form = env['edit_form'] %}
 
-        <toggler inline-template {% if edit_form.errors %}initial-selected-section="edit"{% endif %}>
+        <toggler inline-template {% if active_toggler == (env['id'] | safe) %}initial-selected-section="{{ active_toggler_section }}"{% endif %}>
           <li class="accordion-table__item">
             <div class="accordion-table__item-content row">
               <div class="col col--grow">
@@ -82,15 +83,15 @@
               <div class="col col--grow">
                 <span class="icon-link">
                   {% set edit_environment_button %}
-                  {{ Icon('edit') }}
+                    {{ Icon('edit') }}
                   {% endset %}
 
                   {{
                   ToggleButton(
-                  open_html=edit_environment_button,
-                  close_html=edit_environment_button,
-                  section_name="edit"
-                  )
+                    open_html=edit_environment_button,
+                    close_html=edit_environment_button,
+                    section_name="edit"
+                    )
                   }}
                 </span>
               </div>
@@ -110,41 +111,83 @@
 
                 {{
                 ToggleButton(
-                open_html=open_members_button,
-                close_html=close_members_button,
-                section_name="members"
-                )
+                  open_html=open_members_button,
+                  close_html=close_members_button,
+                  section_name="members"
+                  )
                 }}
               </div>
             </div>
 
             {% call ToggleSection(section_name="members", classes="environment-roles") %}
-                <div class='app-team-settings-link'>Need to add someone new to the team? <a href='{{ url_for("applications.team", application_id=application.id) }}'>Jump to Team Settings</a></div>
-                <toggler inline-template>
+              {% for env_form in members_form.envs %}
+                {% if env_form.env_id.data == env['id'] %}
+                  <div class='app-team-settings-link'>
+                    Need to add someone new to the team? <a href='{{ url_for("applications.team", application_id=application.id) }}'>Jump to Team Settings</a>
+                  </div>
                   <form action="{{ url_for('applications.update_env_roles', environment_id=env['id']) }}" method="post">
                     {{ members_form.csrf_token }}
-                    {% for env_form in members_form.envs %}
-                      {{ env_form.env_id() }}
-                      {% if env_form.env_id.data == env['id'] %}
-                        {% for role_form in env_form.team_roles %}
-                          {{ RolePanel(role_form) }}
-                        {% endfor %}
-                      {% endif %}
-                    {% endfor %}
-                    <div class='action-group'>
-                      {{
-                        SaveButton(
-                          text=("portfolios.applications.update_button_text" | translate)
-                        )
-                      }}
+                    {{ env_form.env_id() }}
+                    <edit-environment-role inline-template v-bind:initial-roles='{{ env_form.team_roles.data | tojson }}'>
+                      <div>
+                        <div v-for='(role, roleindex) in roles' class='environment-role'>
+                          <h4 v-if='checkNoAccess(role.role)'>Unassigned (No Access)</h4>
+                          <h4 v-else v-html='role.role'></h4>
+                          <ul class='environment-role__users'>
+                            <div v-if="role.members && !role.members.length" class='environment-role__no-user'>Currently no members are in this role</div>
+                            <li v-for='(member, memberindex) in role.members' class="environment-role__user" v-bind:class="{'unassigned': checkNoAccess(member.role)}">
+                              <span v-html='member.user_name'>
+                              </span>
+                              <span v-on:click="toggleSection(member.user_id)" class="icon-link right">
+                                {{ Icon('edit', classes="icon--medium") }}
+                              </span>
+                              <div v-show="selectedSection === member.user_id" class='environment-role__user-field'>
+                                <div class="usa-input">
+                                  <fieldset data-ally-disabled="true" class="usa-input__choices" v-on:change="onInput">
+                                    <ul v-for='(role, roleinputindex) in roles' v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role'">
+                                      <li>
+                                        <input
+                                          v-bind:checked="member.role === role.role"
+                                          v-bind:name="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role'"
+                                          v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role-' + roleinputindex"
+                                          type="radio"
+                                          v-bind:user-id='member.user_id'
+                                          v-bind:value='role.role'>
+                                        <label
+                                          v-bind:for="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role-' + roleinputindex">
+                                          <span v-if='checkNoAccess(role.role)'>No Access</span>
+                                          <span v-else v-html='role.role'></span>
+                                        </label>
+                                      </li>
+                                    </ul>
+                                  </fieldset>
+                                </div>
+                              </div>
+                              <input
+                                v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-user_id'"
+                                v-bind:name="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-user_id'"
+                                type="hidden"
+                                v-bind:value='member.user_id'>
+                            </li>
+                          </ul>
+                        </div>
+                        <div class='action-group'>
+                          {{
+                            SaveButton(
+                              text=("portfolios.applications.update_button_text" | translate)
+                            )
+                          }}
+                        </div>
+                      </div>
+                    </edit-environment-role>
+                    <div class='action-group-cancel'>
+                      <a class='action-group-cancel__action icon-link icon-link--default' v-on:click="toggleSection('members')">
+                        {{ "common.cancel" | translate }}
+                      </a>
                     </div>
                   </form>
-                </toggler>
-                <div class='action-group-cancel'>
-                  <a class='action-group-cancel__action icon-link icon-link--default' v-on:click="toggleSection('members')">
-                    {{ "common.cancel" | translate }}
-                  </a>
-                </div>
+                {% endif %}
+              {% endfor %}
             {% endcall %}
 
             {% call ToggleSection(section_name="edit") %}
diff --git a/tests/domain/test_environments.py b/tests/domain/test_environments.py
index 8eb66620..8e633e3d 100644
--- a/tests/domain/test_environments.py
+++ b/tests/domain/test_environments.py
@@ -157,13 +157,13 @@ def test_get_members_by_role(db):
     )
     assert basic_access_members == [
         {
-            "user_id": env_role_1.user_id,
+            "user_id": str(env_role_1.user_id),
             "user_name": env_role_1.user.full_name,
             "role": CSPRole.BASIC_ACCESS.value,
         }
     ]
     assert {
-        "user_id": rando_env_role.user_id,
+        "user_id": str(rando_env_role.user_id),
         "user_name": rando_env_role.user.full_name,
         "role": CSPRole.BASIC_ACCESS.value,
     } not in basic_access_members
@@ -171,12 +171,12 @@ def test_get_members_by_role(db):
         environment, CSPRole.TECHNICAL_READ.value
     ) == [
         {
-            "user_id": env_role_2.user_id,
+            "user_id": str(env_role_2.user_id),
             "user_name": env_role_2.user.full_name,
             "role": CSPRole.TECHNICAL_READ.value,
         },
         {
-            "user_id": env_role_3.user_id,
+            "user_id": str(env_role_3.user_id),
             "user_name": env_role_3.user.full_name,
             "role": CSPRole.TECHNICAL_READ.value,
         },
diff --git a/tests/routes/applications/test_settings.py b/tests/routes/applications/test_settings.py
index 9ef8b269..438dbb1d 100644
--- a/tests/routes/applications/test_settings.py
+++ b/tests/routes/applications/test_settings.py
@@ -48,6 +48,8 @@ def test_updating_application_environments_success(client, user_session):
         _external=True,
         fragment="application-environments",
         _anchor="application-environments",
+        active_toggler=environment.id,
+        active_toggler_section="edit",
     )
     assert environment.name == "new name a"
 
@@ -167,7 +169,7 @@ def test_data_for_app_env_roles_form(app, client, user_session):
                             "role": "no_access",
                             "members": [
                                 {
-                                    "user_id": app_role.user_id,
+                                    "user_id": str(app_role.user_id),
                                     "user_name": app_role.user.full_name,
                                     "role": None,
                                 }
@@ -177,7 +179,7 @@ def test_data_for_app_env_roles_form(app, client, user_session):
                             "role": CSPRole.BASIC_ACCESS.value,
                             "members": [
                                 {
-                                    "user_id": env_role1.user_id,
+                                    "user_id": str(env_role1.user_id),
                                     "user_name": env_role1.user.full_name,
                                     "role": CSPRole.BASIC_ACCESS.value,
                                 }
@@ -187,7 +189,7 @@ def test_data_for_app_env_roles_form(app, client, user_session):
                             "role": CSPRole.NETWORK_ADMIN.value,
                             "members": [
                                 {
-                                    "user_id": env_role2.user_id,
+                                    "user_id": str(env_role2.user_id),
                                     "user_name": env_role2.user.full_name,
                                     "role": CSPRole.NETWORK_ADMIN.value,
                                 }

From 8c6aa77431246bb40191dc050e8bb69ca3e4a3f8 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Thu, 9 May 2019 14:05:24 -0400
Subject: [PATCH 06/14] Move edit env team form into its own file

---
 .../edit_environment_team_form.html           |  93 +++++++++++++++
 .../applications/edit_environments.html       | 110 +-----------------
 2 files changed, 94 insertions(+), 109 deletions(-)
 create mode 100644 templates/fragments/applications/edit_environment_team_form.html

diff --git a/templates/fragments/applications/edit_environment_team_form.html b/templates/fragments/applications/edit_environment_team_form.html
new file mode 100644
index 00000000..95505ed6
--- /dev/null
+++ b/templates/fragments/applications/edit_environment_team_form.html
@@ -0,0 +1,93 @@
+{% from "components/icon.html" import Icon %}
+{% from "components/save_button.html" import SaveButton %}
+
+
+{% for env_form in members_form.envs %}
+  {% if env_form.env_id.data == env['id'] %}
+    <div class='app-team-settings-link'>
+      Need to add someone new to the team?
+      <a href='{{ url_for("applications.team", application_id=application.id) }}'>
+        Jump to Team Settings
+      </a>
+    </div>
+    <form
+      action="{{ url_for('applications.update_env_roles', environment_id=env['id']) }}"
+      method="post">
+      {{ members_form.csrf_token }}
+      {{ env_form.env_id() }}
+      <edit-environment-role
+        inline-template
+        v-bind:initial-roles='{{ env_form.team_roles.data | tojson }}'>
+        <div>
+          <div v-for='(role, roleindex) in roles' class='environment-role'>
+            <h4 v-if='checkNoAccess(role.role)'>Unassigned (No Access)</h4>
+            <h4 v-else v-html='role.role'></h4>
+            <ul class='environment-role__users'>
+              <div
+                v-if="role.members && !role.members.length"
+                class='environment-role__no-user'>
+                Currently no members are in this role
+              </div>
+              <li
+                v-for='(member, memberindex) in role.members'
+                class="environment-role__user"
+                v-bind:class="{'unassigned': checkNoAccess(member.role)}">
+                <span v-html='member.user_name'>
+                </span>
+                <span v-on:click="toggleSection(member.user_id)" class="icon-link right">
+                  {{ Icon('edit', classes="icon--medium") }}
+                </span>
+                <div
+                  v-show="selectedSection === member.user_id"
+                  class='environment-role__user-field'>
+                  <div class="usa-input">
+                    <fieldset
+                      data-ally-disabled="true"
+                      class="usa-input__choices"
+                      v-on:change="onInput">
+                      <ul
+                        v-for='(role, roleinputindex) in roles'
+                        v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role'">
+                        <li>
+                          <input
+                            v-bind:checked="member.role === role.role"
+                            v-bind:name="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role'"
+                            v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role-' + roleinputindex"
+                            type="radio"
+                            v-bind:user-id='member.user_id'
+                            v-bind:value='role.role'>
+                          <label
+                            v-bind:for="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role-' + roleinputindex">
+                            <span v-if='checkNoAccess(role.role)'>No Access</span>
+                            <span v-else v-html='role.role'></span>
+                          </label>
+                        </li>
+                      </ul>
+                    </fieldset>
+                  </div>
+                </div>
+                <input
+                  v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-user_id'"
+                  v-bind:name="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-user_id'"
+                  type="hidden"
+                  v-bind:value='member.user_id'>
+              </li>
+            </ul>
+          </div>
+          <div class='action-group'>
+            {{
+              SaveButton(
+                text=("portfolios.applications.update_button_text" | translate)
+              )
+            }}
+          </div>
+        </div>
+      </edit-environment-role>
+      <div class='action-group-cancel'>
+        <a class='action-group-cancel__action icon-link icon-link--default' v-on:click="toggleSection('members')">
+          {{ "common.cancel" | translate }}
+        </a>
+      </div>
+    </form>
+  {% endif %}
+{% endfor %}
diff --git a/templates/fragments/applications/edit_environments.html b/templates/fragments/applications/edit_environments.html
index fe25d41b..7852ae7d 100644
--- a/templates/fragments/applications/edit_environments.html
+++ b/templates/fragments/applications/edit_environments.html
@@ -6,47 +6,6 @@
 {% from "components/text_input.html" import TextInput %}
 {% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
 
-{% macro RolePanel(role_form) %}
-  {% set role = role_form.role.data %}
-  {% if role == 'no_access' %}
-    {% set role = 'Unassigned (No Access)' %}
-    {% set unassigned = True %}
-  {% endif %}
-
-  <div class='environment-role'>
-    <h4>{{ role }}</h4>
-      <ul class='environment-role__users'>
-        {% for member in role_form.members %}
-          {% set section_name = "env_member_{}".format(member.user_id) %}
-
-          <li class="environment-role__user {{ 'unassigned' if unassigned }}">
-            {{ member.user_name.data }}
-            <span class="icon-link right">
-              {% set edit_env_members_button %}
-                {{ Icon('edit', classes="icon--medium") }}
-              {% endset %}
-
-              {{
-                ToggleButton(
-                  open_html=edit_env_members_button,
-                  close_html=edit_env_members_button,
-                  section_name=section_name
-                )
-              }}
-            </span>
-            {% call ToggleSection(section_name=section_name, classes="environment-role__user-field") %}
-              {{ OptionsInput(member.role, label=False) }}
-              {{ member.user_id() }}
-            {% endcall %}
-          </li>
-        {% endfor %}
-
-        {% if role_form.members.data == [] %}
-          <div class='environment-role__no-user'>Currently no members are in this role</div>
-        {% endif %}
-      </ul>
-    </div>
-{% endmacro %}
 
 <div class="application-list-item application-list">
   <header>
@@ -120,74 +79,7 @@
             </div>
 
             {% call ToggleSection(section_name="members", classes="environment-roles") %}
-              {% for env_form in members_form.envs %}
-                {% if env_form.env_id.data == env['id'] %}
-                  <div class='app-team-settings-link'>
-                    Need to add someone new to the team? <a href='{{ url_for("applications.team", application_id=application.id) }}'>Jump to Team Settings</a>
-                  </div>
-                  <form action="{{ url_for('applications.update_env_roles', environment_id=env['id']) }}" method="post">
-                    {{ members_form.csrf_token }}
-                    {{ env_form.env_id() }}
-                    <edit-environment-role inline-template v-bind:initial-roles='{{ env_form.team_roles.data | tojson }}'>
-                      <div>
-                        <div v-for='(role, roleindex) in roles' class='environment-role'>
-                          <h4 v-if='checkNoAccess(role.role)'>Unassigned (No Access)</h4>
-                          <h4 v-else v-html='role.role'></h4>
-                          <ul class='environment-role__users'>
-                            <div v-if="role.members && !role.members.length" class='environment-role__no-user'>Currently no members are in this role</div>
-                            <li v-for='(member, memberindex) in role.members' class="environment-role__user" v-bind:class="{'unassigned': checkNoAccess(member.role)}">
-                              <span v-html='member.user_name'>
-                              </span>
-                              <span v-on:click="toggleSection(member.user_id)" class="icon-link right">
-                                {{ Icon('edit', classes="icon--medium") }}
-                              </span>
-                              <div v-show="selectedSection === member.user_id" class='environment-role__user-field'>
-                                <div class="usa-input">
-                                  <fieldset data-ally-disabled="true" class="usa-input__choices" v-on:change="onInput">
-                                    <ul v-for='(role, roleinputindex) in roles' v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role'">
-                                      <li>
-                                        <input
-                                          v-bind:checked="member.role === role.role"
-                                          v-bind:name="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role'"
-                                          v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role-' + roleinputindex"
-                                          type="radio"
-                                          v-bind:user-id='member.user_id'
-                                          v-bind:value='role.role'>
-                                        <label
-                                          v-bind:for="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role-' + roleinputindex">
-                                          <span v-if='checkNoAccess(role.role)'>No Access</span>
-                                          <span v-else v-html='role.role'></span>
-                                        </label>
-                                      </li>
-                                    </ul>
-                                  </fieldset>
-                                </div>
-                              </div>
-                              <input
-                                v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-user_id'"
-                                v-bind:name="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-user_id'"
-                                type="hidden"
-                                v-bind:value='member.user_id'>
-                            </li>
-                          </ul>
-                        </div>
-                        <div class='action-group'>
-                          {{
-                            SaveButton(
-                              text=("portfolios.applications.update_button_text" | translate)
-                            )
-                          }}
-                        </div>
-                      </div>
-                    </edit-environment-role>
-                    <div class='action-group-cancel'>
-                      <a class='action-group-cancel__action icon-link icon-link--default' v-on:click="toggleSection('members')">
-                        {{ "common.cancel" | translate }}
-                      </a>
-                    </div>
-                  </form>
-                {% endif %}
-              {% endfor %}
+              {% include 'fragments/applications/edit_environment_team_form.html' %}
             {% endcall %}
 
             {% call ToggleSection(section_name="edit") %}

From be178733cf728b6173832a281e82e4e24f371e6c Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Thu, 9 May 2019 14:18:56 -0400
Subject: [PATCH 07/14] Add note about future refactoring

---
 js/components/forms/edit_environment_role.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/js/components/forms/edit_environment_role.js b/js/components/forms/edit_environment_role.js
index 376fb039..3e8c38a0 100644
--- a/js/components/forms/edit_environment_role.js
+++ b/js/components/forms/edit_environment_role.js
@@ -1,6 +1,11 @@
 import FormMixin from '../../mixins/form'
 import Modal from '../../mixins/modal'
 
+
+// Note: If refactoring consider using nested vue components as suggested by Dan:
+// https://github.com/dod-ccpo/atst/pull/799/files#r282240663
+// May also want to reconsider the data structure by storing the roles and members separately
+
 export default {
   name: 'edit-environment-role',
 

From e0872d1095184eff56a680b931efc14711fefeca Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Thu, 9 May 2019 14:32:26 -0400
Subject: [PATCH 08/14] Move text to translations file

---
 .../applications/edit_environment_team_form.html   | 14 +++++++++-----
 translations.yaml                                  |  6 +++++-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/templates/fragments/applications/edit_environment_team_form.html b/templates/fragments/applications/edit_environment_team_form.html
index 95505ed6..71133e0c 100644
--- a/templates/fragments/applications/edit_environment_team_form.html
+++ b/templates/fragments/applications/edit_environment_team_form.html
@@ -5,9 +5,9 @@
 {% for env_form in members_form.envs %}
   {% if env_form.env_id.data == env['id'] %}
     <div class='app-team-settings-link'>
-      Need to add someone new to the team?
+      {{ 'fragments.edit_environment_team_form.add_new_member_text' | translate }}
       <a href='{{ url_for("applications.team", application_id=application.id) }}'>
-        Jump to Team Settings
+        {{ 'fragments.edit_environment_team_form.add_new_member_link' | translate }}
       </a>
     </div>
     <form
@@ -20,13 +20,15 @@
         v-bind:initial-roles='{{ env_form.team_roles.data | tojson }}'>
         <div>
           <div v-for='(role, roleindex) in roles' class='environment-role'>
-            <h4 v-if='checkNoAccess(role.role)'>Unassigned (No Access)</h4>
+            <h4 v-if='checkNoAccess(role.role)'>
+              {{ 'fragments.edit_environment_team_form.unassigned_title' | translate }}
+            </h4>
             <h4 v-else v-html='role.role'></h4>
             <ul class='environment-role__users'>
               <div
                 v-if="role.members && !role.members.length"
                 class='environment-role__no-user'>
-                Currently no members are in this role
+                {{ 'fragments.edit_environment_team_form.no_members' | translate }}
               </div>
               <li
                 v-for='(member, memberindex) in role.members'
@@ -58,7 +60,9 @@
                             v-bind:value='role.role'>
                           <label
                             v-bind:for="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role-' + roleinputindex">
-                            <span v-if='checkNoAccess(role.role)'>No Access</span>
+                            <span v-if='checkNoAccess(role.role)'>
+                              {{ 'fragments.edit_environment_team_form.no_access' | translate }}
+                            </span>
                             <span v-else v-html='role.role'></span>
                           </label>
                         </li>
diff --git a/translations.yaml b/translations.yaml
index 15f39fa8..d5fef3e1 100644
--- a/translations.yaml
+++ b/translations.yaml
@@ -332,7 +332,11 @@ fragments:
     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_environment_team_form:
-    delete_environment_title: Are you sure you want to delete this environment?
+    delete_environment_title: Are you sure you want to delete this environment?add_new_member_text: Need to add someone new to the team?
+    add_new_member_link: Jump to Team Settings
+    unassigned_title: Unassigned (No Access)
+    no_members: Currently no members are in this role
+    no_access: No Access
   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.
     save_details_button: Save

From 3a2e2aa878ef926ef358883e47518f71c8d6d1b9 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Thu, 9 May 2019 16:02:39 -0400
Subject: [PATCH 09/14] Wip tests

---
 .../__tests__/edit_environment_role.test.js   | 89 +++++++++++++++++++
 js/components/forms/edit_environment_role.js  |  5 +-
 2 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 js/components/__tests__/edit_environment_role.test.js

diff --git a/js/components/__tests__/edit_environment_role.test.js b/js/components/__tests__/edit_environment_role.test.js
new file mode 100644
index 00000000..e8552d39
--- /dev/null
+++ b/js/components/__tests__/edit_environment_role.test.js
@@ -0,0 +1,89 @@
+import { shallowMount } from '@vue/test-utils'
+import EditEnvironmentRole from '../forms/edit_environment_role'
+
+describe('EditEnvironmentRole', () => {
+  var initialRoles, wrapper
+
+  beforeEach(() => {
+    initialRoles = [
+      {
+        role: 'no_access',
+        members: [
+          { role: null, user_id: '123' },
+          { role: null, user_id: '456' },
+        ],
+      },
+      {
+        role: 'Basic Access',
+        members: [{ role: 'Basic Access', user_id: '789' }],
+      },
+      {
+        role: 'Network Admin',
+        members: [],
+      },
+      {
+        role: 'Business Read-only',
+        members: [
+          { role: 'Business Read-only', user_id: '012' },
+          { role: 'Business Read-only', user_id: '345' },
+        ],
+      },
+      {
+        role: 'Technical Read-only',
+        members: [{ role: 'Technical Read-only', user_id: '678' }],
+      },
+    ]
+
+    wrapper = shallowMount(EditEnvironmentRole, { propsData: { initialRoles } })
+  })
+
+  it('removes null roles to no_access', () => {
+    let roles = wrapper.vm.sanitizeValues([
+      { role: 'no_access', members: [{ role: null }] },
+    ])
+    expect(roles).toEqual([
+      { role: 'no_access', members: [{ role: 'no_access' }] },
+    ])
+  })
+
+  it('gets the data for a user', () => {
+    let member_data = wrapper.vm.getUserInfo('678')
+
+    expect(member_data).toEqual({ role: 'Technical Read-only', user_id: '678' })
+  })
+
+  it('removes a user from role', () => {
+    let techRole = wrapper.vm.roles.find(role => {
+      return role.role === 'Technical Read-only'
+    })
+
+    expect(techRole.members.length).toEqual(1)
+    wrapper.vm.removeUser('678')
+    expect(techRole.members.length).toEqual(0)
+  })
+
+  it('adds user to a role', () => {
+    let techRole = wrapper.vm.roles.find(role => {
+      return role.role === 'Technical Read-only'
+    })
+
+    expect(techRole.members.length).toEqual(1)
+    wrapper.vm.addUser({ user_id: '901' }, 'Technical Read-only')
+    expect(techRole.members.length).toEqual(2)
+  })
+
+  it('updates users role', () => {
+    let techRole = wrapper.vm.roles.find(role => {
+      return role.role === 'Technical Read-only'
+    })
+    let businessRole = wrapper.vm.roles.find(role => {
+      return role.role === 'Business Read-only'
+    })
+
+    expect(techRole.members.length).toEqual(1)
+    expect(businessRole.members.length).toEqual(2)
+    wrapper.vm.updateRoles('678', 'Business Read-only')
+    expect(techRole.members.length).toEqual(0)
+    expect(businessRole.members.length).toEqual(3)
+  })
+})
diff --git a/js/components/forms/edit_environment_role.js b/js/components/forms/edit_environment_role.js
index 3e8c38a0..2104514f 100644
--- a/js/components/forms/edit_environment_role.js
+++ b/js/components/forms/edit_environment_role.js
@@ -1,7 +1,6 @@
 import FormMixin from '../../mixins/form'
 import Modal from '../../mixins/modal'
 
-
 // Note: If refactoring consider using nested vue components as suggested by Dan:
 // https://github.com/dod-ccpo/atst/pull/799/files#r282240663
 // May also want to reconsider the data structure by storing the roles and members separately
@@ -90,4 +89,8 @@ export default {
       this.toggleSection()
     },
   },
+
+  render: function(createElement) {
+    return createElement('p', 'Please implement inline-template')
+  },
 }

From a35349cc8885835ab49837b8be0e02d245345b48 Mon Sep 17 00:00:00 2001
From: George Drummond <george-ctr@friends.dds.mil>
Date: Fri, 10 May 2019 09:54:06 -0400
Subject: [PATCH 10/14] Set ToggleSection macro "classes" default

---
 templates/components/toggle_list.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/components/toggle_list.html b/templates/components/toggle_list.html
index 64f85b66..bb16d87e 100644
--- a/templates/components/toggle_list.html
+++ b/templates/components/toggle_list.html
@@ -9,7 +9,7 @@
   </span>
 {% endmacro %}
 
-{% macro ToggleSection(section_name, classes) %}
+{% macro ToggleSection(section_name, classes="") %}
   <div v-show="selectedSection === '{{ section_name }}'" class='{{ classes }}'>
     {{ caller() }}
   </div>

From fd84e902e3a9d8263876b0d1a1b60939487b7c80 Mon Sep 17 00:00:00 2001
From: George Drummond <george-ctr@friends.dds.mil>
Date: Fri, 10 May 2019 09:57:09 -0400
Subject: [PATCH 11/14] Use is rather than ==

---
 atst/domain/environments.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/atst/domain/environments.py b/atst/domain/environments.py
index e0bd3fdb..b641d584 100644
--- a/atst/domain/environments.py
+++ b/atst/domain/environments.py
@@ -73,7 +73,7 @@ class Environments(object):
     def update_env_role(cls, environment, user, new_role):
         updated = False
 
-        if new_role == None:
+        if new_role is None:
             updated = EnvironmentRoles.delete(user.id, environment.id)
         else:
             env_role = EnvironmentRoles.get(user.id, environment.id)

From 546e04555d17cf8ea0aed581a9812d78bd9d576f Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Mon, 13 May 2019 11:29:24 -0400
Subject: [PATCH 12/14] Update role div height Move serialization into the
 route change member.role to member.role_name in form and route Return 400 for
 invalid form submission

---
 atst/domain/environments.py                | 16 +-------
 atst/forms/app_settings.py                 |  7 ++--
 atst/routes/applications/settings.py       | 43 +++++++++++++++-------
 styles/sections/_application_edit.scss     |  2 +
 tests/domain/test_environments.py          | 42 ++++++---------------
 tests/routes/applications/test_settings.py |  6 +--
 6 files changed, 51 insertions(+), 65 deletions(-)

diff --git a/atst/domain/environments.py b/atst/domain/environments.py
index b641d584..515c7557 100644
--- a/atst/domain/environments.py
+++ b/atst/domain/environments.py
@@ -98,7 +98,7 @@ class Environments(object):
         environment = Environments.get(environment_id)
 
         for member in team_roles:
-            new_role = member["role"]
+            new_role = member["role_name"]
             user = Users.get(member["user_id"])
             Environments.update_env_role(
                 environment=environment, user=user, new_role=new_role
@@ -115,25 +115,13 @@ class Environments(object):
 
     @classmethod
     def get_members_by_role(cls, env, role):
-        env_roles = (
+        return (
             db.session.query(EnvironmentRole)
             .filter(EnvironmentRole.environment_id == env.id)
             .filter(EnvironmentRole.role == role)
             .all()
         )
 
-        members_list = []
-        for env_role in env_roles:
-            members_list.append(
-                {
-                    "user_id": str(env_role.user_id),
-                    "user_name": env_role.user.full_name,
-                    "role": role,
-                }
-            )
-
-        return members_list
-
     @classmethod
     def revoke_access(cls, environment, target_user):
         EnvironmentRoles.delete(environment.id, target_user.id)
diff --git a/atst/forms/app_settings.py b/atst/forms/app_settings.py
index 094c1fb6..20e1aa25 100644
--- a/atst/forms/app_settings.py
+++ b/atst/forms/app_settings.py
@@ -8,14 +8,13 @@ from .data import ENV_ROLES
 class MemberForm(FlaskForm):
     user_id = HiddenField()
     user_name = StringField()
-    role = RadioField(choices=ENV_ROLES, default="no_access")
+    role_name = RadioField(choices=ENV_ROLES, default="no_access")
 
     @property
     def data(self):
         _data = super().data
-        for field in _data:
-            if field == "role" and _data[field] == "no_access":
-                _data[field] = None
+        if "role_name" in _data and _data["role_name"] == "no_access":
+            _data["role_name"] = None
         return _data
 
 
diff --git a/atst/routes/applications/settings.py b/atst/routes/applications/settings.py
index f7198c54..586e6d3d 100644
--- a/atst/routes/applications/settings.py
+++ b/atst/routes/applications/settings.py
@@ -27,11 +27,26 @@ def get_environments_obj_for_app(application):
     return environments_obj
 
 
+def serialize_members(member_list, role):
+    serialized_list = []
+
+    for member in member_list:
+        serialized_list.append(
+            {
+                "user_id": str(member.user_id),
+                "user_name": member.user.full_name,
+                "role_name": role,
+            }
+        )
+
+    return serialized_list
+
+
 def sort_env_users_by_role(env):
     users_list = []
     no_access_users = env.application.users - env.users
     no_access_list = [
-        {"user_id": str(user.id), "user_name": user.full_name, "role": "no_access"}
+        {"user_id": str(user.id), "user_name": user.full_name, "role_name": "no_access"}
         for user in no_access_users
     ]
     users_list.append({"role": "no_access", "members": no_access_list})
@@ -40,7 +55,9 @@ def sort_env_users_by_role(env):
         users_list.append(
             {
                 "role": role.value,
-                "members": Environments.get_members_by_role(env, role.value),
+                "members": serialize_members(
+                    Environments.get_members_by_role(env, role.value), role.value
+                ),
             }
         )
 
@@ -196,18 +213,18 @@ def update_env_roles(environment_id):
             )
         )
     else:
-        # TODO: Create a better pattern to handle when a form doesn't validate
-        # if a user is submitting the data via the web page then they
-        # should never have any form validation errors
-        return render_template(
-            "portfolios/applications/settings.html",
-            application=application,
-            form=ApplicationForm(
-                name=application.name, description=application.description
+        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),
+                active_toggler=environment.id,
+                active_toggler_section="edit",
             ),
-            environments_obj=get_environments_obj_for_app(application=application),
-            active_toggler=environment.id,
-            active_toggler_section="edit",
+            400,
         )
 
 
diff --git a/styles/sections/_application_edit.scss b/styles/sections/_application_edit.scss
index 75027e93..0795fc6c 100644
--- a/styles/sections/_application_edit.scss
+++ b/styles/sections/_application_edit.scss
@@ -54,6 +54,7 @@
       white-space: nowrap;
       width: 20rem;
       position: relative;
+      height: 3.6rem;
 
       &.unassigned {
         border: solid 1px $color-gray-light;
@@ -88,6 +89,7 @@
       margin: $gap;
       padding: ($gap / 2) $gap;
       font-weight: $font-normal;
+      height: 3.6rem;
     }
   }
 }
diff --git a/tests/domain/test_environments.py b/tests/domain/test_environments.py
index 8e633e3d..577c5b93 100644
--- a/tests/domain/test_environments.py
+++ b/tests/domain/test_environments.py
@@ -79,18 +79,18 @@ def test_update_env_roles_by_environment():
     team_roles = [
         {
             "user_id": env_role_1.user.id,
-            "name": env_role_1.user.full_name,
-            "role": CSPRole.BUSINESS_READ.value,
+            "user_name": env_role_1.user.full_name,
+            "role_name": CSPRole.BUSINESS_READ.value,
         },
         {
             "user_id": env_role_2.user.id,
-            "name": env_role_2.user.full_name,
-            "role": CSPRole.NETWORK_ADMIN.value,
+            "user_name": env_role_2.user.full_name,
+            "role_name": CSPRole.NETWORK_ADMIN.value,
         },
         {
             "user_id": env_role_3.user.id,
-            "name": env_role_3.user.full_name,
-            "role": None,
+            "user_name": env_role_3.user.full_name,
+            "role_name": None,
         },
     ]
 
@@ -155,32 +155,12 @@ def test_get_members_by_role(db):
     basic_access_members = Environments.get_members_by_role(
         environment, CSPRole.BASIC_ACCESS.value
     )
-    assert basic_access_members == [
-        {
-            "user_id": str(env_role_1.user_id),
-            "user_name": env_role_1.user.full_name,
-            "role": CSPRole.BASIC_ACCESS.value,
-        }
-    ]
-    assert {
-        "user_id": str(rando_env_role.user_id),
-        "user_name": rando_env_role.user.full_name,
-        "role": CSPRole.BASIC_ACCESS.value,
-    } not in basic_access_members
-    assert Environments.get_members_by_role(
+    technical_read_members = Environments.get_members_by_role(
         environment, CSPRole.TECHNICAL_READ.value
-    ) == [
-        {
-            "user_id": str(env_role_2.user_id),
-            "user_name": env_role_2.user.full_name,
-            "role": CSPRole.TECHNICAL_READ.value,
-        },
-        {
-            "user_id": str(env_role_3.user_id),
-            "user_name": env_role_3.user.full_name,
-            "role": CSPRole.TECHNICAL_READ.value,
-        },
-    ]
+    )
+    assert basic_access_members == [env_role_1]
+    assert rando_env_role not in basic_access_members
+    assert technical_read_members == [env_role_2, env_role_3]
     assert (
         Environments.get_members_by_role(environment, CSPRole.BUSINESS_READ.value) == []
     )
diff --git a/tests/routes/applications/test_settings.py b/tests/routes/applications/test_settings.py
index 438dbb1d..ef28c3ed 100644
--- a/tests/routes/applications/test_settings.py
+++ b/tests/routes/applications/test_settings.py
@@ -171,7 +171,7 @@ def test_data_for_app_env_roles_form(app, client, user_session):
                                 {
                                     "user_id": str(app_role.user_id),
                                     "user_name": app_role.user.full_name,
-                                    "role": None,
+                                    "role_name": None,
                                 }
                             ],
                         },
@@ -181,7 +181,7 @@ def test_data_for_app_env_roles_form(app, client, user_session):
                                 {
                                     "user_id": str(env_role1.user_id),
                                     "user_name": env_role1.user.full_name,
-                                    "role": CSPRole.BASIC_ACCESS.value,
+                                    "role_name": CSPRole.BASIC_ACCESS.value,
                                 }
                             ],
                         },
@@ -191,7 +191,7 @@ def test_data_for_app_env_roles_form(app, client, user_session):
                                 {
                                     "user_id": str(env_role2.user_id),
                                     "user_name": env_role2.user.full_name,
-                                    "role": CSPRole.NETWORK_ADMIN.value,
+                                    "role_name": CSPRole.NETWORK_ADMIN.value,
                                 }
                             ],
                         },

From 4206aa8a59f4f8ce8912945b9834273b1fdcd4eb Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Mon, 13 May 2019 11:30:14 -0400
Subject: [PATCH 13/14] Use member.role_name in template and JS change name of
 data from roles to rolesCategory to make less confusing

---
 .../__tests__/edit_environment_role.test.js   | 37 +++++++++++--------
 js/components/forms/edit_environment_role.js  | 16 ++++----
 .../edit_environment_team_form.html           | 32 ++++++++--------
 tests/routes/applications/test_settings.py    |  8 ++--
 4 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/js/components/__tests__/edit_environment_role.test.js b/js/components/__tests__/edit_environment_role.test.js
index e8552d39..4421d58c 100644
--- a/js/components/__tests__/edit_environment_role.test.js
+++ b/js/components/__tests__/edit_environment_role.test.js
@@ -2,20 +2,20 @@ import { shallowMount } from '@vue/test-utils'
 import EditEnvironmentRole from '../forms/edit_environment_role'
 
 describe('EditEnvironmentRole', () => {
-  var initialRoles, wrapper
+  var initialRoleCategories, wrapper
 
   beforeEach(() => {
-    initialRoles = [
+    initialRoleCategories = [
       {
         role: 'no_access',
         members: [
-          { role: null, user_id: '123' },
-          { role: null, user_id: '456' },
+          { role_name: null, user_id: '123' },
+          { role_name: null, user_id: '456' },
         ],
       },
       {
         role: 'Basic Access',
-        members: [{ role: 'Basic Access', user_id: '789' }],
+        members: [{ role_name: 'Basic Access', user_id: '789' }],
       },
       {
         role: 'Network Admin',
@@ -24,36 +24,41 @@ describe('EditEnvironmentRole', () => {
       {
         role: 'Business Read-only',
         members: [
-          { role: 'Business Read-only', user_id: '012' },
-          { role: 'Business Read-only', user_id: '345' },
+          { role_name: 'Business Read-only', user_id: '012' },
+          { role_name: 'Business Read-only', user_id: '345' },
         ],
       },
       {
         role: 'Technical Read-only',
-        members: [{ role: 'Technical Read-only', user_id: '678' }],
+        members: [{ role_name: 'Technical Read-only', user_id: '678' }],
       },
     ]
 
-    wrapper = shallowMount(EditEnvironmentRole, { propsData: { initialRoles } })
+    wrapper = shallowMount(EditEnvironmentRole, {
+      propsData: { initialRoleCategories },
+    })
   })
 
   it('removes null roles to no_access', () => {
     let roles = wrapper.vm.sanitizeValues([
-      { role: 'no_access', members: [{ role: null }] },
+      { role: 'no_access', members: [{ role_name: null }] },
     ])
     expect(roles).toEqual([
-      { role: 'no_access', members: [{ role: 'no_access' }] },
+      { role: 'no_access', members: [{ role_name: 'no_access' }] },
     ])
   })
 
   it('gets the data for a user', () => {
     let member_data = wrapper.vm.getUserInfo('678')
 
-    expect(member_data).toEqual({ role: 'Technical Read-only', user_id: '678' })
+    expect(member_data).toEqual({
+      role_name: 'Technical Read-only',
+      user_id: '678',
+    })
   })
 
   it('removes a user from role', () => {
-    let techRole = wrapper.vm.roles.find(role => {
+    let techRole = wrapper.vm.roleCategories.find(role => {
       return role.role === 'Technical Read-only'
     })
 
@@ -63,7 +68,7 @@ describe('EditEnvironmentRole', () => {
   })
 
   it('adds user to a role', () => {
-    let techRole = wrapper.vm.roles.find(role => {
+    let techRole = wrapper.vm.roleCategories.find(role => {
       return role.role === 'Technical Read-only'
     })
 
@@ -73,10 +78,10 @@ describe('EditEnvironmentRole', () => {
   })
 
   it('updates users role', () => {
-    let techRole = wrapper.vm.roles.find(role => {
+    let techRole = wrapper.vm.roleCategories.find(role => {
       return role.role === 'Technical Read-only'
     })
-    let businessRole = wrapper.vm.roles.find(role => {
+    let businessRole = wrapper.vm.roleCategories.find(role => {
       return role.role === 'Business Read-only'
     })
 
diff --git a/js/components/forms/edit_environment_role.js b/js/components/forms/edit_environment_role.js
index 2104514f..cbb09457 100644
--- a/js/components/forms/edit_environment_role.js
+++ b/js/components/forms/edit_environment_role.js
@@ -11,13 +11,13 @@ export default {
   mixins: [FormMixin],
 
   props: {
-    initialRoles: Array,
+    initialRoleCategories: Array,
   },
 
   data: function() {
     return {
       selectedSection: null,
-      roles: this.sanitizeValues(this.initialRoles),
+      roleCategories: this.sanitizeValues(this.initialRoleCategories),
     }
   },
 
@@ -25,8 +25,8 @@ export default {
     sanitizeValues: function(roles) {
       roles.forEach(role => {
         role.members.forEach(member => {
-          if (member.role === null) {
-            member.role = 'no_access'
+          if (member.role_name === null) {
+            member.role_name = 'no_access'
           }
         })
       })
@@ -53,7 +53,7 @@ export default {
     },
 
     getUserInfo: function(userId) {
-      for (let role of this.roles) {
+      for (let role of this.roleCategories) {
         for (let member of role.members) {
           if (member.user_id === userId) {
             return member
@@ -63,7 +63,7 @@ export default {
     },
 
     removeUser: function(userId) {
-      for (let role of this.roles) {
+      for (let role of this.roleCategories) {
         role.members = role.members.filter(member => {
           return member.user_id !== userId
         })
@@ -74,9 +74,9 @@ export default {
     },
 
     addUser: function(userInfo, newRole) {
-      this.roles.forEach(role => {
+      this.roleCategories.forEach(role => {
         if (role.role === newRole) {
-          userInfo.role = newRole
+          userInfo.role_name = newRole
           role.members.push(userInfo)
         }
       })
diff --git a/templates/fragments/applications/edit_environment_team_form.html b/templates/fragments/applications/edit_environment_team_form.html
index 71133e0c..393fa4f9 100644
--- a/templates/fragments/applications/edit_environment_team_form.html
+++ b/templates/fragments/applications/edit_environment_team_form.html
@@ -17,23 +17,23 @@
       {{ env_form.env_id() }}
       <edit-environment-role
         inline-template
-        v-bind:initial-roles='{{ env_form.team_roles.data | tojson }}'>
+        v-bind:initial-role-categories='{{ env_form.team_roles.data | tojson }}'>
         <div>
-          <div v-for='(role, roleindex) in roles' class='environment-role'>
-            <h4 v-if='checkNoAccess(role.role)'>
+          <div v-for='(roleCategory, roleindex) in roleCategories' class='environment-role'>
+            <h4 v-if='checkNoAccess(roleCategory.role)'>
               {{ 'fragments.edit_environment_team_form.unassigned_title' | translate }}
             </h4>
-            <h4 v-else v-html='role.role'></h4>
+            <h4 v-else v-html='roleCategory.role'></h4>
             <ul class='environment-role__users'>
               <div
-                v-if="role.members && !role.members.length"
+                v-if="roleCategory.members && !roleCategory.members.length"
                 class='environment-role__no-user'>
                 {{ 'fragments.edit_environment_team_form.no_members' | translate }}
               </div>
               <li
-                v-for='(member, memberindex) in role.members'
+                v-for='(member, memberindex) in roleCategory.members'
                 class="environment-role__user"
-                v-bind:class="{'unassigned': checkNoAccess(member.role)}">
+                v-bind:class="{'unassigned': checkNoAccess(member.role_name)}">
                 <span v-html='member.user_name'>
                 </span>
                 <span v-on:click="toggleSection(member.user_id)" class="icon-link right">
@@ -48,22 +48,22 @@
                       class="usa-input__choices"
                       v-on:change="onInput">
                       <ul
-                        v-for='(role, roleinputindex) in roles'
-                        v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role'">
+                        v-for='(roleCategory, roleinputindex) in roleCategories'
+                        v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role_name'">
                         <li>
                           <input
-                            v-bind:checked="member.role === role.role"
-                            v-bind:name="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role'"
-                            v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role-' + roleinputindex"
+                            v-bind:checked="member.role_name === roleCategory.role"
+                            v-bind:name="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role_name'"
+                            v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role_name-' + roleinputindex"
                             type="radio"
                             v-bind:user-id='member.user_id'
-                            v-bind:value='role.role'>
+                            v-bind:value='roleCategory.role'>
                           <label
-                            v-bind:for="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role-' + roleinputindex">
-                            <span v-if='checkNoAccess(role.role)'>
+                            v-bind:for="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role_name-' + roleinputindex">
+                            <span v-if='checkNoAccess(roleCategory.role)'>
                               {{ 'fragments.edit_environment_team_form.no_access' | translate }}
                             </span>
-                            <span v-else v-html='role.role'></span>
+                            <span v-else v-html='roleCategory.role'></span>
                           </label>
                         </li>
                       </ul>
diff --git a/tests/routes/applications/test_settings.py b/tests/routes/applications/test_settings.py
index ef28c3ed..1e5bfb02 100644
--- a/tests/routes/applications/test_settings.py
+++ b/tests/routes/applications/test_settings.py
@@ -303,13 +303,13 @@ def test_update_team_env_roles(client, user_session):
     form_data = {
         "envs-0-env_id": environment.id,
         "envs-0-team_roles-0-members-0-user_id": app_role.user.id,
-        "envs-0-team_roles-0-members-0-role": CSPRole.TECHNICAL_READ.value,
+        "envs-0-team_roles-0-members-0-role_name": CSPRole.TECHNICAL_READ.value,
         "envs-0-team_roles-1-members-0-user_id": env_role_1.user.id,
-        "envs-0-team_roles-1-members-0-role": CSPRole.NETWORK_ADMIN.value,
+        "envs-0-team_roles-1-members-0-role_name": CSPRole.NETWORK_ADMIN.value,
         "envs-0-team_roles-1-members-1-user_id": env_role_2.user.id,
-        "envs-0-team_roles-1-members-1-role": CSPRole.BASIC_ACCESS.value,
+        "envs-0-team_roles-1-members-1-role_name": CSPRole.BASIC_ACCESS.value,
         "envs-0-team_roles-1-members-2-user_id": env_role_3.user.id,
-        "envs-0-team_roles-1-members-2-role": "no_access",
+        "envs-0-team_roles-1-members-2-role_name": "no_access",
     }
 
     user_session(application.portfolio.owner)

From c5e85c4f1e99f3d41c6e939692510d96ed6727d6 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Tue, 14 May 2019 11:05:36 -0400
Subject: [PATCH 14/14] Rebase fix

---
 translations.yaml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/translations.yaml b/translations.yaml
index d5fef3e1..449bd585 100644
--- a/translations.yaml
+++ b/translations.yaml
@@ -332,7 +332,8 @@ fragments:
     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_environment_team_form:
-    delete_environment_title: Are you sure you want to delete this environment?add_new_member_text: Need to add someone new to the team?
+    delete_environment_title: Are you sure you want to delete this environment?
+    add_new_member_text: Need to add someone new to the team?
     add_new_member_link: Jump to Team Settings
     unassigned_title: Unassigned (No Access)
     no_members: Currently no members are in this role