app: allow hiding the browser banner for one week

app/assets/stylesheets/new_design/outdated_browser_banner.scss

@@ -3,16 +3,23 @@
 
 #outdated-browser-banner {
   width: 100%;
-  bottom: 0;
-  left: 0;
   margin: 0;
   padding: $default-padding;
   color: $black;
   background-color: $yellow;
 }
 
-.outdater-browser-icon {
+.outdated-browser-icon {
   margin-right: $default-padding;
   font-size: 30px;
   opacity: 0.7;
 }
+
+.outdated-browser-buttons {
+  display: flex;
+  margin-left: auto;
+
+  .button {
+    margin-left: $default-spacer;
+  }
+}

app/assets/stylesheets/outdated_browser_banner.scss

@@ -1,9 +1,6 @@
 #outdated-browser-banner {
   width: 100%;
   margin: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1000;
 
   color: #333333;
   background-color: #FEF3B8;
@@ -16,8 +13,13 @@
   }
 }
 
-.outdater-browser-icon {
+.outdated-browser-icon {
   margin-right: 16px;
   font-size: 30px;
   opacity: 0.7;
 }
+
+.outdated-browser-buttons {
+  display: flex;
+  margin-left: auto;
+}

app/controllers/root_controller.rb

@@ -1,4 +1,6 @@
 class RootController < ApplicationController
+  include ApplicationHelper
+
   def index
     if administrateur_signed_in?
       return redirect_to admin_procedures_path
@@ -69,4 +71,13 @@ class RootController < ApplicationController
 
   def suivi
   end
+
+  def dismiss_outdated_browser
+    dismiss_outdated_browser_banner
+
+    respond_to do |format|
+      format.html { redirect_back(fallback_location: root_path) }
+      format.js { render js: helpers.remove_element('#outdated-browser-banner') }
+    end
+  end
 end

app/helpers/application_helper.rb

@@ -120,4 +120,15 @@ module ApplicationHelper
   def try_format_datetime(datetime)
     datetime.present? ? I18n.l(datetime) : ''
   end
+
+  def dismiss_outdated_browser_banner
+    cookies[:dismissed_outdated_browser_banner] = {
+      value: 'true',
+      expires: 1.week.from_now
+    }
+  end
+
+  def has_dismissed_outdated_browser_banner?
+    cookies[:dismissed_outdated_browser_banner] == 'true'
+  end
 end

app/views/layouts/_outdated_browser_banner.html.haml

@@ -1,14 +1,15 @@
 -# See config/browser.rb
-- if !browser.modern?
+- if !browser.modern? && !has_dismissed_outdated_browser_banner?
   #outdated-browser-banner
     .container.flex.align-center
-      .outdater-browser-icon
+      .outdated-browser-icon
         ⚠️
       .outdated-browser-test
         %strong
           #{browser.name} #{browser.version} est trop ancien pour utiliser demarches-simplifiees.fr.
         %br
         Certaines parties du site ne fonctionneront pas correctement.
-      .outdated-browser-buttons{ style: 'margin-left: auto' }
-        %a.button.primary{ href: "https://browser-update.org/fr/update.html", target: "_blank", rel: "noopener" }
+      .outdated-browser-buttons
+        = button_to 'Ignorer', dismiss_outdated_browser_path, method: :post, remote: true, class: 'button btn', title: 'Ne plus afficher cet avertissement pendant une semaine'
+        %a.btn.button.primary{ href: "https://browser-update.org/fr/update.html", target: "_blank", rel: "noopener" }
           Mettre à jour mon navigateur

config/routes.rb

@@ -125,6 +125,7 @@ Rails.application.routes.draw do
   get "patron" => "root#patron"
   get "accessibilite" => "root#accessibilite"
   get "suivi" => "root#suivi"
+  post "dismiss_outdated_browser" => "root#dismiss_outdated_browser"
 
   get "contact", to: "support#index"
   post "contact", to: "support#create"

spec/features/outdated_browser_spec.rb

@@ -0,0 +1,31 @@
+require 'spec_helper'
+
+feature 'Outdated browsers support:' do
+  context 'when the user browser is outdated' do
+    before(:each) do
+      ie_11_user_agent = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko'
+      Capybara.page.driver.header('user-agent', ie_11_user_agent)
+    end
+
+    scenario 'a banner is displayed' do
+      visit new_user_session_path
+      expect(page).to have_content('Internet Explorer 11 est trop ancien')
+    end
+
+    scenario 'the banner can be dismissed' do
+      visit new_user_session_path
+      expect(page).to have_content('Internet Explorer 11 est trop ancien')
+
+      # The banner is hidden immediately
+      within '#outdated-browser-banner' do
+        click_on 'Ignorer'
+      end
+      expect(page).not_to have_content('Internet Explorer 11 est trop ancien')
+      expect(page).to have_current_path(new_user_session_path)
+
+      # The banner is hidden after a refresh
+      page.refresh
+      expect(page).not_to have_content('Internet Explorer 11 est trop ancien')
+    end
+  end
+end