From 50df39c95b7337c9457394e3d7f6f81a4af25795 Mon Sep 17 00:00:00 2001 From: David Newell Date: Fri, 19 Apr 2024 10:28:28 +0100 Subject: [PATCH] feat: improve inspector tabs (#21639) --- .../lemon-ui-lemon-tabs--default--dark.png | Bin 0 -> 7021 bytes .../lemon-ui-lemon-tabs--default--light.png | Bin 0 -> 7031 bytes .../lemon-ui-lemon-tabs--small--dark.png | Bin 0 -> 6839 bytes .../lemon-ui-lemon-tabs--small--light.png | Bin 0 -> 6809 bytes .../src/lib/lemon-ui/LemonTabs/LemonTabs.scss | 8 +- .../lemon-ui/LemonTabs/LemonTabs.stories.tsx | 7 +- .../src/lib/lemon-ui/LemonTabs/LemonTabs.tsx | 4 +- .../inspector/PlayerInspectorControls.tsx | 301 +++++++++--------- 8 files changed, 171 insertions(+), 149 deletions(-) create mode 100644 frontend/__snapshots__/lemon-ui-lemon-tabs--default--dark.png create mode 100644 frontend/__snapshots__/lemon-ui-lemon-tabs--default--light.png create mode 100644 frontend/__snapshots__/lemon-ui-lemon-tabs--small--dark.png create mode 100644 frontend/__snapshots__/lemon-ui-lemon-tabs--small--light.png diff --git a/frontend/__snapshots__/lemon-ui-lemon-tabs--default--dark.png b/frontend/__snapshots__/lemon-ui-lemon-tabs--default--dark.png new file mode 100644 index 0000000000000000000000000000000000000000..b79154a5689f76591bcd9e17ead163fea9f7093a GIT binary patch literal 7021 zcmcJUWn5HWx5ozo2~m^|3F!vu=8tqscO%_M4k4j9Fm$)lJ%ltO$j~j_(#;?-G;@#7 z^W6L5zP|U(?DP5T^EtED-fOS*`>qXntFG`AmjV|A0zFkyl+^-((2Rj+9qh-zFUN5* z6d2IFv=rWesz+b$fk2eZO0v>Ae%VLM{(-8qx1E2+ax$D18D74nzBF#f}|j z0m`4l4WlLd@P9DH5+#Zz-LH}(+VH2+G;aDj?1B{3xR; z$U%UzBgHGAHLSi%9)814wknBY?pUGeY$2CNu#LU+ctFw6509w4_W$K)6??q%>!Z~C z%`GetX}B182|F}{WO<~mD08`aRW=oU`-rJRg6drVcvjO?Z>_M&g*=>(EC@$uPvy2c z&L&T0(abNMoJx?0n@72t{7^is4Oh(+Cb8b|Ma^F|0h1U>fqgG1z2e!^#%kCdpP073 z4`i<8;255-L8n`O2#yV|?8)2RLDjPihD=o*Ku|j7hewA7t8f4Va`&YzUh`Cnt76RAcDe z93lUOtD5ql^->7EJLCpR{sgZUvAe%(!De)3^x*$0N z!~v~KE@uJtD+djR$1VI^*%kiz_cmD%u7wjCoYZCkyEm{nrrqM7i~`DPqP#TMF=Z@JJ*Dv zci@UIdD4iN)k?3elamt$SR5wT?taa2S(&3j_GtMY1BC;)d{NW);B*2ebpDWLHdBHt9r+#MIH{(kkn6cVi z4Cb5NzTW7toM@_P3~DC#g&^!SW|6n88XEcd$LoVzlg_J+I0##{_v@yuC(JoNb~_<+ zGQ(M7+HQwTY7}dShw#FI$@dH2+a0xGxoPT)vgT40{G}>IQHU*3=AKZaB073{nOm^g zS(bzbO~_Jw_^q$!)~Q3VSsQ_vm~r?yx1+MI-kO(($BY9iXvn8GCa-dGra^@ndAu@e zo~B-FcPZHFvsY+Z>?Somi#*+-mGZ(mQTws-GIphV`p0OUi+EI`tOIF zJMTRrr`ZTgG^gG$m)rug05oF=iFpbE}3heSAF&r&q7{^cjQF*azPJyvx0L zGB?b<6=DhtWm#a-?cq&0T_$Tfy@3tMIJTCf zdwDkT?ew`(rOg=*u>|FoFl{>%GtN^Q{RBQsQ>O5ryey70GkSB2iyn7Zc>!rKqlQ#U zAvd&>?j^%!{c^?C;BbeDa*47s4V>I#Skr1J+Wqcio0xT z)N7di_*epbU2aU{_u%bcZcZ!CeIEY!!g??nlqulWJ$NF(VI-V(b74-TsI9GS)Z{7+ zTe<&}Cur(+Xsbq9Z-)rZQ9(~+NXWcNE>N(3Kcl9m_72q%&hN6&+_`AaqFdg~_ihkF z@UBj25!re<&p;EnG zj2$+#fwB8XUPJ@=moehKw9;#eVIr)7d)Gd1VkzU$eQ9mlid{ynf&zEjRi7|`r{Z%Sbm(TjX>W*-dF@t(2`ew}{k$O?`Mju;_(xT> zftLN)`$P5+(e4O7p$Qq!*@mF_bqIT)XPKQ;qS zuDB8=Eyp4AOl9yzK(#89_3sZI(3b+S;S-T)=_JpGN3xoDxOK}rMYf5B=;^g@1w?L3 zfVajwgQ0mmAHUx|1Gyi}$Y;N#A``WtRfvV#&t~l&C!1uCOT4v;ncZa#^WZ9%`q`MA*(Ie!cqdv=24LY-^>@(S*_g}Amxttg ze0aGb9YB;^1IH0ai|M;!#Qo*^Q4x`ba^ow?BNy=YXw7{-vfZlAiu{O}mWT%bnRy3w zfhC)M21tU-yQ^;rPK%66=puSjeo9rGVM2tjZfW(Fm(p!SQNTg3Pr?EWvP14c$TET)9 z_|`{UQxiPb;Z11VBv(hz8)e;BCrKK00QsWjbXA!OrSa*Y5N@u37h6-rqN;4iFsz9@ zKerTbcVa$uAa|5+7`hkTJ#lA@oAl!E(8{_Xy*ku0jO~#>O`B!)Q&i`JLxl{hVL8K#A1-Sr2~vt08g>^Nu-s4^gn3d5#$gs$wcPw?eK+_%;3X(nJ1B!hcq3+~sq~g| zVHtdB&?ufZS+MZE-{l;$aKKHtAVPf#mr%yUGI5 z$kNwBlc-P$uy%}m!J33I#Cmr80i8!+W^s$SBronyOp_~`gYJC~0&}2Dc)rs_s_f8QNu;hiAytX3m#IPKi^5BR2!|>J2CwvBdl9rXQ>rmAMxSw zQ~JgJ(!IwL6#cu)2B?f=El%q(k*6}o{p6GK`Nfpy4tOfJY-H0+A?DY~j^tQeW!L4o zP)kk*@g)moEb@k-AD<25v!jwQU#a{Rmur?PfE0eBPiiL`G7(y&Lc(Kr{D@jIu>U)p zK}%cvI)8FUSXA_FlPgtk3}un8c!SZ%DUCkwNC+>DkmHA}EcPVk80)K(E^+_FK`GSI zHuA{t?w(2W>l=Tgz+cdbg2)3Zb}5gf<5h(!y~(9ERuYo!(rHH$PP0*dloG$w0vR*2 zf~fCtKaiPl44Vu8@ggMk4d0cC{FAj`G1=j|468IQxt-H^`&*~cEp8KeboHpmZ`Rp) z5ZG4|<3-P@Kj#*S2m|EdGS+|Z%F#(efk9fW6(9uz&nF_ATUvgtosFeSuzyZjt5~~! z=%BU1skeLltJquRB^8zZ+!tzK4XyzJbYviMIk~iOs#2yyK+zcWn^uZK$Tgy%0R3p8 zF<+sndcm8mP2Xy0`{`e^f$&>sbWk!`dfLy`IH0jsKd*c&8Sy8N)nLM0x`M(}u(zDN zhVH$;Vw#wxB6N}aU{wv;(&!n^VxS84>38|^Qq&aO~M~DLsybP78(bc`>HnC7? zKEr1F44<51iJOV9GGHWPxvLo=UuPkG{Lx9epWvr{mE|@RJ|NAv0k zvt=@IxB}R#k`~ZyZ({H(UesAUE8?u94sQb^sC^O3;X6XFNInhs^z>w~21~=pM^4n? z)a$Z`uK-B0o5=UimJCY8A*?@EBs~urDJ#AG;l#=s_tzx0hN!%sY4u``?BQ6KcE|0{ zfe5KK<>q%LULDJbiyM0jcqI)4fgq|QhE>~K-15s`eW>@`Yv*H)?NNZO>g7&nN6z{F zd<-kM#I*bNp~$1Kx?I#sJy@)oiwo~w@W6seq)ji_msAAfYdkF1{dKYzZ=d(nNhnPfXRzmS-m3~zKv7|xc6JI~gT-~12%5}}MQ0USm> z`oAOK{~$H4nAl?eD8Sxp<{BP5qs#yOY$6ZfI1lJwHsbw5WDLB4{=7%;IYt*qwwCz+ zd1_oHaflVM24T?utydxFNl0iSSs4mx5kVfOus*c%o2_JvTjLvd-F0OKrsd`kl}(0fHDY zU%4v1gu6>!-ju<7b#sVE?hO0SQ-Jcvu` zL4WY`b?W$~C!R_Y*RNw(Qe|{>*T$)XV9uga&jIQ6^_(r+N~^rVp{-=AS5i-{v7uWz zoJ38tgquh^DjzR5@ibjyF+?+&75gVU)P`VdeS_ul?lN=W5@b(7i1W`PRfTk-eVYfX zA^~Uc?F$=%US1q_oa3kf_Fc`w9+H1pJA80@puKZsgUOukQr<=c@ek^r1P`dm7HPft z?*wUFcScNzzZSM!Y&=3AMiDi$T0!+bh^P8*ML~;b_l6B%bQ#gL6nSKX) ze2y5J=mxiVUh^N!eA+m?vwC*M*LNM0w<>bHTp>1rmEU|bYZ#1jK__NQo;A$XSD%0V zw=fabMy3n-+E%v+IvV5wF8%8RAcnShuKgmja=LPO`HYqkaV#pm&(L@i*7ueMh(mY7pz^A_YFh0A!h>USm)hiQt?b9 zMzz7+^0s5Rg97B%*47=zli_QUs}m1rT**9q^qnDfKK_6X;kCT8w;j%u(MAYjV2)S~ z@4f(%l^VjYNIAvk-L4jpq`%5lAmM$?&&jUVgMR}EPtIRTqg{+KUg=M%_X%b>@v~(L zhR`j&X0Z2=zHQunjCNkQ;e8n4MaxjdVOoV8}Fs;N0Fw_<(|xac3T%87})SiE{BI-XZwvs2PiDx1>>9&E^?$KKV6DXqh)7!?T| zwI?6-ym$~R1T307j9LhbHYWaCF!iTM_NQEibHseh%&OQH8(rbw2NlG@NGN`VzV&^p z`wDCy?Vo`}#smhxQwCyCoRNTGeE_DeWa&o+rR>iVaG=BBBP;KK{)|#IK0&gZ1!blS ze3s6$&uwA0Ex+;a`c#|UQ-1jLbidZ-Phfe_E`&h|PA&F1ZpF(Fum}^6PX#B1}<_c7dp6_tD_>Qoc6wofajzYDHjE>q3`x4GKfMGt+Q1qME zNHLnhANm&!2(S;d^&*RaChv=H378Vm&>{TMAOGB8vK7<1c!Xg)HcBjR+8|R|e5zkb zNn5iuB71QlBl)%dm-wz_B1U8?uA^btp&my^5_+@8hF-@yHi|OCHTiewTh7kdrnML;`#s)f8LFQclmhx%gT!)6OC_9FTOn18bn`FB zdupxw8a508GUGrttLNQg4lh zURa2diHzH?3^~VNzB^6QcKs+Q$@MhDC&+Phhzo5vXpN|mNm$^%-AkSmubk#Tp@0Rf^FAx3B) zOme+HzA4h$JJ+t5c1w0|(-1r5kmysxRy%GAxxJtXOG{%O`JPqdw<7H8GPu ze zH`@ec{Lxoe7>P+VzxVc}Z8o`F^5Q53ejm0xc|3qX9$^4dU9tPIH)J8@qQR6YY2v7Y zOZIq44u`K^dP67YZ zORZ#slz1;bk)%W>Ue~2DhCK*@0z19yvVOjv%(^vkY|#siIb46X^Spx<6;(O`ffR1h zpjbd016s&(sabPjOSvdw2QugZ{6wo^2$SX!YjQ`O6Gp@r=W{4hLFH6Z3CVaq zZm+0$czPBB&C~aX<7RE@(*N37mEhZZ9yh(*v^o%UlYnbRUf77-(yi=EpdtNW#!#7s zHPqCB-kFoAd7eyj^i8ZWIX#rvFpUj2pykaKg5^BJ#mI1pkmCd2P)8XLFakR-f&q?{#y;Y3ARki0x@pT@0b&kKt1$Se0vMd-?( z6`x?xlQ*efw93*&=s)nj8+5-JHWc;Qmp3w+A?}86L>%i63Pd{B%f^T#y4c1bIj71#y-BFMzy9`I_k}?lYC-?>}N(2-!^5ARf>bDkF&Jn6i-TnR8goK3r6mvDN!XklNg$pL^ to^i1sP~bj__A|<_85pJiBcf4QNtir5??7k7!2KCWNlsn1`i(`{e*t!K>*oLf literal 0 HcmV?d00001 diff --git a/frontend/__snapshots__/lemon-ui-lemon-tabs--default--light.png b/frontend/__snapshots__/lemon-ui-lemon-tabs--default--light.png new file mode 100644 index 0000000000000000000000000000000000000000..6a788a1681776ae9845aca0b8dea068863b84404 GIT binary patch literal 7031 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 Cpw9aM literal 0 HcmV?d00001 diff --git a/frontend/__snapshots__/lemon-ui-lemon-tabs--small--dark.png b/frontend/__snapshots__/lemon-ui-lemon-tabs--small--dark.png new file mode 100644 index 0000000000000000000000000000000000000000..a2f359839fb6188f062bfd561290df627881f535 GIT binary patch literal 6839 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 literal 0 HcmV?d00001 diff --git a/frontend/__snapshots__/lemon-ui-lemon-tabs--small--light.png b/frontend/__snapshots__/lemon-ui-lemon-tabs--small--light.png new file mode 100644 index 0000000000000000000000000000000000000000..27ffbe5d2758e07b14b2c39dc36e2d1a67766515 GIT binary patch literal 6809 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 s;ar<~j8GY~` &:first-child, .Navigation3000__scene > :first-child > &:first-child { margin-top: -0.75rem; diff --git a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.stories.tsx b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.stories.tsx index 9618ab6215934..78e8e8b838757 100644 --- a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.stories.tsx +++ b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.stories.tsx @@ -50,5 +50,8 @@ const Template: StoryFn = (props) => { return setActiveKey(newValue)} /> } -export const LemonTabs: Story = Template.bind({}) -LemonTabs.args = {} +export const Default: Story = Template.bind({}) +Default.args = {} + +export const Small: Story = Template.bind({}) +Small.args = { size: 'small' } diff --git a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx index 2d7475a415216..e0cd244fbb705 100644 --- a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx +++ b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx @@ -28,6 +28,7 @@ export interface LemonTabsProps { onChange?: (key: T) => void /** List of tabs. Falsy entries are ignored - they're there to make conditional tabs convenient. */ tabs: (LemonTab | null | false)[] + size?: 'small' | 'medium' 'data-attr'?: string } @@ -40,6 +41,7 @@ export function LemonTabs({ activeKey, onChange, tabs, + size = 'medium', 'data-attr': dataAttr, }: LemonTabsProps): JSX.Element { const { containerRef, selectionRef, sliderWidth, sliderOffset, transitioning } = useSliderPositioning< @@ -53,7 +55,7 @@ export function LemonTabs({ return (

- {tabs.map((tabId) => { + setTab(tabId)} + tabs={tabs.map((tabId) => { const TabIcon = TabToIcon[tabId] - return ( - : : undefined - } - active={tab === tabId} - onClick={() => setTab(tabId)} - > - {capitalizeFirstLetter(tabId)} - - ) + + return { + key: tabId, + label: ( +
+ {TabIcon ? ( + tabsState[tabId] === 'loading' ? ( + + ) : ( + + ) + ) : undefined} + {capitalizeFirstLetter(tabId)} +
+ ), + } })} - + /> ) } @@ -97,148 +102,154 @@ export function PlayerInspectorControls({ onClose }: { onClose: () => void }): J } return ( -
-
-
- +
+
+
+ +
+ } onClick={onClose} />
- } onClick={onClose} />
-
- {miniFilters.map((filter) => ( - { - // "alone" should always be a select-to-true action - setMiniFilter(filter.key, filter.alone || !filter.enabled) - }} - tooltip={filter.tooltip} - > - {filter.name} - - ))} -
- -
-
-
- +
+ {miniFilters.map((filter) => ( + setSearchQuery(e)} - placeholder="Search..." - type="search" - value={searchQuery} - fullWidth - suffix={ - }> + noPadding + active={filter.enabled} + onClick={() => { + // "alone" should always be a select-to-true action + setMiniFilter(filter.key, filter.alone || !filter.enabled) + }} + tooltip={filter.tooltip} + > + {filter.name} + + ))} +
+ +
+
+
+ setSearchQuery(e)} + placeholder="Search..." + type="search" + value={searchQuery} + fullWidth + suffix={ + }> + + + } + /> +
+ + {windowIds.length > 1 ? ( +
+ setWindowIdFilter(val || null)} + options={[ + { + value: null, + label: 'All windows', + icon: , + }, + ...windowIds.map((windowId, index) => ({ + value: windowId, + label: `Window ${index + 1}`, + icon: , + })), + ]} + /> + - } - /> +
+ ) : null}
- {windowIds.length > 1 ? ( -
- setWindowIdFilter(val || null)} - options={[ - { - value: null, - label: 'All windows', - icon: , - }, - ...windowIds.map((windowId, index) => ({ - value: windowId, - label: `Window ${index + 1}`, - icon: , - })), - ]} - /> +
+ setTimestampMode(timestampMode === 'absolute' ? 'relative' : 'absolute')} + tooltipPlacement="left" + tooltip={ + timestampMode === 'absolute' + ? 'Showing absolute timestamps' + : 'Showing timestamps relative to the start of the recording' + } + > + + {capitalizeFirstLetter(timestampMode)}{' '} + + + + + { + // If the user has syncScrolling on, but it is paused due to interacting with the Inspector, we want to resume it + if (syncScroll && syncScrollingPaused) { + setSyncScrollPaused(false) + } else { + // Otherwise we are just toggling the setting + setSyncScroll(!syncScroll) + } + }} + tooltipPlacement="left" + tooltip={ + syncScroll && syncScrollingPaused + ? 'Synced scrolling is paused - click to resume' + : 'Scroll the list in sync with the recording playback' + } + > + {syncScroll && syncScrollingPaused ? ( + + ) : ( + + )} + +
+
+ {showMatchingEventsFilter ? ( +
+ + Only events matching filters -
- ) : null} -
- -
- setTimestampMode(timestampMode === 'absolute' ? 'relative' : 'absolute')} - tooltipPlacement="left" - tooltip={ - timestampMode === 'absolute' - ? 'Showing absolute timestamps' - : 'Showing timestamps relative to the start of the recording' - } - > - - {capitalizeFirstLetter(timestampMode)}{' '} - - - - { - // If the user has syncScrolling on, but it is paused due to interacting with the Inspector, we want to resume it - if (syncScroll && syncScrollingPaused) { - setSyncScrollPaused(false) - } else { - // Otherwise we are just toggling the setting - setSyncScroll(!syncScroll) - } - }} - tooltipPlacement="left" - tooltip={ - syncScroll && syncScrollingPaused - ? 'Synced scrolling is paused - click to resume' - : 'Scroll the list in sync with the recording playback' - } - > - {syncScroll && syncScrollingPaused ? ( - - ) : ( - - )} - -
+ + +
+ ) : null}
- {showMatchingEventsFilter ? ( -
- - Only events matching filters - - - - - - -
- ) : null}
) }