Render dropdowns for permissions

atst/forms/portfolio_member.py

@@ -1,4 +1,4 @@
-from wtforms.fields import StringField
+from wtforms.fields import StringField, FormField, FieldList
 from wtforms.fields.html5 import EmailField
 from wtforms.validators import Required, Email, Length
 
@@ -10,6 +10,7 @@ from atst.utils.localization import translate
 
 
 class PermissionsForm(BaseForm):
+    member = StringField()
     perms_app_mgmt = SelectField(
         None,
         choices=[
@@ -50,6 +51,10 @@ class PermissionsForm(BaseForm):
         return _data
 
 
+class MembersPermissionsForm(BaseForm):
+    members_permissions = FieldList(FormField(PermissionsForm))
+
+
 class EditForm(PermissionsForm):
     # This form also accepts a field for each environment in each application
     #  that the user is a member of

atst/routes/portfolios/index.py

@@ -8,9 +8,10 @@ from atst.domain.portfolios import Portfolios
 from atst.domain.audit_log import AuditLog
 from atst.domain.common import Paginator
 from atst.forms.portfolio import PortfolioForm
+from atst.forms.portfolio_member import MembersPermissionsForm
+from atst.models.permissions import Permissions
 from atst.domain.permission_sets import PermissionSets
 from atst.domain.authz.decorator import user_can_access_decorator as user_can
-from atst.models.permissions import Permissions
 
 
 @portfolios_bp.route("/portfolios")
@@ -23,27 +24,53 @@ def portfolios():
         return render_template("portfolios/blank_slate.html")
 
 
-def serialize_member(member):
+def permission_str(member, edit_perm_set, view_perm_set):
+    if member.has_permission_set(edit_perm_set):
+        return edit_perm_set
+    else:
+        return view_perm_set
+
+
+def serialize_member_form_data(member):
     return {
-        "member": member,
+        "member": member.user.full_name,
-        "app_mgmt": member.has_permission_set(
+        "perms_app_mgmt": permission_str(
-            PermissionSets.EDIT_PORTFOLIO_APPLICATION_MANAGEMENT
+            member,
+            PermissionSets.EDIT_PORTFOLIO_APPLICATION_MANAGEMENT,
+            PermissionSets.VIEW_PORTFOLIO_APPLICATION_MANAGEMENT,
         ),
-        "funding": member.has_permission_set(PermissionSets.EDIT_PORTFOLIO_FUNDING),
+        "perms_funding": permission_str(
-        "reporting": member.has_permission_set(PermissionSets.EDIT_PORTFOLIO_REPORTS),
+            member,
-        "portfolio_mgmt": member.has_permission_set(
+            PermissionSets.EDIT_PORTFOLIO_FUNDING,
-            PermissionSets.EDIT_PORTFOLIO_ADMIN
+            PermissionSets.VIEW_PORTFOLIO_FUNDING,
+        ),
+        "perms_reporting": permission_str(
+            member,
+            PermissionSets.EDIT_PORTFOLIO_REPORTS,
+            PermissionSets.VIEW_PORTFOLIO_REPORTS,
+        ),
+        "perms_portfolio_mgmt": permission_str(
+            member,
+            PermissionSets.EDIT_PORTFOLIO_ADMIN,
+            PermissionSets.VIEW_PORTFOLIO_ADMIN,
         ),
     }
 
 
-def render_admin_page(portfolio, form):
+def render_admin_page(portfolio, form=None):
     pagination_opts = Paginator.get_pagination_opts(http_request)
     audit_events = AuditLog.get_portfolio_events(portfolio, pagination_opts)
-    members_data = [serialize_member(member) for member in portfolio.members]
+    members_data = [serialize_member_form_data(member) for member in portfolio.members]
+
+    portfolio_form = PortfolioForm(data={"name": portfolio.name})
+    permissions_form = MembersPermissionsForm(
+        data={"members_permissions": members_data}
+    )
     return render_template(
         "portfolios/admin.html",
         form=form,
+        portfolio_form=portfolio_form,
+        permissions_form=permissions_form,
         portfolio=portfolio,
         audit_events=audit_events,
         user=g.current_user,
@@ -55,8 +82,7 @@ def render_admin_page(portfolio, form):
 @user_can(Permissions.VIEW_PORTFOLIO_ADMIN, message="view portfolio admin page")
 def portfolio_admin(portfolio_id):
     portfolio = Portfolios.get_for_update(portfolio_id)
-    form = PortfolioForm(data={"name": portfolio.name})
+    return render_admin_page(portfolio)
-    return render_admin_page(portfolio, form)
 
 
 @portfolios_bp.route("/portfolios/<portfolio_id>/edit", methods=["POST"])

styles/components/_portfolio_layout.scss

@@ -197,8 +197,6 @@
     }
 
     table {
-      box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
-
       thead {
         th:first-child {
           padding-left: 3 * $gap;
@@ -266,6 +264,14 @@
             font-size: 1.2rem;
           }
         }
+
+        .usa-input.usa-input--success {
+          margin: 0;
+        }
+
+        select {
+          border: none;
+        }
       }
 
       .add-member-link {

templates/components/options_input.html

@@ -1,7 +1,7 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/tooltip.html" import Tooltip %}
 
-{% macro OptionsInput(field, tooltip, inline=False) -%}
+{% macro OptionsInput(field, tooltip, inline=False, label=True) -%}
   <optionsinput
     name='{{ field.name }}'
     inline-template
@@ -12,6 +12,7 @@
       v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
 
       <fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
+        {% if label %}
           <legend>
             <div class="usa-input__title{% if not field.description %}-inline{% endif %}">
               {{ field.label | striptags}}
@@ -25,6 +26,7 @@
             <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
             <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
           </legend>
+        {% endif %}
 
         {{ field() }}
 

templates/fragments/admin/portfolio_members.html

@@ -1,4 +1,5 @@
 {% from "components/icon.html" import Icon %}
+{% from "components/options_input.html" import OptionsInput %}
 
 <section class="member-list">
   <div class='responsive-table-wrapper panel'>
@@ -37,31 +38,27 @@
       </thead>
 
       <tbody>
-        {% for member_data in members_data %}
+        {% for subform in permissions_form.members_permissions %}
           <tr>
-            <td class='name'>{{ member_data.member.user_name }}
+            <td class='name'>{{ subform.member.data }}
-              {% if member_data.member.user == user %}
+              {% if subform.member.data == user.full_name %}
                 <span class='you'>(<span class='green'>you</span>)</span>
                 {% set archive_button_class = 'usa-button-disabled' %}
               {% else %}
                 {% set archive_button_class = 'usa-button-secondary' %}
               {% endif %}
             </td>
-            {% set heading_perms = [member_data.app_mgmt, member_data.funding, member_data.reporting, member_data.portfolio_mgmt] %}
 
-            {% for has_perm in heading_perms %}
+            <td>{{ OptionsInput(subform.perms_app_mgmt, label=False) }}</td>
-              {% if has_perm %}
+            <td>{{ OptionsInput(subform.perms_funding, label=False) }}</td>
-                <td class='green'>Edit Access</td>
+            <td>{{ OptionsInput(subform.perms_reporting, label=False) }}</td>
-              {% else %}
+            <td>{{ OptionsInput(subform.perms_portfolio_mgmt, label=False) }}</td>
-                <td>View Only</td>
-              {% endif %}
-            {% endfor %}
 
         <td><button type="button" class='{{ archive_button_class }}'>{{ "portfolios.members.archive_button" | translate }}</button>
         </td>
-
         </tr>
         {% endfor %}
+
       </tbody>
     </table>
     <input type='submit' class='usa-button usa-button-primary' value='{{ "Save" }}' />

templates/portfolios/admin.html

@@ -14,12 +14,13 @@
 
     <div class="panel">
       <div class="panel__content">
+
         {% if user_can(permissions.VIEW_PORTFOLIO_NAME) %}
         <form method="POST" action="{{ url_for('portfolios.edit_portfolio', portfolio_id=portfolio.id) }}" autocomplete="false">
-            {{ form.csrf_token }}
+          {{ portfolio_form.csrf_token }}
           <div class='form-row'>
             <div class='form-col form-col--half'>
-                {{ TextInput(form.name, validation="portfolioName") }}
+              {{ TextInput(portfolio_form.name, validation="portfolioName") }}
             </div>
 
               <div class='edit-portfolio-name action-group'>

translations.yaml

@@ -138,6 +138,7 @@ forms:
     last_name_label: Last Name
     portfolio_role_description: 'The portfolio role controls whether a member is permitted to organize a portfolio into applications and environments, add members to this portfolio, and view billing information.'
     portfolio_role_label: Portfolio Role
+    access: Access Level
   new_request:
     am_poc_label: I am the Portfolio Owner
     average_daily_traffic_description: What is the average daily traffic you expect the systems under this cloud contract to use?
@@ -575,6 +576,8 @@ portfolios:
       funding: Funding
       reporting: Reporting
       portfolio_mgmt: Portfolio Mgmt
+      view_only: View Only
+      edit_access: Edit Access
 testing:
   example_string: Hello World
   example_with_variables: 'Hello, {name}!'