From 1d6fb0ae9eb1fc3862d5a8ce97f5975679faf5ac Mon Sep 17 00:00:00 2001
From: Delirium <nikita@openreplay.com>
Date: Wed, 26 Mar 2025 16:37:45 +0100
Subject: [PATCH] =?UTF-8?q?ui:=20shrink=20icons=20when=20no=20space,=20adj?=
 =?UTF-8?q?ust=20player=20area=20for=20events=20export=20=E2=80=A6=20(#321?=
 =?UTF-8?q?7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ui: shrink icons when no space, adjust player area for events export panel, fix panel size

* ui: rm log
---
 .../MobilePlayer/MobilePlayerHeader.tsx       |  2 +-
 .../Player/MobilePlayer/PlayerContent.tsx     |  2 +-
 .../Player/ReplayPlayer/PlayerBlockHeader.tsx |  2 +-
 .../Player/ReplayPlayer/PlayerContent.tsx     |  2 +-
 .../Player/ReplayPlayer/PlayerInst.tsx        |  1 +
 .../BackendLogs/LogsButton.tsx                |  5 +-
 .../Player/Controls/ControlButton.tsx         | 14 ++--
 .../Session_/Player/Controls/Controls.tsx     | 72 +++++++++++++++----
 .../Session_/UnitStepsModal/index.tsx         |  2 +-
 .../app/components/ui/CodeBlock/CodeBlock.tsx | 11 ++-
 10 files changed, 85 insertions(+), 28 deletions(-)

diff --git a/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerHeader.tsx b/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerHeader.tsx
index b5b18b5b9..d8ce766d0 100644
--- a/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerHeader.tsx
+++ b/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerHeader.tsx
@@ -91,7 +91,7 @@ function PlayerBlockHeader(props: Props) {
           )}
         </div>
       </div>
-      <div className="relative border-l" style={{ minWidth: '270px' }}>
+      <div className="relative border-l" style={{ minWidth: activeTab === 'EXPORT' ? '360px' : '270px' }}>
         <Tabs
           tabs={TABS}
           active={activeTab}
