@verifiedinc-public/shared-ui-elements 12.27.0 → 12.27.1-rc.122
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import
|
|
1
|
+
"use strict";import{useState as y,useMemo as L,useRef as S,useEffect as T}from"react";import{flexRender as M}from"@tanstack/react-table";import{useTheme as U,useMediaQuery as B,Stack as m,TableRow as k,TableCell as W,Typography as l,Chip as P,Box as H,IconButton as j,Tooltip as N}from"@mui/material";import{ContentCopy as Z}from"@mui/icons-material";import{EmptyChartSection as q}from"../../chart/EmptyChartSection.mjs";import{useCopyToClipboard as K}from"../../../hooks/useCopyToClipboard.mjs";import{useSnackbar as A}from"../../Snackbar/index.mjs";import{formatLogTimestamp as Q}from"../../../utils/date.mjs";import{PRODUCT_LABELS as V}from"../constants.mjs";import{LogDetailPanel as _}from"./LogDetailPanel.mjs";import{DataTable as G}from"../../DataTable/DataTable.mjs";import{jsx as r,jsxs as f,Fragment as J}from"react/jsx-runtime";function X({statusCode:o,errorCode:i}){let t="grey.400";return i??o>=400?t="error.main":o>=200&&o<300&&(t="success.main"),r(H,{sx:{width:8,height:8,borderRadius:"50%",bgcolor:t,flexShrink:0}})}function O({value:o,label:i,onCopy:t}){return r(j,{className:"copy-btn",size:"small",onClick:e=>{e.stopPropagation(),t(i,o)},sx:{p:.25,ml:.5},children:r(Z,{sx:{fontSize:13}})})}function Y(o){return o?o.length<=12?o:`${o.slice(0,4)}\u2026${o.slice(-4)}`:"\u2014"}function ee(o){return o.source==="sdk"?o.path:`${o.method} /${o.path}`}function oe({text:o}){const i=S(null),[t,e]=y(!1);return T(()=>{const n=i.current;n&&e(n.scrollWidth>n.clientWidth)},[o]),r(N,{title:t?o:"",placement:"top",children:r(l,{ref:i,variant:"body2",noWrap:!0,sx:{fontSize:"0.8em",color:"text.primary",fontFamily:"monospace"},children:o})})}function re({label:o,...i}){const t=S(null),[e,n]=y(!1);return T(()=>{var s;const a=(s=t.current)==null?void 0:s.querySelector(".MuiChip-label");a&&n(a.scrollWidth>a.clientWidth)},[o]),r(N,{title:e?o:"",placement:"top",children:r(P,{ref:t,label:o,...i,sx:{...i.sx,maxWidth:"100%","& .MuiChip-label":{overflow:"hidden",textOverflow:"ellipsis"}}})})}const ie=48,d={fontFamily:"monospace",fontSize:"0.8em"},te=(o,i)=>`${o.eventTimestamp}-${i}`;function ne({timeZone:o,eventWidth:i,onCopy:t}){return[{id:"status",header:"",meta:{width:32},cell:({row:e})=>r(m,{alignItems:"center",justifyContent:"center",height:"100%",children:r(X,{statusCode:e.original.statusCode,errorCode:e.original.errorCode})})},{id:"timestamp",header:"Timestamp",meta:{width:230},cell:({row:e})=>r(l,{variant:"body2",color:"text.secondary",sx:{...d,whiteSpace:"nowrap"},children:Q(e.original.eventTimestamp,o)})},{id:"phone",header:"Phone",meta:{width:150},cell:({row:e})=>f(m,{direction:"row",alignItems:"center",children:[r(l,{variant:"body2",color:"text.secondary",sx:d,children:e.original.phone??"\u2014"}),e.original.phone&&r(O,{value:e.original.phone,label:"Phone",onCopy:t})]})},{id:"uuid",header:"1-Click UUID",meta:{width:130},cell:({row:e})=>f(m,{direction:"row",alignItems:"center",overflow:"hidden",children:[r(l,{variant:"body2",color:"text.secondary",noWrap:!0,sx:d,children:Y(e.original.uuid)}),e.original.uuid&&r(O,{value:e.original.uuid,label:"1-Click UUID",onCopy:t})]})},{id:"source",header:"Source",meta:{width:90},cell:({row:e})=>r(P,{label:e.original.source.toUpperCase(),size:"small",variant:"filled",sx:{fontWeight:600,fontSize:12,minWidth:40,bgcolor:e.original.source==="sdk"?"#4FC3F7":"primary.main",color:"white"}})},{id:"product",header:"Product",meta:{width:140},cell:({row:e})=>r(re,{label:V[e.original.product],variant:"outlined",sx:{fontSize:13,fontWeight:600,minWidth:110}})},{id:"event",header:"Event",meta:{width:i},cell:({row:e})=>r(oe,{text:ee(e.original)})},{id:"http",header:"HTTP",meta:{width:75,align:"right"},cell:({row:e})=>{const{source:n,statusCode:s}=e.original;let a="success.main";return n==="sdk"?a="text.secondary":s>=400&&(a="error.main"),r(l,{variant:"body2",sx:{...d,color:a},children:n==="sdk"?"\u2014":s})}},{id:"latency",header:"Latency",meta:{width:100,align:"right"},cell:({row:e})=>r(l,{variant:"body2",color:"text.secondary",sx:d,children:e.original.source==="sdk"||!e.original.latencyMs?"\u2014":`${e.original.latencyMs}ms`})},{id:"error",header:"Error",meta:{width:140},cell:({row:e})=>e.original.errorCode?r(l,{variant:"body2",sx:{...d,color:"error.main"},children:e.original.errorCode}):r(l,{variant:"body2",color:"text.secondary",sx:d,children:"\u2014"})}]}function ae({data:o,isLoading:i,hasOlder:t,hasNewer:e,isLoadingOlder:n,isLoadingNewer:s,onLoadNewer:a,onLoadOlder:R,filterKey:$,timeZone:w}){const z=U(),b=B(z.breakpoints.down("xl")),[I,D]=y(null),{copy:x}=K({type:"text/plain"}),{enqueueSnackbar:C}=A(),u=L(()=>o?.data??[],[o?.data]),F=L(()=>ne({timeZone:w,eventWidth:b?125:200,onCopy:async(c,p)=>{await x(p),C(`${c} copied to clipboard`,"success")}}),[x,C,b,w]);return!i&&u.length===0?r(q,{}):r(m,{sx:{width:"100%",flex:1,minHeight:500},children:r(G,{data:u,columns:F,getRowId:te,isLoading:i&&u.length===0,disableSorting:!0,disablePagination:!0,pinFirstColumn:!1,tableLayout:"fixed",minWidth:1230,maxHeight:"100%",estimateRowHeight:ie,bidirectionalScroll:{hasNewer:e,hasOlder:t,isLoadingNewer:s,isLoadingOlder:n,onLoadNewer:a,onLoadOlder:R,resetKey:$,loadingNewerLabel:"Loading newer logs",loadingOlderLabel:"Loading older logs"},renderRow:({row:c,rowProps:p,getCellProps:E})=>{const g=I===c.id,v=c.getVisibleCells();return f(J,{children:[r(k,{...p,hover:!0,onClick:()=>D(g?null:c.id),sx:{cursor:"pointer","& > td":{borderBottom:g?"none":void 0},"& .copy-btn":{opacity:0},"& td:hover .copy-btn":{opacity:1}},children:v.map(h=>r(W,{...E(h),children:M(h.column.columnDef.cell,h.getContext())},h.id))}),g&&r(k,{children:r(W,{colSpan:v.length,sx:{py:0,px:1,borderTop:"none",bgcolor:"grey.50"},children:r(_,{log:c.original})})})]})}})})}export{ae as LogsTable};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export
|
|
1
|
+
export type LogEntry = {
|
|
2
2
|
brandUuid: string;
|
|
3
3
|
phone: string | null;
|
|
4
4
|
uuid: string | null;
|
|
@@ -16,7 +16,7 @@ export interface LogEntry {
|
|
|
16
16
|
responseBody: any;
|
|
17
17
|
} | null;
|
|
18
18
|
eventTimestamp: string;
|
|
19
|
-
}
|
|
19
|
+
};
|
|
20
20
|
export interface LogsResponse {
|
|
21
21
|
data: LogEntry[];
|
|
22
22
|
cursors: {
|
|
@@ -39,7 +39,7 @@ interface UseBidirectionalScrollOptions {
|
|
|
39
39
|
/**
|
|
40
40
|
* Manages bidirectional infinite scroll for a virtualised, reverse-chronological list.
|
|
41
41
|
*
|
|
42
|
-
* - Triggers `onLoadNewer` when the user scrolls to the top.
|
|
42
|
+
* - Triggers `onLoadNewer` when the user scrolls to the top, or pulls past it while already there.
|
|
43
43
|
* - Triggers `onLoadOlder` when the user scrolls to the bottom.
|
|
44
44
|
* - Preserves the scroll position when newer rows are prepended so the
|
|
45
45
|
* viewport doesn't jump.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{useRef as
|
|
1
|
+
"use strict";import{useRef as t,useEffect as T,useLayoutEffect as M}from"react";import F from"lodash/debounce";function P({enabled:u=!0,scrollContainerRef:n,virtualizer:w,rowCount:J,hasNewer:H,hasOlder:O,isLoadingNewer:s,isLoadingOlder:y,onLoadNewer:N,onLoadOlder:b,debounceMs:L=300,rearmDistance:g=100,resetKey:K}){const a=t(null),p=t(!1),d=t(!1);T(()=>{if(!u)return;const e=n.current;e&&(e.scrollTop=0),a.current=null,p.current=!1,d.current=!1},[u,K,n]),T(()=>{if(u){if(s&&!p.current){const e=n.current;e&&(a.current={scrollHeight:e.scrollHeight,scrollTop:e.scrollTop})}p.current=!!s}},[u,s,n]),M(()=>{const e=n.current,o=a.current;if(e&&o){const l=e.scrollHeight-o.scrollHeight;l>0&&(e.scrollTop=o.scrollTop+l),a.current=null,w.measure()}},[J,w,n]);const E=t(O),v=t(H),m=t(y),h=t(s),x=t(b),B=t(N);E.current=O,v.current=H,m.current=y,h.current=s,x.current=b,B.current=N,T(()=>{if(!u)return;const e=n.current;if(!e)return;let o=!1;const l=F(()=>{v.current&&!h.current&&B.current()},L,{leading:!0,trailing:!1}),C=F(()=>{E.current&&!m.current&&x.current()},L,{leading:!0,trailing:!1}),Y=()=>{const{scrollTop:r,scrollHeight:c,clientHeight:i}=e,D=c-r-i;c<=i||(r>g&&(o=!0),D>g&&(d.current=!0),o&&v.current&&!h.current&&r<=1&&(o=!1,l()),d.current&&E.current&&!m.current&&D<=1&&(d.current=!1,C()))},j=()=>e.scrollTop<=1&&v.current&&!h.current,k=r=>{r.deltaY<0&&j()&&l()};let f=null;const q=r=>{var c;f=((c=r.touches[0])==null?void 0:c.clientY)??null},z=r=>{var c;const i=(c=r.touches[0])==null?void 0:c.clientY;f!==null&&i!==void 0&&i>f&&j()&&(f=null,l())};return e.addEventListener("scroll",Y,{passive:!0}),e.addEventListener("wheel",k,{passive:!0}),e.addEventListener("touchstart",q,{passive:!0}),e.addEventListener("touchmove",z,{passive:!0}),()=>{e.removeEventListener("scroll",Y),e.removeEventListener("wheel",k),e.removeEventListener("touchstart",q),e.removeEventListener("touchmove",z),l.cancel(),C.cancel()}},[u,n,L,g])}export{P as useBidirectionalScroll};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@verifiedinc-public/shared-ui-elements",
|
|
3
|
-
"version": "12.27.
|
|
3
|
+
"version": "12.27.1-rc.122",
|
|
4
4
|
"description": "A set of UI components, utilities that is shareable with the core apps.",
|
|
5
5
|
"private": false,
|
|
6
6
|
"sideEffects": [
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
"react-datepicker": "^7.6.0"
|
|
83
83
|
},
|
|
84
84
|
"devDependencies": {
|
|
85
|
-
"@babel/plugin-transform-react-jsx": "^
|
|
85
|
+
"@babel/plugin-transform-react-jsx": "^8.0.1",
|
|
86
86
|
"@chromatic-com/storybook": "^2.0.2",
|
|
87
87
|
"@storybook/addon-essentials": "^8.6.18",
|
|
88
88
|
"@storybook/addon-interactions": "^8.6.18",
|