Merge pull request #3911 from sanger/sh51/add-environment-indicators

Add more environment indicators to title and navbar
sanger · Oct 30, 2023 · 48e18b6 · 48e18b6
2 parents 7683919 + 48d15c6
commit 48e18b6
Show file tree

Hide file tree

Showing 13 changed files with 126 additions and 8 deletions.
diff --git a/app/frontend/stylesheets/all/colours.scss b/app/frontend/stylesheets/all/colours.scss
@@ -1,3 +1,9 @@
+/* Colours defined per environment */
+$production: $primary !default;
+$training: $green !default;
+$staging: $red !default;
+$development: $gray-600 !default;
+
 @mixin colour-badge($base_colour, $text_colour) {
   background-color: $base_colour;
   color: $text_colour;

diff --git a/app/frontend/stylesheets/all/components.scss b/app/frontend/stylesheets/all/components.scss
@@ -2,6 +2,20 @@
  * Please ensure you keep it commented
  */
 
+/* Background colours for different environments */
+.bg-production {
+  background-color: $production;
+}
+.bg-training {
+  background-color: $training;
+}
+.bg-staging {
+  background-color: $staging;
+}
+.bg-development {
+  background-color: $development;
+}
+
 /* A Summary table presents simple key-value pairs */
 .table-summary th {
   text-align: right;

diff --git a/app/frontend/stylesheets/all/header.scss b/app/frontend/stylesheets/all/header.scss
@@ -4,7 +4,7 @@
 .main-nav {
   @extend .navbar;
   @extend .navbar-dark;
-  @extend .bg-danger;
+  @extend .bg-development; // development and unknown environments
   @extend .navbar-expand-lg;
 
   #logo_container {
@@ -17,9 +17,20 @@
   }
 }
 
+// Set the background color of the navbar based on the environment
 body.production {
   .main-nav {
-    @extend .bg-primary;
+    @extend .bg-production;
+  }
+}
+body.training {
+  .main-nav {
+    @extend .bg-training;
+  }
+}
+body.staging {
+  .main-nav {
+    @extend .bg-staging;
   }
 }
 

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -34,6 +34,35 @@ def required_marker
     icon('fas', 'asterisk', class: 'text-warning', title: 'required')
   end
 
+  # Returns the appropriate icon suffix for the current environment
+  # Returns empty string for production
+  # Returns "-#{environment}" for training, staging
+  # Returns "-development" for any other environment
+  # @return [String] The suffix to append to the icon name
+  def icon_suffix
+    environment = Rails.env
+    case environment
+    when 'production'
+      ''
+    when 'training', 'staging'
+      "-#{environment}"
+    else
+      '-development'
+    end
+  end
+
+  # Return the appropriate favicon for the current environment
+  # @return [String] The path to the favicon
+  def favicon
+    "favicon#{icon_suffix}.ico"
+  end
+
+  # Return the appropriate apple icon for the current environment
+  # @return [String] The path to the apple icon
+  def apple_icon
+    "apple-icon#{icon_suffix}.png"
+  end
+
   def render_flashes
     flash.each do |key, message|
       concat(alert(key, id: "message_#{key}") { Array(message).each { |m| concat tag.div(m) } })

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -33,9 +33,9 @@
       <% end %>
     <% end %>
     <%= csrf_meta_tags %>
-    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
-    <link rel="apple-touch-icon-precomposed" href="/apple-icon.png" type="image/png" />
+    <link rel="shortcut icon" href="/<%= favicon %>" type="image/x-icon" />
+    <link rel="icon" href="/<%= favicon %>" type="image/x-icon" />
+    <link rel="apple-touch-icon-precomposed" href="/<%= apple_icon %>" type="image/png" />
   </head>
 
   <body class="<%= Rails.env %> <%= DeploymentEnvironment.role %>">

diff --git a/app/views/layouts/sessions.html.erb b/app/views/layouts/sessions.html.erb
@@ -7,9 +7,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <%= vite_stylesheet_tag "application.scss", media: "all" %>
   <title>Sequencescape : <%= I18n.t('global_links.login') %></title>
-  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
-  <link rel="apple-touch-icon-precomposed" href="/apple-icon.png" type="image/png" />
+  <link rel="shortcut icon" href="/<%= favicon %>" type="image/x-icon" />
+  <link rel="icon" href="/<%= favicon %>" type="image/x-icon" />
+  <link rel="apple-touch-icon-precomposed" href="/<%= apple_icon %>" type="image/png" />
   <% if Rails.application.config.disable_animations %>
     <%= vite_stylesheet_tag 'disable_animations' %>
 

diff --git a/public/apple-icon-development.png b/public/apple-icon-development.png
diff --git a/public/apple-icon-staging.png b/public/apple-icon-staging.png
diff --git a/public/apple-icon-training.png b/public/apple-icon-training.png
diff --git a/public/favicon-development.ico b/public/favicon-development.ico
diff --git a/public/favicon-staging.ico b/public/favicon-staging.ico
diff --git a/public/favicon-training.ico b/public/favicon-training.ico
diff --git a/spec/helpers/application_helper_spec.rb b/spec/helpers/application_helper_spec.rb
@@ -5,6 +5,64 @@
 require './app/helpers/application_helper'
 
 describe ApplicationHelper do
+  describe '#favicon' do
+    subject(:favicon) { helper.favicon }
+
+    it 'returns the favicon path for the production environment' do
+      allow(Rails).to receive(:env).and_return('production')
+      expect(favicon).to eq('favicon.ico')
+    end
+
+    it 'returns the favicon path for the training environment' do
+      allow(Rails).to receive(:env).and_return('training')
+      expect(favicon).to eq('favicon-training.ico')
+    end
+
+    it 'returns the favicon path for the staging environment' do
+      allow(Rails).to receive(:env).and_return('staging')
+      expect(favicon).to eq('favicon-staging.ico')
+    end
+
+    it 'returns the favicon path for the development environment' do
+      allow(Rails).to receive(:env).and_return('development')
+      expect(favicon).to eq('favicon-development.ico')
+    end
+
+    it 'returns the favicon path for an unknown environment' do
+      allow(Rails).to receive(:env).and_return('unknown')
+      expect(favicon).to eq('favicon-development.ico')
+    end
+  end
+
+  describe '#apple_icon' do
+    subject(:apple_icon) { helper.apple_icon }
+
+    it 'returns the apple icon path for the production environment' do
+      allow(Rails).to receive(:env).and_return('production')
+      expect(apple_icon).to eq('apple-icon.png')
+    end
+
+    it 'returns the apple icon path for the training environment' do
+      allow(Rails).to receive(:env).and_return('training')
+      expect(apple_icon).to eq('apple-icon-training.png')
+    end
+
+    it 'returns the apple icon path for the staging environment' do
+      allow(Rails).to receive(:env).and_return('staging')
+      expect(apple_icon).to eq('apple-icon-staging.png')
+    end
+
+    it 'returns the apple icon path for the development environment' do
+      allow(Rails).to receive(:env).and_return('development')
+      expect(apple_icon).to eq('apple-icon-development.png')
+    end
+
+    it 'returns the apple icon path for an unknown environment' do
+      allow(Rails).to receive(:env).and_return('unknown')
+      expect(apple_icon).to eq('apple-icon-development.png')
+    end
+  end
+
   describe '#render_parsed_json' do
     subject(:returned_html) { render_parsed_json(json) }