Merge pull request #3066 from cisagov/hotgov/2594-design-review

2594 design review - [HOTGOV]

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

@@ -2922,9 +2922,13 @@ document.addEventListener("DOMContentLoaded", () => {
   const radioFieldset = document.getElementById(`id_${formPrefix}-requesting_entity_is_suborganization__fieldset`);
   const radios = radioFieldset?.querySelectorAll(`input[name="${formPrefix}-requesting_entity_is_suborganization"]`);
   const select = document.getElementById(`id_${formPrefix}-sub_organization`);
+  const selectParent = select?.parentElement;
   const suborgContainer = document.getElementById("suborganization-container");
   const suborgDetailsContainer = document.getElementById("suborganization-container__details");
-  if (!radios || !select || !suborgContainer || !suborgDetailsContainer) return;
+  const subOrgCreateNewOption = document.getElementById("option-to-add-suborg").value
+  // Make sure all crucial page elements exist before proceeding.
+  // This more or less ensures that we are on the Requesting Entity page, and not elsewhere.
+  if (!radios || !select || !selectParent || !suborgContainer || !suborgDetailsContainer) return;
 
   // requestingSuborganization: This just broadly determines if they're requesting a suborg at all
   // requestingNewSuborganization: This variable determines if the user is trying to *create* a new suborganization or not.
@@ -2935,12 +2939,12 @@ document.addEventListener("DOMContentLoaded", () => {
     if (radio != null) requestingSuborganization = radio?.checked && radio.value === "True";
     requestingSuborganization ? showElement(suborgContainer) : hideElement(suborgContainer);
     requestingNewSuborganization.value = requestingSuborganization && select.value === "other" ? "True" : "False";
-    requestingNewSuborganization.value === "True" ? showElement(suborgDetailsContainer) : hideElement(suborgDetailsContainer);
+    requestingNewSuborganization.value === "True" ? showElement(suborgDetailsContainer) :  hideElement(suborgDetailsContainer);
   }
 
   // Add fake "other" option to sub_organization select
   if (select && !Array.from(select.options).some(option => option.value === "other")) {
-    select.add(new Option("Other (enter your organization manually)", "other"));
+    select.add(new Option(subOrgCreateNewOption, "other"));
   }
 
   if (requestingNewSuborganization.value === "True") {

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

@@ -30,15 +30,15 @@ body {
   padding-bottom: units(6) * 2 ; //Workaround because USWDS units jump from 10 to 15
 }
 
+#wrapper.wrapper--padding-top-6 {
+  padding-top: units(6);
+}
+
 #wrapper.dashboard {
   background-color: color('primary-lightest');
   padding-top: units(5)!important;
 }
 
-#wrapper.dashboard--portfolio {
-  padding-top: units(4)!important;
-}
-
 #wrapper.dashboard--grey-1 {
   background-color: color('gray-1');
 }
@@ -253,4 +253,4 @@ abbr[title] {
 
 .break-word {
   word-break: break-word;
-}
+}

src/registrar/context_processors.py

@@ -97,5 +97,19 @@ def portfolio_permissions(request):
 
 
 def is_widescreen_mode(request):
-    widescreen_paths = ["/domains/", "/requests/", "/members/"]
-    return {"is_widescreen_mode": any(path in request.path for path in widescreen_paths) or request.path == "/"}
+    widescreen_paths = []
+    portfolio_widescreen_paths = [
+        "/domains/",
+        "/requests/",
+        "/request/",
+        "/no-organization-requests/",
+        "/no-organization-domains/",
+        "/domain-request/",
+    ]
+    is_widescreen = any(path in request.path for path in widescreen_paths) or request.path == "/"
+    is_portfolio_widescreen = bool(
+        hasattr(request.user, "is_org_user")
+        and request.user.is_org_user(request)
+        and any(path in request.path for path in portfolio_widescreen_paths)
+    )
+    return {"is_widescreen_mode": is_widescreen or is_portfolio_widescreen}

src/registrar/forms/domain_request_wizard.py

