Merge pull request #1722 from cisagov/za/1411-make-statuses-more-mean…

…ingful

(On getgov-backup) Ticket #1411: make statuses more meaningful

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

@@ -129,3 +129,28 @@ abbr[title] {
 .flex-end {
   align-items: flex-end;
 }
+
+// Only apply this custom wrapping to desktop
+@include at-media(desktop) {
+  .usa-tooltip__body {
+    width: 350px;
+    white-space: normal;
+    text-align: center;
+  }
+}
+
+@include at-media(tablet) {
+  .usa-tooltip__body {
+    width: 250px !important;
+    white-space: normal !important;
+    text-align: center !important;
+  }
+}
+
+@include at-media(mobile) {
+  .usa-tooltip__body {
+    width: 250px !important;
+    white-space: normal !important;
+    text-align: center !important;
+  }
+}

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

@@ -53,8 +53,8 @@ a.usa-button--unstyled.disabled-link:focus {
 }
 
 .usa-button--unstyled.disabled-button,
-.usa-button--unstyled.disabled-link:hover,
-.usa-button--unstyled.disabled-link:focus {
+.usa-button--unstyled.disabled-button:hover,
+.usa-button--unstyled.disabled-button:focus {
   cursor: not-allowed !important;
   outline: none !important;
   text-decoration: none !important;

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

@@ -26,6 +26,16 @@
     padding-bottom: units(2px);
   }
 
+  td .no-click-outline-and-cursor-help {
+    outline: none;
+    cursor: help;
+    use {
+      // USWDS has weird interactions with SVGs regarding tooltips,
+      // and other components. In this event, we need to disable pointer interactions.
+      pointer-events: none;
+    }
+  }
+
   // Ticket #1510
   // @include at-media('desktop') {
   //   th:first-child {

src/registrar/models/domain.py

@@ -140,6 +140,24 @@ class State(models.TextChoices):
         # previously existed but has been deleted from the registry
         DELETED = "deleted", "Deleted"
 
+        @classmethod
+        def get_help_text(cls, state) -> str:
+            """Returns a help message for a desired state. If none is found, an empty string is returned"""
+            help_texts = {
+                # For now, unknown has the same message as DNS_NEEDED
+                cls.UNKNOWN: ("Before this domain can be used, " "you’ll need to add name server addresses."),
+                cls.DNS_NEEDED: ("Before this domain can be used, " "you’ll need to add name server addresses."),
+                cls.READY: "This domain has name servers and is ready for use.",
+                cls.ON_HOLD: (
+                    "This domain is administratively paused, "
+                    "so it can’t be edited and won’t resolve in DNS. "
+                    "Contact [email protected] for details."
+                ),
+                cls.DELETED: ("This domain has been removed and " "is no longer registered to your organization."),
+            }
+
+            return help_texts.get(state, "")
+
     class Cache(property):
         """
         Python descriptor to turn class methods into properties.
@@ -1398,6 +1416,21 @@ def dns_needed(self):
         logger.info("Changing to DNS_NEEDED state")
         logger.info("able to transition to DNS_NEEDED state")
 
+    def get_state_help_text(self) -> str:
+        """Returns a str containing additional information about a given state.
+        Returns custom content for when the domain itself is expired."""
+
+        if self.is_expired() and self.state != self.State.UNKNOWN:
+            # Given expired is not a physical state, but it is displayed as such,
+            # We need custom logic to determine this message.
+            help_text = (
+                "This domain has expired, but it is still online. " "To renew this domain, contact [email protected]."
+            )
+        else:
+            help_text = Domain.State.get_help_text(self.state)
+
+        return help_text
+
     def _disclose_fields(self, contact: PublicContact):
         """creates a disclose object that can be added to a contact Create using
         .disclose= <this function> on the command before sending.

src/registrar/templates/domain_detail.html

@@ -6,7 +6,7 @@
   <div class="margin-top-4 tablet:grid-col-10">
 
     <div
-        class="usa-summary-box dotgov-status-box margin-top-3 padding-left-2{% if not domain.is_expired %}{% if domain.state == domain.State.UNKNOWN or domain.state == domain.State.DNS_NEEDED %} dotgov-status-box--action-need{% endif %}{% endif %}"
+        class="usa-summary-box dotgov-status-box padding-bottom-0 margin-top-3 padding-left-2{% if not domain.is_expired %}{% if domain.state == domain.State.UNKNOWN or domain.state == domain.State.DNS_NEEDED %} dotgov-status-box--action-need{% endif %}{% endif %}"
         role="region"
         aria-labelledby="summary-box-key-information"
     >
@@ -17,6 +17,7 @@
           <span class="text-bold text-primary-darker">
             Status:
           </span>
+          <span class="text-primary-darker">
             {# UNKNOWN domains would not have an expiration date and thus would show 'Expired' #}
             {% if domain.is_expired and domain.state != domain.State.UNKNOWN %}
               Expired
@@ -25,6 +26,12 @@
             {% else %}
                 {{ domain.state|title }}
             {% endif %}
+          </span>
+          {% if domain.get_state_help_text %}
+            <div class="padding-top-1 text-primary-darker">
+              {{ domain.get_state_help_text }}
+            </div>
+          {% endif %}
         </p>
       </div>
     </div>

src/registrar/templates/home.html

@@ -56,6 +56,16 @@ <h2>Domains</h2>
             {% else %}
                 {{ domain.state|capfirst }}
             {% endif %}
+            <svg 
+              class="usa-icon usa-tooltip text-middle margin-bottom-05 text-accent-cool no-click-outline-and-cursor-help" 
+              data-position="top"
+              title="{{domain.get_state_help_text}}"
+              focusable="true"
+              aria-label="Status Information"
+              role="tooltip"
+            >
+              <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#info_outline"></use>
+            </svg>
           </td>
           <td>
             <a href="{% url "domain" pk=domain.pk %}">