From 8f7693fcf9962c6d516e5df794625eb4eaee07e3 Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Thu, 1 Jun 2023 12:44:30 +0200 Subject: [PATCH] feat(ui): update LivePlayerSubHeader.tsx to support tabs --- .../Player/LivePlayer/LivePlayerSubHeader.tsx | 48 ++++++++++--------- .../Session/Player/SharedComponents/Tab.tsx | 29 +++++++++++ .../Session_/BugReport/BugReportModal.tsx | 6 +-- frontend/app/components/Session_/Subheader.js | 23 ++++----- frontend/app/player/web/TabManager.ts | 4 +- 5 files changed, 68 insertions(+), 42 deletions(-) create mode 100644 frontend/app/components/Session/Player/SharedComponents/Tab.tsx diff --git a/frontend/app/components/Session/Player/LivePlayer/LivePlayerSubHeader.tsx b/frontend/app/components/Session/Player/LivePlayer/LivePlayerSubHeader.tsx index 94892a3a7..00f7b246b 100644 --- a/frontend/app/components/Session/Player/LivePlayer/LivePlayerSubHeader.tsx +++ b/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 ( -
+ <> +
+ {tabs.map((tab, i) => ( + + ))} +
{location && ( -
{ - copy(currentLocation || ''); - setCopied(true); - setTimeout(() => setCopied(false), 5000); - }} - > - - - {location} - +
+
)} -
+ ); } diff --git a/frontend/app/components/Session/Player/SharedComponents/Tab.tsx b/frontend/app/components/Session/Player/SharedComponents/Tab.tsx new file mode 100644 index 000000000..8586fb2f1 --- /dev/null +++ b/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 ( +
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} +
+ ); +} + +export default Tab; diff --git a/frontend/app/components/Session_/BugReport/BugReportModal.tsx b/frontend/app/components/Session_/BugReport/BugReportModal.tsx index f43716b5b..62a0f5ac5 100644 --- a/frontend/app/components/Session_/BugReport/BugReportModal.tsx +++ b/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, diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js index 047fdb79c..42bf2838a 100644 --- a/frontend/app/components/Session_/Subheader.js +++ b/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) {
) : null} {tabs.map((tab, i) => ( -
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} -
+ player.changeTab(changeTo)} + /> ))}
/**/ = new ListWalker();