From 7ba7ebc88434f37c8d9b8d8f919e95e6c6135623 Mon Sep 17 00:00:00 2001 From: Quinton Cannon <67171899+qcannon@users.noreply.github.com> Date: Mon, 1 Apr 2024 15:53:38 -0400 Subject: [PATCH] Add Optional Environment Banner (#212) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Currently, if an organization uses Test Track for multiple environments (e.g. production and stage), it can be a bit difficult to discern at first glance for which environment a user is managing a given split test. This proposed change gives users the option to set a `DEPLOYMENT_ENV_LABEL` variable in the `.env` or `.env.local` file, which will subsequently be rendered in a bright red banner, like so: ![Screenshot 2024-03-20 at 5 23 52 PM](https://github.com/Betterment/test_track/assets/67171899/f273fb03-dd86-433d-bd7b-77268bf27ae5) The banner is intentionally a tad obnoxious to make it glaringly obvious to the user which environment they are in. When no `DEPLOYMENT_ENV_LABEL` variable is set, the header renders as usual: ![Screenshot 2024-03-20 at 5 23 24 PM](https://github.com/Betterment/test_track/assets/67171899/fc01c995-b5d0-40ac-ac97-1421a725c449) I envision organizations using the existing state for production and the banner state for a non-production environment (or perhaps vice-versa). --- app/assets/stylesheets/application.sass.scss | 1 + .../stylesheets/components/_banner.scss | 16 +++++++ app/helpers/application_layout_helper.rb | 4 ++ app/views/layouts/application.html.erb | 5 +++ .../helpers/application_layout_helper_spec.rb | 12 ++++++ spec/requests/admin/split_details_spec.rb | 43 +++++++++++++++++++ 6 files changed, 81 insertions(+) create mode 100644 app/assets/stylesheets/components/_banner.scss create mode 100644 spec/requests/admin/split_details_spec.rb diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.sass.scss index a81b9e41..c8ff464d 100644 --- a/app/assets/stylesheets/application.sass.scss +++ b/app/assets/stylesheets/application.sass.scss @@ -10,6 +10,7 @@ $app_width: $container-xl; @import "typography/base"; @import "typography/utilities"; +@import "components/banner"; @import "components/flash"; @import "components/tables"; @import "components/inputs"; diff --git a/app/assets/stylesheets/components/_banner.scss b/app/assets/stylesheets/components/_banner.scss new file mode 100644 index 00000000..1d35ef74 --- /dev/null +++ b/app/assets/stylesheets/components/_banner.scss @@ -0,0 +1,16 @@ +.banner { + background-color: #ff6759; + height: 22px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.banner-text { + color: white; + font-size: 13px; + text-transform: uppercase; + font-weight: 500; + margin-bottom: 0; +} diff --git a/app/helpers/application_layout_helper.rb b/app/helpers/application_layout_helper.rb index 6fd2c449..a003129b 100644 --- a/app/helpers/application_layout_helper.rb +++ b/app/helpers/application_layout_helper.rb @@ -3,6 +3,10 @@ def page_title content_for(:page_title) || 'Test Track Admin' end + def deployment_env_label + ENV.fetch('DEPLOYMENT_ENV_LABEL', nil) + end + def site_layout_header_classes classes = ['Header'] classes << "color-bg-accent-emphasis" diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 64c18a86..6feef1e3 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -12,6 +12,11 @@
+ <% if deployment_env_label.present? %> + + <% end %>