Affiche une bannière de dépréciation pour IE 11 (#4590)

Affiche une bannière de dépréciation sur Internet Explorer 11
2019-12-03 16:37:51 +01:00 · 2019-12-03 16:37:51 +01:00 · dc3df9ec6b
commit dc3df9ec6b
parent 3e096b9c15 f351ade434
13 changed files with 119 additions and 43 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -1,8 +1,10 @@
 > 1%
 Chrome >= 50
-IE >= 11
 Edge >= 14
 Firefox >= 50
 Opera >= 40
 Safari >= 8
 iOS >= 8
+# Although IE 11 shows a deprecation banner, we still support the transpilation option.
+# IE 11 support may be removed starting from 01 / 06 / 2020.
+IE >= 11
--- a/README.md
+++ b/README.md
@ -150,7 +150,7 @@ Pour les lister : `bin/rake -D support:`.

 ## Compatibilité navigateurs

-L'application supporte les navigateurs récents : Firefox, Chrome, Safari, Edge et Internet Explorer 11 (voir `config/initializers/browser.rb`).
+L'application gère les navigateurs récents, parmis lequels Firefox, Chrome, Safari et Edge (voir `config/initializers/browser.rb`).

 La compatibilité est testée par Browserstack.<br>[<img src="app/assets/images/browserstack-logo-600x315.png" width="200">](https://www.browserstack.com/)

--- a/app/assets/stylesheets/new_design/outdated_browser_banner.scss
+++ b/app/assets/stylesheets/new_design/outdated_browser_banner.scss
@ -3,15 +3,23 @@

 #outdated-browser-banner {
  width: 100%;
-  bottom: 0;
-  left: 0;
  margin: 0;
  padding: $default-padding;
-  color: #FFFFFF;
-  background-color: $medium-red;
+  color: $black;
+  background-color: $yellow;
+}

-  a {
-    color: $lighter-blue;
-    text-decoration: underline;
+.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;
  }
 }
--- a/app/assets/stylesheets/outdated_browser_banner.scss
+++ b/app/assets/stylesheets/outdated_browser_banner.scss
@ -1,16 +1,25 @@
 #outdated-browser-banner {
-  position: fixed;
-  text-align: center;
-  line-height: 2em;
-  color: #FFFFFF;
-  background-color: #990000;
  width: 100%;
  margin: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1000;

-  a {
-    color: #C3D9FF;
+  color: #333333;
+  background-color: #FEF3B8;
+
+  .container {
+    display: flex;
+    width: auto;
+    align-items: center;
+    padding: 8px 16px;
  }
 }
+
+.outdated-browser-icon {
+  margin-right: 16px;
+  font-size: 30px;
+  opacity: 0.7;
+}
+
+.outdated-browser-buttons {
+  display: flex;
+  margin-left: auto;
+}
--- a/app/controllers/root_controller.rb
+++ b/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
--- a/app/helpers/application_helper.rb
+++ b/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
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@ -65,19 +65,14 @@ Rails.start();
 Turbolinks.start();
 ActiveStorage.start();

-// If Turbolinks is imported via Webpacker (and thus not available globally),
-// ReactRailsUJS will be unable to locate it.
-// https://github.com/reactjs/react-rails#event-handling
-
-// eslint-disable-next-line no-undef
-ReactRailsUJS.useContext(require.context('components', true));
-// Add Turbolinks to the global namespace:
-window.Turbolinks = Turbolinks;
-// Remove previous event handlers and add new ones:
-ReactRailsUJS.detectEvents();
-// (Optional) Clean up global namespace:
-delete window.Turbolinks;
-
 // Expose globals
 window.DS = window.DS || DS;
 window.Chartkick = Chartkick;
+// (Both Rails redirects and ReactRailsUJS expect Turbolinks to be globally available)
+window.Turbolinks = Turbolinks;
+
+// Now that Turbolinks is globally exposed,configure ReactRailsUJS
+// eslint-disable-next-line no-undef
+ReactRailsUJS.useContext(require.context('components', true));
+// Remove previous event handlers and add new ones:
+ReactRailsUJS.detectEvents();
--- a/app/views/layouts/_main_container.html.haml
+++ b/app/views/layouts/_main_container.html.haml
@ -1,4 +1,6 @@
 #main-container{ class: "col-xs-#{main_container_size}" }
+  .row
+    = render partial: 'layouts/outdated_browser_banner'
  .row
    = render partial: 'layouts/flash_messages'
  .row
--- a/app/views/layouts/_outdated_browser_banner.html.haml
+++ b/app/views/layouts/_outdated_browser_banner.html.haml
@ -1,8 +1,15 @@
-/ See config/browser.rb
- if !browser.modern?
+-# See config/browser.rb
+- if !browser.modern? && !has_dismissed_outdated_browser_banner?
  #outdated-browser-banner
-    .container
-      Attention, votre navigateur (#{browser.name} #{browser.version}) est trop ancien pour utiliser demarches-simplifiees.fr : certaines parties du site ne fonctionneront pas correctement. Nous vous recommandons fortement de
-      %a{ href: "https://browser-update.org/fr/update.html", target: "_blank", rel: "noopener" }mettre à jour votre navigateur
-      %span<>
-        \.
+    .container.flex.align-center
+      .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
+        = 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
--- a/app/views/layouts/application_old.html.haml
+++ b/app/views/layouts/application_old.html.haml
@ -19,7 +19,6 @@
    = Gon::Base.render_data(camel_case: true, init: true)

  %body{ class: browser.platform.ios? ? 'ios' : nil }
-    = render partial: 'layouts/outdated_browser_banner'
    = render partial: 'layouts/pre_maintenance'
    - if staging?
      #beta
--- a/config/initializers/browser.rb
+++ b/config/initializers/browser.rb
@ -1,8 +1,8 @@
 # See .browserslistrc
 Browser.modern_rules.clear
-Browser.modern_rules << -> b { b.chrome? && b.version.to_i >= 50 }
-Browser.modern_rules << -> b { b.ie? && b.version.to_i >= 11 && !b.compatibility_view? }
+Browser.modern_rules << -> b { b.chrome? && b.version.to_i >= 50 && !b.platform.ios? }
 Browser.modern_rules << -> b { b.edge? && b.version.to_i >= 14 && !b.compatibility_view? }
-Browser.modern_rules << -> b { b.firefox? && b.version.to_i >= 50 }
+Browser.modern_rules << -> b { b.firefox? && b.version.to_i >= 50 && !b.platform.ios? }
 Browser.modern_rules << -> b { b.opera? && b.version.to_i >= 40 }
 Browser.modern_rules << -> b { b.safari? && b.version.to_i >= 8 }
+Browser.modern_rules << -> b { b.platform.ios? && b.platform.version.to_i >= 8 }
--- a/config/routes.rb
+++ b/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"
--- a/spec/features/outdated_browser_spec.rb
+++ b/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