@@ -115,11 +115,14 @@ def clean(self):
             if is_requesting_new_suborganization:
                 # Validate custom suborganization fields
                 if not cleaned_data.get("requested_suborganization"):
-                    self.add_error("requested_suborganization", "Requested suborganization is required.")
+                    self.add_error("requested_suborganization", "Enter the name of your suborganization.")
                 if not cleaned_data.get("suborganization_city"):
-                    self.add_error("suborganization_city", "City is required.")
+                    self.add_error("suborganization_city", "Enter the city where your suborganization is located.")
                 if not cleaned_data.get("suborganization_state_territory"):
-                    self.add_error("suborganization_state_territory", "State, territory, or military post is required.")
+                    self.add_error(
+                        "suborganization_state_territory",
+                        "Select the state, territory, or military post where your suborganization is located.",
+                    )
             elif not suborganization:
                 self.add_error("sub_organization", "Suborganization is required.")
 

src/registrar/templates/base.html

@@ -158,7 +158,9 @@
   {% endblock header %}
 
   {% block wrapper %}
+  {% block wrapperdiv %}
   <div id="wrapper">
+  {% endblock wrapperdiv %}
     {% block messages %}
     {% if messages %}
     <ul class="messages">

src/registrar/templates/domain_request_done.html

@@ -4,6 +4,12 @@
 
 {% block title %}Thanks for your domain request! | {% endblock %}
 
+
+{% comment %} Same as the old wrapper implementation but with padding-top-4 {% endcomment %}
+{% block wrapperdiv %}
+<div id="wrapper" class="wrapper--padding-top-6">
+{% endblock wrapperdiv %}
+
 {% block content %}
 <main id="main-content" class="grid-container register-form-step">
   <span class="display-flex flex-align-center" > 
@@ -28,8 +34,8 @@ <h2>Next steps in this process</h2>
     <li>Your requested domain meets our naming requirements.</li>
   </ul>
 
-  <p> We’ll email you if we have questions. We’ll also email you as soon as we complete our review. You can <a href="{% url 'home' %}">check the status</a>
-      of your request at any time on the registrar homepage.</p> 
+  <p> We’ll email you if we have questions. We’ll also email you as soon as we complete our review. You can <a href="{% if portfolio %}{% url 'domain-requests' %}{% else %}{% url 'home' %}{% endif %}">check the status</a>
+      of your request at any time on the registrar.</p> 
 
   <p> <a class="usa-link" rel="noopener noreferrer" target="_blank" href="{% public_site_url 'contact' %}">Contact us if you need help during this process</a>.</p>
 

src/registrar/templates/domain_request_requesting_entity.html

@@ -2,11 +2,12 @@
 {% load field_helpers url_helpers %}
 
 {% block form_instructions %}
-    <p>To help with our review, we need to understand whether the domain you're requesting will be used by the Department of Energy or by one of its suborganizations.</p>
+    <p>To help with our review, we need to understand whether the domain you're requesting will be used by {{ portfolio }} or by one of its suborganizations.</p>
     <p>We define a suborganization as any entity (agency, bureau, office) that falls under the overarching organization.</p>
 {% endblock %}
 
 {% block form_fields %}
+    <input id="option-to-add-suborg" value="Other (enter your suborganization manually)"/>
     <fieldset class="usa-fieldset">
         <legend>
         <h2>Who will use the domain you’re requesting?</h2>
@@ -33,8 +34,8 @@ <h2>Who will use the domain you’re requesting?</h2>
         <div id="suborganization-container" class="margin-top-4">
             <h2>Add suborganization information</h2>
             <p>
-                This information will be published in <a class="usa-link usa-link--always-blue" href="{% public_site_url 'about/data' %}">.gov’s public data</a>. If you don’t see your suborganization in the list, 
-                select “other” and enter the name or your suborganization.
+                This information will be published in <a class="usa-link usa-link--always-blue" target="_blank" href="{% public_site_url 'about/data' %}">.gov’s public data</a>. If you don’t see your suborganization in the list, 
+                select “other.”
             </p>
             {% with attr_required=True %}
                 {% input_with_errors forms.1.sub_organization %}
