feat(ui): update LivePlayerSubHeader.tsx to support tabs

frontend/app/components/Session/Player/LivePlayer/LivePlayerSubHeader.tsx

@@ -1,39 +1,41 @@
 import React from 'react';
 import { Icon, Tooltip } from 'UI';
-import copy from 'copy-to-clipboard';
 import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
+import Tab from 'Components/Session/Player/SharedComponents/Tab';
 
 function SubHeader() {
-  const { store } = React.useContext(PlayerContext)
-  const {
-    location: currentLocation,
-  } = store.get()
-  const [isCopied, setCopied] = React.useState(false);
+  const { store } = React.useContext(PlayerContext);
+  const { tabStates, currentTab, tabs } = store.get();
 
+  const currentLocation = tabStates[currentTab]?.location || '';
   const location =
-    currentLocation !== undefined ? currentLocation.length > 60
-      ? `${currentLocation.slice(0, 60)}...`
-      : currentLocation : undefined;
+    currentLocation !== undefined
+      ? currentLocation.length > 70
+        ? `${currentLocation.slice(0, 70)}...`
+        : currentLocation
+      : undefined;
 
   return (
-    <div className="w-full px-4 py-2 flex items-center border-b min-h-3">
+    <>
+      <div className="w-full px-4 py-2 flex items-center border-b min-h-3">
+        {tabs.map((tab, i) => (
+          <Tab i={i} tab={tab} currentTab={currentTab} />
+        ))}
+      </div>
       {location && (
-        <div
-          className="flex items-center cursor-pointer color-gray-medium text-sm p-1 hover:bg-gray-light-shade rounded-md"
-          onClick={() => {
-            copy(currentLocation || '');
-            setCopied(true);
-            setTimeout(() => setCopied(false), 5000);
-          }}
-        >
-          <Icon size="20" name="event/link" className="mr-1" />
-          <Tooltip title={isCopied ? 'URL Copied to clipboard' : 'Click to copy'}>
-            {location}
-          </Tooltip>
+        <div className={'w-full bg-white border-b border-gray-light'}>
+          <div className="flex w-fit items-center cursor-pointer color-gray-medium text-sm p-1">
+            <Icon size="20" name="event/link" className="mr-1" />
+            <Tooltip title="Open in new tab" delay={0}>
+              <a href={location} target="_blank">
+                {location}
+              </a>
+            </Tooltip>
+          </div>
         </div>
       )}
-    </div>
+    </>
   );
 }
 

frontend/app/components/Session/Player/SharedComponents/Tab.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import cn from 'classnames';
+
+interface Props {
+  i: number;
+  tab: string;
+  currentTab: string;
+  changeTab?: (tab: string) => void;
+}
+
+function Tab({ i, tab, currentTab, changeTab }: Props) {
+  return (
+    <div
+      key={tab}
+      style={{ marginBottom: '-2px' }}
+      onClick={() => changeTab?.(tab)}
+      className={cn(
+        'self-end py-1 px-4 cursor-pointer',
+        currentTab === tab
+          ? 'border-gray-light border-t border-l border-r !border-b-white bg-white rounded-tl rounded-tr font-semibold'
+          : 'cursor-pointer border-gray-light !border-b !border-t-0 !border-l-0 !border-r-0'
+      )}
+    >
+      Tab {i + 1}
+    </div>
+  );
+}
+
+export default Tab;

frontend/app/components/Session_/BugReport/BugReportModal.tsx

@@ -113,7 +113,7 @@ function BugReportModal({ hideModal, session, width, height, account, xrayProps,
         // REQUIRED FOR FUTURE USAGE AND AS AN EXAMPLE OF THE FUNCTIONALITY
 
         function buildPng() {
-          html2canvas(reportRef.current, {
+          html2canvas(reportRef.current!, {
             scale: 2,
             ignoreElements: (e) => e.id.includes('pdf-ignore'),
           }).then((canvas) => {
@@ -147,11 +147,11 @@ function BugReportModal({ hideModal, session, width, height, account, xrayProps,
         }
         function buildText() {
           doc
-            .html(reportRef.current, {
+            .html(reportRef.current!, {
               x: 0,
               y: 0,
               width: 210,
-              windowWidth: reportRef.current.getBoundingClientRect().width,
+              windowWidth: reportRef.current!.getBoundingClientRect().width,
               autoPaging: 'text',
               html2canvas: {
                 ignoreElements: (e) => e.id.includes('pdf-ignore') || e instanceof SVGElement,

frontend/app/components/Session_/Subheader.js

@@ -12,7 +12,7 @@ import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
 import AutoplayToggle from 'Shared/AutoplayToggle';
 import { connect } from 'react-redux';
-import cn from 'classnames';
+import Tab from 'Components/Session/Player/SharedComponents/Tab';
 
 const localhostWarn = (project) => project + '_localhost_warn';
 
@@ -26,7 +26,7 @@ function SubHeader(props) {
   const currentLocation = tabStates[currentTab]?.location || '';
   const resourceList = tabStates[currentTab]?.resourceList || [];
   const exceptionsList = tabStates[currentTab]?.exceptionsList || [];
-  const eventsList = tabStates[currentTab]?.eventsList || [];
+  const eventsList = tabStates[currentTab]?.eventList || [];
   const graphqlList = tabStates[currentTab]?.graphqlList || [];
   const fetchList = tabStates[currentTab]?.fetchList || [];
 
@@ -102,19 +102,12 @@ function SubHeader(props) {
           </div>
         ) : null}
         {tabs.map((tab, i) => (
-          <div
-            key={tab}
-            style={{ marginBottom: '-2px' }}
-            onClick={() => player.changeTab(tab)}
-            className={cn(
-              'self-end py-1 px-4 cursor-pointer',
-              currentTab === tab
-                ? 'border-gray-light border-t border-l border-r !border-b-white bg-white rounded-tl rounded-tr font-semibold'
-                : 'cursor-pointer border-gray-light !border-b !border-t-0 !border-l-0 !border-r-0'
-            )}
-          >
-            Tab {i + 1}
-          </div>
+          <Tab
+            i={i}
+            tab={tab}
+            currentTab={currentTab}
+            changeTab={(changeTo) => player.changeTab(changeTo)}
+          />
         ))}
         <div
           className="ml-auto text-sm flex items-center color-gray-medium gap-2"

frontend/app/player/web/TabManager.ts

@@ -23,7 +23,8 @@ export interface TabState extends ListsState {
   performanceAvailability?: PerformanceTrackManager['availability']
   performanceChartData: PerformanceChartPoint[],
   performanceChartTime: PerformanceChartPoint[]
-  cssLoading: boolean,
+  cssLoading: boolean
+  location: string
 }
 
 /**
@@ -37,6 +38,7 @@ export default class TabSessionManager {
     performanceChartData: [],
     performanceChartTime: [],
     cssLoading: false,
+    location: '',
   }
 
   private locationEventManager: ListWalker<any>/*<LocationEvent>*/ = new ListWalker();