pipe sdkLanguage

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

@@ -20,14 +20,16 @@ import './networkResourceDetails.css';
 import { TabbedPane } from '@web/components/tabbedPane';
 import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper';
 import { ToolbarButton } from '@web/components/toolbarButton';
-import { fetchRequestPostData, generateCurlCommand, generateFetchCall } from '../third_party/devtools';
+import { generateCurlCommand, generateFetchCall } from '../third_party/devtools';
 import { CopyToClipboardTextButton } from './copyToClipboard';
 import { generatePlaywrightRequestCall } from '@isomorphic/codegen';
+import type { Language } from '@isomorphic/locatorGenerators';
 
 export const NetworkResourceDetails: React.FunctionComponent<{
   resource: ResourceSnapshot;
   onClose: () => void;
-}> = ({ resource, onClose }) => {
+  sdkLanguage?: Language;
+}> = ({ resource, onClose, sdkLanguage }) => {
   const [selectedTab, setSelectedTab] = React.useState('request');
 
   return <TabbedPane
@@ -37,7 +39,7 @@ export const NetworkResourceDetails: React.FunctionComponent<{
       {
         id: 'request',
         title: 'Request',
-        render: () => <RequestTab resource={resource}/>,
+        render: () => <RequestTab resource={resource} sdkLanguage={sdkLanguage} />,
       },
       {
         id: 'response',
@@ -56,11 +58,10 @@ export const NetworkResourceDetails: React.FunctionComponent<{
 
 const RequestTab: React.FunctionComponent<{
   resource: ResourceSnapshot;
-}> = ({ resource }) => {
+  sdkLanguage?: Language;
+}> = ({ resource, sdkLanguage }) => {
   const [requestBody, setRequestBody] = React.useState<{ text: string, mimeType?: string } | null>(null);
 
-  const isJavascript = true; // TODO
-
   React.useEffect(() => {
     const readResources = async  () => {
       if (resource.request.postData) {
@@ -99,7 +100,7 @@ const RequestTab: React.FunctionComponent<{
     <div className='network-request-details-copy'>
       <CopyToClipboardTextButton description='Copy as cURL' value={() => generateCurlCommand(resource)} />
       <CopyToClipboardTextButton description='Copy as Fetch' value={() => generateFetchCall(resource)} />
-      {isJavascript && <CopyToClipboardTextButton description='Copy as Playwright' value={async () => generatePlaywrightRequestCall(resource.request, requestBody?.text)} />}
+      {sdkLanguage === 'javascript' && <CopyToClipboardTextButton description='Copy as Playwright' value={async () => generatePlaywrightRequestCall(resource.request, requestBody?.text)} />}
     </div>
 
     {requestBody && <div className='network-request-details-header'>Request Body</div>}

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

@@ -26,6 +26,7 @@ import { GridView, type RenderedGridCell } from '@web/components/gridView';
 import { SplitView } from '@web/components/splitView';
 import type { ContextEntry } from '../types/entries';
 import { NetworkFilters, defaultFilterState, type FilterState, type ResourceType } from './networkFilters';
+import type { Language } from '@isomorphic/locatorGenerators';
 
 type NetworkTabModel = {
   resources: Entry[],
@@ -66,7 +67,8 @@ export const NetworkTab: React.FunctionComponent<{
   boundaries: Boundaries,
   networkModel: NetworkTabModel,
   onEntryHovered?: (entry: Entry | undefined) => void,
-}> = ({ boundaries, networkModel, onEntryHovered }) => {
+  sdkLanguage?: Language,
+}> = ({ boundaries, networkModel, onEntryHovered, sdkLanguage }) => {
   const [sorting, setSorting] = React.useState<Sorting | undefined>(undefined);
   const [selectedEntry, setSelectedEntry] = React.useState<RenderedEntry | undefined>(undefined);
   const [filterState, setFilterState] = React.useState(defaultFilterState);
@@ -115,7 +117,7 @@ export const NetworkTab: React.FunctionComponent<{
         sidebarIsFirst={true}
         orientation='horizontal'
         settingName='networkResourceDetails'
-        main={<NetworkResourceDetails resource={selectedEntry.resource} onClose={() => setSelectedEntry(undefined)} />}
+        main={<NetworkResourceDetails resource={selectedEntry.resource} onClose={() => setSelectedEntry(undefined)} sdkLanguage={sdkLanguage} />}
         sidebar={grid}
       />}
   </>;

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

@@ -238,7 +238,7 @@ const PropertiesView: React.FunctionComponent<{
     id: 'network',
     title: 'Network',
     count: networkModel.resources.length,
-    render: () => <NetworkTab boundaries={boundaries} networkModel={networkModel} />
+    render: () => <NetworkTab boundaries={boundaries} networkModel={networkModel} sdkLanguage={sdkLanguage} />
   };
 
   const tabs: TabbedPaneTabModel[] = [

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

@@ -225,7 +225,7 @@ export const Workbench: React.FunctionComponent<{
     id: 'network',
     title: 'Network',
     count: networkModel.resources.length,
-    render: () => <NetworkTab boundaries={boundaries} networkModel={networkModel} onEntryHovered={setHighlightedEntry}/>
+    render: () => <NetworkTab boundaries={boundaries} networkModel={networkModel} onEntryHovered={setHighlightedEntry} sdkLanguage={model?.sdkLanguage} />
   };
   const attachmentsTab: TabbedPaneTabModel = {
     id: 'attachments',