@@ -43,7 +44,7 @@ <h2>Add suborganization information</h2>
             {% comment %} This will be toggled if a special value, "other", is selected.
             Otherwise this field is invisible. 
             {% endcomment %}
-            <div id="suborganization-container__details">
+            <div id="suborganization-container__details" class="padding-top-2 margin-top-0">
                 {% with attr_required=True %}
                     {% input_with_errors forms.1.requested_suborganization %}
                 {% endwith %}

src/registrar/templates/domain_request_withdraw_confirmation.html

@@ -3,6 +3,10 @@
 {% block title %}Withdraw request for {{ DomainRequest.requested_domain.name }} | {% endblock %}
 {% load static url_helpers %}
 
+{% block wrapperdiv %}
+<div id="wrapper" class="wrapper--padding-top-6">
+{% endblock wrapperdiv %}
+
 {% block content %}
 <div class="grid-container">
 <div class="grid-col desktop:grid-offset-2 desktop:grid-col-8">

src/registrar/templates/includes/header_extended.html

@@ -34,7 +34,6 @@
             </ul>
         </div>
         <ul class="usa-nav__primary usa-accordion">
-            {% if not hide_domains %}
             <li class="usa-nav__primary-item">
                 {% if has_any_domains_portfolio_permission %}
                     {% url 'domains' as url %}
@@ -45,14 +44,13 @@
                 Domains
                 </a>
             </li>
-            {% endif %}
             <!-- <li class="usa-nav__primary-item">
                 <a href="#" class="usa-nav-link">
                     Domain groups
                 </a>
             </li> -->
 
-            {% if has_organization_requests_flag and not hide_requests %}
+            {% if has_organization_requests_flag %}
             <li class="usa-nav__primary-item">
                 <!-- user has one of the view permissions plus the edit permission, show the dropdown -->
                 {% if has_edit_request_portfolio_permission %}
@@ -93,7 +91,7 @@
             </li>
             {% endif %}
 
-            {% if has_organization_members_flag and not hide_members %}
+            {% if has_organization_members_flag %}
                 <li class="usa-nav__primary-item">
                     <a href="{% url 'members' %}" class="usa-nav-link {% if path|is_members_subpage %} usa-current{% endif %}">
                         Members

src/registrar/templates/portfolio_base.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block wrapper %}
-  <div id="wrapper" class="{% block wrapper_class %}dashboard--portfolio{% endblock %}">
+  <div id="wrapper" class="{% block wrapper_class %}wrapper--padding-top-6{% endblock %}">
     {% block content %}
 
         <main class="grid-container {% if is_widescreen_mode %} grid-container--widescreen {% endif %}">

src/registrar/templates/portfolio_no_domains.html

@@ -18,7 +18,7 @@ <h1 id="domains-header">Domains</h1>
             <h2 id="domains-header" class="display-inline-block">You aren’t managing any domains.</h2>
             {% if portfolio_administrators %}
             <p>If you believe you should have access to a domain, reach out to your organization’s administrators.</p>
-            <p>Your organizations administrators:</p>
+            <p>Your organization's administrators:</p>
             <ul class="margin-top-0">
                 {% for administrator in portfolio_administrators %}
                     {% if administrator.email %}

src/registrar/templates/portfolio_no_requests.html

@@ -5,13 +5,13 @@
 {% block title %} Domain Requests | {% endblock %}
 
 {% block portfolio_content %}
-    <h1 id="domains-header">Current domain requests</h1>
+    <h1 id="domains-header">Domain requests</h1>
     <section class="section-outlined">
         <div class="section-outlined__header margin-bottom-3">
             <h2 id="domains-header" class="display-inline-block">You don’t have access to domain requests.</h2>
             {% if portfolio_administrators %}
