From 82e560cace1dab88ecd3410a95173154e46c68dc Mon Sep 17 00:00:00 2001
From: Sebastian Serth <Sebastian.Serth@hpi.de>
Date: Sat, 7 Mar 2020 11:37:36 +0100
Subject: [PATCH] Add link to WebSocket test if WebSocket connection failed

---
 app/assets/javascripts/editor/editor.js.erb | 3 ++-
 app/assets/stylesheets/base.css.scss        | 5 +++++
 app/views/application/_flash.html.slim      | 2 +-
 config/locales/de.yml                       | 1 +
 config/locales/en.yml                       | 1 +
 lib/assets/javascripts/flash.js             | 7 ++++---
 6 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/editor/editor.js.erb b/app/assets/javascripts/editor/editor.js.erb
index 8dd5a459..4784b59f 100644
--- a/app/assets/javascripts/editor/editor.js.erb
+++ b/app/assets/javascripts/editor/editor.js.erb
@@ -620,7 +620,8 @@ configureEditors: function () {
       return;
     }
     $.flash.danger({
-      text: $('#flash').data('message-failure')
+      text: $('#flash').data('websocket-failure'),
+      showPermanent: true
     });
     Sentry.captureException(JSON.stringify(error));
   },
diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
index 68c78010..1a7598dd 100644
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@@ -77,6 +77,11 @@ span.caret {
 
 .flash {
   font-size: 100%;
+
+  a, a:hover {
+    color: white;
+    font-weight: bold;
+  }
 }
 
 .markdown {
diff --git a/app/views/application/_flash.html.slim b/app/views/application/_flash.html.slim
index 4675a913..a2de01a1 100644
--- a/app/views/application/_flash.html.slim
+++ b/app/views/application/_flash.html.slim
@@ -1,5 +1,5 @@
 #flash-container.container
-  #flash.container.fixed_error_messages data-message-failure=t('shared.message_failure')
+  #flash.container.fixed_error_messages data-message-failure=t('shared.message_failure') data-websocket-failure=t('shared.websocket_failure')
     - %w[alert danger info notice success warning].each do |severity|
       div.alert.flash class="alert-#{{'alert' => 'warning', 'notice' => 'success'}.fetch(severity, severity)} alert-dismissible fade show"
         p.mb-0 id="flash-#{severity}" = flash[severity]
diff --git a/config/locales/de.yml b/config/locales/de.yml
index a7ad38e3..27835b71 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -739,6 +739,7 @@ de:
       link: Hilfe
     index: Index
     message_failure: Leider ist ein Fehler auf unserer Plattform aufgetreten. Bitte probieren Sie es später noch einmal.
+    websocket_failure: Leider ist ein Verbindungsproblem aufgetreten. <a href="https://websocketstest.com">Bitte überprüfen Sie Websocket-Verbindungen mit diesem Tool</a> und versuchen Sie es erneut.
     new: Hinzufügen
     new_model: '%{model} hinzufügen'
     number: Nummer
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 72de4e00..e702da0a 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -739,6 +739,7 @@ en:
       link: Help
     index: Index
     message_failure: 'Sorry, something went wrong.'
+    websocket_failure: Sorry, a connection issue occoured. <a href="https://websocketstest.com">Please check WebSocket connections with this tool</a> and try again.
     new: Add
     new_model: 'Add %{model}'
     number: Number
diff --git a/lib/assets/javascripts/flash.js b/lib/assets/javascripts/flash.js
index d7273864..f4cead8f 100644
--- a/lib/assets/javascripts/flash.js
+++ b/lib/assets/javascripts/flash.js
@@ -7,7 +7,7 @@ $( document ).on('turbolinks:load', function() {
       var container = options.container;
       var html = (options.icon ? '<i class="' + options.icon.join(' ') + '"></i>' : '') + options.text;
       container.html(html);
-      showFlashes();
+      showFlashes(options.showPermanent);
     }
   };
 
@@ -22,7 +22,7 @@ $( document ).on('turbolinks:load', function() {
     });
   };
 
-  var showFlashes = function() {
+  var showFlashes = function(showPermanent) {
     $('.flash').each(function() {
       var container = $(this);
       var message = container.find('p');
@@ -36,7 +36,8 @@ $( document ).on('turbolinks:load', function() {
 
       if (message.html() !== '') {
         container.slideDown();
-        container.animation = setTimeout(hide, DURATION);
+        if (showPermanent !== true)
+          container.animation = setTimeout(hide, DURATION);
       }
 
       button.on('click', function () {