From 6068dd11c7ec41bb8f708951098fd8648ca7bb59 Mon Sep 17 00:00:00 2001 From: Paul D'Ambra Date: Wed, 14 Feb 2024 12:39:49 +0000 Subject: [PATCH] fix: make it clearer when capture is before PH init (#20336) * fix: make it clearer when capture is before PH init * add stories to see what it looks like * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `webkit` (2) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> --- ...manceevent--initial-body-display--dark.png | Bin 0 -> 3332 bytes ...anceevent--initial-body-display--light.png | Bin 0 -> 3308 bytes ...ceevent--initial-headers-display--dark.png | Bin 0 -> 7851 bytes ...eevent--initial-headers-display--light.png | Bin 0 -> 7892 bytes .../ItemPerformanceEvent.stories.tsx | 33 ++++++++++++++++++ .../components/ItemPerformanceEvent.tsx | 24 +++++++++---- 6 files changed, 51 insertions(+), 6 deletions(-) create mode 100644 frontend/__snapshots__/components-itemperformanceevent--initial-body-display--dark.png create mode 100644 frontend/__snapshots__/components-itemperformanceevent--initial-body-display--light.png create mode 100644 frontend/__snapshots__/components-itemperformanceevent--initial-headers-display--dark.png create mode 100644 frontend/__snapshots__/components-itemperformanceevent--initial-headers-display--light.png create mode 100644 frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.stories.tsx diff --git a/frontend/__snapshots__/components-itemperformanceevent--initial-body-display--dark.png b/frontend/__snapshots__/components-itemperformanceevent--initial-body-display--dark.png new file mode 100644 index 0000000000000000000000000000000000000000..a1aada324a69265849fddb3635e87497e02e1ba0 GIT binary patch literal 3332 zcmV+f4g2zmP)Px>zDYzuRCt{2oOx7KSGI@0Do_xOdE&sVLPzcHq|;g21Z9$`o!Trraf~y9fS?a> ziUZ0#2*z2#px~@+I+DaVA%cPkN)p8xheS+(B%qy@jv@&7{vdTjLDj7bR4umo$uBh_cSz( zqoHc&0DI@g9fpRy@#oixiC)f=h9~UYwf8r7=tZYr-##4AJV?*pzklAY{HAp6YD#QO zII{vnIDes-hK7b`?nBc&fBp5>h>Z!Sp}v9Ld;X!9@n4i!>f)!L{>@vX#gx2?w>4ww^_uJ2^%8p8SgY-uFn$c#S%(AKYSAFf~h5?5Dea!(%PW=S!7_iV%5+)SqrQZ;D8-_M7F{A_NP6ti#7c5G~{ zgtjhS{)f2O2tF^$qvYCo($i9~wziV2d&Kae9M3!mz}-97d4FZR#>>Q}mldjc7&rDE zz9>4)n$?M|(l>qDWb#gBa_hz=KK*zv^aXv%Xje?WVVX^LfQ(PbN8rtfs}^GN^iHtnme9-8XY z<)bDaRO4y-H05dQN9%%WZDmPi)jeT*%H(%hvUol#l2+mFIfA&jBo@pMVcOJ50Ceiq zk!@+4*}h{pLxzo_yu5PLFm)IeS2njPa!yTA*0?Nk4c9P#6&HZ z-dnT`ufLAu%GGNe_-HR3I&=VF?dl}@_IU*#-#~^88^wbM4@roRlB_%HL^cyAc>|4? zqY;s@T77AXv9U43hYw-ebU&h^<0b3!_wykr(2vNdc-%aOk(R!bsK_v#_Tu9siHc6Z z-E%lwwr*qfssudT2TPvY5C55=rZYHXf#8p>n737{6ngjS$@ky?pf*2Z{)pvRTVpBJ zHh|yE83g$I5*ZbXo5wKzvHv4hCdFwTGv{P3ul&vqGqc8p&(U!p_4V~QI}H^2xVSix zopTBh&u3lrC5BktHbu%D>Z&D`E4X#*D*%#Kt|29P9e}70QZzJ2sZ`_+Yaa`jp~B^;g{G*q^lfQaB<1B5lJ%+Pc)`M@WSz(X z;M;G@FgG{jy@jEo_Ex^XwuOcOe;=}QPD!#|Q&ZDIr_`9YMXMD0yz)Ed%$~*m4-ZK8 zM=Zz0VtM`Qmo4l!eJCfzwnCvGz~6_ZVUc7W&juRfXK87{+|W51HC9#Kok+WO?NBO}*#Bh!;o&g=qWP?=#>Eh;+onjV2VFI%ji$GIVxpGw z@L@HvagA3z`l=scK~)9Z#KZ)EojdokZhbNUmX;Ru=-!>Qttr&k|9VeCsZ^p+C*#SN~bd)1UGdXweb2UMQg+*%Hr}GQ&_xBNOn3{IsT#@=QCr{1r;DCCl?nN$HoQK*%4pA z*|@qo(ZBy27#SH+Sy{==Teku6d~U0D724{ywMeNsF@_HHV(i$r8Tr;2YHJ?@`l}yd zK~)9Z($a!`d$v)0=`xQWKUO<%?{+U8*YHHZEb8Cx! zO_8iylQTLH)2H&Ig+B%c63lDR&adxDGu`xM0xq!5M zZi{w(BDLnUVP$2>%EVZrV^#jt+th3V~ z(Xq8@xcZBRw#=={pSHxjt@hy8JTEV=Xt9_|@kdvlH;<)Mq}Z;g_@1AB`Zo>^_G*3J zeDg1&V_&#%5v5Xzzn>3zd5xE|d3pIbISo|1f2u2=rPR1S5Sv4(HKz#!0|Pd!f1kp_ zB6jWGr`D#g`qB8+YvZQPJbF|^P@o^scm`a*A%&HRv5Xi#6e}xBoSg=-J$*AXyr%+< zPt*>6vL6rk!SuAT=5Hg0a_3H|+PI4s&&SQp1#4?7#*ZJ3-%M{dZrm)`*p!?~bks6D z+y`TAZN<28qY3c$VZ+80q#)*l6b;R3XlNjH%Qm8;mgDN;MDO0cSiWo#!NGz2{PP2T zsI20_g9nTq^EOsimJA&DCW{u$YcY5jFv6{Fu7#priNiH==YS4T)l5bo}-f(C!T z865AR#W2!Gm3}va)34--a<|(ge}5 zpFDZOsoc{{oH$On4_@^77yQ0oUul@+&df5q%M^VIG~e2|((U0ofK zkztsd_2A~M+XM!M3J)iAq00wd8Z@zfLkjiv^(3x{p=;N!6koi==rNP1uC4}P@)TbZ z5~7$JI)^J)uCac73aeKov`Y8=`~PBTSR{!nV#v+QCnR(sL38G^A|aY%M?Rsr_#z1j z@AJXt^`iQv=u1sar=h-{h=`?_o0)OpLNURi3(5FM`}@YVwY4mKFN`&-60x(hy=DWowY98>kD^<*Zk#`Vf$+#! z(zYavj(sBgB!3?@Qh4A}Tl<)zqAyV>;L)Q;09033i{`VG8rKJ6bEwNlF#>1JM4?cq zy+#HIKOoRY{V1Nr|DnF9zaDu}b<6y=7#bR?-L4ok$bk=1*72u5JBS=5^DNN#4OK=) z=0B6=%NFz6tA8LNaTOI6-(hRpi{)X9Id&}TdAlZqyr9a+{8zDN?FK?a=CE$s(4nIwu3YoHU6bJ%UGmGw$jH11$p42bBO@cDC*%cHMn*Px>rb$FWRCt{2oOw`GR~E)UKqXbqBxz)CqoQnz8zu_PreFX8V>GVgHZD%H)KO3bK@f}rYHJi^N3`i+chp4S%pX=idw;L7)yepNRkw=1 z>-o+-=QjOrgNaNoCGha@@bEl0rmxxn9v&W^{}=cJm4}Ci$4Kx8Di042kCEUHR3084 z9wT8Y7K_p4o$gHO?%<3egNI`G?u1uu8_!EZEEc0%S4W*~UEb+#w6ziw_F&LJFL-+R zprxh7X!Ek6HO_~;kNDk*FJ)a_ZMyvaSEs4z0fq&K8Ktiwb1D1Vka5q0@;?Ip-z4azi(^A^hSKWt(%+*#Kj0JO` zT3cH)l|rEqjg5`iwJU)?Pj6A{$LZU50169>;O`#@#~!W-3Jk%C<0m!N-MKRkKHh`j;ZJgn6|w%6t=YiAU1XfyhOg}(cJ}O$4)>&{zaXS4h|kX zjDUb3=JjvCHKA*l9*B;PVd{R^7LD=aCIZkO&-%2hqb*)_<*jmGUHPD_kIhDHHYn!P zR+M?}{JB_|M*@L>WOAuWN!+uW`u6R^y#C>bE#%J>}cbr^>n5963w3dF^wHJhGcRnT`bHa8yg$)@$shAv=q8_y@Yn`j3uE^ zNU3Ql%o=Oft|Au~7fLyrL|3mB)Ak)PWN&XzCr%z?=CQQ2q|u{4qO(~UbRqvd1qArh zxbb6IZQ!CoTUos(irn1XDDBu$Dk;585fPu0i;D}@->oK@TuP%xjijL9KsuLwhKfsm zp{Y}+(1;NqaMpcaQcvl}Q%N8Y(CxAtR8w0)+V+7STA?0WiXWus5t5wliT~on% z&)ce1n-2B*-SKhc?%tns4C;$9u6wC%Pr0lulS^ssy4B?5)gMx@|z?O2dRZ@zPfy< ztdA|{6#iBpcf0HcQ?83ksek`|v}n;ngU$!G{Ly-#UcOR9B9SM3^X*cS$)(ivKtj&W z&U7sOXO(_OQj%!kpn)WlOX<3}lyQPgE~R_->!{>%}H_KPRh6mr(BE!nvor~-k2#5YQrb}sr9dXkb4sq|UBCW`ey zRrY~G!?2KGgM6#5%aA=cRI4r>%5_CW`Sjkv_b4jrJI?m#i!ptBDHIAdik+Pu<99A= zH$9M$qobonpYOk4sdN8iaw+-w`O?mxwv$XQrFrw`($`BCQ|Hc|Nz!Ia`TA1b$V$vJJ~l*@tz^GGD}r2CS3qvj9u4As@8Hvr(_!-oKX zDN`q5!Gd`JfZEzR+`D%VGp5f%yLQYFw6?Z_=;>dscJ3@hV9@&r3;hsbVIc?!83qr} zK`Os0dwP1Py!P@I;m03im^Gx0QVjAKsM2TfU_ZqDv`eMV(dpT*@m5xrkjsB(wSkKU zbrd#|(#a1?bb#?WS zHcH{`EmE0BS)VS{`>5}op}tj&kbiQ^}6_;4~(Q;)#h+#G=M@`o9z z*zmf#I!qWp34QwXL5B_~#327d0WvZ&5gtAdqeqXzlE}qO zyLzypTj$>TV1A^eODnW)B-&#u(yTHn@yy%X*49@6e$=tgWp%Us@Ov=h|>^=%!Kk#~<7d z0ma%aEl=Z6{o4_yrux55?(aVYAJ3eFii%1+eE0~iuCDMK?1$`}96WyX7y(250dR}w zwrE$^@jP(NIbBp&*B~O|D?~;vX5K`UdEWeCcEZ7-8yp*oHgM6Pj!t zIzwgb`J7z6bL-O3t5+}1Yipyed*0UdfM;`D|Gop*9=j8B z=Y=zCgon?;(xu-bBO~)^pZy0B6SE!j=6}M;Vft*~qCp)qGc(MZ^)Z$%{T5kS=TKHw zjup#SV$-HA=-9C%tgI~2v13OZI(Qh>)iub=yMR@z)@aP5Pd5NqcCv(ti3v`f%0N@o z19a{zgivUYWlNXi)~(z4&&g9*r{^ObSAAw?W(fae4kDKLmlsH&>Q;ls&DPCmjq z_oj`TpY6-O1Bi{;!F*J1i*Ffw+OX$sU5^be_OQjd`d%7y?e^{4WBQC~_gpP#rlw&};$FRTo0^(pu%9pXB<_RXU_SuBz=7{UEWUyA@;mVIdis%-EuOjLxG~V@ zL#{cejdklb;C5LVzKr-B4Gj%U0gRYGx^5wpj~pgjTU)v=es&oU8yig?9v);dvPN3H`g?M7b0ZrY8wv^zq~elaR33;c z<{LURfZ`K&X*`VQqB}ZzD>*tk(u^6?NG6xknX{+K!^4AFGb#Cy#=P3><)UxnruEdf zZy&O@wx*!qK*~CosrOP!C=}9#{PQFdd6KoYHFP(jwb27l#oFv#5smz>tT5S0000{Gw)w|r;wk!L|7&W04XQuN?+-B^ z3w%S@_Y;#IMyvB?(O8blNa!igK}*`=z1Nz(NT9m-X(DYEct?p3TRH*;-D=^`9_4{Kt+JqlJRk=L3m(b z{a6VC5xi(@P*FMfdD|3AQ4wct6T--hX2puD#scO+LML{g0FUSQ;f=m+WL`0eT;{L} z8nd;w&ZXko@8Ix! zJlqSy6zw)wBb`5bnKkkd9@HNgn?ZZSN%^J^?@3HK0|ZF(!b|p|Qxdm$DI_I{HwO_$ zmX+jbbDW z?`4Dj_Q`peWq$@AnuCKw$=&C)C8xq2xLia=2AiAP)m+0_j=BlWA1{J^H7VF)S}0%)Xw8((%uP#qu_+eF?PLSOts3*6@Uf zi(M$AFGP?R6Q(=bhR?MD(WSPT#q}igZS{pbe#-pm`B;+R zAi-#6>w06WRzCTipPpb%RC>D1c_5jw$tr(bqApw7-#z)po6067IcdcZreXeb?K&+D zjcX^3_;ha;4MamDnP1Agnj6l_-_w(iu?P0Bemq2p(Iz%k@oyO_uh=Q(e&;U zINE%jU8r0F!2!6Ct+X%)fk3F#H!7G>eVUd|EBO$57ZNJiv(%>OcrX#?Vy4(-GJ$pO zNf@{oL&yXvcumFrak+P{Jg2(1uw3A$`qS%^!G0tGf$qA+X>BUMM~V93`1|>HmRt+# zgzFfy|6E1&zFS{!?^N0HB1k@wJ)&luLNiUo>!q)-!3T~$2i8iV&Ew7lj}Y*?4}+Ak zJKN)wAfmN3P^(n{nH3`oE9=wDSxPyF8xjpZ8%Hh8#MPgzDGB=9t(*^WSd_?LVMzxl z>}IFvPqe`4s`uv-^TA(gEV!Q9+Omp4K!HIvD}!l^(4Jwl)T&{4SVLI2n2WMNN~EVl zn2T9+V6hFXvB_L6V{AF4=J?9|r&iTx5y@bzyzFcgo!N!C7K1M*f0RMHp#oxtt(+S} zDUuKOcUz|_UE0U7F)D6%PUaGPMVopV=W?dKU+;mUnMSggqS1`xB#0%?)xF zDf>oqp?xyGJAAeyCB=j(e1R3zra7myO(MW5TjsCA>BC7YR|C+26e-{T(;T0gygCMV zVCe1bW#{HDie-h2L98D)g!Uo^tR`(htpnpv-WE=PXz37~cPzMr2>2*mj-kO3`CfNU zMwdZxc{2lsdbqp~zB23z{#(OtoNcr!xHIE-*B=$iT(43Lh%Nd)Y4)zZw#eBjCQkRP zH>Z5Lu>tI7JV{AOXRpg=CtfcZyN`7${8LkP1spBFL+SH7T#8N=eeI(u4x6LwTwHLO zSbAn%O^+UCO2i5pZkg>O&I4iL8%8%xbG?E;&VN_CU~uH2e?+N>(l#o6%P#(}O5AHu zVf_;QF__YBoefU&QNwFVrvE-ag-Y^V;oPv60T7Ic~_xyK>-;xu7IuzPuwT`1;DUf>Y%gmS&K=deX}s33bSE)m$p~oUR@% zoF_agHY1_)*3F?V(Mxe8tF$x{Xb>ZVbkWYNAw1%bxS?Yo1*GU>Ul5gr6@{sCj($qw zbc@kONJkL;zN!o{HBUD?D_F<4%2q{ka&S=dF<_gRm}Iw1v(d5ev9nVdcB*iWsC3JN zA)WT3SXc!yeUn|3YC`U(U!(qf4s0AsKE2o;50FG_SusB6Zx(d^nl8*V`tU}OZ6;GD zL!RDbT-K+83+!-j{W?b)n?aPVFrEzPcNm2UG{NWP#%^jPxnJsF@YLn)jdZ35sER{G z)AGKQ^M<8L>?*-p&y8hr?Y6ZF{KB=LZ-j{ni0`kruX1aG`t7_x8CUw6TGd9G0bGNU z(i{sAtoC5sCx+W8uqc-+&Zg_e-mqHXql?n(HQ3w~3WKx3Jc^l7MKUomw&fKTuk}e&K2U;A z8qG~iMv2i7)bDUeWJ}Y950h7iseHJVm6fTRCUboz2aCVhgk|bPdRs?K{RaB2Uqi+# zo3nwFbcM+T8(`*NnQiSvJkUCcbSS@_-7^(dYfMasnJUZhw0RInyBZo&U(f%Fbpy1$ z3B+*B$kg;J98OnrM>a)P9zI@Zg=ih;76GEz8I_e&j)aCPXy_QP;!RbYq2?D;JLpoj zI{kVlA<@pr#Iym_zRwv#da^4`)TT5$0g}-@riqD(hmm;-@BnNqtiKbktQhal{{;V; zxd1egcn(*=*SVV5kr7VI+4=dn^*#-|i+w#=Sy|0mkuT9SK{9)`C9Fj_7#sI@ufK(c zPFL}(6yLJw)V!S%Sb!8wG(b6rZBVQxn!(D-@WyfRHu>bW87d!DBV*%VF?0tPp)Uujo%87F=;$zJZHi}}d!1%}cOh>5Q^urYbFvYCd)V$|`LhAH z_lKp`$%a}DbVMySo+ZU$Pdjek|5srZbh<+Pe(XJk7#t4oU`RDyFR0eu$>8b3G%$e0 zUp94hrpf`bA-=?-H_E`S;FA{;A!AS&&q5G`*?Xe$mWK77_Wa!0(W@RaB!p2_Rn^dZ zlG4LNFoH5N?m9ok!|4n>IPY-*dc(rrc=5*2lI^+MxxPTPgXz}ejV+sm9|C{``(!N1x`u*cTz*$cI?sqDQ0nOK{5`TB+l2Zj8*#q#Wervd_IEifs;haon%Fu}q0bNg3x>yN?VS z&>bAONcd`~*bNz#mC@ieF)?_7-!Pv9YS?A0eT$B!7CG6paCARtM*R|0gs>dVBO)SN z;;?#Z6@UUiM@7TMCo01NalNXsI;2ws-7X?>^ghIYg1B$lNjUZzse!~?pUEp^%Aly@9u6nnfm-&o#wCQ2g^z`cRA~alzs1%o^j$DGC1t6_DIvHQ;eB!y_zM51T z3y%c0eb504%>81&6CSz=M+~yu*Fmhh$zXpj8XpQ5Q8BnpjEyCnH;DDO=T@~+j%z>M zdgLzUAC_zi7U}%N13qh57}inxj*Pqe?@HbsSU9?V+b3%1gE)zf=4Z}(51?HlCyL*S z$U>E#rBl2{HvE+&Z~yng_p($u#SIyDXrJIx4jO zrH%gUZT|=H^PdM_D`{P2UcUu;sfjc$P=0SKYYyt)izt!{GR1%0of_7Ldc-@U-}5Q` zU`tB;{wn~DuF7gQ$aY?zo|&5n6%`c__h&`B_~?(Blr(wK9zW&iYY)w8|Bcsd`4*H; z!IcqW1aP%5(}5ef<2S0ITFzJ&(5AA_y%ZPVjzDbC^;<}Q80I$tT@@V@d*gQc{qae~ z*GS=@t|DR#&b2<_O`m3|ewW~S$0H%?2kqeU@^Xn5Wt!lV`Ep5scI^S~3^ba zr;8t7=H0tz>6EHZOLN-AK;GB+1zWHOjqBr1^PkAcTHFNI^`o1EmXi$v7m@oP1!Jq{ z-3ov#i_FRj0~BsqRTV9uk`~fAisK`quy-zpe0)BD!MH9i8u2%5@iX`QuFq#*wH zg9SogH<8dJA;?n`J^EvS3EXt`e{P*IWOxsL=Ue;@>%jo&GSnFw8iJ?@%@?ZpV|qTB zmG%43fhvU;#lc{(xZ+j|->S$J%S+Z{wANv}%(1+`?*k93!|x)XIPFY(2QUwB#lfw6 zaMT}#Mt&#y*oDNwZ@yHZpm!Q-?mq4F*guM51=j~^pK0HCH#zn^!<_AZe_^>h?;^Hi zhbLsPrB%Ii{C<3NxHwwyax%zAZgx98yF{cNz@kbJR+&e5hWB+6pr7Rx6o~m2{?@K!UK?4!_W+e*eO>{& z6D|Lsq*SyI+!x?RvE3sJP`>SFyVH(%(sc*joR4_8@P1p-RvJB8!wZx&WPmDD%K>u1@W_Z^*SriX?M4K6#q zf?SAIpw)OZe~T$8vtQFt^729r4-#?978qCWjKzra+BS|9X!-u)InjH-NwNIvSHU$5 z6e=|SoxLLfcY)~)rCOcR=`5!)Ti56(>ng3Q$PcF>9d-5JL82u!`1D~pHq~hA2(X4e z`GqH8C-YE!|8Z*HD}#MHk!1q@1pD$b_AVfQ*qX-tAop*HMMeUNxfY)o_HVtY{*G&J z|KnEh$1w~j-z~Stlpt2!#>c*~Il`a-0|%5P(TA(jF=_mnnVg=|pv-VM;~A;?~Y*vwkw< zTxqfF8H7VD|KY=vnwqA1pBD7ZtQ@8XfflJDig{u#Gur9tSATOEB-4YiLLQwa$^d9y zwl|9Di;9M$tgr9(;cM8O_(P;ft9kP))TfOS84JRXrkYnJt2LIlEvzExTS)wQD|~*Q zkSdVynRTJPARr(xp3m}P;lIhoc@D7E)yc-679Y_D$Nl$OTEsy?LD=UxC7TL|o|(s% zCo@i@pwA9YZ9qN)3&@xE=?gfqL^>izLRj?#Uc7R_n+*As>sbLCI0Wk7O&L3%`EFt~ zAg3yJ+QEqjl|SMm#;qnsD?VVR3%UJj{t-~5b-|X;!prK%ua8-050BEgK3i{TSuk?? z9eGO0+_tx>rjtT!J`;(;xYnUqr4B90 zt2xDC+pF+Bjx+I+P4J!C@R?P;%6WSWhME8=RL)zUzFn$LN%L}&7Wap3X?ZyZpv*XI zO*=d@I!PjmQmi4f$>$IA`K60K@1;T&9W!?({Q2Lp-Xci=M+4f8I#w;OGX`NlFd)-DF#bVBdla4j%1sM!C4)n! zH)+YQudgpz&gpz1tq~j8f16IA8OMjhmr-Ek>^j#EnW;z;{!2VNJb>@p$d&SAg|Ha`#gZ~YO zH=yE2Rq?-}YVpz9hn$@{gv-ks%Dq`A*v!_eU+cVQdH zpF2Jvtad-1yFupBJ|7O;lS|*l*d2Q@$_)e9NcP|;5tgf_3dA>1gY}~gcGBuKNaUmm zaID+K(9BbVBa9pSh=On_F6@%ge@zvii-|^3^E^!l}A+j8I zpaBB&|I$i+6kDftDftlGY4%q>kjEIglV)+M*+gkk##`Pc)m+HmZ#-mu ziS{{-Jp!;+zJ2>v@36@?#{g!yihNf4{|S!wKPx^H^}IyyGh?HQ?RiIX#}b;rtWmfs zF)^)O+HkqEz5Q#Or)}=1OGb9K@#`9Ejbt5x2iZq}(KS(Qur~haE=1&#tQhBo+4kUy z>L%0_-eiU)*YLvhA%*mMJeJcH{F5bWNY*!vvH(<*u7MTS9;s?;%XsktiIQ( zY&<+WGYeVt(Cx2(uQ_Fg{FaAxMTig>Pw-AYt%goZP$y*y4OMZjtbmPSFzLyJpHYd4 z5=Db!uaGYieu}>iP;gu*LfiR(idT zwN{hyjg5UV)=tfn(!mwJBkDd2>z-yqM~|2aS@!43p9tRgFvY>KlTYuicgTxos_22Q z3Q~vCI{_+7Dw0BcQ!#C-&JJ^ZJ<`sxYIFQi>GQgZZB*I$Iggop%fC)TPGmw8#lOQ#`P_fW@cvGwNXGV;emgD=3vlR zHuKc`j2?`;*FN8LykIe2;B?u4vEnF;qEXd7NmdRKL?V;OBKakxv^jCkQ3=0!2f}7# zz3&NQ@WF?7wZZ&AOn@^7#yB-??ceF8*ufJ;Tootjc> z8=Z_Nz0yNuY;3I7>wdWOsNO9>MqW00mj%cv-8sfU?}CkV`UjG44M)QSxV?vZO9}@I zO?8e(ji+Pvos_lKz`nq~PQUOu^APhhlb4t89u#VqOY;!2`gC9O)hCibh;ZS|GuX*W z!`R3OD8bYV4#G0vA=e4ByJA3wxH7%p6a8p{iK+P82P~z{G~eLV*)<71@$+}5i7CN+ dEYSOaYIkZL8Jtv?2%J8HWIiaqFOe|x{}0azk!Jt^ literal 0 HcmV?d00001 diff --git a/frontend/__snapshots__/components-itemperformanceevent--initial-headers-display--light.png b/frontend/__snapshots__/components-itemperformanceevent--initial-headers-display--light.png new file mode 100644 index 0000000000000000000000000000000000000000..bc602073b3194f47507f0e85f52f78889c9c294a GIT binary patch literal 7892 zcmcJUWmH>Vx9)=!3T>gdLyMH+r8q&VP@qUD8j2TaaJL|Z{(%-PUL?4O;I7535Zt9$ zae@RVn}(X=JyJ$e5D0Wn>CG!m;1dnJ zY;F?)@9FO*Jb({87fr<%ppqfxEf9z`Qt8!mEzi_FxQCY3)M<}=#tONrty33W1Q#__ zL=^lQuZx=MeQ}=wnv3F_oH<=Ki8bN)bQZqZ^LOSdT5m z%uik4D&PBo!GtvYo7&<lR#IAVG_G>TM1wGuKVmA7emEnyZ=#d6Dn@8%Txm8tF z-H{C0Vm{|Rojv|4P$&rt*!}mPL4#jke{>aT+kgt*=aU6A!}`SSZ0*Xb#r7^H=v!;- z=7#dq)gDT4)1k;%Wjr0zt8J#JD4#0TRC=H2zEbSc(9n3(=)QN38RMxQ9erXoBr^-H z%GXBdD6A`(+KU@81^qIxaq5*bVZyt?l{WZ=S>Q zQa6WrOIh7wZqWftEFn_a%@#FUsvzZM4{{7H(Z#HPiP`cdr>MWd5D&ZgBD+_S< zS|7c@J*pSo$IBt;0lSy=6hGu4R!2udiS^e57WJ|#tIJKeo7OdVYimXj#j?n^+v$ZC zo4YfvP0h`{{SBng&RAPOn9Y%F9pIrR@=*xenTq(RK-`zc5GLiIz|UznuIPOOK2-+? zAx2T#2es&hW<_OX>j>=8$qC*AQyiX7arkQIVJs*vF0R)+qAyk$!r0W*V0|LLKYu$- zt}68GXFzimbS@Z#dsb2DQs;K8Q!V6u*rg*W1%|R9JYj|uzHAwvE|uA~Tac6aVz`0& zzacsJ{cv;)ML}1a9M7jK{ORD?pTQL5Se_s|d!9|Ri1Fn`%#eq|L{=&QKx^!?8+8v_n|nwq0U;leq& zItcx`Cow9Ce#>DqA~Tg|#5$!sxM!9dk%kjQ2sFDXfA`u0IX^zo@t;APk0kJqJF+qkYP1&4G8~#`qGGw#p@xOpMbtMJi>=X|Bpx0T`~m_}UPsg@ zxhwuFO82n}3l*K>uN>??kKDG$Gi{~>KQv(OTwGj0PQL`onJq0678e(n)z+>~B8}ID zXQUD%Cby3v#zSeUJ&TL1xuZc;+-lAz*5b|hunOx5QmHp=Xx5Kb8^1Ri^Z$i*CiKL7|1aA;ORb z9|>__Ca*X02h)Sph#vS2=v3g&8+v&l!pNa^@BzaNz`^&G?+Gkk|B!CES z`SzBXwu#zKe=aWOw?q|sH%gi-&>I;ofIQC+9^RoFEPdKdk1U-mF*|7d@|d50?F#Lo zsi~=~F&y&hwZM3Vn8%`RYASQRGgnx;-({h=S5dTaIbXsk@Za_q8hhYN=!5mZdhK1U zp|N6p3eis{hUNl>^eIdM7iNdL*RrMOY-;#ztBTjAfzM3xzOK;R{uS4{R-^ymzKmZd zxb%PgjrxD7;*X62e!ivX;=BKYC(H8|zQ}9p|Lu=&##elqZ8)c>4Gm&{G+6ZM8Y4S8 znyF&BLy|xC=*?Euw2eFu$o_&K6vmXT5V?M~gqES5i$@Kl$5-YDEO*G49M<(;2u~_> z`7m51&t{BVyvG$4sM;`j%_O#x8YbsmnmKHA?z4HASy|bH!W7<*EM1+UMclSsL&HM9 zhKgeY^`z+hb%uV$&vs*V*HyC3N!C?j)NnG)y1B&r_AL4}{5q^Z5)*r_aIAr0l}tA` z0R>t-&glpQH<0bs{YeVoccx<;YwM~sg7zRu>BrL*76^XG49Pt}8D0s7c6ZIFPX5hQ zr4_0Rm>BCm{0F6U1ng|Tuat*}=b^1PVTm&N2SeGJGQaG_43E8QJoTud$29wIQ>5W5 zD`xfTiIWSB9!{_DhZ=RD?SupLpLVuM;d;*ir+ zIhRy1o0T78$0HS)+hFUMSS?NjSxm9=+I;;nf20xqv&(uB(8rH?A|}sTtqF?XI5`P( z<#MIUxKXpQIe^S)h1Pe~x0ogC$hG?)+G8*ITr5$s##9UpstO8^isD{rYEr%{)O1TC zHbJE|b3WQrjE{K*TnVFn-RIj-#VBt3M!~XydEom)Hqd<*nwP+(zCL0lHM!0$5i7lh zkM&B2^zEagFK!mT`yC7~hcn3sV_fnX03q6$v;$fD8HG=TMMf@P2i+;qjFF7{@w3FR zv05;a5&s(d=EA%kF=6fO?7V(bczkpO2>Po`M?4Hl*6?sEyRPm>iiCsH%Gx`H2*x%b z`iOAhI5uCoEi+tzEHK^J=%h&h&ukou5#O)gCa>NKs^to5e=Y4UqssfZNq`10P0q(9 z%Jp8l>+a8&?RansX|B7T$vGNzy*Ellr;c5! zFAWXjM`ti&&R5q#l`*lgvGXOnXXUF1i# z>>oV2{=g$C`G!&2_3Ox`y?x2(wwTkXL#@MRH4<8DH<#D1-sKdG`Cu5YIcpj}FXzMg zdZS+B@rRr{3|pg<4z+Kx6{6y#-S#;xHa@T$GJ(xhE$0rBYwELG|Bp zpkoU5y5X79yjR|<-KyEuye?R8IlDQz(VB9vZ#GjUDb(r~qP31E+xp8JQ}D6_RK%n) zLv3o%o$McAD>*?ywea*OWVxD|?^TW?-$#em`UPWv+($+XsyG`|3c9(SUtDEs<~lB4 z-|}f{E~_g0?Ko?ysl|gK-Q|fIlQ^?xOb>pf%1EHm>gU_v-+woMsyjk!#3)@#h5nab=F&5@_pzUfay~_HKpX!5$x#bfVa25Xu-Ot zB)r!x`MA8Ya`)%@fbMyZJY@6k&(YBspk@HlR^|R{>@`A1;M-Dz(xMFFsQ^SqU1w5z z#$k|_y`f;&CX5!vgw%$+ySs}=Mn+cH`Ib*9WH$sp)ma)DiC!N_e4s?x=zjB4v8_W1 zT>MnIR@@s z0|lZA~HIvX=biVc{!t1kAwR;P_c>=R6`;lNXwyJukph7iuuhK$1USWC&=0* zQ3&EGmKeh!W1D9y#LpiHjPiq8U3ECWR0nam{YOPXfryrt_By><%)%n7MXSKa=W^w*nFwg^}vTUw=+3338GP8+<;U# z6F9)$&=;{#vsyi6)HXH6W}MDiCkeKZ4fm&&PHOR8O7Q4RVHJ-rD4=g}J?-xPiWFCj zxS{tTmjDI|41piu8ASR&A^XEwWhsFoeSUtvyt5O6(Cq8sz?o~xh&@mD%T|cEog^8M`Mg7; zuC82CI=Cy0&9_VIqUlEwkN_tcq>=6G+7h|*%X2FFX_b7WRhk!(q9SoqQ)A!F?Ck8y zMt<{5a!I|_W4ZSuiEJ-VG+6G?@~>bDMI^!X{pr%itwuM!rv1zkTd+mk1RC$w1cwqO zt-nmuLNkm`HJZ-!%pH zw139KKGvWcUXTEhpQ)wFdj$0M-cp}Mwu+gJxcxOH=>JNb|BY9PYnUoo|HR_Cd~2`u z8x1zg7$XnIuK4Sb0H9iDM|=C%|F!e^PuPt^`)C~YEDn9sHQER2z@hqVYd)oFnjqFk zY3DpQU8v7jeU!WnN94vQ4zNd=y@{%tyWj@O_`%0^ZW(@o^@TGcc^(`gegIjOeF_JA zUL{~xPq}t2e@!2$)|u&c%2Myt?qEu5MytR?73>en4}7&plR*I#3;TIQ+xE4N!-dH=AM=uCWB= z)lL~M+(LQ(sEy5b=*4jU8N8wd{L@0iW!XkgGXRfkwhOZ-b-c2Abx$at$f*bB6T`bw zvXpOSSPamunJY#yuQq$&x(>~`9i5$Xps|l^=MTi#e4c2v1d_Ae2p=9UX+j_`dLmis zypCx_*e%PgCz5#?sa`%BX}WNE6Vv%e)!>JiOU-<(KMqeJoW83oOnxl$3wNzOR(Tq8 zJ3+|!UDr^Kx?DD}cY%5lGCnSvr{-Jryi)jvo=VqFxcd}f;R^tB*Z!=n%(Q(WCf~1g z-}43n(&w&IdK0=?Ku=0a3Y{upN%xb^)qybn`IV#y3pqW?8xoUp2+SuyuCOr5q-JD9 zd7i{iC4oKUK+j)>^kRXHkX2k9&huX0eC`wpc$+97c8=H6PMYt>K$3}mte*km^{Ips z%+)$r^nNEVFi_k%Wc+-#grhU|uS}D2vBEpptDSo+AaKj1FXm`4sVAJFOCm-5$xavp zh~Ky-u%hCr0C<%<+~PQ)G)dl{3{U-WvetV#%f8U|$_b9y$EJqB#b z)}^a!XHQ3x%mr0F68(N0^@3Z(=UnkEy?nHQL5(ILee<&O8obo!7iSqTk0oCB8oQ;? z{Cr}M{epMA{k31-f>YljbdZj&8jk2i*_Jt4^$@bO>(e>A`2}f^{9V*|)u<;DQ$sHIKpP|^4U%}Ds!>1o#U4x*z&m2+W=8c*TAkEI} z{WNOK@_k5y+N#~ET8}?K0-fdTmu^@jbk#v*%+q1;X81cuvM_*;tG|CgIAe@eD^xGv}smw;X6B6e)%QRTHLOL zOhrWnZf?C2)lyf)!EPq)e(LUgHHu0s@;wv#2nJXHn0;IKWU!pCQLf8|+N*z1-!{hzQz!D!n}h!=ox|PtX7Qt(6Mp>A;zMp1Y>Y#6^9yh^u^}uHF zTVYpS^5;zD*6wuqoqv-z{_r5eh6YZ^1^0e$V=yY$oPUk{Q1 zApWyCV*b(62pFs3$ciwp^WE6-BTwmJ{agRXMDA1VPV;4n<&~-F!zKUL*q9j2z(6@p zUTagD2y?C+Z2zxE3eqWgt3<9@vPGWgz|Jkt)Mj}{ifHadj&81<&~2I6E$ z(gf3b8wQifRYlpVZW9J3bKE?6{y&?i)BCT0@Bfd;+_21KBpuoUaTRE{+@|F;_N^uZ z6!mS|2e*lC`7h!~J7A~&-pqKmywY6|ZGM4014nhauOA;-t?xoj&JUt&WJ;X_QLZPG8?D!Tn z9o+x`mHUg$VcA~-v$EKY(8qaAx4i%#yKE`~$m(aHO#sLc6v?ff;^}H?XE)gSZB^-w zEi_|Df`NGPUYfw?>kH&0}V@qt`W5 zVNnk85OQd``73OFd#notk}z?WVfi!HF5RSlm))I+r3|gQvFfm>1ld8!m&ZEk>J6?i zq9*>O*E4fchniqmJt|Jhp5#7&%I<1p04krNmpW?DHI-K(YAPIcn3$Na+fjzBuH{xJBg)v* zY-J^O4vyH@VOeW(hLC$q;+z~JhLL|24)irL^dWF*ZS4yuH`@v(Nrd09Vm`<7t||25 z6V%}4W!uXT5&LWUQ54(~vl;!jw@`55C9ESPEggJJCzzqEw4z~#4>YAG8zil7ADnTl zN09)|zOSz@p6(yiz(96J#{Ho7TmOn)eiVRA_KQtj-(nRR#Hf!EsTs-ll$eU1cOmzxC?1m`R#I}cvI8tf^H5!RM=^( zuUAG)bt<(kv}8`zAsz_CJo29tz6C(aKz3US%^m0w(Z7cl)tM>hyJZLji^up_ik z^LQk{-$bRa8a_>zW$J*rxfA6|PjXiv+gw~x_7i`{$x~&jHxv%uE&x_BlSIU1(XW%8 ziz>UTH*?*8xBxF?uPGBhGT%OdunI~y_GoXHmw@ z2@HbOUh^(qGK>PbmlhWn>a!b^9-CO+K!+&Dw+9{59UPvvkG2PPKtq(?bjLD+VyU(zfCkWdV^Si;@&*^4nqsURa4Qfs!}^$@FqI4ZtwbT?Wj5S!^Mi)mT&}LJ zEvehlNi9yE#QstReT#Tq#(%08LnMM46W^*<>%6x}?+5PkIE)7{N zMSXn+^B%R|@*Kf^7b7NryLX#YI2OyH^T5DB{G;PzhGGBv+-j-cg8<{=b?_TcB~h@{ z>^e-}1wgO)`s_zCK1A3nd2h9{nwrU3r?$z-1l1+myn=$SfEWJqoSa$m^LLWibHJR& zB_vQXHO361^7^r83@qiKi~#_SaceQ4f0wNWmzLfeOh3y_D0OJY=8Zt&x8yU}fEsE6 zGc~2S%Pjdb$J07c&KID0T?u2Ln3R>3{l*m|dH7(M+!yP|W<{*emRd?hT>jVs1{`RD ze^mPQ6kY?cXLMXnmLK*~6gv8&WTD{zP^eE6MO>;W;?X@@$*|xR5gOkMVJ-5Ba!yNz zgalebU?*&eSVS7UxKQ({sSyXjnY(O?uj#OR=jf*CxHYw-uAFLfa-w$DPSOarN8{s* zJv`Y82&=4|>^Qf|jNO_$v-1jR+%kRtEi^P!#md3f_MU%;q&23e4pv7oy+b22501%F zUe6{CD~VzOGs0ltrsjrYXY`ck6};B7W~6drwxXiKY&au;@cgWMZh#I926u-uSXAj) zC`7S-`|=Xz<8ys*a?+t)xV9RN6Xr=v&QNa!Jk&pLQ-2O;m_Gh6ugA>NvClI|E_``KXN@i8|0z2H = { + title: 'Components/ItemPerformanceEvent', + component: ItemPerformanceEvent, + decorators: [ + mswDecorator({ + get: {}, + }), + ], +} +export default meta + +export function InitialHeadersDisplay(): JSX.Element { + return +} + +export function InitialBodyDisplay(): JSX.Element { + return ( + + ) +} diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx index 10c4cb545efe9..76a28a190917c 100644 --- a/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx +++ b/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx @@ -364,6 +364,7 @@ export function ItemPerformanceEvent({ ), }, @@ -374,7 +375,11 @@ export function ItemPerformanceEvent({ ), }, @@ -386,7 +391,11 @@ export function ItemPerformanceEvent({ ), } @@ -424,7 +433,7 @@ export function ItemPerformanceEvent({ ) } -function BodyDisplay({ +export function BodyDisplay({ content, headers, emptyMessage, @@ -454,23 +463,26 @@ function BodyDisplay({ ) } -function HeadersDisplay({ +export function HeadersDisplay({ request, response, + isInitial, }: { request: Record | undefined response: Record | undefined + isInitial?: boolean }): JSX.Element | null { + const emptyMessage = isInitial ? 'captured before PostHog was initialized' : 'No headers captured' return (

Request Headers

- +

Response Headers

- +
)