@rozenite/network-activity-plugin 1.0.0-alpha.15 → 1.0.0-alpha.16

package/src/ui/components/OverrideResponse.tsx

@@ -0,0 +1,132 @@
+import { useRef, useState } from 'react';
+import { HttpNetworkEntry } from '../state/model';
+import { Section } from '../components/Section';
+import { KeyValueGrid } from '../components/KeyValueGrid';
+import { useNetworkActivityActions } from '../state/hooks';
+import { CodeEditor } from '../components/CodeEditor';
+import { RequestOverride } from '../../shared/client';
+import { Button } from './Button';
+import { Check, CircleSlash2 } from 'lucide-react';
+
+export type OverrideResponseProps = {
+  selectedRequest: HttpNetworkEntry;
+  initialOverride: RequestOverride | undefined;
+  onClear: () => void;
+};
+
+export const OverrideResponse = ({
+  selectedRequest,
+  initialOverride,
+  onClear,
+}: OverrideResponseProps) => {
+  const actions = useNetworkActivityActions();
+  const [savedOverride, setSavedOverride] = useState<
+    RequestOverride | undefined
+  >(initialOverride);
+  const [editedBody, setEditedBody] = useState<string | undefined>(
+    initialOverride?.body
+  );
+  const [editedStatus, setEditedStatus] = useState<number | undefined>(
+    initialOverride?.status
+  );
+  const responseEditorRef = useRef<HTMLPreElement>(null);
+  const responseBody = selectedRequest.response?.body;
+
+  const saveOverride = () => {
+    if (editedBody === undefined && editedStatus === undefined) return;
+
+    const newOverrideData = {
+      body: editedBody,
+      status: editedStatus,
+    };
+
+    setSavedOverride(newOverrideData);
+    actions.addOverride(selectedRequest.request.url, newOverrideData);
+  };
+
+  const clearOverride = () => {
+    setSavedOverride(undefined);
+    setEditedBody(undefined);
+    actions.clearOverride(selectedRequest.request.url);
+    onClear();
+  };
+
+  if (!responseBody || responseBody.data === null) {
+    return (
+      <div className="text-sm text-gray-400">
+        No response body available for this request
+      </div>
+    );
+  }
+
+  const { type } = responseBody;
+
+  const hasChanges =
+    editedBody !== savedOverride?.body ||
+    editedStatus !== savedOverride?.status;
+
+  const overrideActions = (
+    <>
+      <Button
+        variant="ghost"
+        size="xs"
+        className="text-violet-300 hover:text-violet-300 ms-2"
+        onClick={clearOverride}
+      >
+        <CircleSlash2 className="h-2 w-2" />
+        Clear override
+      </Button>
+
+      <Button
+        variant="ghost"
+        size="xs"
+        className="text-violet-300 hover:text-violet-300"
+        onClick={saveOverride}
+        disabled={!hasChanges}
+      >
+        <Check className="h-2 w-2" />
+        {hasChanges ? 'Save override' : 'Saved'}
+      </Button>
+    </>
+  );
+
+  if (savedOverride !== undefined) {
+    return (
+      <Section
+        title="Response Body"
+        collapsible={false}
+        action={overrideActions}
+      >
+        <div className="space-y-4">
+          <KeyValueGrid
+            items={[
+              {
+                key: 'Content-Type',
+                value: type,
+                valueClassName: 'text-blue-400',
+              },
+            ]}
+          />
+
+          <div className="grid grid-cols-[minmax(7rem,25%)_minmax(3rem,1fr)] gap-x-2 gap-y-2 text-sm">
+            <span className={'text-gray-400 wrap-anywhere'}>Status Code</span>
+            <input
+              type="number"
+              value={editedStatus}
+              onChange={(e) => {
+                setEditedStatus(parseInt(e.target.value));
+              }}
+              className="max-w-24 font-mono text-gray-300 whitespace-pre-wrap bg-gray-800 p-1 rounded-md border border-gray-700 overflow-x-auto wrap-anywhere ring-offset-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            />
+          </div>
+
+          <CodeEditor
+            data={savedOverride?.body}
+            ref={responseEditorRef}
+            onInput={(e) => setEditedBody(e.currentTarget.innerText)}
+          />
+        </div>
+      </Section>
+    );
+  }
+};

package/src/ui/components/RequestList.tsx

@@ -9,9 +9,10 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import { ProcessedRequest } from '../state/model';
-import { RequestId } from '../../shared/client';
+import { RequestId, RequestOverride } from '../../shared/client';
 import {
   useNetworkActivityActions,
+  useOverrides,
   useProcessedRequests,
   useSelectedRequestId,
 } from '../state/hooks';
