Add non-prod banner

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

@@ -17,5 +17,8 @@
     .usa-alert__body::before {
       left: 1rem !important;
     }
-  } 
+  }
+  .usa-alert__body.margin-left-1 {
+    margin-left: 0.5rem!important;
+  }
 }

src/registrar/templates/admin/base_site.html

@@ -24,34 +24,57 @@
 {% block title %}{% if subtitle %}{{ subtitle }} | {% endif %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}
 
 {% block extrastyle %}{{ block.super }}
-<link rel="stylesheet" type="text/css" href="{% static "css/styles.css" %}" />
+<link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}" />
 {% endblock %}
 
-{% block branding %}
-<h1 id="site-name"><a href="{% url 'admin:index' %}">.gov admin</a></h1>
-{% if user.is_anonymous %}
-  {% include "admin/color_theme_toggle.html" %}
-{% endif %}
+{% block header %}
+  {% if not IS_PRODUCTION %}
+    {% with add_body_class="margin-left-1" %}
+      {% include "includes/non-production-alert.html" %}
+    {% endwith %}
+  {% endif %}
+
+  {# Djando update: this div will change to header #}
+  <div id="header">
+    <div id="branding">
+      {% block branding %}
+        <h1 id="site-name"><a href="{% url 'admin:index' %}">.gov admin</a></h1>
+        {% if user.is_anonymous %}
+          {% include "admin/color_theme_toggle.html" %}
+        {% endif %}
+      {% endblock %}
+    </div>
+    {% block usertools %}
+    {% if has_permission %}
+    <div id="user-tools">
+        {% block welcome-msg %}
+            {% translate 'Welcome,' %}
+            <strong>{% firstof user.get_short_name user.get_username %}</strong>.
+        {% endblock %}
+        {% comment %}
+          This was copied from the 'userlinks' template, with a few minor changes.
+          You can find that here:
+          https://github.com/django/django/blob/d25f3892114466d689fd6936f79f3bd9a9acc30e/django/contrib/admin/templates/admin/base.html#L59
+        {% endcomment %}
+        {% block userlinks %}
+          {% if site_url %}
+              <a href="{{ site_url }}">{% translate 'View site' %}</a> /
+          {% endif %}
+          {% if user.is_active and user.is_staff %}
+              {% url 'django-admindocs-docroot' as docsroot %}
+              {% if docsroot %}
+                  <a href="{{ docsroot }}">{% translate 'Documentation' %}</a> /
+              {% endif %}
+          {% endif %}
+          {% if user.has_usable_password %}
+              <a href="{% url 'admin:password_change' %}">{% translate 'Change password' %}</a> /
+          {% endif %}
+              <a href="{% url 'admin:logout' %}" id="admin-logout-button">{% translate 'Log out' %}</a>
+          {% include "admin/color_theme_toggle.html" %}
+        {% endblock %}
+    </div>
+    {% endif %}
+    {% endblock %}
+    {% block nav-global %}{% endblock %}
+  </div>
 {% endblock %}
-{% comment %}
-  This was copied from the 'userlinks' template, with a few minor changes.
-  You can find that here:
-  https://github.com/django/django/blob/d25f3892114466d689fd6936f79f3bd9a9acc30e/django/contrib/admin/templates/admin/base.html#L59
-{% endcomment %}
-{% block userlinks %}
-  {% if site_url %}
-      <a href="{{ site_url }}">{% translate 'View site' %}</a> /
-  {% endif %}
-  {% if user.is_active and user.is_staff %}
-      {% url 'django-admindocs-docroot' as docsroot %}
-      {% if docsroot %}
-          <a href="{{ docsroot }}">{% translate 'Documentation' %}</a> /
-      {% endif %}
-  {% endif %}
-  {% if user.has_usable_password %}
-      <a href="{% url 'admin:password_change' %}">{% translate 'Change password' %}</a> /
-  {% endif %}
-      <a href="{% url 'admin:logout' %}" id="admin-logout-button">{% translate 'Log out' %}</a>
-  {% include "admin/color_theme_toggle.html" %}
- {% endblock %}
-{% block nav-global %}{% endblock %}

src/registrar/templates/base.html

@@ -70,6 +70,10 @@
   <script src="{% static 'js/uswds.min.js' %}" defer></script>
   <a class="usa-skipnav" href="#main-content">Skip to main content</a>
 
+  {% if not IS_PRODUCTION %}
+    {% include "includes/non-production-alert.html" %}
+  {% endif %}
+
   <section class="usa-banner" aria-label="Official website of the United States government">
     <div class="usa-accordion">
       <header class="usa-banner__header">

src/registrar/templates/includes/non-production-alert.html

@@ -0,0 +1,5 @@
+<div class="usa-alert usa-alert--warning usa-alert--slim margin-y-0 {% if add_class %}{{ add_class }}{% endif %}">
+    <div class="usa-alert__body {% if add_body_class %}{{ add_body_class }}{% endif %}">
+        You are not on production.
+    </div>
+</div>

src/registrar/tests/test_environment_variables_effects.py

@@ -0,0 +1,29 @@
+from django.test import Client, TestCase, override_settings
+from django.contrib.auth import get_user_model
+
+
+class MyTestCase(TestCase):
+    def setUp(self):
+        self.client = Client()
+        username = "test_user"
+        first_name = "First"
+        last_name = "Last"
+        email = "info@example.com"
+        self.user = get_user_model().objects.create(
+            username=username, first_name=first_name, last_name=last_name, email=email
+        )
+        self.client.force_login(self.user)
+
+    def tearDown(self):
+        super().tearDown()
+        self.user.delete()
+
+    @override_settings(IS_PRODUCTION=True)
+    def test_production_environment(self):
+        home_page = self.client.get("/")
+        self.assertNotContains(home_page, "You are not on production.")
+
+    @override_settings(IS_PRODUCTION=False)
+    def test_non_production_environment(self):
+        home_page = self.client.get("/")
+        self.assertContains(home_page, "You are not on production.")