@botbuddy/react 0.1.5 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');function W(e,p){let[u,_]=react.useState({x:e,y:p}),x=react.useRef(false),f=react.useRef({x:0,y:0}),v=react.useRef(false),R=react.useCallback(c=>{x.current=true,v.current=false,f.current={x:c.clientX-u.x,y:c.clientY-u.y},c.target.setPointerCapture(c.pointerId);},[u]),S=react.useCallback(c=>{x.current&&(v.current=true,_({x:c.clientX-f.current.x,y:c.clientY-f.current.y}));},[]),a=react.useCallback(()=>{x.current=false;},[]);return {pos:u,onPointerDown:R,onPointerMove:S,onPointerUp:a,didDrag:v}}function L(e){let[p,u]=react.useState(null),[_,x]=react.useState("loading"),f=react.useCallback(async()=>{try{let a=new URLSearchParams;e.testRunId&&a.set("test_run_id",e.testRunId),e.targetUrl&&a.set("target_url",e.targetUrl),a.set("app_slug",e.appSlug),a.set("environment",e.environment),e.version&&a.set("version",e.version),e.commitSha&&a.set("commit_sha",e.commitSha),e.branchName&&a.set("branch_name",e.branchName);let c=await fetch(`${e.config.serverUrl}/widget/test-run?${a.toString()}`,{headers:{Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}});if(c.status===404){x("no-match"),u(null);return}if(!c.ok){x("error");return}let b=await c.json();u(b),x(b.status==="completed"?"completed":"ready");}catch{x("error");}},[e.config.serverUrl,e.config.anonKey,e.appSlug,e.environment,e.testRunId,e.targetUrl,e.version,e.commitSha,e.branchName]);return react.useEffect(()=>{f();},[f]),{run:p,widgetState:_,fetchRun:f,setVerdict:async(a,c,b,h="human")=>{let m=await fetch(`${e.config.serverUrl}/widget/test-cases/${a}/verdict`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey},body:JSON.stringify({verdict:c,fail_reason:b,display_name:h})});if(m.ok){let{summary:w}=await m.json();u(y=>y?{...y,summary:w,test_cases:y.test_cases.map(M=>M.id===a?{...M,verdict:c,fail_reason:c==="fail"&&b||null,verdict_by_display_name:h,verdict_at:new Date().toISOString()}:M)}:null);}return m.ok},markComplete:async()=>{if(!p)return false;let a=await fetch(`${e.config.serverUrl}/widget/test-runs/${p.id}/complete`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}});return a.ok&&f(),a.ok},resetRun:async()=>{if(!p)return false;let a=await fetch(`${e.config.serverUrl}/widget/test-runs/${p.id}/reset`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}});return a.ok&&f(),a.ok},setRun:u}}var g=({d:e,className:p})=>jsxRuntime.jsx("svg",{className:p,width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:e})}),l={clipboard:"M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2",check:"M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4 12 14.01l-3-3",x:"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20M15 9l-6 6M9 9l6 6",circle:"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20",skip:"M5 4l10 8-10 8V4M19 5v14",grip:"M9 5h.01M15 5h.01M9 12h.01M15 12h.01M9 19h.01M15 19h.01",minus:"M5 12h14",chevronUp:"M18 15l-6-6-6 6",chevronDown:"M6 9l6 6 6-6",externalLink:"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3",pr:"M6 3v18M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6M18 9a9 9 0 0 1-9 9",ticket:"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z",loader:"M21 12a9 9 0 1 1-6.219-8.56",checkAll:"M18 6L7 17l-5-5M22 10l-7.5 7.5L13 16",alert:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0M12 9v4M12 17h.01"};var oe={pending:l.circle,pass:l.check,fail:l.x,skip:l.skip},j={local:{bg:"rgba(59,130,246,0.15)",text:"#60a5fa",border:"rgba(59,130,246,0.3)"},preview:{bg:"rgba(168,85,247,0.15)",text:"#c084fc",border:"rgba(168,85,247,0.3)"},staging:{bg:"rgba(245,158,11,0.15)",text:"#fbbf24",border:"rgba(245,158,11,0.3)"},production:{bg:"rgba(239,68,68,0.15)",text:"#f87171",border:"rgba(239,68,68,0.3)"},custom:{bg:"rgba(128,128,128,0.15)",text:"#888",border:"rgba(128,128,128,0.3)"}},i={root:{position:"fixed",zIndex:9999,userSelect:"none",fontFamily:"ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"},pill:{display:"inline-flex",alignItems:"center",gap:"6px",padding:"4px 8px",borderRadius:"9999px",background:"rgb(30,30,30)",border:"1px solid rgba(255,255,255,0.15)",boxShadow:"0 4px 12px rgba(0,0,0,0.3)",cursor:"pointer",fontSize:"9px",color:"#e5e5e5"},card:e=>({width:`${e}px`,borderRadius:"8px",background:"rgb(30,30,30)",border:"1px solid rgba(255,255,255,0.15)",boxShadow:"0 8px 24px rgba(0,0,0,0.4)",overflow:"hidden",display:"flex",flexDirection:"column"}),handle:{padding:"8px 12px",display:"flex",alignItems:"center",gap:"8px",cursor:"grab",borderBottom:"1px solid rgba(255,255,255,0.06)"},title:{fontSize:"10px",fontWeight:600,color:"#e5e5e5",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},sub:{fontSize:"9px",color:"rgba(255,255,255,0.4)",display:"flex",alignItems:"center",gap:"6px"},btn:{padding:"2px",borderRadius:"4px",background:"transparent",border:"none",cursor:"pointer",color:"#888",display:"flex",flexShrink:0},stats:{padding:"4px 12px",display:"flex",alignItems:"center",gap:"8px",fontSize:"9px",borderBottom:"1px solid rgba(255,255,255,0.06)"},badge:e=>{let p=j[e]||j.custom;return {fontSize:"8px",padding:"0 4px",borderRadius:"4px",background:p.bg,color:p.text,border:`1px solid ${p.border}`,lineHeight:"14px"}},progress:{height:"2px",background:"rgba(255,255,255,0.06)",flexShrink:0},progressBar:e=>({height:"100%",width:`${e}%`,background:"linear-gradient(to right, #34d399, #3b82f6)",transition:"width 0.5s"}),link:e=>({display:"inline-flex",alignItems:"center",gap:"4px",fontSize:"9px",padding:"2px 6px",borderRadius:"4px",background:`${e}15`,color:e,textDecoration:"none",border:"none",cursor:"pointer"}),caseRow:{padding:"6px 12px",borderBottom:"1px solid rgba(255,255,255,0.06)",transition:"background 0.15s"},verdictBtn:(e,p)=>({fontSize:"8px",padding:"2px 6px",borderRadius:"4px",border:"none",cursor:"pointer",background:e?`${p}33`:"transparent",color:e?p:"#888",transition:"all 0.15s"}),input:{flex:1,fontSize:"9px",background:"rgba(0,0,0,0.3)",border:"1px solid rgba(255,255,255,0.1)",borderRadius:"4px",padding:"2px 6px",color:"#e5e5e5",outline:"none"}};function ie({config:e,appSlug:p,environment:u,testRunId:_,targetUrl:x,version:f,commitSha:v,branchName:R,onNavigate:S,displayName:a="human",defaultMode:c="mini",defaultPosition:b}){let[h,m]=react.useState(c),[w,y]=react.useState(""),[M,z]=react.useState(null),[$,V]=react.useState(null),Y=b?.x??16,X=b?.y??(typeof window<"u"?window.innerHeight-56:600),{pos:H,onPointerDown:B,onPointerMove:D,onPointerUp:I,didDrag:K}=W(Y,X),{run:r,widgetState:k,fetchRun:J,setVerdict:A,markComplete:Z,resetRun:q}=L({config:e,appSlug:p,environment:u,testRunId:_,targetUrl:x,version:f,commitSha:v,branchName:R}),T=react.useCallback(async(o,d,Q)=>{V(o);try{await A(o,d,Q,a);}finally{V(null),z(null),y("");}},[A,a]),s=r?.summary||{total:0,pending:0,pass:0,fail:0,skip:0},G=s.total>0&&s.pending===0,E=s.total>0?(s.pass+s.fail)/s.total*100:0;if(k==="no-match"||k==="loading")return null;let O=()=>{K.current||m(o=>o==="mini"||o==="expanded"?"max":"mini");},C=({icon:o,onClick:d})=>jsxRuntime.jsx("button",{style:i.btn,onClick:d,children:jsxRuntime.jsx(g,{d:o,className:""})});return jsxRuntime.jsxs("div",{style:{...i.root,left:H.x,top:H.y},children:[h==="mini"&&jsxRuntime.jsxs("div",{style:i.pill,onPointerDown:B,onPointerMove:D,onPointerUp:()=>{I(),K.current||O();},children:[jsxRuntime.jsx(g,{d:l.clipboard,className:""}),jsxRuntime.jsxs("span",{children:[s.pass,"/",s.total]}),s.fail>0&&jsxRuntime.jsxs("span",{style:{color:"#f87171"},children:[s.fail,"\u2717"]}),s.skip>0&&jsxRuntime.jsxs("span",{style:{color:"#f59e0b"},children:[s.skip,"\u23ED"]}),r?.pr_url&&jsxRuntime.jsxs("span",{style:{...i.link("#60a5fa"),pointerEvents:"none",textDecoration:"none"},children:[jsxRuntime.jsx(g,{d:l.pr,className:""}),r.pr_id||"PR"]}),r?.ticket_url&&jsxRuntime.jsxs("span",{style:{...i.link("#fbbf24"),pointerEvents:"none",textDecoration:"none"},children:[jsxRuntime.jsx(g,{d:l.ticket,className:""}),r.ticket_id||"TKT"]})]}),h==="expanded"&&jsxRuntime.jsxs("div",{style:i.card(300),children:[jsxRuntime.jsxs("div",{style:i.handle,onPointerDown:B,onPointerMove:D,onPointerUp:I,children:[jsxRuntime.jsx(g,{d:l.grip,className:""}),jsxRuntime.jsxs("div",{style:{flex:1,minWidth:0},children:[jsxRuntime.jsx("div",{style:i.title,children:r?.title}),r?.branch_name&&jsxRuntime.jsxs("div",{style:i.sub,children:["\u2387 ",r.branch_name]})]}),jsxRuntime.jsx(C,{icon:l.chevronUp,onClick:O}),jsxRuntime.jsx(C,{icon:l.minus,onClick:()=>m("mini")})]}),jsxRuntime.jsxs("div",{style:i.stats,children:[jsxRuntime.jsxs("span",{style:{color:"#34d399"},children:[s.pass,"\u2713"]}),jsxRuntime.jsxs("span",{style:{color:"#f87171"},children:[s.fail,"\u2717"]}),jsxRuntime.jsxs("span",{style:{color:"#f59e0b"},children:[s.skip,"\u23ED"]}),jsxRuntime.jsxs("span",{style:{color:"#888"},children:[s.pending,"\u25CC"]}),jsxRuntime.jsx("span",{style:{color:"#555",marginLeft:"auto"},children:s.total})]}),r?.description&&jsxRuntime.jsx("div",{style:{padding:"6px 12px",fontSize:"10px",color:"#888",borderBottom:"1px solid rgba(255,255,255,0.06)",maxHeight:"64px",overflowY:"auto"},children:r.description}),jsxRuntime.jsxs("div",{style:{padding:"6px 12px",display:"flex",gap:"8px",flexWrap:"wrap",alignItems:"center",borderBottom:"1px solid rgba(255,255,255,0.06)"},children:[r?.pr_url&&jsxRuntime.jsxs("a",{href:r.pr_url,target:"_blank",rel:"noopener noreferrer",style:{...i.link("#60a5fa"),textDecoration:"none"},children:[jsxRuntime.jsx(g,{d:l.pr,className:""}),r.pr_id||"PR"]}),r?.ticket_url&&jsxRuntime.jsxs("a",{href:r.ticket_url,target:"_blank",rel:"noopener noreferrer",style:{...i.link("#fbbf24"),textDecoration:"none"},children:[jsxRuntime.jsx(g,{d:l.ticket,className:""}),r.ticket_id||"Ticket"]}),jsxRuntime.jsx("span",{style:{...i.badge(r?.environment||"custom"),marginLeft:"auto"},children:r?.environment})]}),jsxRuntime.jsx("div",{style:i.progress,children:jsxRuntime.jsx("div",{style:i.progressBar(E)})})]}),h==="max"&&jsxRuntime.jsxs("div",{style:{...i.card(340),maxHeight:"70vh"},children:[jsxRuntime.jsxs("div",{style:i.handle,onPointerDown:B,onPointerMove:D,onPointerUp:I,children:[jsxRuntime.jsx(g,{d:l.grip,className:""}),jsxRuntime.jsxs("div",{style:{flex:1,minWidth:0},children:[jsxRuntime.jsx("div",{style:i.title,children:r?.title}),r?.branch_name&&jsxRuntime.jsxs("div",{style:i.sub,children:["\u2387 ",r.branch_name]})]}),jsxRuntime.jsx(C,{icon:l.chevronDown,onClick:()=>m("expanded")}),jsxRuntime.jsx(C,{icon:l.minus,onClick:()=>m("mini")})]}),jsxRuntime.jsxs("div",{style:{padding:"6px 12px",display:"flex",gap:"8px",flexWrap:"wrap",alignItems:"center",borderBottom:"1px solid rgba(255,255,255,0.06)"},children:[r?.pr_url&&jsxRuntime.jsxs("a",{href:r.pr_url,target:"_blank",rel:"noopener noreferrer",style:{...i.link("#60a5fa"),textDecoration:"none"},children:[jsxRuntime.jsx(g,{d:l.pr,className:""}),r.pr_id||"PR"]}),r?.ticket_url&&jsxRuntime.jsxs("a",{href:r.ticket_url,target:"_blank",rel:"noopener noreferrer",style:{...i.link("#fbbf24"),textDecoration:"none"},children:[jsxRuntime.jsx(g,{d:l.ticket,className:""}),r.ticket_id||"Ticket"]}),r?.created_by_agent_name&&jsxRuntime.jsxs("span",{style:{fontSize:"9px",color:"#888"},children:["by ",r.created_by_agent_name]}),jsxRuntime.jsx("span",{style:{...i.badge(r?.environment||"custom"),marginLeft:"auto"},children:r?.environment})]}),jsxRuntime.jsxs("div",{style:i.stats,children:[jsxRuntime.jsxs("span",{style:{color:"#34d399"},children:[s.pass,"\u2713"]}),jsxRuntime.jsxs("span",{style:{color:"#f87171"},children:[s.fail,"\u2717"]}),jsxRuntime.jsxs("span",{style:{color:"#f59e0b"},children:[s.skip,"\u23ED"]}),jsxRuntime.jsxs("span",{style:{color:"#888"},children:[s.pending,"\u25CC"]}),jsxRuntime.jsx("span",{style:{color:"#555",marginLeft:"auto"},children:s.total})]}),k==="error"&&jsxRuntime.jsxs("div",{style:{padding:"12px",textAlign:"center"},children:[jsxRuntime.jsx(g,{d:l.alert,className:""}),jsxRuntime.jsx("div",{style:{fontSize:"10px",color:"#f87171"},children:"Failed to load"}),jsxRuntime.jsx("button",{onClick:J,style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer",marginTop:"4px"},children:"Retry"})]}),k==="completed"&&jsxRuntime.jsxs("div",{style:{padding:"12px",textAlign:"center",borderBottom:"1px solid rgba(255,255,255,0.06)"},children:[jsxRuntime.jsx(g,{d:l.checkAll,className:""}),jsxRuntime.jsx("div",{style:{fontSize:"10px",color:"#34d399"},children:"Run completed"}),jsxRuntime.jsx("button",{onClick:q,style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer",marginTop:"4px"},children:"Reset & re-test"})]}),r?.intro_notes&&jsxRuntime.jsx("div",{style:{padding:"6px 12px",borderBottom:"1px solid rgba(255,255,255,0.06)",fontSize:"10px",color:"rgba(255,255,255,0.4)",fontStyle:"italic",maxHeight:"48px",overflowY:"auto"},children:r.intro_notes}),k!=="error"&&jsxRuntime.jsx("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:(r?.test_cases||[]).length===0?jsxRuntime.jsx("div",{style:{padding:"16px 12px",textAlign:"center",fontSize:"10px",color:"#888"},children:"No test cases"}):(r?.test_cases||[]).map(o=>jsxRuntime.jsxs("div",{style:i.caseRow,children:[jsxRuntime.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:"8px"},children:[jsxRuntime.jsx("div",{style:{marginTop:"2px",flexShrink:0},children:$===o.id?jsxRuntime.jsx(g,{d:l.loader,className:""}):jsxRuntime.jsx(g,{d:oe[o.verdict],className:""})}),jsxRuntime.jsxs("div",{style:{minWidth:0,flex:1},children:[jsxRuntime.jsx("div",{style:{fontSize:"10px",color:"#e5e5e5",lineHeight:1.3},children:o.title}),o.description&&jsxRuntime.jsx("div",{style:{fontSize:"9px",color:"#888",marginTop:"2px"},children:o.description}),o.url_path&&jsxRuntime.jsxs("a",{href:o.url_path,onClick:d=>{d.preventDefault(),d.stopPropagation(),S?S(o.url_path):window.open(o.url_path,"_blank");},style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer",padding:0,marginTop:"2px",display:"inline-flex",alignItems:"center",gap:"2px",textDecoration:"none"},children:[jsxRuntime.jsx(g,{d:l.externalLink,className:""}),o.url_path]}),o.verdict==="fail"&&o.fail_reason&&jsxRuntime.jsxs("div",{style:{fontSize:"9px",color:"#f87171",marginTop:"2px"},children:["\u2717 ",o.fail_reason]})]})]}),jsxRuntime.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"4px",marginTop:"4px",marginLeft:"22px"},children:[["pass","fail","skip"].map(d=>jsxRuntime.jsx("button",{onClick:()=>{if(d==="fail"&&o.verdict!=="fail"){z(o.id);return}if(o.verdict===d){T(o.id,"pending");return}T(o.id,d);},disabled:$!==null,style:i.verdictBtn(o.verdict===d,d==="pass"?"#34d399":d==="fail"?"#f87171":"#f59e0b"),children:d.toUpperCase()},d)),o.verdict_by_display_name&&jsxRuntime.jsx("span",{style:{fontSize:"8px",color:"#555",marginLeft:"auto"},children:o.verdict_by_display_name})]}),M===o.id&&jsxRuntime.jsxs("div",{style:{marginLeft:"22px",marginTop:"4px",display:"flex",gap:"4px"},children:[jsxRuntime.jsx("input",{autoFocus:true,value:w,onChange:d=>y(d.target.value),onKeyDown:d=>{d.key==="Enter"&&T(o.id,"fail",w),d.key==="Escape"&&(z(null),y(""));},placeholder:"Reason...",style:i.input}),jsxRuntime.jsx("button",{onClick:()=>T(o.id,"fail",w),style:i.verdictBtn(true,"#f87171"),children:"\u2713"})]})]},o.id))}),G&&k!=="completed"&&jsxRuntime.jsxs("div",{style:{padding:"6px 12px",borderTop:"1px solid rgba(255,255,255,0.06)",display:"flex",alignItems:"center",justifyContent:"space-between",flexShrink:0},children:[jsxRuntime.jsx("span",{style:{fontSize:"9px",color:"#34d399"},children:"All resolved"}),jsxRuntime.jsx("button",{onClick:Z,style:{fontSize:"8px",padding:"2px 8px",borderRadius:"4px",background:"rgba(59,130,246,0.15)",color:"#60a5fa",border:"none",cursor:"pointer"},children:"COMPLETE"})]}),jsxRuntime.jsx("div",{style:i.progress,children:jsxRuntime.jsx("div",{style:i.progressBar(E)})})]})]})}exports.TestRunWidget=ie;exports.useDraggable=W;exports.useTestRun=L;
|
|
1
|
+
'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');function W(e,p){let[u,_]=react.useState({x:e,y:p}),x=react.useRef(false),f=react.useRef({x:0,y:0}),v=react.useRef(false),R=react.useCallback(c=>{x.current=true,v.current=false,f.current={x:c.clientX-u.x,y:c.clientY-u.y},c.target.setPointerCapture(c.pointerId);},[u]),S=react.useCallback(c=>{x.current&&(v.current=true,_({x:c.clientX-f.current.x,y:c.clientY-f.current.y}));},[]),a=react.useCallback(()=>{x.current=false;},[]);return {pos:u,onPointerDown:R,onPointerMove:S,onPointerUp:a,didDrag:v}}function L(e){let[p,u]=react.useState(null),[_,x]=react.useState("loading"),f=react.useCallback(async()=>{try{let a=new URLSearchParams;e.testRunId&&a.set("test_run_id",e.testRunId),e.targetUrl&&a.set("target_url",e.targetUrl),a.set("app_slug",e.appSlug),a.set("environment",e.environment),e.version&&a.set("version",e.version),e.commitSha&&a.set("commit_sha",e.commitSha),e.branchName&&a.set("branch_name",e.branchName);let c=await fetch(`${e.config.serverUrl}/widget/test-run?${a.toString()}`,{headers:{Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}});if(c.status===404){x("no-match"),u(null);return}if(!c.ok){x("error");return}let b=await c.json();u(b),x(b.status==="completed"?"completed":"ready");}catch{x("error");}},[e.config.serverUrl,e.config.anonKey,e.appSlug,e.environment,e.testRunId,e.targetUrl,e.version,e.commitSha,e.branchName]);return react.useEffect(()=>{f();},[f]),{run:p,widgetState:_,fetchRun:f,setVerdict:async(a,c,b,h="human")=>{let m=await fetch(`${e.config.serverUrl}/widget/test-cases/${a}/verdict`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey},body:JSON.stringify({verdict:c,fail_reason:b,display_name:h})});if(m.ok){let{summary:w}=await m.json();u(y=>y?{...y,summary:w,test_cases:y.test_cases.map(M=>M.id===a?{...M,verdict:c,fail_reason:c==="fail"&&b||null,verdict_by_display_name:h,verdict_at:new Date().toISOString()}:M)}:null);}return m.ok},markComplete:async()=>{if(!p)return false;let a=await fetch(`${e.config.serverUrl}/widget/test-runs/${p.id}/complete`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}});return a.ok&&f(),a.ok},resetRun:async()=>{if(!p)return false;let a=await fetch(`${e.config.serverUrl}/widget/test-runs/${p.id}/reset`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}});return a.ok&&f(),a.ok},setRun:u}}var g=({d:e,className:p})=>jsxRuntime.jsx("svg",{className:p,width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:e})}),l={clipboard:"M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2",check:"M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4 12 14.01l-3-3",x:"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20M15 9l-6 6M9 9l6 6",circle:"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20",skip:"M5 4l10 8-10 8V4M19 5v14",grip:"M9 5h.01M15 5h.01M9 12h.01M15 12h.01M9 19h.01M15 19h.01",minus:"M5 12h14",chevronUp:"M18 15l-6-6-6 6",chevronDown:"M6 9l6 6 6-6",externalLink:"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3",pr:"M6 3v18M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6M18 9a9 9 0 0 1-9 9",ticket:"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z",loader:"M21 12a9 9 0 1 1-6.219-8.56",checkAll:"M18 6L7 17l-5-5M22 10l-7.5 7.5L13 16",alert:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0M12 9v4M12 17h.01"};var oe={pending:l.circle,pass:l.check,fail:l.x,skip:l.skip},j={local:{bg:"rgba(59,130,246,0.15)",text:"#60a5fa",border:"rgba(59,130,246,0.3)"},preview:{bg:"rgba(168,85,247,0.15)",text:"#c084fc",border:"rgba(168,85,247,0.3)"},staging:{bg:"rgba(245,158,11,0.15)",text:"#fbbf24",border:"rgba(245,158,11,0.3)"},production:{bg:"rgba(239,68,68,0.15)",text:"#f87171",border:"rgba(239,68,68,0.3)"},custom:{bg:"rgba(128,128,128,0.15)",text:"#888",border:"rgba(128,128,128,0.3)"}},i={root:{position:"fixed",zIndex:9999,userSelect:"none",fontFamily:"ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"},pill:{display:"inline-flex",alignItems:"center",gap:"6px",padding:"4px 8px",borderRadius:"9999px",background:"rgb(30,30,30)",border:"1px solid rgba(255,255,255,0.15)",boxShadow:"0 4px 12px rgba(0,0,0,0.3)",cursor:"pointer",fontSize:"9px",color:"#e5e5e5"},card:e=>({width:`${e}px`,borderRadius:"8px",background:"rgb(30,30,30)",border:"1px solid rgba(255,255,255,0.15)",boxShadow:"0 8px 24px rgba(0,0,0,0.4)",overflow:"hidden",display:"flex",flexDirection:"column"}),handle:{padding:"8px 12px",display:"flex",alignItems:"center",gap:"8px",cursor:"grab",borderBottom:"1px solid rgba(255,255,255,0.06)"},title:{fontSize:"10px",fontWeight:600,color:"#e5e5e5",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},sub:{fontSize:"9px",color:"rgba(255,255,255,0.4)",display:"flex",alignItems:"center",gap:"6px"},btn:{padding:"2px",borderRadius:"4px",background:"transparent",border:"none",cursor:"pointer",color:"#888",display:"flex",flexShrink:0},stats:{padding:"4px 12px",display:"flex",alignItems:"center",gap:"8px",fontSize:"9px",borderBottom:"1px solid rgba(255,255,255,0.06)"},badge:e=>{let p=j[e]||j.custom;return {fontSize:"8px",padding:"0 4px",borderRadius:"4px",background:p.bg,color:p.text,border:`1px solid ${p.border}`,lineHeight:"14px"}},progress:{height:"2px",background:"rgba(255,255,255,0.06)",flexShrink:0},progressBar:e=>({height:"100%",width:`${e}%`,background:"linear-gradient(to right, #34d399, #3b82f6)",transition:"width 0.5s"}),link:e=>({display:"inline-flex",alignItems:"center",gap:"4px",fontSize:"9px",padding:"2px 6px",borderRadius:"4px",background:`${e}15`,color:e,textDecoration:"none",border:"none",cursor:"pointer"}),caseRow:{padding:"6px 12px",borderBottom:"1px solid rgba(255,255,255,0.06)",transition:"background 0.15s"},verdictBtn:(e,p)=>({fontSize:"8px",padding:"2px 6px",borderRadius:"4px",border:"none",cursor:"pointer",background:e?`${p}33`:"transparent",color:e?p:"#888",transition:"all 0.15s"}),input:{flex:1,fontSize:"9px",background:"rgba(0,0,0,0.3)",border:"1px solid rgba(255,255,255,0.1)",borderRadius:"4px",padding:"2px 6px",color:"#e5e5e5",outline:"none"}};function ie({config:e,appSlug:p,environment:u,testRunId:_,targetUrl:x,version:f,commitSha:v,branchName:R,onNavigate:S,displayName:a="human",defaultMode:c="expanded",defaultPosition:b}){let[h,m]=react.useState(c),[w,y]=react.useState(""),[M,z]=react.useState(null),[$,V]=react.useState(null),Y=b?.x??16,X=b?.y??(typeof window<"u"?window.innerHeight-56:600),{pos:H,onPointerDown:B,onPointerMove:D,onPointerUp:I,didDrag:K}=W(Y,X),{run:r,widgetState:k,fetchRun:J,setVerdict:A,markComplete:Z,resetRun:q}=L({config:e,appSlug:p,environment:u,testRunId:_,targetUrl:x,version:f,commitSha:v,branchName:R}),T=react.useCallback(async(o,d,Q)=>{V(o);try{await A(o,d,Q,a);}finally{V(null),z(null),y("");}},[A,a]),s=r?.summary||{total:0,pending:0,pass:0,fail:0,skip:0},G=s.total>0&&s.pending===0,E=s.total>0?(s.pass+s.fail)/s.total*100:0;if(k==="no-match"||k==="loading")return null;let O=()=>{K.current||m(o=>o==="mini"||o==="expanded"?"max":"mini");},C=({icon:o,onClick:d})=>jsxRuntime.jsx("button",{style:i.btn,onClick:d,children:jsxRuntime.jsx(g,{d:o,className:""})});return jsxRuntime.jsxs("div",{style:{...i.root,left:H.x,top:H.y},children:[h==="mini"&&jsxRuntime.jsxs("div",{style:i.pill,onPointerDown:B,onPointerMove:D,onPointerUp:()=>{I(),K.current||O();},children:[jsxRuntime.jsx(g,{d:l.clipboard,className:""}),jsxRuntime.jsxs("span",{children:[s.pass,"/",s.total]}),s.fail>0&&jsxRuntime.jsxs("span",{style:{color:"#f87171"},children:[s.fail,"\u2717"]}),s.skip>0&&jsxRuntime.jsxs("span",{style:{color:"#f59e0b"},children:[s.skip,"\u23ED"]}),r?.pr_url&&jsxRuntime.jsxs("span",{style:{...i.link("#60a5fa"),pointerEvents:"none",textDecoration:"none"},children:[jsxRuntime.jsx(g,{d:l.pr,className:""}),r.pr_id||"PR"]}),r?.ticket_url&&jsxRuntime.jsxs("span",{style:{...i.link("#fbbf24"),pointerEvents:"none",textDecoration:"none"},children:[jsxRuntime.jsx(g,{d:l.ticket,className:""}),r.ticket_id||"TKT"]})]}),h==="expanded"&&jsxRuntime.jsxs("div",{style:i.card(300),children:[jsxRuntime.jsxs("div",{style:i.handle,onPointerDown:B,onPointerMove:D,onPointerUp:I,children:[jsxRuntime.jsx(g,{d:l.grip,className:""}),jsxRuntime.jsxs("div",{style:{flex:1,minWidth:0},children:[jsxRuntime.jsx("div",{style:i.title,children:r?.title}),r?.branch_name&&jsxRuntime.jsxs("div",{style:i.sub,children:["\u2387 ",r.branch_name]})]}),jsxRuntime.jsx(C,{icon:l.chevronUp,onClick:O}),jsxRuntime.jsx(C,{icon:l.minus,onClick:()=>m("mini")})]}),jsxRuntime.jsxs("div",{style:i.stats,children:[jsxRuntime.jsxs("span",{style:{color:"#34d399"},children:[s.pass,"\u2713"]}),jsxRuntime.jsxs("span",{style:{color:"#f87171"},children:[s.fail,"\u2717"]}),jsxRuntime.jsxs("span",{style:{color:"#f59e0b"},children:[s.skip,"\u23ED"]}),jsxRuntime.jsxs("span",{style:{color:"#888"},children:[s.pending,"\u25CC"]}),jsxRuntime.jsx("span",{style:{color:"#555",marginLeft:"auto"},children:s.total})]}),r?.description&&jsxRuntime.jsx("div",{style:{padding:"6px 12px",fontSize:"10px",color:"#888",borderBottom:"1px solid rgba(255,255,255,0.06)",maxHeight:"64px",overflowY:"auto"},children:r.description}),jsxRuntime.jsxs("div",{style:{padding:"6px 12px",display:"flex",gap:"8px",flexWrap:"wrap",alignItems:"center",borderBottom:"1px solid rgba(255,255,255,0.06)"},children:[r?.pr_url&&jsxRuntime.jsxs("a",{href:r.pr_url,target:"_blank",rel:"noopener noreferrer",style:{...i.link("#60a5fa"),textDecoration:"none"},children:[jsxRuntime.jsx(g,{d:l.pr,className:""}),r.pr_id||"PR"]}),r?.ticket_url&&jsxRuntime.jsxs("a",{href:r.ticket_url,target:"_blank",rel:"noopener noreferrer",style:{...i.link("#fbbf24"),textDecoration:"none"},children:[jsxRuntime.jsx(g,{d:l.ticket,className:""}),r.ticket_id||"Ticket"]}),jsxRuntime.jsx("span",{style:{...i.badge(r?.environment||"custom"),marginLeft:"auto"},children:r?.environment})]}),jsxRuntime.jsx("div",{style:i.progress,children:jsxRuntime.jsx("div",{style:i.progressBar(E)})})]}),h==="max"&&jsxRuntime.jsxs("div",{style:{...i.card(340),maxHeight:"70vh"},children:[jsxRuntime.jsxs("div",{style:i.handle,onPointerDown:B,onPointerMove:D,onPointerUp:I,children:[jsxRuntime.jsx(g,{d:l.grip,className:""}),jsxRuntime.jsxs("div",{style:{flex:1,minWidth:0},children:[jsxRuntime.jsx("div",{style:i.title,children:r?.title}),r?.branch_name&&jsxRuntime.jsxs("div",{style:i.sub,children:["\u2387 ",r.branch_name]})]}),jsxRuntime.jsx(C,{icon:l.chevronDown,onClick:()=>m("expanded")}),jsxRuntime.jsx(C,{icon:l.minus,onClick:()=>m("mini")})]}),jsxRuntime.jsxs("div",{style:{padding:"6px 12px",display:"flex",gap:"8px",flexWrap:"wrap",alignItems:"center",borderBottom:"1px solid rgba(255,255,255,0.06)"},children:[r?.pr_url&&jsxRuntime.jsxs("a",{href:r.pr_url,target:"_blank",rel:"noopener noreferrer",style:{...i.link("#60a5fa"),textDecoration:"none"},children:[jsxRuntime.jsx(g,{d:l.pr,className:""}),r.pr_id||"PR"]}),r?.ticket_url&&jsxRuntime.jsxs("a",{href:r.ticket_url,target:"_blank",rel:"noopener noreferrer",style:{...i.link("#fbbf24"),textDecoration:"none"},children:[jsxRuntime.jsx(g,{d:l.ticket,className:""}),r.ticket_id||"Ticket"]}),r?.created_by_agent_name&&jsxRuntime.jsxs("span",{style:{fontSize:"9px",color:"#888"},children:["by ",r.created_by_agent_name]}),jsxRuntime.jsx("span",{style:{...i.badge(r?.environment||"custom"),marginLeft:"auto"},children:r?.environment})]}),jsxRuntime.jsxs("div",{style:i.stats,children:[jsxRuntime.jsxs("span",{style:{color:"#34d399"},children:[s.pass,"\u2713"]}),jsxRuntime.jsxs("span",{style:{color:"#f87171"},children:[s.fail,"\u2717"]}),jsxRuntime.jsxs("span",{style:{color:"#f59e0b"},children:[s.skip,"\u23ED"]}),jsxRuntime.jsxs("span",{style:{color:"#888"},children:[s.pending,"\u25CC"]}),jsxRuntime.jsx("span",{style:{color:"#555",marginLeft:"auto"},children:s.total})]}),k==="error"&&jsxRuntime.jsxs("div",{style:{padding:"12px",textAlign:"center"},children:[jsxRuntime.jsx(g,{d:l.alert,className:""}),jsxRuntime.jsx("div",{style:{fontSize:"10px",color:"#f87171"},children:"Failed to load"}),jsxRuntime.jsx("button",{onClick:J,style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer",marginTop:"4px"},children:"Retry"})]}),k==="completed"&&jsxRuntime.jsxs("div",{style:{padding:"12px",textAlign:"center",borderBottom:"1px solid rgba(255,255,255,0.06)"},children:[jsxRuntime.jsx(g,{d:l.checkAll,className:""}),jsxRuntime.jsx("div",{style:{fontSize:"10px",color:"#34d399"},children:"Run completed"}),jsxRuntime.jsx("button",{onClick:q,style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer",marginTop:"4px"},children:"Reset & re-test"})]}),r?.intro_notes&&jsxRuntime.jsx("div",{style:{padding:"6px 12px",borderBottom:"1px solid rgba(255,255,255,0.06)",fontSize:"10px",color:"rgba(255,255,255,0.4)",fontStyle:"italic",maxHeight:"48px",overflowY:"auto"},children:r.intro_notes}),k!=="error"&&jsxRuntime.jsx("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:(r?.test_cases||[]).length===0?jsxRuntime.jsx("div",{style:{padding:"16px 12px",textAlign:"center",fontSize:"10px",color:"#888"},children:"No test cases"}):(r?.test_cases||[]).map(o=>jsxRuntime.jsxs("div",{style:i.caseRow,children:[jsxRuntime.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:"8px"},children:[jsxRuntime.jsx("div",{style:{marginTop:"2px",flexShrink:0},children:$===o.id?jsxRuntime.jsx(g,{d:l.loader,className:""}):jsxRuntime.jsx(g,{d:oe[o.verdict],className:""})}),jsxRuntime.jsxs("div",{style:{minWidth:0,flex:1},children:[jsxRuntime.jsx("div",{style:{fontSize:"10px",color:"#e5e5e5",lineHeight:1.3},children:o.title}),o.description&&jsxRuntime.jsx("div",{style:{fontSize:"9px",color:"#888",marginTop:"2px"},children:o.description}),o.url_path&&jsxRuntime.jsxs("a",{href:o.url_path,onClick:d=>{d.preventDefault(),d.stopPropagation(),S?S(o.url_path):window.open(o.url_path,"_blank");},style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer",padding:0,marginTop:"2px",display:"inline-flex",alignItems:"center",gap:"2px",textDecoration:"none"},children:[jsxRuntime.jsx(g,{d:l.externalLink,className:""}),o.url_path]}),o.verdict==="fail"&&o.fail_reason&&jsxRuntime.jsxs("div",{style:{fontSize:"9px",color:"#f87171",marginTop:"2px"},children:["\u2717 ",o.fail_reason]})]})]}),jsxRuntime.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"4px",marginTop:"4px",marginLeft:"22px"},children:[["pass","fail","skip"].map(d=>jsxRuntime.jsx("button",{onClick:()=>{if(d==="fail"&&o.verdict!=="fail"){z(o.id);return}if(o.verdict===d){T(o.id,"pending");return}T(o.id,d);},disabled:$!==null,style:i.verdictBtn(o.verdict===d,d==="pass"?"#34d399":d==="fail"?"#f87171":"#f59e0b"),children:d.toUpperCase()},d)),o.verdict_by_display_name&&jsxRuntime.jsx("span",{style:{fontSize:"8px",color:"#555",marginLeft:"auto"},children:o.verdict_by_display_name})]}),M===o.id&&jsxRuntime.jsxs("div",{style:{marginLeft:"22px",marginTop:"4px",display:"flex",gap:"4px"},children:[jsxRuntime.jsx("input",{autoFocus:true,value:w,onChange:d=>y(d.target.value),onKeyDown:d=>{d.key==="Enter"&&T(o.id,"fail",w),d.key==="Escape"&&(z(null),y(""));},placeholder:"Reason...",style:i.input}),jsxRuntime.jsx("button",{onClick:()=>T(o.id,"fail",w),style:i.verdictBtn(true,"#f87171"),children:"\u2713"})]})]},o.id))}),G&&k!=="completed"&&jsxRuntime.jsxs("div",{style:{padding:"6px 12px",borderTop:"1px solid rgba(255,255,255,0.06)",display:"flex",alignItems:"center",justifyContent:"space-between",flexShrink:0},children:[jsxRuntime.jsx("span",{style:{fontSize:"9px",color:"#34d399"},children:"All resolved"}),jsxRuntime.jsx("button",{onClick:Z,style:{fontSize:"8px",padding:"2px 8px",borderRadius:"4px",background:"rgba(59,130,246,0.15)",color:"#60a5fa",border:"none",cursor:"pointer"},children:"COMPLETE"})]}),jsxRuntime.jsx("div",{style:i.progress,children:jsxRuntime.jsx("div",{style:i.progressBar(E)})})]})]})}exports.TestRunWidget=ie;exports.useDraggable=W;exports.useTestRun=L;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import {useState,useRef,useCallback,useEffect}from'react';import {jsxs,jsx}from'react/jsx-runtime';function W(e,p){let[u,_]=useState({x:e,y:p}),x=useRef(false),f=useRef({x:0,y:0}),v=useRef(false),R=useCallback(c=>{x.current=true,v.current=false,f.current={x:c.clientX-u.x,y:c.clientY-u.y},c.target.setPointerCapture(c.pointerId);},[u]),S=useCallback(c=>{x.current&&(v.current=true,_({x:c.clientX-f.current.x,y:c.clientY-f.current.y}));},[]),a=useCallback(()=>{x.current=false;},[]);return {pos:u,onPointerDown:R,onPointerMove:S,onPointerUp:a,didDrag:v}}function L(e){let[p,u]=useState(null),[_,x]=useState("loading"),f=useCallback(async()=>{try{let a=new URLSearchParams;e.testRunId&&a.set("test_run_id",e.testRunId),e.targetUrl&&a.set("target_url",e.targetUrl),a.set("app_slug",e.appSlug),a.set("environment",e.environment),e.version&&a.set("version",e.version),e.commitSha&&a.set("commit_sha",e.commitSha),e.branchName&&a.set("branch_name",e.branchName);let c=await fetch(`${e.config.serverUrl}/widget/test-run?${a.toString()}`,{headers:{Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}});if(c.status===404){x("no-match"),u(null);return}if(!c.ok){x("error");return}let b=await c.json();u(b),x(b.status==="completed"?"completed":"ready");}catch{x("error");}},[e.config.serverUrl,e.config.anonKey,e.appSlug,e.environment,e.testRunId,e.targetUrl,e.version,e.commitSha,e.branchName]);return useEffect(()=>{f();},[f]),{run:p,widgetState:_,fetchRun:f,setVerdict:async(a,c,b,h="human")=>{let m=await fetch(`${e.config.serverUrl}/widget/test-cases/${a}/verdict`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey},body:JSON.stringify({verdict:c,fail_reason:b,display_name:h})});if(m.ok){let{summary:w}=await m.json();u(y=>y?{...y,summary:w,test_cases:y.test_cases.map(M=>M.id===a?{...M,verdict:c,fail_reason:c==="fail"&&b||null,verdict_by_display_name:h,verdict_at:new Date().toISOString()}:M)}:null);}return m.ok},markComplete:async()=>{if(!p)return false;let a=await fetch(`${e.config.serverUrl}/widget/test-runs/${p.id}/complete`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}});return a.ok&&f(),a.ok},resetRun:async()=>{if(!p)return false;let a=await fetch(`${e.config.serverUrl}/widget/test-runs/${p.id}/reset`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}});return a.ok&&f(),a.ok},setRun:u}}var g=({d:e,className:p})=>jsx("svg",{className:p,width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:e})}),l={clipboard:"M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2",check:"M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4 12 14.01l-3-3",x:"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20M15 9l-6 6M9 9l6 6",circle:"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20",skip:"M5 4l10 8-10 8V4M19 5v14",grip:"M9 5h.01M15 5h.01M9 12h.01M15 12h.01M9 19h.01M15 19h.01",minus:"M5 12h14",chevronUp:"M18 15l-6-6-6 6",chevronDown:"M6 9l6 6 6-6",externalLink:"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3",pr:"M6 3v18M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6M18 9a9 9 0 0 1-9 9",ticket:"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z",loader:"M21 12a9 9 0 1 1-6.219-8.56",checkAll:"M18 6L7 17l-5-5M22 10l-7.5 7.5L13 16",alert:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0M12 9v4M12 17h.01"};var oe={pending:l.circle,pass:l.check,fail:l.x,skip:l.skip},j={local:{bg:"rgba(59,130,246,0.15)",text:"#60a5fa",border:"rgba(59,130,246,0.3)"},preview:{bg:"rgba(168,85,247,0.15)",text:"#c084fc",border:"rgba(168,85,247,0.3)"},staging:{bg:"rgba(245,158,11,0.15)",text:"#fbbf24",border:"rgba(245,158,11,0.3)"},production:{bg:"rgba(239,68,68,0.15)",text:"#f87171",border:"rgba(239,68,68,0.3)"},custom:{bg:"rgba(128,128,128,0.15)",text:"#888",border:"rgba(128,128,128,0.3)"}},i={root:{position:"fixed",zIndex:9999,userSelect:"none",fontFamily:"ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"},pill:{display:"inline-flex",alignItems:"center",gap:"6px",padding:"4px 8px",borderRadius:"9999px",background:"rgb(30,30,30)",border:"1px solid rgba(255,255,255,0.15)",boxShadow:"0 4px 12px rgba(0,0,0,0.3)",cursor:"pointer",fontSize:"9px",color:"#e5e5e5"},card:e=>({width:`${e}px`,borderRadius:"8px",background:"rgb(30,30,30)",border:"1px solid rgba(255,255,255,0.15)",boxShadow:"0 8px 24px rgba(0,0,0,0.4)",overflow:"hidden",display:"flex",flexDirection:"column"}),handle:{padding:"8px 12px",display:"flex",alignItems:"center",gap:"8px",cursor:"grab",borderBottom:"1px solid rgba(255,255,255,0.06)"},title:{fontSize:"10px",fontWeight:600,color:"#e5e5e5",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},sub:{fontSize:"9px",color:"rgba(255,255,255,0.4)",display:"flex",alignItems:"center",gap:"6px"},btn:{padding:"2px",borderRadius:"4px",background:"transparent",border:"none",cursor:"pointer",color:"#888",display:"flex",flexShrink:0},stats:{padding:"4px 12px",display:"flex",alignItems:"center",gap:"8px",fontSize:"9px",borderBottom:"1px solid rgba(255,255,255,0.06)"},badge:e=>{let p=j[e]||j.custom;return {fontSize:"8px",padding:"0 4px",borderRadius:"4px",background:p.bg,color:p.text,border:`1px solid ${p.border}`,lineHeight:"14px"}},progress:{height:"2px",background:"rgba(255,255,255,0.06)",flexShrink:0},progressBar:e=>({height:"100%",width:`${e}%`,background:"linear-gradient(to right, #34d399, #3b82f6)",transition:"width 0.5s"}),link:e=>({display:"inline-flex",alignItems:"center",gap:"4px",fontSize:"9px",padding:"2px 6px",borderRadius:"4px",background:`${e}15`,color:e,textDecoration:"none",border:"none",cursor:"pointer"}),caseRow:{padding:"6px 12px",borderBottom:"1px solid rgba(255,255,255,0.06)",transition:"background 0.15s"},verdictBtn:(e,p)=>({fontSize:"8px",padding:"2px 6px",borderRadius:"4px",border:"none",cursor:"pointer",background:e?`${p}33`:"transparent",color:e?p:"#888",transition:"all 0.15s"}),input:{flex:1,fontSize:"9px",background:"rgba(0,0,0,0.3)",border:"1px solid rgba(255,255,255,0.1)",borderRadius:"4px",padding:"2px 6px",color:"#e5e5e5",outline:"none"}};function ie({config:e,appSlug:p,environment:u,testRunId:_,targetUrl:x,version:f,commitSha:v,branchName:R,onNavigate:S,displayName:a="human",defaultMode:c="mini",defaultPosition:b}){let[h,m]=useState(c),[w,y]=useState(""),[M,z]=useState(null),[$,V]=useState(null),Y=b?.x??16,X=b?.y??(typeof window<"u"?window.innerHeight-56:600),{pos:H,onPointerDown:B,onPointerMove:D,onPointerUp:I,didDrag:K}=W(Y,X),{run:r,widgetState:k,fetchRun:J,setVerdict:A,markComplete:Z,resetRun:q}=L({config:e,appSlug:p,environment:u,testRunId:_,targetUrl:x,version:f,commitSha:v,branchName:R}),T=useCallback(async(o,d,Q)=>{V(o);try{await A(o,d,Q,a);}finally{V(null),z(null),y("");}},[A,a]),s=r?.summary||{total:0,pending:0,pass:0,fail:0,skip:0},G=s.total>0&&s.pending===0,E=s.total>0?(s.pass+s.fail)/s.total*100:0;if(k==="no-match"||k==="loading")return null;let O=()=>{K.current||m(o=>o==="mini"||o==="expanded"?"max":"mini");},C=({icon:o,onClick:d})=>jsx("button",{style:i.btn,onClick:d,children:jsx(g,{d:o,className:""})});return jsxs("div",{style:{...i.root,left:H.x,top:H.y},children:[h==="mini"&&jsxs("div",{style:i.pill,onPointerDown:B,onPointerMove:D,onPointerUp:()=>{I(),K.current||O();},children:[jsx(g,{d:l.clipboard,className:""}),jsxs("span",{children:[s.pass,"/",s.total]}),s.fail>0&&jsxs("span",{style:{color:"#f87171"},children:[s.fail,"\u2717"]}),s.skip>0&&jsxs("span",{style:{color:"#f59e0b"},children:[s.skip,"\u23ED"]}),r?.pr_url&&jsxs("span",{style:{...i.link("#60a5fa"),pointerEvents:"none",textDecoration:"none"},children:[jsx(g,{d:l.pr,className:""}),r.pr_id||"PR"]}),r?.ticket_url&&jsxs("span",{style:{...i.link("#fbbf24"),pointerEvents:"none",textDecoration:"none"},children:[jsx(g,{d:l.ticket,className:""}),r.ticket_id||"TKT"]})]}),h==="expanded"&&jsxs("div",{style:i.card(300),children:[jsxs("div",{style:i.handle,onPointerDown:B,onPointerMove:D,onPointerUp:I,children:[jsx(g,{d:l.grip,className:""}),jsxs("div",{style:{flex:1,minWidth:0},children:[jsx("div",{style:i.title,children:r?.title}),r?.branch_name&&jsxs("div",{style:i.sub,children:["\u2387 ",r.branch_name]})]}),jsx(C,{icon:l.chevronUp,onClick:O}),jsx(C,{icon:l.minus,onClick:()=>m("mini")})]}),jsxs("div",{style:i.stats,children:[jsxs("span",{style:{color:"#34d399"},children:[s.pass,"\u2713"]}),jsxs("span",{style:{color:"#f87171"},children:[s.fail,"\u2717"]}),jsxs("span",{style:{color:"#f59e0b"},children:[s.skip,"\u23ED"]}),jsxs("span",{style:{color:"#888"},children:[s.pending,"\u25CC"]}),jsx("span",{style:{color:"#555",marginLeft:"auto"},children:s.total})]}),r?.description&&jsx("div",{style:{padding:"6px 12px",fontSize:"10px",color:"#888",borderBottom:"1px solid rgba(255,255,255,0.06)",maxHeight:"64px",overflowY:"auto"},children:r.description}),jsxs("div",{style:{padding:"6px 12px",display:"flex",gap:"8px",flexWrap:"wrap",alignItems:"center",borderBottom:"1px solid rgba(255,255,255,0.06)"},children:[r?.pr_url&&jsxs("a",{href:r.pr_url,target:"_blank",rel:"noopener noreferrer",style:{...i.link("#60a5fa"),textDecoration:"none"},children:[jsx(g,{d:l.pr,className:""}),r.pr_id||"PR"]}),r?.ticket_url&&jsxs("a",{href:r.ticket_url,target:"_blank",rel:"noopener noreferrer",style:{...i.link("#fbbf24"),textDecoration:"none"},children:[jsx(g,{d:l.ticket,className:""}),r.ticket_id||"Ticket"]}),jsx("span",{style:{...i.badge(r?.environment||"custom"),marginLeft:"auto"},children:r?.environment})]}),jsx("div",{style:i.progress,children:jsx("div",{style:i.progressBar(E)})})]}),h==="max"&&jsxs("div",{style:{...i.card(340),maxHeight:"70vh"},children:[jsxs("div",{style:i.handle,onPointerDown:B,onPointerMove:D,onPointerUp:I,children:[jsx(g,{d:l.grip,className:""}),jsxs("div",{style:{flex:1,minWidth:0},children:[jsx("div",{style:i.title,children:r?.title}),r?.branch_name&&jsxs("div",{style:i.sub,children:["\u2387 ",r.branch_name]})]}),jsx(C,{icon:l.chevronDown,onClick:()=>m("expanded")}),jsx(C,{icon:l.minus,onClick:()=>m("mini")})]}),jsxs("div",{style:{padding:"6px 12px",display:"flex",gap:"8px",flexWrap:"wrap",alignItems:"center",borderBottom:"1px solid rgba(255,255,255,0.06)"},children:[r?.pr_url&&jsxs("a",{href:r.pr_url,target:"_blank",rel:"noopener noreferrer",style:{...i.link("#60a5fa"),textDecoration:"none"},children:[jsx(g,{d:l.pr,className:""}),r.pr_id||"PR"]}),r?.ticket_url&&jsxs("a",{href:r.ticket_url,target:"_blank",rel:"noopener noreferrer",style:{...i.link("#fbbf24"),textDecoration:"none"},children:[jsx(g,{d:l.ticket,className:""}),r.ticket_id||"Ticket"]}),r?.created_by_agent_name&&jsxs("span",{style:{fontSize:"9px",color:"#888"},children:["by ",r.created_by_agent_name]}),jsx("span",{style:{...i.badge(r?.environment||"custom"),marginLeft:"auto"},children:r?.environment})]}),jsxs("div",{style:i.stats,children:[jsxs("span",{style:{color:"#34d399"},children:[s.pass,"\u2713"]}),jsxs("span",{style:{color:"#f87171"},children:[s.fail,"\u2717"]}),jsxs("span",{style:{color:"#f59e0b"},children:[s.skip,"\u23ED"]}),jsxs("span",{style:{color:"#888"},children:[s.pending,"\u25CC"]}),jsx("span",{style:{color:"#555",marginLeft:"auto"},children:s.total})]}),k==="error"&&jsxs("div",{style:{padding:"12px",textAlign:"center"},children:[jsx(g,{d:l.alert,className:""}),jsx("div",{style:{fontSize:"10px",color:"#f87171"},children:"Failed to load"}),jsx("button",{onClick:J,style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer",marginTop:"4px"},children:"Retry"})]}),k==="completed"&&jsxs("div",{style:{padding:"12px",textAlign:"center",borderBottom:"1px solid rgba(255,255,255,0.06)"},children:[jsx(g,{d:l.checkAll,className:""}),jsx("div",{style:{fontSize:"10px",color:"#34d399"},children:"Run completed"}),jsx("button",{onClick:q,style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer",marginTop:"4px"},children:"Reset & re-test"})]}),r?.intro_notes&&jsx("div",{style:{padding:"6px 12px",borderBottom:"1px solid rgba(255,255,255,0.06)",fontSize:"10px",color:"rgba(255,255,255,0.4)",fontStyle:"italic",maxHeight:"48px",overflowY:"auto"},children:r.intro_notes}),k!=="error"&&jsx("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:(r?.test_cases||[]).length===0?jsx("div",{style:{padding:"16px 12px",textAlign:"center",fontSize:"10px",color:"#888"},children:"No test cases"}):(r?.test_cases||[]).map(o=>jsxs("div",{style:i.caseRow,children:[jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:"8px"},children:[jsx("div",{style:{marginTop:"2px",flexShrink:0},children:$===o.id?jsx(g,{d:l.loader,className:""}):jsx(g,{d:oe[o.verdict],className:""})}),jsxs("div",{style:{minWidth:0,flex:1},children:[jsx("div",{style:{fontSize:"10px",color:"#e5e5e5",lineHeight:1.3},children:o.title}),o.description&&jsx("div",{style:{fontSize:"9px",color:"#888",marginTop:"2px"},children:o.description}),o.url_path&&jsxs("a",{href:o.url_path,onClick:d=>{d.preventDefault(),d.stopPropagation(),S?S(o.url_path):window.open(o.url_path,"_blank");},style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer",padding:0,marginTop:"2px",display:"inline-flex",alignItems:"center",gap:"2px",textDecoration:"none"},children:[jsx(g,{d:l.externalLink,className:""}),o.url_path]}),o.verdict==="fail"&&o.fail_reason&&jsxs("div",{style:{fontSize:"9px",color:"#f87171",marginTop:"2px"},children:["\u2717 ",o.fail_reason]})]})]}),jsxs("div",{style:{display:"flex",alignItems:"center",gap:"4px",marginTop:"4px",marginLeft:"22px"},children:[["pass","fail","skip"].map(d=>jsx("button",{onClick:()=>{if(d==="fail"&&o.verdict!=="fail"){z(o.id);return}if(o.verdict===d){T(o.id,"pending");return}T(o.id,d);},disabled:$!==null,style:i.verdictBtn(o.verdict===d,d==="pass"?"#34d399":d==="fail"?"#f87171":"#f59e0b"),children:d.toUpperCase()},d)),o.verdict_by_display_name&&jsx("span",{style:{fontSize:"8px",color:"#555",marginLeft:"auto"},children:o.verdict_by_display_name})]}),M===o.id&&jsxs("div",{style:{marginLeft:"22px",marginTop:"4px",display:"flex",gap:"4px"},children:[jsx("input",{autoFocus:true,value:w,onChange:d=>y(d.target.value),onKeyDown:d=>{d.key==="Enter"&&T(o.id,"fail",w),d.key==="Escape"&&(z(null),y(""));},placeholder:"Reason...",style:i.input}),jsx("button",{onClick:()=>T(o.id,"fail",w),style:i.verdictBtn(true,"#f87171"),children:"\u2713"})]})]},o.id))}),G&&k!=="completed"&&jsxs("div",{style:{padding:"6px 12px",borderTop:"1px solid rgba(255,255,255,0.06)",display:"flex",alignItems:"center",justifyContent:"space-between",flexShrink:0},children:[jsx("span",{style:{fontSize:"9px",color:"#34d399"},children:"All resolved"}),jsx("button",{onClick:Z,style:{fontSize:"8px",padding:"2px 8px",borderRadius:"4px",background:"rgba(59,130,246,0.15)",color:"#60a5fa",border:"none",cursor:"pointer"},children:"COMPLETE"})]}),jsx("div",{style:i.progress,children:jsx("div",{style:i.progressBar(E)})})]})]})}export{ie as TestRunWidget,W as useDraggable,L as useTestRun};
|
|
1
|
+
import {useState,useRef,useCallback,useEffect}from'react';import {jsxs,jsx}from'react/jsx-runtime';function W(e,p){let[u,_]=useState({x:e,y:p}),x=useRef(false),f=useRef({x:0,y:0}),v=useRef(false),R=useCallback(c=>{x.current=true,v.current=false,f.current={x:c.clientX-u.x,y:c.clientY-u.y},c.target.setPointerCapture(c.pointerId);},[u]),S=useCallback(c=>{x.current&&(v.current=true,_({x:c.clientX-f.current.x,y:c.clientY-f.current.y}));},[]),a=useCallback(()=>{x.current=false;},[]);return {pos:u,onPointerDown:R,onPointerMove:S,onPointerUp:a,didDrag:v}}function L(e){let[p,u]=useState(null),[_,x]=useState("loading"),f=useCallback(async()=>{try{let a=new URLSearchParams;e.testRunId&&a.set("test_run_id",e.testRunId),e.targetUrl&&a.set("target_url",e.targetUrl),a.set("app_slug",e.appSlug),a.set("environment",e.environment),e.version&&a.set("version",e.version),e.commitSha&&a.set("commit_sha",e.commitSha),e.branchName&&a.set("branch_name",e.branchName);let c=await fetch(`${e.config.serverUrl}/widget/test-run?${a.toString()}`,{headers:{Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}});if(c.status===404){x("no-match"),u(null);return}if(!c.ok){x("error");return}let b=await c.json();u(b),x(b.status==="completed"?"completed":"ready");}catch{x("error");}},[e.config.serverUrl,e.config.anonKey,e.appSlug,e.environment,e.testRunId,e.targetUrl,e.version,e.commitSha,e.branchName]);return useEffect(()=>{f();},[f]),{run:p,widgetState:_,fetchRun:f,setVerdict:async(a,c,b,h="human")=>{let m=await fetch(`${e.config.serverUrl}/widget/test-cases/${a}/verdict`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey},body:JSON.stringify({verdict:c,fail_reason:b,display_name:h})});if(m.ok){let{summary:w}=await m.json();u(y=>y?{...y,summary:w,test_cases:y.test_cases.map(M=>M.id===a?{...M,verdict:c,fail_reason:c==="fail"&&b||null,verdict_by_display_name:h,verdict_at:new Date().toISOString()}:M)}:null);}return m.ok},markComplete:async()=>{if(!p)return false;let a=await fetch(`${e.config.serverUrl}/widget/test-runs/${p.id}/complete`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}});return a.ok&&f(),a.ok},resetRun:async()=>{if(!p)return false;let a=await fetch(`${e.config.serverUrl}/widget/test-runs/${p.id}/reset`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e.config.anonKey}`,apikey:e.config.anonKey}});return a.ok&&f(),a.ok},setRun:u}}var g=({d:e,className:p})=>jsx("svg",{className:p,width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:e})}),l={clipboard:"M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2",check:"M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4 12 14.01l-3-3",x:"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20M15 9l-6 6M9 9l6 6",circle:"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20",skip:"M5 4l10 8-10 8V4M19 5v14",grip:"M9 5h.01M15 5h.01M9 12h.01M15 12h.01M9 19h.01M15 19h.01",minus:"M5 12h14",chevronUp:"M18 15l-6-6-6 6",chevronDown:"M6 9l6 6 6-6",externalLink:"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3",pr:"M6 3v18M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6M18 9a9 9 0 0 1-9 9",ticket:"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z",loader:"M21 12a9 9 0 1 1-6.219-8.56",checkAll:"M18 6L7 17l-5-5M22 10l-7.5 7.5L13 16",alert:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0M12 9v4M12 17h.01"};var oe={pending:l.circle,pass:l.check,fail:l.x,skip:l.skip},j={local:{bg:"rgba(59,130,246,0.15)",text:"#60a5fa",border:"rgba(59,130,246,0.3)"},preview:{bg:"rgba(168,85,247,0.15)",text:"#c084fc",border:"rgba(168,85,247,0.3)"},staging:{bg:"rgba(245,158,11,0.15)",text:"#fbbf24",border:"rgba(245,158,11,0.3)"},production:{bg:"rgba(239,68,68,0.15)",text:"#f87171",border:"rgba(239,68,68,0.3)"},custom:{bg:"rgba(128,128,128,0.15)",text:"#888",border:"rgba(128,128,128,0.3)"}},i={root:{position:"fixed",zIndex:9999,userSelect:"none",fontFamily:"ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"},pill:{display:"inline-flex",alignItems:"center",gap:"6px",padding:"4px 8px",borderRadius:"9999px",background:"rgb(30,30,30)",border:"1px solid rgba(255,255,255,0.15)",boxShadow:"0 4px 12px rgba(0,0,0,0.3)",cursor:"pointer",fontSize:"9px",color:"#e5e5e5"},card:e=>({width:`${e}px`,borderRadius:"8px",background:"rgb(30,30,30)",border:"1px solid rgba(255,255,255,0.15)",boxShadow:"0 8px 24px rgba(0,0,0,0.4)",overflow:"hidden",display:"flex",flexDirection:"column"}),handle:{padding:"8px 12px",display:"flex",alignItems:"center",gap:"8px",cursor:"grab",borderBottom:"1px solid rgba(255,255,255,0.06)"},title:{fontSize:"10px",fontWeight:600,color:"#e5e5e5",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},sub:{fontSize:"9px",color:"rgba(255,255,255,0.4)",display:"flex",alignItems:"center",gap:"6px"},btn:{padding:"2px",borderRadius:"4px",background:"transparent",border:"none",cursor:"pointer",color:"#888",display:"flex",flexShrink:0},stats:{padding:"4px 12px",display:"flex",alignItems:"center",gap:"8px",fontSize:"9px",borderBottom:"1px solid rgba(255,255,255,0.06)"},badge:e=>{let p=j[e]||j.custom;return {fontSize:"8px",padding:"0 4px",borderRadius:"4px",background:p.bg,color:p.text,border:`1px solid ${p.border}`,lineHeight:"14px"}},progress:{height:"2px",background:"rgba(255,255,255,0.06)",flexShrink:0},progressBar:e=>({height:"100%",width:`${e}%`,background:"linear-gradient(to right, #34d399, #3b82f6)",transition:"width 0.5s"}),link:e=>({display:"inline-flex",alignItems:"center",gap:"4px",fontSize:"9px",padding:"2px 6px",borderRadius:"4px",background:`${e}15`,color:e,textDecoration:"none",border:"none",cursor:"pointer"}),caseRow:{padding:"6px 12px",borderBottom:"1px solid rgba(255,255,255,0.06)",transition:"background 0.15s"},verdictBtn:(e,p)=>({fontSize:"8px",padding:"2px 6px",borderRadius:"4px",border:"none",cursor:"pointer",background:e?`${p}33`:"transparent",color:e?p:"#888",transition:"all 0.15s"}),input:{flex:1,fontSize:"9px",background:"rgba(0,0,0,0.3)",border:"1px solid rgba(255,255,255,0.1)",borderRadius:"4px",padding:"2px 6px",color:"#e5e5e5",outline:"none"}};function ie({config:e,appSlug:p,environment:u,testRunId:_,targetUrl:x,version:f,commitSha:v,branchName:R,onNavigate:S,displayName:a="human",defaultMode:c="expanded",defaultPosition:b}){let[h,m]=useState(c),[w,y]=useState(""),[M,z]=useState(null),[$,V]=useState(null),Y=b?.x??16,X=b?.y??(typeof window<"u"?window.innerHeight-56:600),{pos:H,onPointerDown:B,onPointerMove:D,onPointerUp:I,didDrag:K}=W(Y,X),{run:r,widgetState:k,fetchRun:J,setVerdict:A,markComplete:Z,resetRun:q}=L({config:e,appSlug:p,environment:u,testRunId:_,targetUrl:x,version:f,commitSha:v,branchName:R}),T=useCallback(async(o,d,Q)=>{V(o);try{await A(o,d,Q,a);}finally{V(null),z(null),y("");}},[A,a]),s=r?.summary||{total:0,pending:0,pass:0,fail:0,skip:0},G=s.total>0&&s.pending===0,E=s.total>0?(s.pass+s.fail)/s.total*100:0;if(k==="no-match"||k==="loading")return null;let O=()=>{K.current||m(o=>o==="mini"||o==="expanded"?"max":"mini");},C=({icon:o,onClick:d})=>jsx("button",{style:i.btn,onClick:d,children:jsx(g,{d:o,className:""})});return jsxs("div",{style:{...i.root,left:H.x,top:H.y},children:[h==="mini"&&jsxs("div",{style:i.pill,onPointerDown:B,onPointerMove:D,onPointerUp:()=>{I(),K.current||O();},children:[jsx(g,{d:l.clipboard,className:""}),jsxs("span",{children:[s.pass,"/",s.total]}),s.fail>0&&jsxs("span",{style:{color:"#f87171"},children:[s.fail,"\u2717"]}),s.skip>0&&jsxs("span",{style:{color:"#f59e0b"},children:[s.skip,"\u23ED"]}),r?.pr_url&&jsxs("span",{style:{...i.link("#60a5fa"),pointerEvents:"none",textDecoration:"none"},children:[jsx(g,{d:l.pr,className:""}),r.pr_id||"PR"]}),r?.ticket_url&&jsxs("span",{style:{...i.link("#fbbf24"),pointerEvents:"none",textDecoration:"none"},children:[jsx(g,{d:l.ticket,className:""}),r.ticket_id||"TKT"]})]}),h==="expanded"&&jsxs("div",{style:i.card(300),children:[jsxs("div",{style:i.handle,onPointerDown:B,onPointerMove:D,onPointerUp:I,children:[jsx(g,{d:l.grip,className:""}),jsxs("div",{style:{flex:1,minWidth:0},children:[jsx("div",{style:i.title,children:r?.title}),r?.branch_name&&jsxs("div",{style:i.sub,children:["\u2387 ",r.branch_name]})]}),jsx(C,{icon:l.chevronUp,onClick:O}),jsx(C,{icon:l.minus,onClick:()=>m("mini")})]}),jsxs("div",{style:i.stats,children:[jsxs("span",{style:{color:"#34d399"},children:[s.pass,"\u2713"]}),jsxs("span",{style:{color:"#f87171"},children:[s.fail,"\u2717"]}),jsxs("span",{style:{color:"#f59e0b"},children:[s.skip,"\u23ED"]}),jsxs("span",{style:{color:"#888"},children:[s.pending,"\u25CC"]}),jsx("span",{style:{color:"#555",marginLeft:"auto"},children:s.total})]}),r?.description&&jsx("div",{style:{padding:"6px 12px",fontSize:"10px",color:"#888",borderBottom:"1px solid rgba(255,255,255,0.06)",maxHeight:"64px",overflowY:"auto"},children:r.description}),jsxs("div",{style:{padding:"6px 12px",display:"flex",gap:"8px",flexWrap:"wrap",alignItems:"center",borderBottom:"1px solid rgba(255,255,255,0.06)"},children:[r?.pr_url&&jsxs("a",{href:r.pr_url,target:"_blank",rel:"noopener noreferrer",style:{...i.link("#60a5fa"),textDecoration:"none"},children:[jsx(g,{d:l.pr,className:""}),r.pr_id||"PR"]}),r?.ticket_url&&jsxs("a",{href:r.ticket_url,target:"_blank",rel:"noopener noreferrer",style:{...i.link("#fbbf24"),textDecoration:"none"},children:[jsx(g,{d:l.ticket,className:""}),r.ticket_id||"Ticket"]}),jsx("span",{style:{...i.badge(r?.environment||"custom"),marginLeft:"auto"},children:r?.environment})]}),jsx("div",{style:i.progress,children:jsx("div",{style:i.progressBar(E)})})]}),h==="max"&&jsxs("div",{style:{...i.card(340),maxHeight:"70vh"},children:[jsxs("div",{style:i.handle,onPointerDown:B,onPointerMove:D,onPointerUp:I,children:[jsx(g,{d:l.grip,className:""}),jsxs("div",{style:{flex:1,minWidth:0},children:[jsx("div",{style:i.title,children:r?.title}),r?.branch_name&&jsxs("div",{style:i.sub,children:["\u2387 ",r.branch_name]})]}),jsx(C,{icon:l.chevronDown,onClick:()=>m("expanded")}),jsx(C,{icon:l.minus,onClick:()=>m("mini")})]}),jsxs("div",{style:{padding:"6px 12px",display:"flex",gap:"8px",flexWrap:"wrap",alignItems:"center",borderBottom:"1px solid rgba(255,255,255,0.06)"},children:[r?.pr_url&&jsxs("a",{href:r.pr_url,target:"_blank",rel:"noopener noreferrer",style:{...i.link("#60a5fa"),textDecoration:"none"},children:[jsx(g,{d:l.pr,className:""}),r.pr_id||"PR"]}),r?.ticket_url&&jsxs("a",{href:r.ticket_url,target:"_blank",rel:"noopener noreferrer",style:{...i.link("#fbbf24"),textDecoration:"none"},children:[jsx(g,{d:l.ticket,className:""}),r.ticket_id||"Ticket"]}),r?.created_by_agent_name&&jsxs("span",{style:{fontSize:"9px",color:"#888"},children:["by ",r.created_by_agent_name]}),jsx("span",{style:{...i.badge(r?.environment||"custom"),marginLeft:"auto"},children:r?.environment})]}),jsxs("div",{style:i.stats,children:[jsxs("span",{style:{color:"#34d399"},children:[s.pass,"\u2713"]}),jsxs("span",{style:{color:"#f87171"},children:[s.fail,"\u2717"]}),jsxs("span",{style:{color:"#f59e0b"},children:[s.skip,"\u23ED"]}),jsxs("span",{style:{color:"#888"},children:[s.pending,"\u25CC"]}),jsx("span",{style:{color:"#555",marginLeft:"auto"},children:s.total})]}),k==="error"&&jsxs("div",{style:{padding:"12px",textAlign:"center"},children:[jsx(g,{d:l.alert,className:""}),jsx("div",{style:{fontSize:"10px",color:"#f87171"},children:"Failed to load"}),jsx("button",{onClick:J,style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer",marginTop:"4px"},children:"Retry"})]}),k==="completed"&&jsxs("div",{style:{padding:"12px",textAlign:"center",borderBottom:"1px solid rgba(255,255,255,0.06)"},children:[jsx(g,{d:l.checkAll,className:""}),jsx("div",{style:{fontSize:"10px",color:"#34d399"},children:"Run completed"}),jsx("button",{onClick:q,style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer",marginTop:"4px"},children:"Reset & re-test"})]}),r?.intro_notes&&jsx("div",{style:{padding:"6px 12px",borderBottom:"1px solid rgba(255,255,255,0.06)",fontSize:"10px",color:"rgba(255,255,255,0.4)",fontStyle:"italic",maxHeight:"48px",overflowY:"auto"},children:r.intro_notes}),k!=="error"&&jsx("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:(r?.test_cases||[]).length===0?jsx("div",{style:{padding:"16px 12px",textAlign:"center",fontSize:"10px",color:"#888"},children:"No test cases"}):(r?.test_cases||[]).map(o=>jsxs("div",{style:i.caseRow,children:[jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:"8px"},children:[jsx("div",{style:{marginTop:"2px",flexShrink:0},children:$===o.id?jsx(g,{d:l.loader,className:""}):jsx(g,{d:oe[o.verdict],className:""})}),jsxs("div",{style:{minWidth:0,flex:1},children:[jsx("div",{style:{fontSize:"10px",color:"#e5e5e5",lineHeight:1.3},children:o.title}),o.description&&jsx("div",{style:{fontSize:"9px",color:"#888",marginTop:"2px"},children:o.description}),o.url_path&&jsxs("a",{href:o.url_path,onClick:d=>{d.preventDefault(),d.stopPropagation(),S?S(o.url_path):window.open(o.url_path,"_blank");},style:{fontSize:"9px",color:"#3b82f6",background:"none",border:"none",cursor:"pointer",padding:0,marginTop:"2px",display:"inline-flex",alignItems:"center",gap:"2px",textDecoration:"none"},children:[jsx(g,{d:l.externalLink,className:""}),o.url_path]}),o.verdict==="fail"&&o.fail_reason&&jsxs("div",{style:{fontSize:"9px",color:"#f87171",marginTop:"2px"},children:["\u2717 ",o.fail_reason]})]})]}),jsxs("div",{style:{display:"flex",alignItems:"center",gap:"4px",marginTop:"4px",marginLeft:"22px"},children:[["pass","fail","skip"].map(d=>jsx("button",{onClick:()=>{if(d==="fail"&&o.verdict!=="fail"){z(o.id);return}if(o.verdict===d){T(o.id,"pending");return}T(o.id,d);},disabled:$!==null,style:i.verdictBtn(o.verdict===d,d==="pass"?"#34d399":d==="fail"?"#f87171":"#f59e0b"),children:d.toUpperCase()},d)),o.verdict_by_display_name&&jsx("span",{style:{fontSize:"8px",color:"#555",marginLeft:"auto"},children:o.verdict_by_display_name})]}),M===o.id&&jsxs("div",{style:{marginLeft:"22px",marginTop:"4px",display:"flex",gap:"4px"},children:[jsx("input",{autoFocus:true,value:w,onChange:d=>y(d.target.value),onKeyDown:d=>{d.key==="Enter"&&T(o.id,"fail",w),d.key==="Escape"&&(z(null),y(""));},placeholder:"Reason...",style:i.input}),jsx("button",{onClick:()=>T(o.id,"fail",w),style:i.verdictBtn(true,"#f87171"),children:"\u2713"})]})]},o.id))}),G&&k!=="completed"&&jsxs("div",{style:{padding:"6px 12px",borderTop:"1px solid rgba(255,255,255,0.06)",display:"flex",alignItems:"center",justifyContent:"space-between",flexShrink:0},children:[jsx("span",{style:{fontSize:"9px",color:"#34d399"},children:"All resolved"}),jsx("button",{onClick:Z,style:{fontSize:"8px",padding:"2px 8px",borderRadius:"4px",background:"rgba(59,130,246,0.15)",color:"#60a5fa",border:"none",cursor:"pointer"},children:"COMPLETE"})]}),jsx("div",{style:i.progress,children:jsx("div",{style:i.progressBar(E)})})]})]})}export{ie as TestRunWidget,W as useDraggable,L as useTestRun};
|
package/package.json
CHANGED