rogee
321c61aaae
Copy the Chatwoot (v4.14.0) frontend runnable subset into frontend/ for customization: - app/javascript/ (Vue SPA: dashboard, widget, sdk, portal, superadmin) - app/views/ (ERB templates for vite-plugin-ruby entrypoint resolution) - app/helpers/, app/assets/ (Rails view helpers, static assets) - enterprise/ (Enterprise edition frontend overlay) - config/vite.json, vite.config.ts, bin/vite (Vite-Rails toolchain) - package.json, pnpm-lock.yaml, tailwind/postcss/eslint configs - Gemfile, Gemfile.lock (vite_rails gem for bin/vite binstub) Excluded Rails backend: controllers, models, services, jobs, mailers, policies, db, lib, spec, public, node_modules. Update references to the new frontend location: - .gitignore: exclude frontend build artifacts (node_modules, tmp, packs), keep frontend/bin/ and frontend/vendor/ via negation - backend/scripts/parity_frontend_smoke.sh: CHATWOOT_DIR default reference/chatwoot -> ../frontend - backend/scripts/parity_frontend_browser_smoke.mjs: same default update - AGENTS.md: add frontend section with Rails/Vite coupling notes - README: architecture tree includes frontend/
191 lines
9.9 KiB
ERB
191 lines
9.9 KiB
ERB
<% content_for(:title) do %>Push Diagnostics<% end %>
|
|
|
|
<header class="main-content__header" role="banner">
|
|
<h1 class="main-content__page-title" id="page-title">Push Diagnostics</h1>
|
|
</header>
|
|
|
|
<section class="main-content__body">
|
|
<p class="text-sm text-slate-600 mb-6">
|
|
Send a test push notification to a specific user's registered devices to diagnose delivery issues.
|
|
Results show the raw FCM / Web Push / relay response so you can see exactly what failed.
|
|
</p>
|
|
|
|
<div class="mb-8">
|
|
<h2 class="text-base font-semibold mb-2">1. Look up user</h2>
|
|
<%= form_with url: super_admin_push_diagnostics_path, method: :get, local: true, class: 'flex gap-2 items-center' do |f| %>
|
|
<%= f.text_field :user_query,
|
|
value: @query,
|
|
placeholder: 'user@example.com or numeric user ID',
|
|
class: 'border border-slate-100 p-1.5 rounded-md w-80' %>
|
|
<%= f.submit 'Look up', class: 'border border-slate-200 bg-slate-50 px-3 py-1.5 rounded-md cursor-pointer' %>
|
|
<% end %>
|
|
<% if @query.present? && @user.nil? %>
|
|
<p class="text-sm text-red-600 mt-2">No user found for "<%= @query %>".</p>
|
|
<% end %>
|
|
</div>
|
|
|
|
<% if @user %>
|
|
<div class="mb-6 border border-slate-100 rounded-md p-4 bg-slate-25">
|
|
<p class="text-sm">
|
|
<strong><%= @user.name %></strong>
|
|
· <%= @user.email %>
|
|
· ID <%= @user.id %>
|
|
</p>
|
|
<% if @user.accounts.any? %>
|
|
<p class="text-xs text-slate-500 mt-1">
|
|
Accounts:
|
|
<% @user.accounts.each_with_index do |account, index| %>
|
|
<%= ', ' if index.positive? %>
|
|
<%= account.name %> (ID <%= account.id %>)
|
|
<% end %>
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="mb-8">
|
|
<h2 class="text-base font-semibold mb-2">2. Select subscriptions (<%= @subscriptions.count %>)</h2>
|
|
<p class="text-xs text-amber-700 mb-3">
|
|
⚠️ This sends a real push to every selected device. Use only when diagnosing a reported issue.
|
|
</p>
|
|
|
|
<% if @subscriptions.empty? %>
|
|
<p class="text-sm text-slate-600">This user has no push subscriptions registered.</p>
|
|
<% else %>
|
|
<%= form_with url: super_admin_push_diagnostics_path, method: :post, local: true do |f| %>
|
|
<%= f.hidden_field :user_id, value: @user.id %>
|
|
<div class="mb-4 max-w-2xl">
|
|
<div class="mb-3">
|
|
<%= label_tag :push_title, 'Title', class: 'block text-xs font-medium text-slate-600 mb-1' %>
|
|
<%= text_field_tag :push_title,
|
|
params[:push_title].presence || Notification::PushTestService.default_title,
|
|
class: 'border border-slate-100 p-1.5 rounded-md w-full text-sm' %>
|
|
</div>
|
|
<div>
|
|
<%= label_tag :push_body, 'Body', class: 'block text-xs font-medium text-slate-600 mb-1' %>
|
|
<%= text_area_tag :push_body,
|
|
params[:push_body].presence || Notification::PushTestService.default_body,
|
|
rows: 2,
|
|
class: 'border border-slate-100 p-1.5 rounded-md w-full text-sm' %>
|
|
</div>
|
|
<p class="text-xs text-slate-400 mt-1">Customers will see this text as a real push notification on their device.</p>
|
|
</div>
|
|
<table class="w-full text-sm border border-slate-100 rounded-md">
|
|
<thead class="text-left text-xs text-slate-500 bg-slate-25">
|
|
<tr>
|
|
<th class="px-3 py-2 align-middle first:!pl-4 last:!pr-4"><input type="checkbox" id="toggle-all"></th>
|
|
<th class="px-3 py-2 first:!pl-4 last:!pr-4">ID</th>
|
|
<th class="px-3 py-2 first:!pl-4 last:!pr-4">Type</th>
|
|
<th class="px-3 py-2 first:!pl-4 last:!pr-4">Device / endpoint</th>
|
|
<th class="px-3 py-2 first:!pl-4 last:!pr-4">Push token</th>
|
|
<th class="px-3 py-2 first:!pl-4 last:!pr-4">Device details</th>
|
|
<th class="px-3 py-2 first:!pl-4 last:!pr-4">Created</th>
|
|
<th class="px-3 py-2 first:!pl-4 last:!pr-4">Last updated</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% @subscriptions.each do |sub| %>
|
|
<% attrs = (sub.subscription_attributes || {}).stringify_keys %>
|
|
<% if sub.browser_push? %>
|
|
<% endpoint = attrs['endpoint'].to_s %>
|
|
<% host = (begin; URI.parse(endpoint).host; rescue URI::InvalidURIError; nil; end) %>
|
|
<% device_display = host.presence || endpoint.presence || '—' %>
|
|
<% token_display = endpoint.present? ? "…#{endpoint.last(6)}" : '—' %>
|
|
<% else %>
|
|
<% device_display = attrs['device_id'].present? ? "…#{attrs['device_id'].to_s.last(6)}" : '—' %>
|
|
<% token_display = attrs['push_token'].present? ? "…#{attrs['push_token'].to_s.last(6)}" : '—' %>
|
|
<% end %>
|
|
<% extra_attrs = attrs.except('endpoint', 'p256dh', 'auth', 'push_token', 'device_id') %>
|
|
<tr class="border-t border-slate-100 align-middle">
|
|
<td class="px-3 py-2 first:!pl-4 last:!pr-4">
|
|
<%= check_box_tag 'subscription_ids[]', sub.id, false, class: 'subscription-checkbox' %>
|
|
</td>
|
|
<td class="px-3 py-2 first:!pl-4 last:!pr-4"><%= sub.id %></td>
|
|
<td class="px-3 py-2 first:!pl-4 last:!pr-4"><%= sub.subscription_type %></td>
|
|
<td class="px-3 py-2 first:!pl-4 last:!pr-4 font-mono text-xs break-all"><%= device_display %></td>
|
|
<td class="px-3 py-2 first:!pl-4 last:!pr-4 font-mono text-xs break-all"><%= token_display %></td>
|
|
<td class="px-3 py-2 first:!pl-4 last:!pr-4 text-xs align-top">
|
|
<% if extra_attrs.present? %>
|
|
<% extra_attrs.each do |k, v| %>
|
|
<div><span class="text-slate-500"><%= k %>:</span> <span class="font-mono"><%= v.to_s.truncate(40) %></span></div>
|
|
<% end %>
|
|
<% else %>
|
|
<span class="text-slate-400">—</span>
|
|
<% end %>
|
|
</td>
|
|
<td class="px-3 py-2 first:!pl-4 last:!pr-4 whitespace-nowrap"><%= sub.created_at.strftime('%Y-%m-%d %H:%M') %></td>
|
|
<td class="px-3 py-2 first:!pl-4 last:!pr-4 whitespace-nowrap">
|
|
<%= sub.updated_at.strftime('%Y-%m-%d %H:%M') %>
|
|
<span class="text-xs text-slate-400">(<%= time_ago_in_words(sub.updated_at) %> ago)</span>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
<div class="mt-4 flex gap-2">
|
|
<%= f.submit 'Send Test Push to Selected',
|
|
class: 'border border-slate-200 bg-slate-50 px-3 py-1.5 rounded-md cursor-pointer font-medium' %>
|
|
<%= submit_tag 'Delete Selected Subscriptions',
|
|
formaction: destroy_subscriptions_super_admin_push_diagnostics_path,
|
|
formmethod: 'post',
|
|
data: { confirm: "Delete the selected subscription(s)? The user won't receive pushes on those devices until their app re-registers." },
|
|
class: 'border border-red-200 bg-red-50 text-red-700 px-3 py-1.5 rounded-md cursor-pointer font-medium' %>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<% if @results.present? %>
|
|
<div class="mb-8">
|
|
<h2 class="text-base font-semibold mb-2">3. Results</h2>
|
|
<table class="w-full text-sm border border-slate-100 rounded-md">
|
|
<thead class="text-left text-xs text-slate-500 bg-slate-25">
|
|
<tr>
|
|
<th class="px-3 py-2 first:!pl-4 last:!pr-4">Sub ID</th>
|
|
<th class="px-3 py-2 first:!pl-4 last:!pr-4">Type</th>
|
|
<th class="px-3 py-2 first:!pl-4 last:!pr-4">Device</th>
|
|
<th class="px-3 py-2 first:!pl-4 last:!pr-4">Push token</th>
|
|
<th class="px-3 py-2 first:!pl-4 last:!pr-4">Status</th>
|
|
<th class="px-3 py-2 first:!pl-4 last:!pr-4">Details</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% @results.each do |r| %>
|
|
<tr class="border-t border-slate-100 align-top">
|
|
<td class="px-3 py-2 first:!pl-4 last:!pr-4"><%= r[:id] %></td>
|
|
<td class="px-3 py-2 first:!pl-4 last:!pr-4"><%= r[:type] %></td>
|
|
<td class="px-3 py-2 first:!pl-4 last:!pr-4 font-mono text-xs break-all"><%= r[:device] %></td>
|
|
<td class="px-3 py-2 first:!pl-4 last:!pr-4 font-mono text-xs break-all"><%= r[:token_tail] %></td>
|
|
<td class="px-3 py-2 first:!pl-4 last:!pr-4">
|
|
<%
|
|
color = {
|
|
success: 'bg-green-100 text-green-800',
|
|
failure: 'bg-red-100 text-red-800',
|
|
skipped: 'bg-slate-100 text-slate-600'
|
|
}[r[:status]]
|
|
%>
|
|
<span class="px-2 py-0.5 rounded-full text-xs <%= color %>"><%= r[:status] %></span>
|
|
</td>
|
|
<td class="px-3 py-2 first:!pl-4 last:!pr-4 font-mono text-xs break-all whitespace-pre-wrap"><%= r[:message] %></td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
</section>
|
|
|
|
<% content_for :javascript do %>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const toggle = document.getElementById('toggle-all');
|
|
if (!toggle) return;
|
|
toggle.addEventListener('change', (event) => {
|
|
document.querySelectorAll('.subscription-checkbox').forEach((cb) => {
|
|
cb.checked = event.target.checked;
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<% end %>
|