diff --git a/frontend/app/components/Session/Player/MobilePlayer/PlayerContent.tsx b/frontend/app/components/Session/Player/MobilePlayer/PlayerContent.tsx
index 25a62b90b..d5243a597 100644
--- a/frontend/app/components/Session/Player/MobilePlayer/PlayerContent.tsx
+++ b/frontend/app/components/Session/Player/MobilePlayer/PlayerContent.tsx
@@ -61,7 +61,7 @@ function PlayerContent({
             className="w-full"
             style={
               activeTab && !fullscreen
-                ? { maxWidth: 'calc(100% - 270px)' }
+                ? { maxWidth: `calc(100% - ${activeTab === 'EXPORT' ? '360px' : '270px'})` }
                 : undefined
             }
           >
diff --git a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx
index b515e2cec..c3784794b 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx
+++ b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx
@@ -126,7 +126,7 @@ function PlayerBlockHeader(props: any) {
       </div>
       <div
         className="px-2 relative border-l border-l-gray-lighter"
-        style={{ minWidth: '270px' }}
+        style={{ minWidth: activeTab === 'EXPORT' ? '360px' : '270px' }}
       >
         <Tabs
           tabs={TABS}
diff --git a/frontend/app/components/Session/Player/ReplayPlayer/PlayerContent.tsx b/frontend/app/components/Session/Player/ReplayPlayer/PlayerContent.tsx
index 9f6e8af25..2788735f2 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/PlayerContent.tsx
+++ b/frontend/app/components/Session/Player/ReplayPlayer/PlayerContent.tsx
@@ -65,7 +65,7 @@ function PlayerContent({
             className="w-full"
             style={
               activeTab && !fullscreen
-                ? { maxWidth: 'calc(100% - 270px)' }
+                ? { maxWidth: `calc(100% - ${activeTab === 'EXPORT' ? '360px' : '270px'})` }
                 : undefined
             }
           >
diff --git a/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx b/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx
index 4249ed15c..acf589147 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx
+++ b/frontend/app/components/Session/Player/ReplayPlayer/PlayerInst.tsx
@@ -182,6 +182,7 @@ function Player(props: IProps) {
           setActiveTab={(tab: string) =>
             activeTab === tab ? props.setActiveTab('') : props.setActiveTab(tab)
           }
+          activeTab={activeTab}
           speedDown={playerContext.player.speedDown}
           speedUp={playerContext.player.speedUp}
           jump={playerContext.player.jump}
diff --git a/frontend/app/components/Session/Player/SharedComponents/BackendLogs/LogsButton.tsx b/frontend/app/components/Session/Player/SharedComponents/BackendLogs/LogsButton.tsx
index 9c7cbf9a9..56b55de91 100644
--- a/frontend/app/components/Session/Player/SharedComponents/BackendLogs/LogsButton.tsx
+++ b/frontend/app/components/Session/Player/SharedComponents/BackendLogs/LogsButton.tsx
@@ -7,13 +7,16 @@ import { Icon } from 'UI';
 function LogsButton({
   integrated,
   onClick,
+  shorten,
 }: {
   integrated: string[];
   onClick: () => void;
+  shorten?: boolean;
 }) {
   return (
     <ControlButton
-      label="Traces"
+      label={shorten ? null : "Traces"}
+      customKey="traces"
       customTags={
         <Avatar.Group>
           {integrated.map((name) => (
diff --git a/frontend/app/components/Session_/Player/Controls/ControlButton.tsx b/frontend/app/components/Session_/Player/Controls/ControlButton.tsx
index d26c4cc4d..a17d08357 100644
--- a/frontend/app/components/Session_/Player/Controls/ControlButton.tsx
+++ b/frontend/app/components/Session_/Player/Controls/ControlButton.tsx
@@ -4,7 +4,7 @@ import { Popover, Button } from 'antd';
 import stl from './controlButton.module.css';
 
 interface IProps {
-  label: string;
+  label: React.ReactNode;
   icon?: string;
   disabled?: boolean;
   onClick?: () => void;
@@ -18,6 +18,7 @@ interface IProps {
   noIcon?: boolean;
   popover?: React.ReactNode;
   customTags?: React.ReactNode;
+  customKey?: string;
 }
 
 function ControlButton({
@@ -28,29 +29,28 @@ function ControlButton({
   active = false,
   popover = undefined,
   customTags,
+  customKey,
 }: IProps) {
   return (
     <Popover content={popover} open={popover ? undefined : false}>
       <Button
         size="small"
         onClick={onClick}
-        id={`control-button-${label.toLowerCase()}`}
+        id={`control-button-${customKey ? customKey.toLowerCase() : label!.toString().toLowerCase()}`}
         disabled={disabled}
       >
         {customTags}
         {hasErrors && (
-          <div className={stl.labels}>
-            <div className={stl.errorSymbol} />
-          </div>
+          <div className="w-2 h-2 rounded-full bg-red" />
         )}
-        <span
+        {label && <span
           className={cn(
             'font-semibold hover:text-main',
             active ? 'color-main' : 'color-gray-darkest',
           )}
         >
           {label}
-        </span>
+        </span>}
       </Button>
     </Popover>
   );
diff --git a/frontend/app/components/Session_/Player/Controls/Controls.tsx b/frontend/app/components/Session_/Player/Controls/Controls.tsx
index f484f2abd..1d53c626a 100644
--- a/frontend/app/components/Session_/Player/Controls/Controls.tsx
+++ b/frontend/app/components/Session_/Player/Controls/Controls.tsx
@@ -32,6 +32,8 @@ import {
 } from 'App/mstore/uiPlayerStore';
 import { Icon } from 'UI';
 import LogsButton from 'App/components/Session/Player/SharedComponents/BackendLogs/LogsButton';
+import { CodeOutlined, DashboardOutlined, ClusterOutlined } from '@ant-design/icons';
+import { ArrowDownUp, ListCollapse, Merge, Waypoints } from 'lucide-react'
 
 import ControlButton from './ControlButton';
 import Timeline from './Timeline';
@@ -52,23 +54,23 @@ export const SKIP_INTERVALS = {
 function getStorageName(type: any) {
   switch (type) {
     case STORAGE_TYPES.REDUX:
-      return 'Redux';
+      return { name: 'Redux', icon: <Icon name='integrations/redux' size={14} /> };
     case STORAGE_TYPES.MOBX:
-      return 'Mobx';
+      return { name: 'Mobx', icon: <Icon name='integrations/mobx' size={14} /> };
     case STORAGE_TYPES.VUEX:
-      return 'Vuex';
+      return { name: 'Vuex', icon: <Icon name='integrations/vuejs' size={14} /> };
     case STORAGE_TYPES.NGRX:
-      return 'NgRx';
+      return { name: 'NgRx', icon: <Icon name='integrations/ngrx' size={14} /> };
     case STORAGE_TYPES.ZUSTAND:
-      return 'Zustand';
+      return { name: 'Zustand', icon: <Icon name='integrations/zustand' size={14} /> };
     case STORAGE_TYPES.NONE:
-      return 'State';
+      return { name: 'State', icon: <ClusterOutlined size={14} /> };
     default:
-      return 'State';
+      return { name: 'State', icon: <ClusterOutlined size={14} /> };
   }
 }
 
-function Controls({ setActiveTab }: any) {
+function Controls({ setActiveTab, activeTab }: any) {
   const { player, store } = React.useContext(PlayerContext);
   const {
     uxtestingStore,
@@ -191,6 +193,7 @@ function Controls({ setActiveTab }: any) {
                 bottomBlock={bottomBlock}
                 disabled={disabled}
                 events={events}
+                activeTab={activeTab}
               />
             )}
 
@@ -212,6 +215,7 @@ interface IDevtoolsButtons {
   bottomBlock: number;
   disabled: boolean;
   events: any[];
+  activeTab?: string;
 }
 
 const DevtoolsButtons = observer(
@@ -221,6 +225,7 @@ const DevtoolsButtons = observer(
     bottomBlock,
     disabled,
     events,
+    activeTab,
   }: IDevtoolsButtons) => {
     const { t } = useTranslation();
     const { aiSummaryStore, integrationsStore } = useStore();
@@ -262,6 +267,36 @@ const DevtoolsButtons = observer(
     const possibleAudio = events.filter((e) => e.name.includes('media/audio'));
     const integratedServices =
       integrationsStore.integrations.backendLogIntegrations;
+
+    const showIcons = activeTab === 'EXPORT'
+    const labels = {
+      console: {
+        icon: <CodeOutlined size={14} />,
+        label: t('Console'),
+      },
+      performance: {
+        icon: <DashboardOutlined size={14} />,
+        label: t('Performance'),
+      },
+      network: {
+        icon: <ArrowDownUp size={14} strokeWidth={2} />,
+        label: t('Network'),
+      },
+      events: {
+        icon: <ListCollapse size={14} strokeWidth={2} />,
+        label: t('Events'),
+      },
+      state: {
+        icon: getStorageName(storageType).icon,
+        label: getStorageName(storageType).name,
+      },
+      graphql: {
+        icon: <Merge size={14} strokeWidth={2} />,
+        label: 'Graphql',
+      }
+    }
+    // @ts-ignore
+    const getLabel = (block: string) => labels[block][showIcons ? 'icon' : 'label']
     return (
       <>
         {isSaas ? <SummaryButton onClick={showSummary} /> : null}
@@ -274,6 +309,7 @@ const DevtoolsButtons = observer(
               </div>
             </div>
           }
+          customKey="xray"
           label="X-Ray"
           onClick={() => toggleBottomTools(OVERVIEW)}
           active={bottomBlock === OVERVIEW && !inspectorMode}
@@ -286,10 +322,11 @@ const DevtoolsButtons = observer(
               <div>{t('Launch Console')}</div>
             </div>
           }
+          customKey="console"
           disabled={disableButtons}
           onClick={() => toggleBottomTools(CONSOLE)}
           active={bottomBlock === CONSOLE && !inspectorMode}
-          label={t('Console')}
+          label={getLabel('console')}
           hasErrors={logRedCount > 0 || showExceptions}
         />
 
@@ -300,10 +337,11 @@ const DevtoolsButtons = observer(
               <div>{t('Launch Network')}</div>
             </div>
           }
+          customKey="network"
           disabled={disableButtons}
           onClick={() => toggleBottomTools(NETWORK)}
           active={bottomBlock === NETWORK && !inspectorMode}
-          label={t('Network')}
+          label={getLabel('network')}
           hasErrors={resourceRedCount > 0}
         />
 
@@ -314,10 +352,11 @@ const DevtoolsButtons = observer(
               <div>{t('Launch Performance')}</div>
             </div>
           }
+          customKey="performance"
           disabled={disableButtons}
           onClick={() => toggleBottomTools(PERFORMANCE)}
           active={bottomBlock === PERFORMANCE && !inspectorMode}
-          label="Performance"
+          label={getLabel('performance')}
         />
 
         {showGraphql && (
@@ -325,7 +364,8 @@ const DevtoolsButtons = observer(
             disabled={disableButtons}
             onClick={() => toggleBottomTools(GRAPHQL)}
             active={bottomBlock === GRAPHQL && !inspectorMode}
-            label="Graphql"
+            label={getLabel('graphql')}
+            customKey="graphql"
           />
         )}
 
@@ -337,10 +377,11 @@ const DevtoolsButtons = observer(
                 <div>{t('Launch State')}</div>
               </div>
             }
+            customKey="state"
             disabled={disableButtons}
             onClick={() => toggleBottomTools(STORAGE)}
             active={bottomBlock === STORAGE && !inspectorMode}
-            label={getStorageName(storageType) as string}
+            label={getLabel('state')}
           />
         )}
         <ControlButton
@@ -350,14 +391,16 @@ const DevtoolsButtons = observer(
               <div>{t('Launch Events')}</div>
             </div>
           }
+          customKey="events"
           disabled={disableButtons}
           onClick={() => toggleBottomTools(STACKEVENTS)}
           active={bottomBlock === STACKEVENTS && !inspectorMode}
-          label={t('Events')}
+          label={getLabel('events')}
           hasErrors={stackRedCount > 0}
         />
         {showProfiler && (
           <ControlButton
+            customKey="profiler"
             disabled={disableButtons}
             onClick={() => toggleBottomTools(PROFILER)}
             active={bottomBlock === PROFILER && !inspectorMode}
@@ -368,6 +411,7 @@ const DevtoolsButtons = observer(
           <LogsButton
             integrated={integratedServices.map((service) => service.name)}
             onClick={() => toggleBottomTools(BACKENDLOGS)}
+            shorten={showIcons}
           />
         ) : null}
         {possibleAudio.length ? (
diff --git a/frontend/app/components/Session_/UnitStepsModal/index.tsx b/frontend/app/components/Session_/UnitStepsModal/index.tsx
index e75fdf5f8..5623f7c51 100644
--- a/frontend/app/components/Session_/UnitStepsModal/index.tsx
+++ b/frontend/app/components/Session_/UnitStepsModal/index.tsx
@@ -202,7 +202,7 @@ function UnitStepsModal({ onClose }: Props) {
       <div className={'w-full'}>
         <CodeBlock
           width={340}
-          height={'calc(100vh - 146px)'}
+          height={'calc(100vh - 174px)'}
           extra={`${events.length} Events`}
           copy
           code={eventStr}
diff --git a/frontend/app/components/ui/CodeBlock/CodeBlock.tsx b/frontend/app/components/ui/CodeBlock/CodeBlock.tsx
index 00f2a5ce5..6dfad6fd8 100644
--- a/frontend/app/components/ui/CodeBlock/CodeBlock.tsx
+++ b/frontend/app/components/ui/CodeBlock/CodeBlock.tsx
@@ -5,6 +5,15 @@ import { Tooltip } from 'antd';
 import cn from 'classnames';
 import { useTranslation } from 'react-i18next';
 
+interface Props {
+  code?: string;
+  extra?: string;
+  language?: string;
+  copy?: boolean;
+  width?: string;
+  height?: string;
+}
+
 export default function CodeBlock({
   code = '',
   extra = '',
@@ -12,7 +21,7 @@ export default function CodeBlock({
   copy = false,
   width = undefined,
   height = undefined,
-}) {
+}: Props) {
   const { t } = useTranslation();
   useEffect(() => {
     setTimeout(() => {