@@ -30,6 +31,7 @@ type NetworkRequest = {
   time: string;
   type: string;
   startTime: string;
+  hasOverride: boolean;
 };
 
 const formatSize = (bytes: number): string => {
@@ -122,11 +124,13 @@ const sortTime: SortingFn<NetworkRequest> = (rowA, rowB, columnId) => {
 };
 
 const processNetworkRequests = (
-  processedRequests: ProcessedRequest[]
+  processedRequests: ProcessedRequest[],
+  overrides: Map<string, RequestOverride>
 ): NetworkRequest[] => {
   return processedRequests.map((request): NetworkRequest => {
     const { domain, path } = extractDomainAndPath(request.name);
     const duration = request.duration || 0;
+    const hasOverride = overrides.has(request.name);
 
     return {
       id: request.id,
@@ -139,6 +143,7 @@ const processNetworkRequests = (
       time: formatDuration(duration),
       type: request.type,
       startTime: formatStartTime(request.timestamp),
+      hasOverride: hasOverride,
     };
   });
 };
@@ -155,11 +160,12 @@ const columns = [
   columnHelper.accessor('name', {
     header: 'Name',
     cell: ({ row, getValue }) => (
-      <div 
-        className="flex-1 min-w-0 truncate"
-        title={row.original.path}
-      >
+      <div className="flex-1 min-w-0 truncate" title={row.original.path}>
         {getValue()}
+
+        {row.original.hasOverride && (
+          <span className="w-2 h-2 rounded-full bg-violet-300 ms-2 inline-block"></span>
+        )}
       </div>
     ),
     sortingFn: 'alphanumeric',
@@ -215,6 +221,7 @@ export const RequestList = ({ filter }: RequestListProps) => {
   const processedRequests = useProcessedRequests();
   const selectedRequestId = useSelectedRequestId();
   const [sorting, setSorting] = useState<SortingState>([]);
+  const overrides = useOverrides();
 
   // Filter requests based on current filter state
   const filteredRequests = useMemo(() => {
@@ -243,8 +250,8 @@ export const RequestList = ({ filter }: RequestListProps) => {
   }, [processedRequests, filter]);
 
   const requests = useMemo(() => {
-    return processNetworkRequests(filteredRequests);
-  }, [filteredRequests]);
+    return processNetworkRequests(filteredRequests, overrides);
+  }, [filteredRequests, overrides]);
 
   const table = useReactTable({
     data: requests,

package/src/ui/components/Section.tsx

@@ -5,12 +5,14 @@ export type SectionProps = {
   title: string;
   children: React.ReactNode;
   collapsible?: boolean;
+  action?: React.ReactNode;
 };
 
 export const Section = ({
   title,
   children,
   collapsible = true,
+  action,
 }: SectionProps) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
 
@@ -34,7 +36,9 @@ export const Section = ({
         {collapsible && (
           <span className={cn('mr-2', { 'rotate-90': !isCollapsed })}>▶</span>
         )}
-        <span className="font-medium">{title}</span>
+        <span className="font-medium me-auto">{title}</span>
+
+        {action}
       </button>
       {isChildrenVisible && children}
     </div>

package/src/ui/components/SidePanel.tsx

@@ -10,6 +10,7 @@ import { X } from 'lucide-react';
 import {
   useNetworkActivityActions,
   useNetworkActivityStore,
+  useOverrides,
   useSelectedRequest,
 } from '../state/hooks';
 import { NetworkEntry as OldNetworkEntry } from '../types';
@@ -85,6 +86,7 @@ export const SidePanel = () => {
   const actions = useNetworkActivityActions();
   const selectedRequest = useSelectedRequest();
   const client = useNetworkActivityStore((state) => state._client);
+  const overrides = useOverrides();
 
   const onClose = (): void => {
     actions.setSelectedRequest(null);
@@ -128,6 +130,9 @@ export const SidePanel = () => {
     legacyNetworkEntries.set(legacyEntry.requestId, legacyEntry);
   }
 
+  const override = legacyEntry !== null ? overrides.get(legacyEntry.url) : null;
+  const hasResponseOverride = override && override.body ? true : false;
+
   const getTabsListTriggers = () => {
     if (httpDetails) {
       return (
@@ -149,6 +154,9 @@ export const SidePanel = () => {
             className="data-[state=active]:bg-gray-700"
           >
             Response
+            {hasResponseOverride && (
+              <span className="w-2 h-2 rounded-full bg-violet-300 ms-2 inline-block"></span>
+            )}
           </TabsTrigger>
           <TabsTrigger
             value="cookies"

package/src/ui/state/hooks.ts

@@ -42,3 +42,7 @@ export const useWebSocketMessages = (requestId: string) => {
     (state) => state.websocketMessages.get(requestId) || []
   );
 };
+
+export const useOverrides = () => {
+  return useNetworkActivityStore((state) => state.overrides);
+};