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

Author: Skn0tt

packages/recorder/src/recorder.tsx

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

packages/trace-viewer/src/ui/networkResourceDetails.tsx

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

packages/trace-viewer/src/ui/recorder/recorderView.tsx

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

packages/trace-viewer/src/ui/workbench.tsx

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

packages/web/src/components/tabbedPane.tsx

@@ -36,8 +36,8 @@ export const TabbedPane: React.FunctionComponent<{
   setSelectedTab?: (tab: string) => void,
   dataTestId?: string,
   mode?: 'default' | 'select',
-  id: string,
-}> = ({ tabs, selectedTab, setSelectedTab, leftToolbar, rightToolbar, dataTestId, mode, id }) => {
+}> = ({ tabs, selectedTab, setSelectedTab, leftToolbar, rightToolbar, dataTestId, mode }) => {
+  const id = React.useId();
   if (!selectedTab)
     selectedTab = tabs[0].id;
   if (!mode)
@@ -53,7 +53,7 @@ export const TabbedPane: React.FunctionComponent<{
             <TabbedPaneTab
               key={tab.id}
               id={tab.id}
-              ariaControls={`pane-${id}-tab-${tab.id}`}
+              ariaControls={`${id}-${tab.id}`}
               title={tab.title}
               count={tab.count}
               errorCount={tab.errorCount}
@@ -72,7 +72,7 @@ export const TabbedPane: React.FunctionComponent<{
                 suffix = ` (${tab.count})`;
               if (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>
         </div>}
@@ -84,9 +84,9 @@ export const TabbedPane: React.FunctionComponent<{
         tabs.map(tab => {
           const className = 'tab-content tab-' + tab.id;
           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)
-            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>