Fix system notifications showing Oopsie error

app/controllers/notifications_controller.rb

@@ -3,13 +3,18 @@ class NotificationsController < ApplicationController
 
   def index
     authorize!
-    per_page = params[:number_of_items_per_page].presence || 25
-    base_scope = authorized_scope(Notification.includes(:noticeable))
-    filtered = base_scope.search_by_params(params.to_unsafe_h)
-    @notifications = filtered.order(created_at: :desc)
-                             .paginate(page: params[:page], per_page: per_page)
 
-    render turbo_frame_request? ? :notifications_results : :index
+    if turbo_frame_request?
+      per_page = params[:number_of_items_per_page].presence || 25
+      base_scope = authorized_scope(Notification.includes(:noticeable))
+      filtered = base_scope.search_by_params(params.to_unsafe_h)
+      @notifications = filtered.order(created_at: :desc)
+                               .paginate(page: params[:page], per_page: per_page)
+
+      render :notifications_results
+    else
+      render :index
+    end
   end
 
   def show

app/views/notifications/_index.html.erb

@@ -44,6 +44,7 @@
         <% if notification.noticeable.present? %>
           <%= link_to notification.noticeable.class.name,
                       polymorphic_path(notification.noticeable),
+                      data: { turbo_frame: "_top" },
                       class: "btn btn-secondary-outline" %>
         <% else %>
           <span class="text-gray-400">—</span>
@@ -54,6 +55,7 @@
       <td class="px-4 py-3 text-right whitespace-nowrap">
         <%= link_to "View",
                     notification_path(notification),
+                    data: { turbo_frame: "_top" },
                     class: "btn btn-secondary-outline" %>
       </td>
     </tr>

app/views/notifications/_results_skeleton.html.erb

@@ -0,0 +1,24 @@
+<div class="overflow-x-auto bg-white border border-gray-200 rounded-xl shadow-sm">
+  <table class="min-w-full divide-y divide-gray-200 text-sm">
+    <thead class="bg-gray-50 animate-pulse">
+      <tr>
+        <th class="px-4 py-3 text-left"><div class="h-4 w-16 rounded bg-gray-200"></div></th>
+        <th class="px-4 py-3 text-left"><div class="h-4 w-24 rounded bg-gray-200"></div></th>
+        <th class="px-4 py-3 text-left"><div class="h-4 w-32 rounded bg-gray-200"></div></th>
+        <th class="px-4 py-3 text-left"><div class="h-4 w-20 rounded bg-gray-200"></div></th>
+        <th class="px-4 py-3 text-right"><div class="h-4 w-12 ml-auto rounded bg-gray-200"></div></th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-gray-100 animate-pulse">
+      <% 5.times do %>
+        <tr>
+          <td class="px-4 py-3"><div class="h-4 w-24 rounded bg-gray-200"></div></td>
+          <td class="px-4 py-3"><div class="h-4 w-40 rounded bg-gray-200"></div></td>
+          <td class="px-4 py-3"><div class="h-4 w-48 rounded bg-gray-200"></div></td>
+          <td class="px-4 py-3"><div class="h-4 w-28 rounded bg-gray-200"></div></td>
+          <td class="px-4 py-3 text-right"><div class="h-4 w-12 ml-auto rounded bg-gray-200"></div></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>

app/views/notifications/index.html.erb

@@ -11,14 +11,7 @@
           <% result_src = notifications_path + "?" + request.query_string %>
 
           <%= turbo_frame_tag "notifications_results", src: result_src do %>
-            <div class="rounded-xl bg-white p-6">
-             <%= render "index" %>
-            </div>
-
-            <!-- Pagination -->
-            <div class="pagination flex justify-center mt-12">
-              <%= tailwind_paginate @notifications %>
-            </div>
+            <%= render "results_skeleton" %>
           <% end %>
         </section>
       </div>

spec/requests/notifications_spec.rb

@@ -8,22 +8,25 @@
   describe "GET /notifications" do
     before { sign_in admin }
 
+    let(:turbo_headers) { { "Turbo-Frame" => "notifications_results" } }
     let!(:story_notification) { create(:notification, noticeable: create(:story_idea), email_subject: "New story idea") }
     let!(:user_notification) { create(:notification, noticeable: create(:user), email_subject: "Welcome") }
 
-    it "preserves the email_topic filter selection" do
-      get notifications_path, params: { email_topic: "User: confirm new email" }
-      expect(response.body).to include('selected="selected"')
-      expect(response.body).to include("User: confirm new email")
+    it "filters by email_topic" do
+      matching = create(:notification, email_subject: "Confirm your new email address")
+      get notifications_path, params: { email_topic: "User: confirm new email" }, headers: turbo_headers
+      expect(response.body).to include(matching.recipient_email)
+      expect(response.body).not_to include(story_notification.recipient_email)
     end
 
-    it "preserves the record_type filter selection" do
-      get notifications_path, params: { record_type: "StoryIdea" }
-      expect(response.body).to include('selected="selected"')
+    it "filters by record_type" do
+      get notifications_path, params: { record_type: "StoryIdea" }, headers: turbo_headers
+      expect(response.body).to include(story_notification.recipient_email)
+      expect(response.body).not_to include(user_notification.recipient_email)
     end
 
     it "wraps results in a turbo frame" do
-      get notifications_path
+      get notifications_path, headers: turbo_headers
       expect(response.body).to include('id="notifications_results"')
     end
   end