@rozenite/network-activity-plugin 1.0.0-alpha.12 → 1.0.0-alpha.13

package/src/ui/components/CopyRequestDropdown.tsx

@@ -0,0 +1,95 @@
+import { useCallback } from 'react';
+import { Copy, Check, ChevronDown } from 'lucide-react';
+import { Button } from './Button';
+import { generateFetchCall } from '../utils/generateFetchCall';
+import { generateCurlCommand } from '../utils/generateCurlCommand';
+import { useCopyToClipboard } from '../hooks/useCopyToClipboard';
+import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './DropdownMenu';
+import { checkRequestBodyBinary } from '../utils/checkRequestBodyBinary';
+
+type NetworkEntry = HttpNetworkEntry | SSENetworkEntry;
+
+type CopyDropdownProps = {
+  selectedRequest: NetworkEntry;
+};
+
+type CopyOption = {
+  id: string;
+  label: string;
+  generate: (request: NetworkEntry) => string;
+  isEnabled: (request: NetworkEntry) => boolean;
+};
+
+const copyOptions: CopyOption[] = [
+  {
+    id: 'fetch',
+    label: 'fetch',
+    generate: generateFetchCall,
+    isEnabled: (request) => !checkRequestBodyBinary(request),
+  },
+  {
+    id: 'curl',
+    label: 'cURL',
+    generate: generateCurlCommand,
+    isEnabled: (request) =>
+      !checkRequestBodyBinary(request) || request.type === 'sse',
+  },
+];
+
+export const CopyRequestDropdown = ({ selectedRequest }: CopyDropdownProps) => {
+  const { isCopied, copy } = useCopyToClipboard();
+
+  const handleCopy = useCallback(
+    async (option: CopyOption) => {
+      if (!selectedRequest) return;
+
+      try {
+        const content = await option.generate(selectedRequest);
+
+        await copy(content);
+      } catch (error) {
+        console.error(`Failed to copy ${option.label}:`, error);
+      }
+    },
+    [selectedRequest, copy]
+  );
+
+  const filteredCopyOptions = copyOptions.filter((option) =>
+    option.isEnabled(selectedRequest)
+  );
+
+  if (filteredCopyOptions.length === 0) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="xs" className="border border-gray-700">
+          {isCopied ? <Check size={16} /> : <Copy size={16} />}
+          Copy as ...
+          <ChevronDown size={12} className="ml-1" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        {filteredCopyOptions.map((option) => {
+          return (
+            <DropdownMenuItem
+              onClick={() => handleCopy(option)}
+              className="cursor-pointer"
+              key={option.id}
+            >
+              {option.label}
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

package/src/ui/components/KeyValueGrid.tsx

@@ -37,10 +37,7 @@ export const KeyValueGrid = ({
       {items.map((item, index) => (
         <Fragment key={index}>
           <span
-            className={cn(
-              'text-gray-400 wrap-anywhere',
-              item.keyClassName
-            )}
+            className={cn('text-gray-400 wrap-anywhere', item.keyClassName)}
           >
             {item.key}
           </span>

package/src/ui/components/RequestBody.tsx

@@ -0,0 +1,86 @@
+import { HttpRequestData } from '../state/model';
+import { KeyValueGrid, KeyValueItem } from './KeyValueGrid';
+import { CodeBlock } from './CodeBlock';
+import { JsonTree } from './JsonTree';
+import {
+  RequestBinaryPostData,
+  RequestFormDataPostData,
+} from '../../shared/client';
+
+type RequestBodyProps = {
+  data: HttpRequestData['data'];
+};
+
+const getFormDataBinaryEntries = (
+  key: string,
+  value: RequestBinaryPostData['value']
+): KeyValueItem[] => {
+  return [
+    {
+      key,
+      value: <span className="text-blue-400">[binary]</span>,
+    },
+    ...getBinaryEntries(value).map((item) => ({
+      ...item,
+      key: `  └─  ${item.key}`,
+      keyClassName: 'whitespace-pre',
+    })),
+  ];
+};
+
+const getBinaryEntries = (
+  value: RequestBinaryPostData['value']
+): KeyValueItem[] => {
+  const { size, type, name } = value;
+
+  const items: KeyValueItem[] = [];
+
+  if (name) {
+    items.push({ key: 'Name', value: name });
+  }
+
+  if (type) {
+    items.push({ key: 'Type', value: type });
+  }
+
+  items.push({ key: 'Size', value: `${size} bytes` });
+
+  return items;
+};
+
+const getFormDataEntries = (value: RequestFormDataPostData['value']) =>
+  Object.entries(value).flatMap(([key, { value, type }]) => {
+    if (type === 'binary') {
+      return getFormDataBinaryEntries(key, value);
+    }
+
+    return [{ key, value }];
+  });
+
+export const RequestBody = ({ data }: RequestBodyProps) => {
+  const { type: dataType, value } = data;
+
+  if (dataType === 'text') {
+    try {
+      const jsonData = JSON.parse(value);
+
+      return (
+        <CodeBlock>
+          <JsonTree data={jsonData} />
+        </CodeBlock>
+      );
+    } catch {
+      return <CodeBlock>{value}</CodeBlock>;
+    }
+  }
+
+  if (dataType === 'form-data') {
+    return <KeyValueGrid items={getFormDataEntries(value)} />;
+  }
+
+  if (dataType === 'binary') {
+    return <KeyValueGrid items={getBinaryEntries(value)} />;
+  }
+
+  return null;
+};

package/src/ui/components/RequestList.tsx

@@ -17,7 +17,7 @@ import {
 } from '../state/hooks';
 import { getStatusColor } from '../utils/getStatusColor';
 import { FilterState } from './FilterBar';
-import { isNumber } from '../../utils/isNumber';
+import { isNumber } from '../../utils/typeChecks';
 
 type NetworkRequest = {
   id: RequestId;

package/src/ui/state/model.ts

@@ -1,4 +1,9 @@
-import { Initiator, ResourceType, HttpHeaders, RequestPostData } from '../../shared/client';
+import {
+  Initiator,
+  ResourceType,
+  HttpHeaders,
+  RequestPostData,
+} from '../../shared/client';
 
 export type RequestId = string;
 export type Timestamp = number;

package/src/ui/tabs/CookiesTab.tsx

@@ -43,9 +43,7 @@ export const CookiesTab = ({ selectedRequest }: CookiesTabProps) => {
       <div className="p-4">
         <div className="space-y-6">
           {hasRequestCookies && (
-            <Section
-              title={`Request Cookies (${requestCookies.length})`}
-            >
+            <Section title={`Request Cookies (${requestCookies.length})`}>
               <div className="space-y-2">
                 {requestCookies.map((cookie, index) => (
                   <CookieCard
@@ -59,9 +57,7 @@ export const CookiesTab = ({ selectedRequest }: CookiesTabProps) => {
           )}
 
           {hasResponseCookies && (
-            <Section
-              title={`Response Cookies (${responseCookies.length})`}
-            >
+            <Section title={`Response Cookies (${responseCookies.length})`}>
               <div className="space-y-2">
                 {responseCookies.map((cookie, index) => (
                   <CookieCard

package/src/ui/tabs/HeadersTab.tsx

@@ -4,7 +4,7 @@ import { Section } from '../components/Section';
 import { KeyValueGrid, KeyValueItem } from '../components/KeyValueGrid';
 import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
 import { getStatusColor } from '../utils/getStatusColor';
-import { CopyAsCurlButton } from '../components/CopyAsCurlButton';
+import { CopyRequestDropdown } from '../components/CopyRequestDropdown';
 import { HttpHeaders } from '../../shared/client';
 
 export type HeadersTabProps = {
@@ -69,15 +69,10 @@ export const HeadersTab = ({ selectedRequest }: HeadersTabProps) => {
     [selectedRequest]
   );
 
-  const isCopyAsCurlEnabled =
-    selectedRequest.request.body?.data.type !== 'binary';
-
   return (
     <ScrollArea className="h-full w-full">
       <div className="p-4 space-y-4">
-        {isCopyAsCurlEnabled && (
-          <CopyAsCurlButton selectedRequest={selectedRequest} />
-        )}
+        <CopyRequestDropdown selectedRequest={selectedRequest} />
 
         <Section title="General">
           <KeyValueGrid items={generalItems} />

package/src/ui/tabs/RequestTab.tsx

@@ -1,41 +1,56 @@
-import * as React from 'react';
 import { ScrollArea } from '../components/ScrollArea';
-import { JsonTree } from '../components/JsonTree';
-import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
+import {
+  HttpNetworkEntry,
+  HttpRequestData,
+  SSENetworkEntry,
+} from '../state/model';
 import { KeyValueGrid } from '../components/KeyValueGrid';
 import { Section } from '../components/Section';
-import { CodeBlock } from '../components/CodeBlock';
-import { ReactNode, useMemo } from 'react';
+import { useMemo } from 'react';
+import { RequestBody } from '../components/RequestBody';
 
 export type RequestTabProps = {
   selectedRequest: HttpNetworkEntry | SSENetworkEntry;
 };
 
+const getRequestBodySectionTitle = (body: HttpRequestData) => {
+  const baseTitle = 'Request Body';
+
+  switch (body.data.type) {
+    case 'form-data':
+      return `${baseTitle} (FormData)`;
+
+    case 'binary':
+      return `${baseTitle} (Binary)`;
+
+    default:
+      return baseTitle;
+  }
+};
+
 export const RequestTab = ({ selectedRequest }: RequestTabProps) => {
   const queryParams = useMemo(() => {
     const { searchParams } = new URL(selectedRequest.request.url);
 
-    return Array.from(searchParams.entries());
+    return Array.from(searchParams.entries()).map(([key, value]) => ({
+      key,
+      value,
+    }));
   }, [selectedRequest.request.url]);
 
   const requestBody = selectedRequest.request.body;
   const hasQueryParams = queryParams.length > 0;
 
   const renderQueryParams = () => {
-    if (hasQueryParams) {
-      return (
-        <Section title={`Query Parameters (${queryParams.length})`}>
-          <KeyValueGrid
-            items={queryParams.map(([key, value]) => ({
-              key,
-              value,
-            }))}
-          />
-        </Section>
-      );
+    if (!hasQueryParams) {
+      return null;
     }
 
-    return null;
+    return (
+      <Section title={`Query Parameters (${queryParams.length})`}>
+        <KeyValueGrid items={queryParams} />
+      </Section>
+    );
   };
 
   const renderRequestBody = () => {
@@ -43,40 +58,9 @@ export const RequestTab = ({ selectedRequest }: RequestTabProps) => {
       return null;
     }
 
-    const { type, data } = requestBody;
-    const { type: dataType, value } = data;
-
-    let bodyContent: ReactNode = null;
-
-    if (dataType === 'text') {
-      try {
-        const jsonData = JSON.parse(value);
-
-        bodyContent = <JsonTree data={jsonData} />;
-      } catch {
-        bodyContent = value;
-      }
-    }
-
-    // Show JSON tree as a temporary solution for form-data and binary types
-    if (dataType === 'form-data' || dataType === 'binary') {
-      bodyContent = <JsonTree data={value} />
-    }
-
     return (
-      <Section title="Request Body">
-        <div className="space-y-4">
-          <KeyValueGrid
-            items={[
-              {
-                key: 'Content-Type',
-                value: type,
-                valueClassName: 'text-blue-400',
-              },
-            ]}
-          />
-          {bodyContent && <CodeBlock>{bodyContent}</CodeBlock>}
-        </div>
+      <Section title={getRequestBodySectionTitle(requestBody)}>
+        <RequestBody data={requestBody.data} />
       </Section>
     );
   };

package/src/ui/utils/checkRequestBodyBinary.ts

@@ -0,0 +1,7 @@
+import { NetworkEntry } from '../state/model';
+
+export const checkRequestBodyBinary = (request: NetworkEntry) => {
+  return (
+    request.type === 'http' && request.request.body?.data.type === 'binary'
+  );
+};

package/src/ui/utils/generateCurlCommand.ts

@@ -1,4 +1,5 @@
-import { RequestPostData } from '../../shared/client';
+import { HttpHeaders, RequestPostData } from '../../shared/client';
+import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
 import { escapeShellArg } from './escapeShellArg';
 
 const BASE_TAB_INDENT = 2; // Number of spaces for indentation
@@ -28,10 +29,7 @@ function addHttpMethodToCurl(curlParts: string[], method: string): void {
   }
 }
 
-function addHeadersToCurl(
-  curlParts: string[],
-  headers: Record<string, string>
-): void {
+function addHeadersToCurl(curlParts: string[], headers: HttpHeaders): void {
   Object.entries(headers).forEach(([key, value]) => {
     addCurlParam(curlParts, '-H', escapeShellArg(`${key}: ${value}`));
   });
@@ -65,13 +63,12 @@ function addBodyToCurl(curlParts: string[], postData: RequestPostData): void {
   addCurlParam(curlParts, '--data-raw', escapeShellArg(stringifyData(value)));
 }
 
-export function generateCurlCommand(request: {
-  method: string;
-  url: string;
-  headers?: Record<string, string>;
-  postData?: RequestPostData;
-}): string {
-  const { method, url, headers = {}, postData } = request;
+export function generateCurlCommand(
+  request: HttpNetworkEntry | SSENetworkEntry
+) {
+  const { method, url, headers = {}, body } = request.request;
+
+  const postData = body?.data;
 
   const curlParts: string[] = [`curl ${escapeShellArg(url)}`];
 

package/src/ui/utils/generateFetchCall.ts

@@ -0,0 +1,64 @@
+import { generateMultipartBody } from './generateMultipartBody';
+import {
+  HttpNetworkEntry,
+  HttpRequestData,
+  SSENetworkEntry,
+} from '../state/model';
+import { getHttpHeaderValueAsString } from '../../utils/getHttpHeaderValueAsString';
+import { HttpHeaders, XHRHeaders } from '../../shared/client';
+
+const processHeaders = (requestHeaders: HttpHeaders | undefined) => {
+  const headers: XHRHeaders = {};
+
+  if (!requestHeaders) {
+    return headers;
+  }
+
+  Object.entries(requestHeaders).forEach(([name, value]) => {
+    // Filter out HTTP/2 pseudo-headers
+    if (!name.startsWith(':')) {
+      headers[name] = getHttpHeaderValueAsString(value);
+    }
+  });
+
+  return headers;
+};
+
+const processRequestBody = (body: HttpRequestData, headers: XHRHeaders) => {
+  const { type, value } = body.data;
+
+  switch (type) {
+    case 'text':
+      return value;
+
+    case 'form-data': {
+      const { body, contentType } = generateMultipartBody(value);
+
+      headers['Content-Type'] = contentType;
+
+      return body;
+    }
+
+    default:
+      return undefined;
+  }
+};
+
+export const generateFetchCall = (
+  request: HttpNetworkEntry | SSENetworkEntry
+) => {
+  const { url, headers: requestHeaders, method, body } = request.request;
+
+  const headers = processHeaders(requestHeaders);
+  const requestBody = body ? processRequestBody(body, headers) : undefined;
+
+  const fetchOptions: RequestInit = {
+    headers: Object.keys(headers).length ? headers : undefined,
+    body: requestBody,
+    method,
+  };
+
+  const options = JSON.stringify(fetchOptions, null, 2);
+
+  return `fetch(${JSON.stringify(url)}, ${options});`;
+};

package/src/ui/utils/generateMultipartBody.ts

@@ -0,0 +1,19 @@
+export const generateMultipartBody = (formData: Record<string, unknown>) => {
+  const boundary = 'FormBoundary' + Math.random().toString(36).substr(2, 16);
+
+  const parts: string[] = [];
+
+  Object.entries(formData).forEach(([key, value]) => {
+    parts.push(`--${boundary}`);
+    parts.push(`Content-Disposition: form-data; name="${key}"`);
+    parts.push('');
+    parts.push(String(value));
+  });
+
+  parts.push(`--${boundary}--`);
+
+  return {
+    body: parts.join('\r\n'),
+    contentType: `multipart/form-data; boundary=${boundary}`,
+  };
+};

package/src/utils/applyReactNativeRequestHeadersLogic.ts

@@ -5,15 +5,14 @@ import { inferContentTypeFromPostData } from './inferContentTypeFromPostData';
 /**
  * Partially emulates React Native's behavior for setting HTTP headers.
  *
- * See:
- * https://github.com/facebook/react-native/blob/de5093c88771977b58f7bec3f3ffa64a9595334e/packages/react-native/Libraries/Network/RCTNetworking.mm#L345-L349
+ * @see https://github.com/facebook/react-native/blob/de5093c88771977b58f7bec3f3ffa64a9595334e/packages/react-native/Libraries/Network/RCTNetworking.mm#L345-L349
  */
 export function applyReactNativeRequestHeadersLogic(
   headers: HttpHeaders,
   postData?: RequestPostData
 ): HttpHeaders {
   const existingContentType = getHttpHeader(headers, 'content-type');
-  
+
   if (existingContentType) {
     return headers;
   }

package/src/utils/applyReactNativeResponseHeadersLogic.ts

@@ -6,9 +6,8 @@ import { getHttpHeader } from './getHttpHeader';
  * Applies React Native specific logic to response headers.
  * React Native concatenates multiple header values into single strings,
  * this function parses them back into arrays where appropriate.
- * 
- * See:
- * https://github.com/facebook/react-native/blob/588f0c5ce6c283f116228456da2170d2adc3cbf4/ReactAndroid/src/main/java/com/facebook/react/modules/network/NetworkingModule.java#L637
+ *
+ * @see https://github.com/facebook/react-native/blob/588f0c5ce6c283f116228456da2170d2adc3cbf4/ReactAndroid/src/main/java/com/facebook/react/modules/network/NetworkingModule.java#L637
  */
 export const applyReactNativeResponseHeadersLogic = (
   headers: XHRHeaders

package/src/utils/getHttpHeaderValueAsString.ts

@@ -0,0 +1,13 @@
+/**
+ * Combines multiple HTTP header values according to RFC 7230 Section 3.2.2
+ *
+ * Per RFC 7230 Section 3.2.2: "A recipient MAY combine multiple header fields
+ * with the same field name into one 'field-name: field-value' pair, without
+ * changing the semantics of the message, by appending each subsequent field
+ * value to the combined field value in order, separated by a comma."
+ *
+ * @see https://tools.ietf.org/html/rfc7230#section-3.2.2
+ */
+export function getHttpHeaderValueAsString(value: string | string[]): string {
+  return Array.isArray(value) ? value.join(', ') : value;
+}

package/src/utils/typeChecks.ts

@@ -0,0 +1,27 @@
+export const isBlob = (value: unknown): value is Blob => value instanceof Blob;
+
+export const isArrayBuffer = (
+  value: unknown
+): value is ArrayBuffer | ArrayBufferView =>
+  value instanceof ArrayBuffer || ArrayBuffer.isView(value);
+
+export const isFormData = (value: unknown): value is FormData =>
+  value instanceof FormData;
+
+export const isNullOrUndefined = (value: unknown): value is null | undefined =>
+  value === null || value === undefined;
+
+export const isString = (value: unknown): value is string =>
+  typeof value === 'string';
+
+export const isNumber = (value: unknown): value is number =>
+  typeof value === 'number' && !isNaN(value);
+
+export const isBoolean = (value: unknown): value is boolean =>
+  typeof value === 'boolean';
+
+export const isObject = (value: unknown): value is object =>
+  typeof value === 'object' && value !== null;
+
+export const isArray = (value: unknown): value is unknown[] =>
+  Array.isArray(value);

package/dist/src/ui/components/CopyAsCurlButton.d.ts

@@ -1,5 +0,0 @@
-import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
-export type CopyAsCurlButtonProps = {
-    selectedRequest?: HttpNetworkEntry | SSENetworkEntry;
-};
-export declare const CopyAsCurlButton: ({ selectedRequest, }: CopyAsCurlButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/utils/isNumber.d.ts

@@ -1 +0,0 @@
-export declare const isNumber: (value: unknown) => value is number;

package/src/ui/components/CopyAsCurlButton.tsx

@@ -1,45 +0,0 @@
-import { useCopyToClipboard } from '../hooks/useCopyToClipboard';
-import { Copy, Check } from 'lucide-react';
-import { Button } from './Button';
-import { generateCurlCommand } from '../utils/generateCurlCommand';
-import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
-
-export type CopyAsCurlButtonProps = {
-  selectedRequest?: HttpNetworkEntry | SSENetworkEntry;
-};
-
-export const CopyAsCurlButton = ({
-  selectedRequest,
-}: CopyAsCurlButtonProps) => {
-  const { isCopied, copy } = useCopyToClipboard();
-
-  const handleCopyCurl = () => {
-    if (!selectedRequest) return;
-
-    const { method, url, headers, body } = selectedRequest.request;
-
-    const curlCommand = generateCurlCommand({
-      method,
-      url,
-      headers,
-      postData: body?.data,
-    });
-
-    copy(curlCommand);
-  };
-
-  const Icon = isCopied ? Check : Copy;
-
-  return (
-    <Button
-      variant="ghost"
-      size="xs"
-      onClick={handleCopyCurl}
-      disabled={!selectedRequest}
-      className="border border-gray-700"
-    >
-      <Icon className="w-2 h-2" />
-      Copy as cURL
-    </Button>
-  );
-};

package/src/utils/isNumber.ts

@@ -1,3 +0,0 @@
-export const isNumber = (value: unknown): value is number => {
-  return typeof value === 'number';
-};