Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

chore(web): replace static ID with React.useId (#33474)

Browse source
This commit is contained in:
Simon Knott 2024-11-06 14:42:48 +01:00 committed by GitHub
parent f554f42b82
commit 0d92737a07
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 7 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/recorder/src/recorder.tsx
View file

@ -168,7 +168,6 @@ export const Recorder: React.FC<RecorderProps> = ({
sidebarSize={200} sidebarSize={200}
main={<CodeMirrorWrapper text={source.text} language={source.language} highlight={source.highlight} revealLine={source.revealLine} readOnly={true} lineNumbers={true} />} main={<CodeMirrorWrapper text={source.text} language={source.language} highlight={source.highlight} revealLine={source.revealLine} readOnly={true} lineNumbers={true} />}
sidebar={<TabbedPane sidebar={<TabbedPane
id='recorder-sidebar'
rightToolbar={selectedTab === 'locator' || selectedTab === 'aria' ? [<ToolbarButton key={1} icon='files' title='Copy' onClick={() => copy((selectedTab === 'locator' ? locator : ariaSnapshot) || '')} />] : []} rightToolbar={selectedTab === 'locator' || selectedTab === 'aria' ? [<ToolbarButton key={1} icon='files' title='Copy' onClick={() => copy((selectedTab === 'locator' ? locator : ariaSnapshot) || '')} />] : []}
tabs={[ tabs={[
{ {

1
packages/trace-viewer/src/ui/networkResourceDetails.tsx
View file

@ -31,7 +31,6 @@ export const NetworkResourceDetails: React.FunctionComponent<{
return <TabbedPane return <TabbedPane
dataTestId='network-request-details' dataTestId='network-request-details'
id='network-request-tabs'
leftToolbar={[<ToolbarButton key='close' icon='close' title='Close' onClick={onClose}></ToolbarButton>]} leftToolbar={[<ToolbarButton key='close' icon='close' title='Close' onClick={onClose}></ToolbarButton>]}
tabs={[ tabs={[
{ {

3
packages/trace-viewer/src/ui/recorder/recorderView.tsx
View file

@ -151,7 +151,7 @@ export const Workbench: React.FunctionComponent = () => {
<ToolbarButton icon='color-mode' title='Toggle color mode' toggled={false} onClick={() => toggleTheme()}></ToolbarButton> <ToolbarButton icon='color-mode' title='Toggle color mode' toggled={false} onClick={() => toggleTheme()}></ToolbarButton>
</Toolbar>; </Toolbar>;
const sidebarTabbedPane = <TabbedPane id='recorder-actions-tab' tabs={[actionsTab]} />; const sidebarTabbedPane = <TabbedPane tabs={[actionsTab]} />;
const traceView = <TraceView const traceView = <TraceView
sdkLanguage={sdkLanguage} sdkLanguage={sdkLanguage}
callId={traceCallId} callId={traceCallId}
@ -249,7 +249,6 @@ const PropertiesView: React.FunctionComponent<{
]; ];
return <TabbedPane return <TabbedPane
id='properties-tabs'
tabs={tabs} tabs={tabs}
selectedTab={selectedPropertiesTab} selectedTab={selectedPropertiesTab}
setSelectedTab={setSelectedPropertiesTab} setSelectedTab={setSelectedPropertiesTab}

2
packages/trace-viewer/src/ui/workbench.tsx
View file

@ -348,7 +348,6 @@ export const Workbench: React.FunctionComponent<{
openPage={openPage} />} openPage={openPage} />}
sidebar={ sidebar={
<TabbedPane <TabbedPane
id='actionlist-sidebar'
tabs={[actionsTab, metadataTab]} tabs={[actionsTab, metadataTab]}
selectedTab={selectedNavigatorTab} selectedTab={selectedNavigatorTab}
setSelectedTab={setSelectedNavigatorTab} setSelectedTab={setSelectedNavigatorTab}
@ -356,7 +355,6 @@ export const Workbench: React.FunctionComponent<{
} }
/>} />}
sidebar={<TabbedPane sidebar={<TabbedPane
id='workbench-sidebar'
tabs={tabs} tabs={tabs}
selectedTab={selectedPropertiesTab} selectedTab={selectedPropertiesTab}
setSelectedTab={selectPropertiesTab} setSelectedTab={selectPropertiesTab}

12
packages/web/src/components/tabbedPane.tsx
View file

@ -36,8 +36,8 @@ export const TabbedPane: React.FunctionComponent<{
setSelectedTab?: (tab: string) => void, setSelectedTab?: (tab: string) => void,
dataTestId?: string, dataTestId?: string,
mode?: 'default' | 'select', mode?: 'default' | 'select',
id: string, }> = ({ tabs, selectedTab, setSelectedTab, leftToolbar, rightToolbar, dataTestId, mode }) => {
}> = ({ tabs, selectedTab, setSelectedTab, leftToolbar, rightToolbar, dataTestId, mode, id }) => { const id = React.useId();
if (!selectedTab) if (!selectedTab)
selectedTab = tabs[0].id; selectedTab = tabs[0].id;
if (!mode) if (!mode)
@ -53,7 +53,7 @@ export const TabbedPane: React.FunctionComponent<{
<TabbedPaneTab <TabbedPaneTab
key={tab.id} key={tab.id}
id={tab.id} id={tab.id}
ariaControls={`pane-${id}-tab-${tab.id}`} ariaControls={`${id}-${tab.id}`}
title={tab.title} title={tab.title}
count={tab.count} count={tab.count}
errorCount={tab.errorCount} errorCount={tab.errorCount}
@ -72,7 +72,7 @@ export const TabbedPane: React.FunctionComponent<{
suffix = ` (${tab.count})`; suffix = ` (${tab.count})`;
if (tab.errorCount) if (tab.errorCount)
suffix = ` (${tab.errorCount})`; suffix = ` (${tab.errorCount})`;
return <option key={tab.id} value={tab.id} selected={tab.id === selectedTab} role='tab' aria-controls={`pane-${id}-tab-${tab.id}`}>{tab.title}{suffix}</option>; return <option key={tab.id} value={tab.id} selected={tab.id === selectedTab} role='tab' aria-controls={`${id}-${tab.id}`}>{tab.title}{suffix}</option>;
})} })}
</select> </select>
</div>} </div>}
@ -84,9 +84,9 @@ export const TabbedPane: React.FunctionComponent<{
tabs.map(tab => { tabs.map(tab => {
const className = 'tab-content tab-' + tab.id; const className = 'tab-content tab-' + tab.id;
if (tab.component) if (tab.component)
return <div key={tab.id} id={`pane-${id}-tab-${tab.id}`} role='tabpanel' aria-label={tab.title} className={className} style={{ display: selectedTab === tab.id ? 'inherit' : 'none' }}>{tab.component}</div>; return <div key={tab.id} id={`${id}-${tab.id}`} role='tabpanel' aria-label={tab.title} className={className} style={{ display: selectedTab === tab.id ? 'inherit' : 'none' }}>{tab.component}</div>;
if (selectedTab === tab.id) if (selectedTab === tab.id)
return <div key={tab.id} id={`pane-${id}-tab-${tab.id}`} role='tabpanel' aria-label={tab.title} className={className}>{tab.render!()}</div>; return <div key={tab.id} id={`${id}-${tab.id}`} role='tabpanel' aria-label={tab.title} className={className}>{tab.render!()}</div>;
}) })
} }
</div> </div>