Merge pull request #2945 from cisagov/dk/2763-member-expand

#2763: Expanded row functionality

src/registrar/assets/sass/_theme/_buttons.scss

@@ -258,3 +258,11 @@ a.text-secondary,
 a.text-secondary:hover {
   color: $theme-color-error;
 }
+
+.usa-button--show-more-button {
+  font-size: size('ui', 'xs');
+  text-decoration: none;
+  .usa-icon {
+    top: 6px;
+  }
+}

src/registrar/assets/sass/_theme/_tables.scss

@@ -56,8 +56,10 @@ th {
       border: none;
     }
 
-    td, th {
-      border-bottom: 1px solid color('base-lighter');
+    tr:not(.hide-td-borders) {
+      td, th {
+        border-bottom: 1px solid color('base-lighter');
+      }
     }
 
     thead th {

src/registrar/assets/sass/_theme/_typography.scss

@@ -28,3 +28,8 @@ h2 {
 .usa-form fieldset {
   font-size: 1rem;
 }
+
+.p--blockquote {
+  padding-left: units(1);
+  border-left: 2px solid color('base-lighter');
+}

src/registrar/models/portfolio_invitation.py

@@ -79,19 +79,8 @@ def get_managed_domains_count(self):
     def get_portfolio_permissions(self):
         """
         Retrieve the permissions for the user's portfolio roles from the invite.
-        This is similar logic to _get_portfolio_permissions in user_portfolio_permission
         """
-        # Use a set to avoid duplicate permissions
-        portfolio_permissions = set()
-
-        if self.roles:
-            for role in self.roles:
-                portfolio_permissions.update(UserPortfolioPermission.PORTFOLIO_ROLE_PERMISSIONS.get(role, []))
-
-        if self.additional_permissions:
-            portfolio_permissions.update(self.additional_permissions)
-
-        return list(portfolio_permissions)
+        return UserPortfolioPermission.get_portfolio_permissions(self.roles, self.additional_permissions)
 
     @transition(field="status", source=PortfolioInvitationStatus.INVITED, target=PortfolioInvitationStatus.RETRIEVED)
     def retrieve(self):

src/registrar/models/user_portfolio_permission.py

@@ -92,16 +92,18 @@ def _get_portfolio_permissions(self):
         """
         Retrieve the permissions for the user's portfolio roles.
         """
+        return self.get_portfolio_permissions(self.roles, self.additional_permissions)
+
+    @classmethod
+    def get_portfolio_permissions(cls, roles, additional_permissions):
+        """Class method to return a list of permissions based on roles and addtl permissions"""
         # Use a set to avoid duplicate permissions
         portfolio_permissions = set()
-
-        if self.roles:
-            for role in self.roles:
-                portfolio_permissions.update(self.PORTFOLIO_ROLE_PERMISSIONS.get(role, []))
-
-        if self.additional_permissions:
-            portfolio_permissions.update(self.additional_permissions)
-
+        if roles:
+            for role in roles:
+                portfolio_permissions.update(cls.PORTFOLIO_ROLE_PERMISSIONS.get(role, []))
+        if additional_permissions:
+            portfolio_permissions.update(additional_permissions)
         return list(portfolio_permissions)
 
     def clean(self):

src/registrar/models/utility/portfolio_helper.py

@@ -36,3 +36,7 @@ class UserPortfolioPermissionChoices(models.TextChoices):
     @classmethod
     def get_user_portfolio_permission_label(cls, user_portfolio_permission):
         return cls(user_portfolio_permission).label if user_portfolio_permission else None
+
+    @classmethod
+    def to_dict(cls):
+        return {key: value.value for key, value in cls.__members__.items()}

src/registrar/templates/includes/members_table.html

@@ -39,16 +39,16 @@
     </div>
 
     <!-- ---------- MAIN TABLE ---------- -->
-    <div class="members__table-wrapper display-none usa-table-container--scrollable margin-top-0" tabindex="0">
+    <div class="members__table-wrapper display-none margin-top-0">
       <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked members__table">
         <caption class="sr-only">Your registered members</caption>
         <thead>
           <tr>
-            <th data-sortable="member" scope="col" role="columnheader">Member</th>
-            <th data-sortable="last_active" scope="col" role="columnheader">Last Active</th>
+            <th data-sortable="member" role="columnheader" id="header-member">Member</th>
+            <th data-sortable="last_active" role="columnheader" id="header-last-active">Last Active</th>
             <th 
-              scope="col" 
-              role="columnheader" 
+              role="columnheader"
+              id="header-action"
             >
               <span class="usa-sr-only">Action</span>
             </th>