feat: Show refresh modal on action cable disconnect (#4010)

app/javascript/dashboard/components/NetworkNotification.vue

@@ -30,6 +30,7 @@
 <script>
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import { mapGetters } from 'vuex';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 export default {
   mixins: [globalConfigMixin],
@@ -46,6 +47,9 @@ export default {
 
   mounted() {
     window.addEventListener('offline', this.updateOnlineStatus);
+    window.bus.$on(BUS_EVENTS.WEBSOCKET_DISCONNECT, () => {
+      this.updateOnlineStatus({ type: 'offline' });
+    });
   },
 
   beforeDestroy() {

app/javascript/shared/constants/busEvents.js

@@ -5,4 +5,5 @@ export const BUS_EVENTS = {
   FOCUS_CUSTOM_ATTRIBUTE: 'FOCUS_CUSTOM_ATTRIBUTE',
   SCROLL_TO_MESSAGE: 'SCROLL_TO_MESSAGE',
   TOGGLE_SIDEMENU: 'TOGGLE_SIDEMENU',
+  WEBSOCKET_DISCONNECT: 'WEBSOCKET_DISCONNECT',
 };

app/javascript/shared/helpers/BaseActionCableConnector.js

@@ -1,4 +1,5 @@
 import { createConsumer } from '@rails/actioncable';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 const PRESENCE_INTERVAL = 20000;
 
@@ -18,6 +19,7 @@ class BaseActionCableConnector {
           this.perform('update_presence');
         },
         received: this.onReceived,
+        disconnected: this.onDisconnected,
       }
     );
     this.app = app;
@@ -33,6 +35,11 @@ class BaseActionCableConnector {
     this.consumer.disconnect();
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  onDisconnected() {
+    window.bus.$emit(BUS_EVENTS.WEBSOCKET_DISCONNECT);
+  }
+
   onReceived = ({ event, data } = {}) => {
     if (this.isAValidEvent(data)) {
       if (this.events[event] && typeof this.events[event] === 'function') {