Add page for viewing application team

atst/routes/portfolios/members.py

@@ -23,22 +23,25 @@ from atst.models.permissions import Permissions
 from atst.utils.flash import formatted_flash as flash
 
 
+def serialize_portfolio_role(portfolio_role):
+    return {
+        "name": portfolio_role.user_name,
+        "status": portfolio_role.display_status,
+        "id": portfolio_role.user_id,
+        "role": portfolio_role.role_displayname,
+        "num_env": portfolio_role.num_environment_roles,
+        "edit_link": url_for(
+            "portfolios.view_member",
+            portfolio_id=portfolio_role.portfolio_id,
+            member_id=portfolio_role.user_id,
+        ),
+    }
+
+
 @portfolios_bp.route("/portfolios/<portfolio_id>/members")
 def portfolio_members(portfolio_id):
     portfolio = Portfolios.get_with_members(g.current_user, portfolio_id)
-    members_list = [
-        {
-            "name": k.user_name,
-            "status": k.display_status,
-            "id": k.user_id,
-            "role": k.role_displayname,
-            "num_env": k.num_environment_roles,
-            "edit_link": url_for(
-                "portfolios.view_member", portfolio_id=portfolio.id, member_id=k.user_id
-            ),
-        }
-        for k in portfolio.members
-    ]
+    members_list = [serialize_portfolio_role(k) for k in portfolio.members]
 
     return render_template(
         "portfolios/members/index.html",
@@ -49,6 +52,21 @@ def portfolio_members(portfolio_id):
     )
 
 
+@portfolios_bp.route("/portfolios/<portfolio_id>/applications/<application_id>/members")
+def application_members(portfolio_id, application_id):
+    portfolio = Portfolios.get_with_members(g.current_user, portfolio_id)
+    application = Applications.get(g.current_user, portfolio, application_id)
+    # TODO: this should show only members that have env roles in this application
+    members_list = [serialize_portfolio_role(k) for k in portfolio.members]
+
+    return render_template(
+        "portfolios/applications/members.html",
+        portfolio=portfolio,
+        application=application,
+        members=members_list,
+    )
+
+
 @portfolios_bp.route("/portfolios/<portfolio_id>/members/new")
 def new_member(portfolio_id):
     portfolio = Portfolios.get(g.current_user, portfolio_id)

js/components/members_list.js

@@ -61,8 +61,14 @@ export default {
 
   props: {
     members: Array,
-    role_choices: Array,
-    status_choices: Array,
+    role_choices: {
+      type: Array,
+      default: () => [],
+    },
+    status_choices: {
+      type: Array,
+      default: () => [],
+    },
   },
 
   data: function() {

templates/portfolios/applications/index.html

@@ -47,7 +47,7 @@
                     </a>
                     <div class='separator'></div>
                   {% endif %}
-                  <a class='icon-link' href='{{ url_for("portfolios.portfolio_members", portfolio_id=portfolio.id) }}'>
+                  <a class='icon-link' href='{{ url_for("portfolios.application_members", portfolio_id=portfolio.id, application_id=application.id) }}'>
                     <span>{{ "portfolios.applications.team_text" | translate }}</span>
                     <span class='counter'>{{ application.num_users }}</span>
                   </a>

templates/portfolios/applications/members.html

@@ -0,0 +1,81 @@
+{% extends "portfolios/applications/base.html" %}
+
+{% from "components/empty_state.html" import EmptyState %}
+{% from "components/icon.html" import Icon %}
+
+{% set secondary_breadcrumb = 'portfolios.applications.team_management.title' | translate({ "application_name": application.name }) %}
+
+{% block application_content %}
+
+<div class='subheading'>{{ 'portfolios.applications.team_management.subheading' | translate }}</div>
+
+{% if not portfolio.members %}
+
+  {% set user_can_invite = user_can(permissions.ASSIGN_AND_UNASSIGN_ATAT_ROLE) %}
+
+  {{ EmptyState(
+    'There are currently no members in this Portfolio.',
+    action_label='Invite a new Member' if user_can_invite else None,
+    action_href='/members/new' if user_can_invite else None,
+    sub_message=None if user_can_invite else 'Please contact your JEDI Cloud portfolio administrator to invite new members.',
+    icon='avatar'
+  ) }}
+
+
+{% else %}
+
+{% include "fragments/flash.html" %}
+
+<members-list
+  inline-template
+  id="search-template"
+  v-bind:members='{{ members | tojson}}'>
+  <div class='responsive-table-wrapper'>
+    <table v-cloak v-if='searchedList && searchedList.length'>
+      <thead>
+        <tr>
+          <th v-for="col in getColumns()" @click="updateSort(col.displayName)" :width="col.width" :class="col.class" scope="col">
+            !{ col.displayName }
+            <span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && sortInfo.isAscending">
+              {{ Icon("caret_down") }}
+            </span>
+            <span class="sorting-direction" v-if="col.displayName === sortInfo.columnName && !sortInfo.isAscending">
+              {{ Icon("caret_up") }}
+            </span>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr v-for='member in searchedList'>
+          <td>
+            <a :href="member.edit_link" class="icon-link icon-link--large" v-html="member.name"></a>
+          </td>
+          <td class="table-cell--align-right" v-if='member.num_env'>
+            <span v-html="member.num_env"></span>
+          </td>
+          <td class='table-cell--shrink' v-else>
+            <span class="label label--info">No Environment Access</span>
+          </td>
+          <td v-html="member.status"></td>
+          <td v-html="member.role"></td>
+        </tr>
+      </tbody>
+    </table>
+    <div v-else>
+      {{ EmptyState(
+        'No members found.',
+        action_label=None,
+        action_href=None,
+        sub_message='Please try a different search.',
+        icon=None
+      ) }}
+    </div>
+  </div>
+</members-list>
+
+{% endif %}
+
+
+{% endblock %}
+

translations.yaml

@@ -493,6 +493,9 @@ portfolios:
     environments_description: Each environment created within an application is logically separated from one another for easier management and security.
     update_button_text: Save Changes
     create_button_text: Create Application
+    team_management:
+      title: '{application_name} Team Management'
+      subheading: Team Management
 testing:
   example_string: Hello World
   example_with_variables: 'Hello, {name}!'