Fixes #39083 - Use Action Cable for UI notifications

Author: jeremylenz

app/channels/application_cable/channel.rb

@@ -0,0 +1,4 @@
+module ApplicationCable
+  class Channel < ActionCable::Channel::Base
+  end
+end

app/channels/application_cable/connection.rb

@@ -0,0 +1,19 @@
+module ApplicationCable
+  class Connection < ActionCable::Connection::Base
+    identified_by :current_user
+
+    def connect
+      self.current_user = find_verified_user
+    end
+
+    private
+
+    def find_verified_user
+      user_id = request.session['user']
+      # Use unscoped to bypass Foreman's organization/location default scopes
+      # since the tenant context isn't established during WebSocket handshake
+      found_user = User.unscoped.find_by(id: user_id) if user_id
+      found_user || reject_unauthorized_connection
+    end
+  end
+end

app/channels/notification_channel.rb

@@ -0,0 +1,5 @@
+class NotificationChannel < ApplicationCable::Channel
+  def subscribed
+    stream_for current_user
+  end
+end

app/models/notification_recipient.rb

@@ -28,6 +28,20 @@ def current_user?
   private
 
   def delete_user_cache
-    UINotifications::CacheHandler.new(user_id).clear
+    cache_handler = UINotifications::CacheHandler.new(user_id)
+    cache_handler.clear
+
+    # Broadcast notification update via Action Cable
+    begin
+      payload_json = cache_handler.payload
+      user = User.unscoped.find_by(id: user_id)
+
+      if user
+        NotificationChannel.broadcast_to(user, { payload: payload_json })
+      end
+    rescue => e
+      # Don't let broadcast errors break notification system
+      Rails.logger.error("Failed to broadcast notification update: #{e.message}")
+    end
   end
 end

config/application.rb

@@ -14,7 +14,7 @@
   'action_view/railtie',
   'action_mailer/railtie',
   'active_job/railtie',
-  # 'action_cable/engine',
+  'action_cable/engine',
   # 'action_mailbox/engine',
   # 'action_text/engine',
   'rails/test_unit/railtie',

config/cable.yml

@@ -0,0 +1,11 @@
+development:
+  adapter: redis
+  url: redis://localhost:6379/1
+
+test:
+  adapter: test
+
+production:
+  adapter: redis
+  url: redis://10.10.3.153:6381
+  channel_prefix: appname_production

package.json

@@ -34,6 +34,7 @@
     "@patternfly/react-table": "^5.4.8",
     "@patternfly/react-tokens": "^5.4.1",
     "@patternfly/react-templates": "^1.1.8",
+    "@rails/actioncable": "^8.1.200",
     "@reduxjs/toolkit": "^1.6.0",
     "@scalprum/core": "^0.8.1",
     "@scalprum/react-core": "^0.9.3",

webpack/assets/javascripts/react_app/common/channels/actionCableConsumer.js

@@ -0,0 +1,3 @@
+import { createConsumer } from '@rails/actioncable';
+
+export default createConsumer();

webpack/assets/javascripts/react_app/common/channels/notificationChannel.js

@@ -0,0 +1,18 @@
+import consumer from './actionCableConsumer';
+
+// Export a function to subscribe with custom callbacks
+export const subscribeToNotifications = (callbacks = {}) =>
+  consumer.subscriptions.create(
+    { channel: 'NotificationChannel' },
+    {
+      connected() {
+        if (callbacks.connected) callbacks.connected();
+      },
+      disconnected() {
+        if (callbacks.disconnected) callbacks.disconnected();
+      },
+      received(data) {
+        if (callbacks.received) callbacks.received(data);
+      },
+    }
+  );

webpack/assets/javascripts/react_app/components/notifications/NotificationsContext.js

@@ -3,7 +3,13 @@ import React, { useEffect, useState, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { NotificationBadgeVariant as BadgeVariant } from '@patternfly/react-core';
 import { groupBy } from 'lodash';
-import { startNotificationsPolling } from '../../redux/actions/notifications';
+import { subscribeToNotifications } from '../../common/channels/notificationChannel';
+import {
+  fetchNotifications,
+  startNotificationsPolling,
+} from '../../redux/actions/notifications';
+import { NOTIFICATIONS } from '../../redux/consts';
+import { actionTypeGenerator } from '../../redux/API/APIActionTypeGenerator';
 import forceSingleton from '../../common/forceSingleton';
 
 export const NotificationsContext = forceSingleton('NotificationsContext', () =>
@@ -19,6 +25,7 @@ export const NotificationsContextWrapper = ({ children }) => {
 
   const notificationsState = useSelector(state => state.notifications);
   const notifications = groupBy(notificationsState.notifications, n => n.group);
+  const { SUCCESS } = actionTypeGenerator(NOTIFICATIONS);
 
   const [expandedNotifications, setExpandedNotifications] = useState([]);
   const [expandedKebab, setExpandedKebab] = useState('');
@@ -45,8 +52,35 @@ export const NotificationsContextWrapper = ({ children }) => {
   };
 
   useEffect(() => {
+    // Initial fetch of notifications
+    dispatch(fetchNotifications());
+
+    // Subscribe to real-time updates via Action Cable
+    const subscription = subscribeToNotifications({
+      received: data => {
+        try {
+          const payload = JSON.parse(data.payload);
+          dispatch({
+            type: SUCCESS,
+            response: payload,
+          });
+        } catch (error) {
+          console.error('Failed to parse notification payload:', error);
+        }
+      },
+    });
+
+    // Start polling as fallback (in case WebSocket connection fails)
+    // Action Cable handles real-time updates, polling runs every 5 minutes as a safety net
     dispatch(startNotificationsPolling());
-  }, [dispatch]);
+
+    // Cleanup: unsubscribe when component unmounts
+    return () => {
+      if (subscription && subscription.unsubscribe) {
+        subscription.unsubscribe();
+      }
+    };
+  }, [dispatch, SUCCESS]);
 
   const countUnreadMessages = useMemo(() => {
     if (notificationsState.notifications) {