Add link to WebSocket test if WebSocket connection failed

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));
   },

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 {

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]

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

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

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 () {