Issue #2349: Portfolio templates - [RJM]

src/djangooidc/tests/test_views.py

@@ -429,6 +429,10 @@ def test_login_callback_does_not_requires_step_up_auth(self, mock_client):
             # Create a mock request
             request = self.factory.get("/some-url")
             request.session = {"acr_value": ""}
+            # Mock user and its attributes
+            mock_user = MagicMock()
+            mock_user.is_authenticated = True
+            request.user = mock_user
             # Ensure that the CLIENT instance used in login_callback is the mock
             # patch _requires_step_up_auth to return False
             with patch("djangooidc.views._requires_step_up_auth", return_value=False), patch(

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

@@ -1140,6 +1140,7 @@ 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');
 
     /**
      * Loads rows in the domains list, as well as updates pagination around the domains list
@@ -1173,8 +1174,20 @@ document.addEventListener('DOMContentLoaded', function() {
             const expirationDateFormatted = expirationDate ? expirationDate.toLocaleDateString('en-US', options) : '';
             const expirationDateSortValue = expirationDate ? expirationDate.getTime() : '';
             const actionUrl = domain.action_url;
+            const suborganization = domain.suborganization ? domain.suborganization : '';
 
             const row = document.createElement('tr');
+
+            let markupForSuborganizationRow = '';
+
+            if (!noPortfolioFlag) {
+              markupForSuborganizationRow = `
+                <td>
+                    <span class="${suborganization ? 'ellipsis ellipsis--30 vertical-align-middle' : ''}" aria-label="${suborganization}" title="${suborganization}">${suborganization}</span>
+                </td>
+              `
+            }
+
             row.innerHTML = `
               <th scope="row" role="rowheader" data-label="Domain name">
                 ${domain.name}
@@ -1195,6 +1208,7 @@ document.addEventListener('DOMContentLoaded', function() {
                   <use aria-hidden="true" xlink:href="/public/img/sprite.svg#info_outline"></use>
                 </svg>
               </td>
+              ${markupForSuborganizationRow}
               <td>
                 <a href="${actionUrl}">
                   <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">

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

@@ -29,52 +29,14 @@ body {
 
 #wrapper.dashboard {
   background-color: color('primary-lightest');
-  padding-top: units(5);
-}
-
-.usa-logo {
-  @include at-media(desktop) {
-    margin-top: units(2);
-  }
-}
-
-.usa-logo__text {
-  @include typeset('sans', 'xl', 2);
-  color: color('primary-darker');
+  padding-top: units(5)!important;
 }
 
-.usa-nav__primary {
-  margin-top:units(1);
+#wrapper.dashboard--portfolio {
+  background-color: color('gray-1');
+  padding-top: units(4)!important;
 }
 
-.usa-nav__primary-username {
-  display: inline-block;
-  padding: units(1) units(2);
-  max-width: 208px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  @include at-media(desktop) {
-    padding: units(2);
-    max-width: 500px;
-  }
-}
-
-@include at-media(desktop) {
-  .usa-nav__primary-item:not(:first-child) {
-    position: relative;
-  }
-
-  .usa-nav__primary-item:not(:first-child)::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 0;
-    width: 0; /* No width since it's a border */
-    height: 40%;
-    border-left: solid 1px color('base-light');
-    transform: translateY(-50%);
-  }
-}
 
 .section--outlined {
   background-color: color('white');
@@ -136,10 +98,6 @@ footer {
   color: color('primary');
 }
 
-.usa-identifier__logo {
-  height: units(7);
-}
-
 abbr[title] {
   // workaround for underlining abbr element
   border-bottom: none;
@@ -179,47 +137,35 @@ abbr[title] {
   cursor: pointer;
 }
 
-.input-with-edit-button {
-  svg.usa-icon {
-    width: 1.5em !important;
-    height: 1.5em !important;
-    color: #{$dhs-green};
-    position: absolute;
-  }
-  &.input-with-edit-button__error {
-    svg.usa-icon {
-      color: #{$dhs-red};
-    }
-    div.input-with-edit-button__readonly-field {
-      color: #{$dhs-red};
-    }
-  }
+.padding--8-8-9 {
+  padding: 8px 8px 9px !important;
 }
 
-// We need to deviate from some default USWDS styles here
-// in this particular case, so we have to override this.
-.usa-form .usa-button.readonly-edit-button {
-  margin-top: 0px !important;
-  padding-top: 0px !important;
-  svg {
-    width: 1.25em !important;
-    height: 1.25em !important;
-  }
+.ellipsis {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-// Define some styles for the .gov header/logo
-.usa-logo button {
-  color: #{$dhs-dark-gray-85};
-  font-weight: 700;
-  font-family: family('sans');
-  font-size: 1.6rem;
-  line-height: 1.1;
+.ellipsis--23 {
+  max-width: 23ch;
 }
 
-.usa-logo button.usa-button--unstyled.disabled-button:hover{
-  color: #{$dhs-dark-gray-85};
+.ellipsis--30 {
+  max-width: 30ch;
 }
 
-.padding--8-8-9 {
-  padding: 8px 8px 9px !important;
+.ellipsis--50 {
+  max-width: 50ch;
+}
+
+.vertical-align-middle {
+  vertical-align: middle;
+}
+
+@include at-media(desktop) {
+  .ellipsis--desktop-50 {
+    max-width: 50ch;
+  }
 }

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

@@ -162,6 +162,34 @@ a.usa-button--unstyled:visited {
   }
 }
 
+.input-with-edit-button {
+  svg.usa-icon {
+    width: 1.5em !important;
+    height: 1.5em !important;
+    color: #{$dhs-green};
+    position: absolute;
+  }
+  &.input-with-edit-button__error {
+    svg.usa-icon {
+      color: #{$dhs-red};
+    }
+    div.readonly-field {
+      color: #{$dhs-red};
+    }
+  }
+}
+
+// We need to deviate from some default USWDS styles here
+// in this particular case, so we have to override this.
+.usa-form .usa-button.readonly-edit-button {
+  margin-top: 0px !important;
+  padding-top: 0px !important;
+  svg {
+    width: 1.25em !important;
+    height: 1.25em !important;
+  }
+}
+
 .usa-button--filter {
   width: auto;
   // For mobile stacking

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

@@ -0,0 +1,121 @@
+@use "uswds-core" as *;
+@use "cisa_colors" as *;
+
+// Define some styles for the .gov header/logo
+.usa-logo button {
+    color: #{$dhs-dark-gray-85};
+    font-weight: 700;
+    font-family: family('sans');
+    font-size: 1.6rem;
+    line-height: 1.1;
+}
+
+.usa-logo button:hover{
+    color: #{$dhs-dark-gray-85};
+}
+
+.usa-header {
+    .usa-logo {
+        @include at-media(desktop) {
+            margin-top: units(2);
+        }
+    }
+    .usa-logo__text {
+        @include typeset('sans', 'xl', 2);
+    }
+    .usa-nav__username {
+        max-width: 208px;
+        min-height: units(2);
+        @include at-media(desktop) {
+            max-width: 500px;
+        }
+    }
+    .padding-y-0 {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+    }
+}
+
+.usa-header--basic {
+    .usa-logo__text {
+        color: color('primary-darker');
+    }
+    .usa-nav__username {
+        padding: units(1) units(2);
+        @include at-media(desktop) {
+            padding: units(2);
+        }
+    }
+    .usa-nav__primary {
+        margin-top:units(1);
+    }
+    @include at-media(desktop) {
+        .usa-nav__primary-item:not(:first-child) {
+            position: relative;
+        }
+        .usa-nav__primary-item:not(:first-child)::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 0;
+            width: 0; /* No width since it's a border */
+            height: 40%;
+            border-left: solid 1px color('base-light');
+            transform: translateY(-50%);
+        }
+    }
+}
+
+.usa-header--extended {
+    @include at-media(desktop) {
+        background-color: color('primary-darker');
+        border-top: solid 1px color('base-light');
+        border-bottom: solid 1px color('base-lighter');
+
+        .usa-logo__text a,
+        .usa-logo__text button,
+        .usa-logo__text button:hover {
+            color: color('white');
+        }
+        .usa-nav {
+            background-color: color('primary-lightest');
+        }
+        .usa-nav__primary-item:last-child {
+            margin-left: auto;
+            .usa-nav-link {
+                margin-right: units(-2);
+            }
+        }
+        .usa-nav__primary {
+            .usa-nav-link,
+            .usa-nav-link:hover,
+            .usa-nav-link:active  {
+                color: color('primary');
+                font-weight: font-weight('normal');
+                font-size: 16px;
+            }
+            .usa-current,
+            .usa-current:hover,
+            .usa-current:active  {
+                font-weight: font-weight('bold');
+            }
+        }
+        .usa-nav__secondary {
+            // I don't know why USWDS has this at 2 rem, which puts it out of alignment
+            right: 3rem;
+            color: color('white');
+            bottom: 4.3rem;
+            .usa-nav-link,
+            .usa-nav-link:hover,
+            .usa-nav-link:active {
+                font-weight: font-weight('bold');
+                color: color('primary-lighter');
+                font-size: 16px;
+            }
+        }
+        > .usa-navbar {
+            // This is a dangerous override to USWDS, necessary because we have a tooltip on the logo
+            overflow: visible;
+        }
+    }
+}

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

@@ -0,0 +1,9 @@
+@use "uswds-core" as *;
+
+.usa-banner {
+    background-color: color('primary-darker');
+}
+
+.usa-identifier__logo {
+    height: units(7);
+}