Cleanup and base filter state revision

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

@@ -46,7 +46,7 @@ function ScrollToElement(attributeName, attributeValue) {
   } else if (attributeName === 'id') {
     targetEl = document.getElementById(attributeValue);
   } else {
-    console.log('Error: unknown attribute name provided.');
+    console.error('Error: unknown attribute name provided.');
     return; // Exit the function if an invalid attributeName is provided
   }
 
@@ -108,7 +108,7 @@ function ScrollToElement(attributeName, attributeValue) {
   } else if (attributeName === 'id') {
     targetEl = document.getElementById(attributeValue);
   } else {
-    console.log('Error: unknown attribute name provided.');
+    console.error('Error: unknown attribute name provided.');
     return; // Exit the function if an invalid attributeName is provided
   }
 
@@ -1141,26 +1141,6 @@ document.addEventListener('DOMContentLoaded', function() {
     const statusIndicator = document.querySelector('.domain__filter-indicator');
     const statusToggle = document.querySelector('.usa-button--filter');
 
-    // Initialize the filters, but only if we're on the org domains page
-    const portfolioSidenav = document.querySelector('.usa-sidenav--portfolio');
-    if (portfolioSidenav) {
-      statusCheckboxes.forEach(checkbox => {
-        const checkboxValue = checkbox.value;
-        // Update currentStatus array based on checkbox state
-        if (checkbox.checked) {
-          currentStatus.push(checkboxValue);
-        } else {
-          const index = currentStatus.indexOf(checkboxValue);
-          if (index > -1) {
-            currentStatus.splice(index, 1);
-          }
-        }
-      });
-    } else {
-      // For non-portfolio users, disable filtering
-      currentStatus = ['unknown', 'ready', 'on hold', 'expired', 'deleted'];
-    }
-
     /**
      * Loads rows in the domains list, as well as updates pagination around the domains list
      * based on the supplied attributes.
@@ -1176,7 +1156,7 @@ document.addEventListener('DOMContentLoaded', function() {
         .then(response => response.json())
         .then(data => {
           if (data.error) {
-            console.log('Error in AJAX call: ' + data.error);
+            console.error('Error in AJAX call: ' + data.error);
             return;
           }
 
@@ -1305,7 +1285,7 @@ document.addEventListener('DOMContentLoaded', function() {
         }
 
         // Manage visibility of reset filters button
-        if (currentStatus.length == statusCheckboxes.length) {
+        if (currentStatus.length == 0) {
           hideElement(resetFiltersButton);
         } else {
           showElement(resetFiltersButton);
@@ -1345,9 +1325,7 @@ document.addEventListener('DOMContentLoaded', function() {
     function resetFilters() {
       currentStatus = [];
       statusCheckboxes.forEach(checkbox => {
-        checkbox.checked = true; 
+        checkbox.checked = false; 
-        const checkboxValue = checkbox.value;
-        currentStatus.push(checkboxValue);
       });
       hideElement(resetFiltersButton);
       loadDomains(1, 'id', 'asc');
@@ -1364,6 +1342,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
     function updateStatusIndicator() {
       statusIndicator.innerHTML = '';
+      if (currentStatus.length)
         statusIndicator.innerHTML = '(' + currentStatus.length + ')';
     }
 
@@ -1375,7 +1354,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Instead of managing the toggle/close on the filter buttons in all edge cases (user clicks on search, user clicks on ANOTHER filter,
     // user clicks on main nav...) we add a listener and close the filters whenever the focus shifts out of the dropdown menu/filter button.
-    // NOTE: We may need to evovle this as we add more filters.
+    // NOTE: We may need to evolve this as we add more filters.
     document.addEventListener('focusin', function(event) {
       const accordion = document.querySelector('.usa-accordion--select');
       const accordionIsOpen = document.querySelector('.usa-button--filter[aria-expanded="true"]');
@@ -1481,7 +1460,7 @@ document.addEventListener('DOMContentLoaded', function() {
         .then(response => response.json())
         .then(data => {
           if (data.error) {
-            console.log('Error in AJAX call: ' + data.error);
+            console.error('Error in AJAX call: ' + data.error);
             return;
           }
 

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

@@ -212,6 +212,6 @@ abbr[title] {
   color: #{$dhs-dark-gray-85};
 }
 
-.width-145 {
+.width-145px {
   width: 145px;
 }

src/registrar/templates/includes/domain_requests_table.html

@@ -33,7 +33,7 @@
         </section>
       </div>
     </div>
-    <div class="domain-requests__table-wrapper display-none usa-table-container--scrollable" tabindex="0">
+    <div class="domain-requests__table-wrapper display-none usa-table-container--scrollable margin-top-0" tabindex="0">
       <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked domain-requests__table">
         <caption class="sr-only">Your domain requests</caption>
         <thead>

src/registrar/templates/includes/domains_table.html

@@ -34,7 +34,8 @@
       </div>
     </div>
     {% if portfolio %}
-    <span class="margin-right-2 text-base">Filter by</span>
+    <div class="display-flex flex-align-center margin-top-1"> 
+      <span class="margin-right-2 margin-top-neg-1 text-base">Filter by</span>
       <div class="usa-accordion usa-accordion--select margin-right-2">
         <div class="usa-accordion__heading">
           <button
@@ -43,7 +44,7 @@
             aria-expanded="false"
             aria-controls="filter-status"
           >
-          <span class="domain__filter-indicator text-bold">(5)</span> Status
+            <span class="domain__filter-indicator text-bold"></span> Status
             <svg class="usa-icon top-2px" aria-hidden="true" focusable="false" role="img" width="24">
               <use xlink:href="/public/img/sprite.svg#expand_more"></use>
             </svg>
@@ -52,7 +53,7 @@
         <div id="filter-status" class="usa-accordion__content usa-prose shadow-1">
           <h2>Status</h2>
           <fieldset class="usa-fieldset margin-top-0">
-          <legend class="usa-legend width-145">Select to apply <span class="sr-only">status</span> filter</legend>
+            <legend class="usa-legend width-145px">Select to apply <span class="sr-only">status</span> filter</legend>
             <div class="usa-checkbox">
               <input
                 class="usa-checkbox__input"
@@ -60,7 +61,6 @@
                 type="checkbox"
                 name="filter-status"
                 value="unknown"
-              checked="checked"
               />
               <label class="usa-checkbox__label" for="filter-status-dns-needed"
                 >DNS Needed</label
@@ -73,7 +73,6 @@
                 type="checkbox"
                 name="filter-status"
                 value="ready"
-              checked="checked"
               />
               <label class="usa-checkbox__label" for="filter-status-ready"
                 >Ready</label
@@ -86,7 +85,6 @@
                 type="checkbox"
                 name="filter-status"
                 value="on hold"
-              checked="checked"
               />
               <label class="usa-checkbox__label" for="filter-status-on-hold"
                 >On hold</label
@@ -99,7 +97,6 @@
                 type="checkbox"
                 name="filter-status"
                 value="expired"
-              checked="checked"
               />
               <label class="usa-checkbox__label" for="filter-status-expired"
                 >Expired</label
@@ -112,7 +109,6 @@
                 type="checkbox"
                 name="filter-status"
                 value="deleted"
-              checked="checked"
               />
               <label class="usa-checkbox__label" for="filter-status-deleted"
                 >Deleted</label
@@ -130,8 +126,9 @@
           <use xlink:href="/public/img/sprite.svg#close"></use>
         </svg>
       </button>
+    </div>
     {% endif %}
-    <div class="domains__table-wrapper display-none usa-table-container--scrollable" tabindex="0">
+    <div class="domains__table-wrapper display-none usa-table-container--scrollable margin-top-0" tabindex="0">
       <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked domains__table">
         <caption class="sr-only">Your registered domains</caption>
         <thead>

src/registrar/templates/portfolio_domains.html

@@ -3,6 +3,6 @@
 {% load static %}
 
 {% block portfolio_content %}
-    <h1>Domains</h1>
+    <h1 class="margin-bottom-neg-2" id="domains-header">Domains</h1>
     {% include "includes/domains_table.html" with portfolio=portfolio %}
 {% endblock %}

src/registrar/templates/portfolio_requests.html

@@ -3,7 +3,7 @@
 {% load static %}
 
 {% block portfolio_content %}
-    <h1>Domain requests</h1>
+    <h1 id="domain-requests-header">Domain requests</h1>
 
     {% comment %}
     IMPORTANT: