src/ApplicationBundle/Modules/AgentOS/Resources/views/sentinel/_report_issue_widget.html.twig line 1

Open in your IDE?
  1. {#
  2.   SENT-HUB (part 1) — the "Report an issue" widget. Included once in the cp-shell so every logged-in
  3.   user (testers especially) can file a defect from wherever they are. AJAX POST → /sentinel/report →
  4.   a source=user_report defect_ticket (current route + user-agent auto-captured; title/description
  5.   scrubbed of secrets server-side). No dependency beyond the cp-shell's own jQuery-less vanilla JS.
  6. #}
  7. <style>
  8.   #si-fab { position:fixed; left:18px; bottom:18px; z-index:1200; background:var(--cp-primary,#b8860b); color:var(--cp-on-primary,#fff);
  9.     border:none; border-radius:999px; padding:9px 15px; font-size:var(--cp-fs-sm); font-weight:700; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.2); }
  10.   #si-modal { position:fixed; inset:0; z-index:1300; background:rgba(0,0,0,.35); display:none; align-items:center; justify-content:center; }
  11.   #si-modal .si-box { background:var(--cp-surface-white,#fff); border-radius:12px; width:min(520px,92vw); max-height:90vh; overflow:auto; padding:18px 20px; box-shadow:0 8px 40px rgba(0,0,0,.3); }
  12.   #si-modal h3 { margin:0 0 4px; font-size:var(--cp-fs-lg); color:var(--cp-text,#222); }
  13.   #si-modal .si-sub { color:var(--cp-text-faint,#777); font-size:var(--cp-fs-sm); margin-bottom:12px; }
  14.   #si-modal label { display:block; font-size:var(--cp-fs-xs); font-weight:600; color:var(--cp-text-faint,#666); margin:8px 0 3px; }
  15.   #si-modal input, #si-modal textarea, #si-modal select { width:100%; box-sizing:border-box; border:1px solid var(--cp-outline-variant,#ccc); border-radius:6px; padding:7px 9px; font-size:var(--cp-fs-base); font-family:inherit; }
  16.   #si-modal textarea { resize:vertical; }
  17.   #si-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
  18.   #si-actions button { border:none; border-radius:6px; padding:8px 15px; font-size:var(--cp-fs-base); font-weight:700; cursor:pointer; }
  19.   .si-go { background:var(--cp-primary,#b8860b); color:#fff; } .si-cancel { background:transparent; color:var(--cp-text-faint,#777); }
  20.   #si-msg { font-size:var(--cp-fs-base); margin-top:8px; }
  21. </style>
  23. <button id="si-fab" onclick="siOpen()" title="Report an issue">🐛 Report an issue</button>
  24. <div id="si-modal" onclick="if(event.target.id==='si-modal')siClose()">
  25.   <div class="si-box">
  26.     <h3>Report an issue</h3>
  27.     <div class="si-sub">We auto-capture the page you're on. Please don't paste passwords or tokens — they're stripped, but best not to.</div>
  28.     <label>Title *</label>
  29.     <input type="text" id="si-title" maxlength="180" placeholder="e.g. Save button does nothing on the PO form">
  30.     <label>What happened?</label>
  31.     <textarea id="si-desc" rows="4" placeholder="Steps, what you expected, what you got…"></textarea>
  32.     <label>Console log / notes (optional)</label>
  33.     <textarea id="si-log" rows="3" placeholder="Paste any browser console error here (optional)"></textarea>
  34.     <label>How bad is it?</label>
  35.     <select id="si-sev">
  36.       <option value="P2" selected>Normal — something's wrong</option>
  37.       <option value="P1">High — blocks my work</option>
  38.       <option value="P0">Critical — data/money at risk</option>
  39.       <option value="P3">Minor — cosmetic</option>
  40.     </select>
  41.     <div id="si-msg"></div>
  42.     <div id="si-actions">
  43.       <button class="si-cancel" onclick="siClose()">Cancel</button>
  44.       <button class="si-go" id="si-submit" onclick="siSubmit()">Send report</button>
  45.     </div>
  46.   </div>
  47. </div>
  48. <script>
  49. function siOpen(){ document.getElementById('si-modal').style.display='flex'; document.getElementById('si-msg').textContent=''; }
  50. function siClose(){ document.getElementById('si-modal').style.display='none'; }
  51. function siSubmit(){
  52.   var title=(document.getElementById('si-title').value||'').trim();
  53.   var msg=document.getElementById('si-msg');
  54.   if(!title){ msg.style.color='#c00'; msg.textContent='Please add a short title.'; return; }
  55.   var btn=document.getElementById('si-submit'); btn.disabled=true;
  56.   var body=new URLSearchParams();
  57.   body.append('title',title);
  58.   body.append('description',document.getElementById('si-desc').value||'');
  59.   body.append('log',document.getElementById('si-log').value||'');
  60.   body.append('severity',document.getElementById('si-sev').value||'P2');
  61.   body.append('route',window.location.pathname+window.location.search);
  62.   fetch('{{ path('sentinel_report_submit') }}',{method:'POST',credentials:'same-origin',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:body.toString()})
  63.     .then(function(r){return r.json();})
  64.     .then(function(d){
  65.       msg.style.color=d.ok?'#2e7d32':'#c00'; msg.textContent=d.message||(d.ok?'Sent.':'Failed.');
  66.       if(d.ok){ document.getElementById('si-title').value=''; document.getElementById('si-desc').value=''; document.getElementById('si-log').value=''; setTimeout(siClose,1600); }
  67.       btn.disabled=false;
  68.     })
  69.     .catch(function(e){ msg.style.color='#c00'; msg.textContent='Could not send: '+e; btn.disabled=false; });
  70. }
  71. </script>