-            <p>If you believe you should have access to a request, reach out to your organization’s administrators.</p>
-            <p>Your organizations administrators:</p>
+            <p>If you believe you should have access to requests, reach out to your organization’s administrators.</p>
+            <p>Your organization's administrators:</p>
             <ul class="margin-top-0">
                 {% for administrator in portfolio_administrators %}
                     {% if administrator.email %}

src/registrar/templates/portfolio_requests.html

@@ -14,12 +14,12 @@
 {% endblock %}
 
 <div id="main-content">
-    <h1 id="domain-requests-header">Domain requests</h1>
+    <h1 id="domain-requests-header" class="margin-bottom-1">Domain requests</h1>
     <div class="grid-row grid-gap">
 
         {% if has_edit_request_portfolio_permission %}
             <div class="mobile:grid-col-12 tablet:grid-col-6">
-                <p class="margin-y-0">Domain requests can only be modified by the person who created the request.</p>
+                <p class="margin-y-0 maxw-mobile">Domain requests can only be modified by the person who created the request.</p>
             </div>
             <div class="mobile:grid-col-12 tablet:grid-col-6">
 

src/registrar/tests/test_views_portfolio.py

@@ -2162,7 +2162,7 @@ def test_requesting_entity_page_new_request(self):
         self.assertContains(response, "Add suborganization information")
         # We expect to see the portfolio name in two places:
         # the header, and as one of the radio button options.
-        self.assertContains(response, self.portfolio.organization_name, count=2)
+        self.assertContains(response, self.portfolio.organization_name, count=3)
 
         # We expect the dropdown list to contain the suborganizations that currently exist on this portfolio
         self.assertContains(response, self.suborganization.name, count=1)
@@ -2298,9 +2298,13 @@ def test_requesting_entity_page_errors(self):
         form["portfolio_requesting_entity-is_requesting_new_suborganization"] = True
         response = form.submit()
         self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
-        self.assertContains(response, "Requested suborganization is required.", status_code=200)
-        self.assertContains(response, "City is required.", status_code=200)
-        self.assertContains(response, "State, territory, or military post is required.", status_code=200)
+        self.assertContains(response, "Enter the name of your suborganization.", status_code=200)
+        self.assertContains(response, "Enter the city where your suborganization is located.", status_code=200)
+        self.assertContains(
+            response,
+            "Select the state, territory, or military post where your suborganization is located.",
+            status_code=200,
+        )
 
     @override_flag("organization_feature", active=True)
     @override_flag("organization_requests", active=True)

src/registrar/tests/test_views_request.py

@@ -3205,11 +3205,6 @@ def test_wizard_steps_portfolio(self):
             expected_url = reverse("domain-request:portfolio_requesting_entity", kwargs={"id": domain_request.id})
             # This returns the entire url, thus "in"
             self.assertIn(expected_url, detail_page.request.url)
-
-            # We shouldn't show the "domains" and "domain requests" buttons
-            # on this page.
-            self.assertNotContains(detail_page, "Domains")
-            self.assertNotContains(detail_page, "<span>Domain requests")
         else:
             self.fail(f"Expected a redirect, but got a different response: {response}")
 

src/registrar/views/domain_request.py

@@ -317,15 +317,7 @@ def get(self, request, *args, **kwargs):
                 # Clear context so the prop getter won't create a request here.
                 # Creating a request will be handled in the post method for the
                 # intro page.
-                return render(
-                    request,
-                    "domain_request_intro.html",
-                    {
-                        "hide_requests": True,
-                        "hide_domains": True,
-                        "hide_members": True,
-                    },
-                )
+                return render(request, "domain_request_intro.html")
             else:
                 return self.goto(self.steps.first)
 
@@ -487,12 +479,7 @@ def get_context_data(self):
                 "user": self.request.user,
                 "requested_domain__name": requested_domain_name,
             }
-
-        # Hides the requests and domains buttons in the navbar
-        context["hide_requests"] = self.is_portfolio
-        context["hide_domains"] = self.is_portfolio
         context["domain_request_id"] = self.domain_request.id
-
         return context
 
     def get_step_list(self) -> list: