Update template and styling

styles/sections/_application_edit.scss

@@ -17,3 +17,38 @@
     margin-right: -$gap;
   }
 }
+
+.environment-role {
+  padding: $gap * 3;
+
+  h4 {
+    margin-bottom: $gap / 4;
+  }
+
+  .environment-role__users {
+    background-color: $color-gray-lightest;
+    padding: ($gap * 1.2) ($gap * 0.6);
+    font-size: $small-font-size;
+    display: flex;
+    flex-wrap: wrap;
+
+    .environment-role__user {
+      background-color: $color-white;
+      border-radius: 0.5rem;
+      padding: ($gap / 2) $gap;
+      border: solid 2px $color-blue;
+      margin: $gap;
+      white-space: nowrap;
+      width: 20rem;
+
+      &.unassigned {
+        border: solid 1px $color-gray-light;
+      }
+    }
+
+    .environment-role__no-user {
+      margin: $gap;
+      padding: ($gap / 2) $gap;
+    }
+  }
+}

templates/fragments/applications/edit_environments.html

@@ -3,6 +3,24 @@
 {% from "components/text_input.html" import TextInput %}
 {% from "components/save_button.html" import SaveButton %}
 
+{% macro RolePanel(users=[], role='Unassigned(No Access)') %}
+  {% set unassigned = role == 'Unassigned(No Access)' %}
+  <div class='environment-role'>
+    <h4>{{ role }}</h4>
+      <div class='environment-role__users'>
+        {% for user in users %}
+          <div class="environment-role__user {{ 'unassigned' if unassigned }}">
+            {{ user.name }}{{ Icon('edit', classes="icon--medium right") }}
+          </div>
+        {% endfor %}
+
+        {% if users == [] %}
+          <div class='environment-role__no-user'>Currently no members are in this role</div>
+        {% endif %}
+      </div>
+    </div>
+{% endmacro %}
+
 <div class="application-list-item">
   <header>
     <div class="responsive-table-wrapper__header">
@@ -22,12 +40,16 @@
     </div>
 
     <ul class="accordion-table__items">
-      {% for name, environment_info in environments_obj.items() %}
+      {% for env in env_forms %}
+        {% set member_count = env['form'].data['team_roles'] | length %}
+        {% set unassigned = env['no_access'] %}
+        {% set members_by_role = environments_obj[env['env_name']]['members'] %}
+
         <toggler inline-template>
           <li class="accordion-table__item">
             <div class="accordion-table__item-content">
               <span>
-                {{ name }}
+                {{ env['env_name'] }}
               </span>
               <span class="icon-link">
                 {% set edit_environment_button %}
@@ -44,11 +66,11 @@
               </span>
               <span class="icon-link icon-link--large accordion-table__item__toggler">
                 {% set open_members_button %}
-                  {{ "common.members" | translate }} ({{ members_list | length }}) {{ Icon('caret_down') }}
+                  {{ "common.members" | translate }} ({{ member_count }}) {{ Icon('caret_down') }}
                 {% endset %}
 
                 {% set close_members_button %}
-                  {{ "common.members" | translate }} ({{ members_list | length }}) {{ Icon('caret_up') }}
+                  {{ "common.members" | translate }} ({{ member_count }}) {{ Icon('caret_up') }}
                 {% endset %}
 
                 {{
@@ -62,21 +84,20 @@
             </div>
 
             {% call ToggleSection(section_name="members") %}
-              <ul>
+              <div>
-                {% for member in environment_info['members'] %}
+                {{ RolePanel(users=unassigned) }}
-                <li class="accordion-table__item__expanded">
+
-                  <div class="accordion-table__item__expanded_first">{{ member.name }}</div>
+                {% for role in csp_roles %}
-                  <div class="right">{{ member.role }}</div>
+                  {{ RolePanel(users=members_by_role[role], role=role) }}
-                </li>
                 {% endfor %}
-              </ul>
+              </div>
             {% endcall %}
 
             {% call ToggleSection(section_name="edit") %}
               <ul>
                 <li class="accordion-table__item__expanded">
-                  {% set edit_form = environment_info['edit_form'] %}
+                  {% set edit_form = environments_obj[env['env_name']]['edit_form'] %}
-                  <form action="{{ url_for('applications.update_environment', environment_id=environment_info['id']) }}" method="post">
+                  <form action="{{ url_for('applications.update_environment', environment_id=environments_obj[env['env_name']]['id']) }}" method="post">
                     {{ edit_form.csrf_token }}
                     {{ TextInput(edit_form.name) }}
                     {{