Team members section read only version

- display all members in a table and list perms and environments

atst/routes/applications/settings.py

@@ -94,8 +94,8 @@ def get_form_permission_value(member, edit_perm_set):
         return PermissionSets.VIEW_APPLICATION
 
 
-def get_team_form(application):
+def get_members_data(application):
-    team_data = []
+    members_data = []
     for member in application.members:
         permission_sets = {
             "perms_team_mgmt": get_form_permission_value(
@@ -117,7 +117,7 @@ def get_team_form(application):
             }
             for role in roles
         ]
-        team_data.append(
+        members_data.append(
             {
                 "role_id": member.id,
                 "user_name": member.user_name,
@@ -126,7 +126,7 @@ def get_team_form(application):
             }
         )
 
-    return TeamForm(data={"members": team_data})
+    return members_data
 
 
 def get_new_member_form(application):
@@ -144,8 +144,8 @@ def render_settings_page(application, **kwargs):
     new_env_form = EditEnvironmentForm()
     pagination_opts = Paginator.get_pagination_opts(http_request)
     audit_events = AuditLog.get_application_events(application, pagination_opts)
-    team_form = get_team_form(application)
     new_member_form = get_new_member_form(application)
+    members = get_members_data(application)
 
     if "application_form" not in kwargs:
         kwargs["application_form"] = ApplicationForm(
@@ -159,8 +159,8 @@ def render_settings_page(application, **kwargs):
         members_form=members_form,
         new_env_form=new_env_form,
         audit_events=audit_events,
-        team_form=team_form,
         new_member_form=new_member_form,
+        members=members,
         **kwargs,
     )
 

styles/components/_portfolio_layout.scss

@@ -139,6 +139,9 @@
     }
 
     table {
+      margin: 0;
+      width: 100%;
+
       thead {
         th:first-child {
           padding-left: 3 * $gap;
@@ -282,6 +285,13 @@
   .application-content {
     .subheading {
       @include subheading;
+      position: relative;
+
+      .icon-link {
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
     }
 
     .panel {

templates/fragments/applications/edit_team.html

@@ -1,88 +0,0 @@
-{% from "components/options_input.html" import OptionsInput %}
-{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
-
-{{ team_form.csrf_token }}
-
-{% for member_form in team_form.members %}
-  {% set delete_modal_id = "delete-user-{}".format(member_form.id) %}
-  {% set environment_roles_form = member_form.environment_roles %}
-  {% set permissions_form = member_form.permission_sets %}
-
-  <toggler inline-template>
-    <li class="accordion-table__item">
-      <div class="accordion-table__item-content row">
-        <div class="col col--grow">
-          <div class="member-list__name">
-            {{ member_form.user_name.data }}
-          </div>
-        </div>
-        <div class="col col--grow">{{ OptionsInput(permissions_form.perms_team_mgmt, label=False, watch=True) }}</div>
-        <div class="col col--grow">{{ OptionsInput(permissions_form.perms_env_mgmt, label=False, watch=True) }}</div>
-        <div class="col col--grow">{{ OptionsInput(permissions_form.perms_del_env, label=False, watch=True) }}</div>
-        <div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
-          {% set open_html %}
-            {{ "portfolios.applications.team_settings.environments" | translate }} ({{ environment_roles_form | length }}) {{ Icon('caret_down') }}
-          {% endset %}
-
-          {% set close_html %}
-            {{ "portfolios.applications.team_settings.environments" | translate }} ({{ environment_roles_form | length }}) {{ Icon('caret_up') }}
-          {% endset %}
-
-          {{
-            ToggleButton(
-            open_html=open_html,
-            close_html=close_html,
-            section_name="environments"
-          )
-          }}
-        </div>
-      </div>
-      {% call ToggleSection(section_name="environments") %}
-        <ul>
-          {% for environment_form in environment_roles_form %}
-            <li class="accordion-table__item__expanded">
-              <environment-role inline-template v-bind:initial-role="'{{ environment_form.role.data }}'">
-                <div>
-                  <div class="row">
-                    <div class="col col--grow">
-                      {{ environment_form.environment_name.data }}
-                    </div>
-                    <div class="accordion-table__item__expanded-role col col--grow">
-                      <div class="right">
-                        <span v-html="role">
-                        </span>
-                        <div class="icon-link" v-on:click="toggle">
-                          {{ Icon("edit") }}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="member-list__role-select" v-show="expanded">
-                    {{ environment_form.role.label }}
-                    {{ environment_form.role(**{"v-on:change": "radioChange", "class": "member-list____role-select__radio"}) }}
-                    <button
-                      class="usa-button"
-                      type="button"
-                      v-on:click="toggle"
-                      >
-                      {{ "common.close" | translate }}
-                    </button>
-                    {{ environment_form.environment_id() }}
-                  </div>
-                </div>
-              </environment-role>
-            </li>
-          {% endfor %}
-        </ul>
-        <div class="accordion-table__item__action-group">
-          {% if user_can(permissions.DELETE_APPLICATION_MEMBER) %}
-            <a class="usa-button button-danger" v-on:click="openModal('{{ delete_modal_id }}')">
-              {{ "portfolios.applications.remove_member.button" | translate }}
-            </a>
-          {% endif %}
-        </div>
-      {% endcall %}
-      {{ member_form.role_id() }}
-    </li>
-  </toggler>
-{% endfor %}

templates/fragments/applications/read_only_team.html

@@ -1,47 +0,0 @@
-{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
-
-{% for member in team_form.members %}
-  {% set user_permissions = [member.permission_sets.perms_team_mgmt, member.permission_sets.perms_env_mgmt, member.permission_sets.perms_del_env] %}
-
-  {% macro PermissionField(value) %}
-    <div class="col col--grow user-permission{% if "Edit" in value or "Yes" in value %} green{% endif %}">{{ value }}</div>
-  {% endmacro %}
-
-  <toggler inline-template>
-    <li class="accordion-table__item">
-      <div class="accordion-table__item-content row">
-        <div class="col col--grow">{{ member.user_name.data }}</div>
-        {% for permission in user_permissions %}
-          {% set perm = dict(permission.choices).get(permission.data) %}
-          {{ PermissionField(perm) }}
-        {% endfor %}
-        <div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
-          {% set open_html %}
-          {{ "portfolios.applications.team_settings.environments" | translate }} ({{ member.environment_roles | length }}) {{ Icon('caret_down') }}
-          {% endset %}
-
-          {% set close_html %}
-            {{ "portfolios.applications.team_settings.environments" | translate }} ({{ member.environment_roles | length }}) {{ Icon('caret_up') }}
-          {% endset %}
-
-          {{
-            ToggleButton(
-              open_html=open_html,
-              close_html=close_html,
-              section_name="environments"
-            )
-          }}
-        </div>
-      </div>
-      {% call ToggleSection(section_name="environments") %}
-        <ul>
-          {% for environment in member.environment_roles %}
-            <li class="accordion-table__item__expanded">
-              {{ environment.environment_name.data }}
-            </li>
-          {% endfor %}
-        </ul>
-      {% endcall %}
-    </li>
-  </toggler>
-{% endfor %}

templates/portfolios/applications/settings.html

@@ -98,100 +98,49 @@
 
   {% else %}
     <div class='subheading'>
-      {{ 'portfolios.applications.team_settings.subheading' | translate }}
+      {{ 'portfolios.applications.settings.team_members' | translate }}
+
+      {% set new_member_modal_name = "add-app-mem" %}
+      {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
+        <a class="icon-link modal-link" v-on:click="openModal('{{ new_member_modal_name }}')">
+          {{ "portfolios.admin.add_new_member" | translate }}
+          {{ Icon("plus") }}
+        </a>
+      {% endif %}
     </div>
 
     <section class="member-list application-list" id="application-members">
-      <base-form inline-template>
+      <div class='responsive-table-wrapper panel'>
-        <form method='POST' id="team" action='{{ url_for("applications.update_team", application_id=application.id) }}' autocomplete="off" enctype="multipart/form-data">
+        {% if g.matchesPath("application-members") %}
-          <div class='responsive-table-wrapper panel'>
+          {% include "fragments/flash.html" %}
-            {% if g.matchesPath("application-members") %}
+        {% endif %}
-              {% include "fragments/flash.html" %}
+        <table>
-            {% endif %}
+          <thead>
-              <header>
+            <tr>
-                <div class="responsive-table-wrapper__header">
+              <th>Member</th>
-                  <div class="responsive-table-wrapper__title row">
+              <th>Project Permissions</th>
-                    <div class="h3">
+              <th>Environment Access</th>
-                      {{ "portfolios.applications.team_settings.section.title" | translate({ "application_name": application.name }) }}
+            </tr>
-                      <p class="member-list__subhead">Members ({{ team_form.members | length }})</p>
+          </thead>
-                    </div>
+          <tbody>
-                  </div>
+            {% for member in members %}
-                </div>
+              <tr>
-              </header>
+                <td>{{ member.user_name }}</td>
-
+                <td>
-              <div class="accordion-table accordion-table-list">
+                  {% for perm, value in member.permission_sets.items() %}
-                <div class="accordion-table__head row">
+                    {{ ("portfolios.applications.members.{}.{}".format(perm, value)) | translate }}<br>
-                  <div class="col col--grow">
+                  {% endfor %}
-                    {{ "common.name" | translate }}
+                </td>
-                  </div>
+                <td>
-                  <div class="col col--grow">
+                  {% for env in member.environment_roles %}
-                    {{ "portfolios.applications.team_settings.section.table.team_management" | translate }}
+                    {{ env.environment_name }}{% if not env == member.environment_roles[-1]%},{% endif %}
-                  </div>
+                  {% endfor %}
-                  <div class="col col--grow">
+                </td>
-                    {{ "portfolios.applications.team_settings.section.table.environment_management" | translate }}
+              </tr>
-                  </div>
+            {% endfor %}
-                  <div class="col col--grow">
+          </tbody>
-                    {{ "portfolios.applications.team_settings.section.table.delete_access" | translate }}
+        </table>
-                  </div>
+      </div>
-                  <div class="col col--grow">
-                    &nbsp;
-                  </div>
-                </div>
-                <ul class="accordion-table__items">
-                  {% if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
-                    {% include "fragments/applications/edit_team.html" %}
-                  {% elif user_can(permissions.VIEW_APPLICATION_MEMBER) %}
-                    {% include "fragments/applications/read_only_team.html" %}
-                  {% endif %}
-                </ul>
-              </div>
-
-              <div class="panel__footer">
-                <div class="action-group save">
-                  {% if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
-                    {{ SaveButton(text=('common.save' | translate), element="input", form="team") }}
-                  {% endif %}
-
-                  {% set new_member_modal_name = "add-app-mem" %}
-                  {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
-                    <a class="icon-link modal-link" v-on:click="openModal('{{ new_member_modal_name }}')">
-                      {{ "portfolios.admin.add_new_member" | translate }}
-                      {{ Icon("plus") }}
-                    </a>
-                  {% endif %}
-                </div>
-              </div>
-            </div>
-        </form>
-      </base-form>
-
-      {% if user_can(permissions.DELETE_APPLICATION_MEMBER) %}
-        {% for member_form in team_form.members %}
-          {% set delete_modal_id = "delete-user-{}".format(member_form.id) %}
-          {% call Modal(name=delete_modal_id) %}
-            <h1>
-              {{ "portfolios.applications.remove_member.header" | translate }}
-            </h1>
-
-            {{
-              Alert(
-                title=("components.modal.destructive_title" | translate),
-                message=("portfolios.applications.remove_member.alert.message" | translate({"user_name": member_form.user_name.data})),
-                level="warning"
-              )
-            }}
-
-            {{
-              DeleteConfirmation(
-                modal_id=delete_modal_id,
-                delete_text=('portfolios.applications.remove_member.button' | translate),
-                delete_action=url_for('applications.remove_member', application_id=application.id, application_role_id=member_form.data.role_id),
-                form=member_form
-              )
-            }}
-          {% endcall %}
-        {% endfor %}
-      {% endif %}
 
       {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
         {% import "fragments/applications/new_member_modal_content.html" as member_steps %}

translations.yaml

@@ -311,6 +311,7 @@ portfolios:
     settings_heading: Application Settings
     settings:
       name_description: Name and Description
+      team_members: Team Members
     team_settings:
       blank_slate:
         action_label: Invite a new team member
@@ -323,7 +324,6 @@ portfolios:
           environment_management: Environment Management
           team_management: Team Management
         title: '{application_name} Team'
-      subheading: Team Settings
       title: '{application_name} Team Settings'
       add_to_environment: Add to existing environment
     team_text: Team
@@ -335,6 +335,15 @@ portfolios:
         manage_envs: 'Allow member to <strong>add</strong> and <strong>rename environments</strong> within the application.'
         delete_envs: 'Allow member to <strong>delete environments</strong> within the application.'
         manage_team: 'Allow member to <strong>add, update,</strong> and <strong>remove members</strong> from the application team.'
+      perms_team_mgmt:
+        view_application: View Team
+        edit_application_team: Edit Team
+      perms_env_mgmt:
+        view_application: View Environments
+        edit_application_environments: Edit Environments
+      perms_del_env:
+        view_application: ""
+        delete_application_environments: Delete Application
   index:
     empty:
       start_button: Start a new JEDI portfolio