#2351: Org requests page - [RJM]

src/registrar/assets/js/get-gov.js

@@ -1168,7 +1168,6 @@ document.addEventListener('DOMContentLoaded', function() {
     const statusCheckboxes = document.querySelectorAll('input[name="filter-status"]');
     const statusIndicator = document.querySelector('.domain__filter-indicator');
     const statusToggle = document.querySelector('.usa-button--filter');
-    const noPortfolioFlag = document.getElementById('no-portfolio-js-flag');
     const portfolioElement = document.getElementById('portfolio-js-value');
     const portfolioValue = portfolioElement ? portfolioElement.getAttribute('data-portfolio') : null;
 
@@ -1226,7 +1225,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
             let markupForSuborganizationRow = '';
 
-            if (!noPortfolioFlag) {
+            if (portfolioValue) {
               markupForSuborganizationRow = `
                 <td>
                     <span class="text-wrap" aria-label="${domain.suborganization ? suborganization : 'No suborganization'}">${suborganization}</span>
@@ -1485,6 +1484,8 @@ document.addEventListener('DOMContentLoaded', function() {
     const tableHeaders = document.querySelectorAll('.domain-requests__table th[data-sortable]');
     const tableAnnouncementRegion = document.querySelector('.domain-requests__table-wrapper .usa-table__announcement-region');
     const resetSearchButton = document.querySelector('.domain-requests__reset-search');
+    const portfolioElement = document.getElementById('portfolio-js-value');
+    const portfolioValue = portfolioElement ? portfolioElement.getAttribute('data-portfolio') : null;
 
     /**
      * Delete is actually a POST API that requires a csrf token. The token will be waiting for us in the template as a hidden input.
@@ -1533,7 +1534,7 @@ document.addEventListener('DOMContentLoaded', function() {
      * @param {*} scroll - control for the scrollToElement functionality
      * @param {*} searchTerm - the search term
      */
-    function loadDomainRequests(page, sortBy = currentSortBy, order = currentOrder, scroll = scrollToTable, searchTerm = currentSearchTerm) {
+    function loadDomainRequests(page, sortBy = currentSortBy, order = currentOrder, scroll = scrollToTable, searchTerm = currentSearchTerm, portfolio = portfolioValue) {
       // fetch json of page of domain requests, given params
       let baseUrl = document.getElementById("get_domain_requests_json_url");
       if (!baseUrl) {
@@ -1545,7 +1546,12 @@ document.addEventListener('DOMContentLoaded', function() {
         return;
       }
 
-      fetch(`${baseUrlValue}?page=${page}&sort_by=${sortBy}&order=${order}&search_term=${searchTerm}`)
+      // fetch json of page of requests, given params
+      let url = `${baseUrlValue}?page=${page}&sort_by=${sortBy}&order=${order}&search_term=${searchTerm}`
+      if (portfolio)
+        url += `&portfolio=${portfolio}`
+
+      fetch(url)
         .then(response => response.json())
         .then(data => {
           if (data.error) {
@@ -1601,10 +1607,21 @@ document.addEventListener('DOMContentLoaded', function() {
             const actionLabel = request.action_label;
             const submissionDate = request.last_submitted_date ? new Date(request.last_submitted_date).toLocaleDateString('en-US', options) : `<span class="text-base">Not submitted</span>`;
 
-            // Even if the request is not deletable, we may need this empty string for the td if the deletable column is displayed
+            // Delete markup will either be a simple trigger or a 3 dots menu with a hidden trigger (in the case of portfolio requests page)
+            // Even if the request is not deletable, we may need these empty strings for the td if the deletable column is displayed
             let modalTrigger = '';
 
-            // If the request is deletable, create modal body and insert it
+            let markupCreatorRow = '';
+
+            if (portfolioValue) {
+              markupCreatorRow = `
+                <td>
+                    <span class="text-wrap break-word">${request.creator ? request.creator : ''}</span>
+                </td>
+              `
+            }
+
+            // If the request is deletable, create modal body and insert it. This is true for both requests and portfolio requests pages
             if (request.is_deletable) {
               let modalHeading = '';
               let modalDescription = '';
@@ -1627,7 +1644,7 @@ document.addEventListener('DOMContentLoaded', function() {
                   role="button" 
                   id="button-toggle-delete-domain-alert-${request.id}"
                   href="#toggle-delete-domain-alert-${request.id}"
-                  class="usa-button--unstyled text-no-underline late-loading-modal-trigger"
+                  class="usa-button text-secondary usa-button--unstyled text-no-underline late-loading-modal-trigger"
                   aria-controls="toggle-delete-domain-alert-${request.id}"
                   data-open-modal
                 >
@@ -1692,8 +1709,44 @@ document.addEventListener('DOMContentLoaded', function() {
                 `
 
               domainRequestsSectionWrapper.appendChild(modal);
+
+              // Request is deletable, modal and modalTrigger are built. Now test is portfolio requests page and enhace the modalTrigger markup
+              if (portfolioValue) {
+                modalTrigger = `
+                <div class="usa-accordion usa-accordion--more-actions margin-right-2">
+                  <div class="usa-accordion__heading">
+                    <button
+                      type="button"
+                      class="usa-button usa-button--unstyled usa-button--with-icon usa-accordion__button usa-button--more-actions"
+                      aria-expanded="false"
+                      aria-controls="more-actions-${request.id}"
+                    >
+                      <svg class="usa-icon top-2px" aria-hidden="true" focusable="false" role="img" width="24">
+                        <use xlink:href="/public/img/sprite.svg#more_vert"></use>
+                      </svg>
+                    </button>
+                  </div>
+                  <div id="more-actions-${request.id}" class="usa-accordion__content usa-prose shadow-1 left-auto right-0" hidden>
+                    <h2>More options</h2>
+                    <a 
+                      role="button" 
+                      id="button-toggle-delete-domain-alert-${request.id}"
+                      href="#toggle-delete-domain-alert-${request.id}"
+                      class="usa-button text-secondary usa-button--unstyled text-no-underline late-loading-modal-trigger"
+                      aria-controls="toggle-delete-domain-alert-${request.id}"
+                      data-open-modal
+                    >
+                      <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
+                        <use xlink:href="/public/img/sprite.svg#delete"></use>
+                      </svg> Delete <span class="usa-sr-only">${domainName}</span>
+                    </a>
+                  </div>
+                </div>
+                `
+              }
             }
 
+
             const row = document.createElement('tr');
             row.innerHTML = `
               <th scope="row" role="rowheader" data-label="Domain name">
@@ -1702,6 +1755,7 @@ document.addEventListener('DOMContentLoaded', function() {
               <td data-sort-value="${new Date(request.last_submitted_date).getTime()}" data-label="Date submitted">
                 ${submissionDate}
               </td>
+              ${markupCreatorRow}
               <td data-label="Status">
                 ${request.status}
               </td>
@@ -1817,6 +1871,36 @@ document.addEventListener('DOMContentLoaded', function() {
       });
     }
 
+    function closeMoreActionMenu(accordionIsOpen) {
+      if (accordionIsOpen.getAttribute("aria-expanded") === "true") {
+        accordionIsOpen.click();
+      }
+    }
+
+    document.addEventListener('focusin', function(event) {
+      const accordions = document.querySelectorAll('.usa-accordion--more-actions');
+      const openAccordions = document.querySelectorAll('.usa-button--more-actions[aria-expanded="true"]');
+
+      openAccordions.forEach((openAccordionButton) => {
+        const accordion = openAccordionButton.closest('.usa-accordion--more-actions'); // Find the corresponding accordion
+        if (accordion && !accordion.contains(event.target)) {
+          closeMoreActionMenu(openAccordionButton); // Close the accordion if the focus is outside
+        }
+      });
+    });
+
+    document.addEventListener('click', function(event) {
+      const accordions = document.querySelectorAll('.usa-accordion--more-actions');
+      const openAccordions = document.querySelectorAll('.usa-button--more-actions[aria-expanded="true"]');
+
+      openAccordions.forEach((openAccordionButton) => {
+        const accordion = openAccordionButton.closest('.usa-accordion--more-actions'); // Find the corresponding accordion
+        if (accordion && !accordion.contains(event.target)) {
+          closeMoreActionMenu(openAccordionButton); // Close the accordion if the click is outside
+        }
+      });
+    });
+
     // Initial load
     loadDomainRequests(1);
   }

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

@@ -1,6 +1,7 @@
 @use "uswds-core" as *;
 
-.usa-accordion--select {
+.usa-accordion--select,
+.usa-accordion--more-actions {
     display: inline-block;
     width: auto;
     position: relative;
@@ -31,3 +32,8 @@
         margin-top: 0 !important;
     }
 }
+
+tr:last-child .usa-accordion--more-actions .usa-accordion__content {
+    top: auto;
+    bottom: 20px;
+}

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

@@ -200,6 +200,11 @@ abbr[title] {
   }
 }
 
-.margin-right-neg-4px {
-  margin-right: -4px;
+// Boost this USWDS utility class for the accordions in the portfolio requests table
+.left-auto {
+  left: auto!important;
+}
+
+.break-word {
+  word-break: break-word;
 }

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

@@ -89,14 +89,16 @@
         .usa-nav__primary {
             .usa-nav-link,
             .usa-nav-link:hover,
-            .usa-nav-link:active  {
+            .usa-nav-link:active,
+            button  {
                 color: color('primary');
                 font-weight: font-weight('normal');
                 font-size: 16px;
             }
             .usa-current,
             .usa-current:hover,
-            .usa-current:active  {
+            .usa-current:active,
+            button.usa-current {
                 font-weight: font-weight('bold');
             }
         }

src/registrar/config/urls.py

@@ -78,6 +78,11 @@
         views.PortfolioDomainRequestsView.as_view(),
         name="domain-requests",
     ),
+    path(
+        "no-organization-requests/",
+        views.PortfolioNoDomainRequestsView.as_view(),
+        name="no-portfolio-requests",
+    ),
     path(
         "organization/",
         views.PortfolioOrganizationView.as_view(),

src/registrar/context_processors.py

@@ -66,20 +66,20 @@ def portfolio_permissions(request):
             return {
                 "has_base_portfolio_permission": request.user.has_base_portfolio_permission(portfolio),
                 "has_domains_portfolio_permission": request.user.has_domains_portfolio_permission(portfolio),
-                "has_domain_requests_portfolio_permission": request.user.has_domain_requests_portfolio_permission(
+                "has_requests_portfolio_permission": request.user.has_requests_portfolio_permission(
                     portfolio
                 ),
-                "has_view_suborganization": request.user.has_view_suborganization(portfolio),
-                "has_edit_suborganization": request.user.has_edit_suborganization(portfolio),
+                "has_view_suborganization_portfolio_permission": request.user.has_view_suborganization_portfolio_permission(portfolio),
+                "has_edit_suborganization_portfolio_permission": request.user.has_edit_suborganization_portfolio_permission(portfolio),
                 "portfolio": portfolio,
                 "has_organization_feature_flag": True,
             }
         return {
             "has_base_portfolio_permission": False,
             "has_domains_portfolio_permission": False,
-            "has_domain_requests_portfolio_permission": False,
-            "has_view_suborganization": False,
-            "has_edit_suborganization": False,
+            "has_requests_portfolio_permission": False,
+            "has_view_suborganization_portfolio_permission": False,
+            "has_edit_suborganization_portfolio_permission": False,
             "portfolio": None,
             "has_organization_feature_flag": False,
         }
@@ -89,9 +89,9 @@ def portfolio_permissions(request):
         return {
             "has_base_portfolio_permission": False,
             "has_domains_portfolio_permission": False,
-            "has_domain_requests_portfolio_permission": False,
-            "has_view_suborganization": False,
-            "has_edit_suborganization": False,
+            "has_requests_portfolio_permission": False,
+            "has_view_suborganization_portfolio_permission": False,
+            "has_edit_suborganization_portfolio_permission": False,
             "portfolio": None,
             "has_organization_feature_flag": False,
         }

src/registrar/migrations/0123_alter_portfolioinvitation_portfolio_additional_permissions_and_more.py

@@ -0,0 +1,64 @@
+# Generated by Django 4.2.10 on 2024-09-05 23:39
+
+import django.contrib.postgres.fields
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("registrar", "0122_create_groups_v16"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="portfolioinvitation",
+            name="portfolio_additional_permissions",
+            field=django.contrib.postgres.fields.ArrayField(
+                base_field=models.CharField(
+                    choices=[
+                        ("view_all_domains", "View all domains and domain reports"),
+                        ("view_managed_domains", "View managed domains"),
+                        ("view_member", "View members"),
+                        ("edit_member", "Create and edit members"),
+                        ("view_all_requests", "View all requests"),
+                        ("edit_requests", "Create and edit requests"),
+                        ("view_portfolio", "View organization"),
+                        ("edit_portfolio", "Edit organization"),
+                        ("view_suborganization", "View suborganization"),
+                        ("edit_suborganization", "Edit suborganization"),
+                    ],
+                    max_length=50,
+                ),
+                blank=True,
+                help_text="Select one or more additional permissions.",
+                null=True,
+                size=None,
+            ),
+        ),
+        migrations.AlterField(
+            model_name="userportfoliopermission",
+            name="additional_permissions",
+            field=django.contrib.postgres.fields.ArrayField(
+                base_field=models.CharField(
+                    choices=[
+                        ("view_all_domains", "View all domains and domain reports"),
+                        ("view_managed_domains", "View managed domains"),
+                        ("view_member", "View members"),
+                        ("edit_member", "Create and edit members"),
+                        ("view_all_requests", "View all requests"),
+                        ("edit_requests", "Create and edit requests"),
+                        ("view_portfolio", "View organization"),
+                        ("edit_portfolio", "Edit organization"),
+                        ("view_suborganization", "View suborganization"),
+                        ("edit_suborganization", "Edit suborganization"),
+                    ],
+                    max_length=50,
+                ),
+                blank=True,
+                help_text="Select one or more additional permissions.",
+                null=True,
+                size=None,
+            ),
+        ),
+    ]