#6372: Fix missing new release alert

netbox/project-static/styles/netbox.scss

@@ -102,7 +102,7 @@
   cursor: pointer;
 }
 
-// Use proper contrasting color for badge & progress-bar foreground color.
+// Use proper contrasting color foreground color for special components.
 @each $color, $value in $theme-colors {
   .badge,
   .toast,
@@ -111,6 +111,16 @@
       color: color-contrast($value);
     }
   }
+  // Use proper foreground color in the alert body. Note: this is applied to a, p, & small because
+  // we *don't* want to override the h1-h6 colors for alerts, since those are set to a color
+  // similar to the alert color.
+  .alert.alert-#{$color} {
+    a,
+    p,
+    small {
+      color: color-contrast($value);
+    }
+  }
 }
 
 // Ensure progress bars (utilization graph) in tables aren't too narrow to display the percentage.
@@ -149,6 +159,31 @@ table td > .progress {
   }
 }
 
+// Primarily used for the new release notification, but could be used for other alerts as needed.
+// Wrap any alerts in .header-alert-container to ensure the layout is consistent.
+.header-alert-container {
+  // Center-align the alert(s).
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // Apply the same spacing that's applied to the #content div's first child (.px-3).
+  padding: 0 $spacer;
+
+  // By default, alerts inside .header-alert-container should take up the full width.
+  .alert {
+    width: 100%;
+
+    // Adjust the max-width for larger screens so there's not a big ugly blue blob taking up the
+    // entire screen.
+    @include media-breakpoint-up(md) {
+      max-width: 75%;
+    }
+    @include media-breakpoint-up(lg) {
+      max-width: 50%;
+    }
+  }
+}
+
 span.profile-button .dropdown-menu {
   transition: opacity 0.2s ease-in-out;
   display: block !important;

netbox/templates/home.html

@@ -2,7 +2,25 @@
 {% load get_status %}
 {% load helpers %}
 
-{% block header %}{% endblock %}
+{% block header %}
+    {{ block.super }}
+    {% if new_release %}
+        {# new_release is set only if the current user is a superuser or staff member #}
+        <div class="header-alert-container">
+          <div class="alert alert-info text-center mw-md-50" role="alert">
+            <h6 class="alert-heading">
+              <i class="mdi mdi-information-outline"></i><br/>New Release Available
+            </h6>
+            <small><a href="{{ new_release.url }}">NetBox v{{ new_release.version }}</a> is available.</small>
+            <hr class="my-2" />
+            <small class="mb-0">
+              <a href="https://netbox.readthedocs.io/en/stable/installation/upgrading/">Upgrade Instructions</a>
+            </small>
+          </div>
+        </div>
+    {% endif %}
+{% endblock %}
+
 {% block title %}Home{% endblock %}
 
 {% block content %}