JSONPath filter plugins working

src-web/components/core/Editor/Editor.css

@@ -215,6 +215,28 @@
   }
 }
 
+.cm-editor .cm-panels {
+  @apply bg-transparent border-0 text-gray-800 z-50;
+
+  input,
+  button {
+    @apply rounded-sm outline-none;
+  }
+
+  button {
+    @apply appearance-none bg-none bg-gray-800 text-gray-100 focus:bg-gray-900 cursor-default;
+  }
+
+  input {
+    @apply bg-gray-50 border border-highlight focus:border-focus outline-none;
+  }
+
+  /* Hide the "All" button */
+  button[name='select'] {
+    @apply hidden;
+  }
+}
+
 /* Add default icon. Needs low priority so it can be overwritten */
 .cm-completionIcon::after {
   content: '𝑥';

src-web/components/core/Editor/Editor.tsx

@@ -219,28 +219,35 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
   return (
     <div className="group relative h-full w-full">
       {cmContainer}
-      {format && (
-        <HStack space={0.5} alignItems="center" className="absolute bottom-2 right-0 ">
+      {(format || actions) && (
+        <HStack
+          space={1}
+          alignItems="center"
+          justifyContent="end"
+          className="absolute bottom-2 left-0 right-0"
+        >
+          {format && (
+            <IconButton
+              showConfirm
+              size="sm"
+              title="Reformat contents"
+              icon="magicWand"
+              className="transition-all opacity-0 group-hover:opacity-100"
+              onClick={() => {
+                if (cm.current === null) return;
+                const { doc } = cm.current.view.state;
+                const formatted = format(doc.toString());
+                // Update editor and blur because the cursor will reset anyway
+                cm.current.view.dispatch({
+                  changes: { from: 0, to: doc.length, insert: formatted },
+                });
+                cm.current.view.contentDOM.blur();
+                // Fire change event
+                onChange?.(formatted);
+              }}
+            />
+          )}
           {actions}
-          <IconButton
-            showConfirm
-            size="sm"
-            title="Reformat contents"
-            icon="magicWand"
-            className="transition-opacity opacity-0 group-hover:opacity-70"
-            onClick={() => {
-              if (cm.current === null) return;
-              const { doc } = cm.current.view.state;
-              const formatted = format(doc.toString());
-              // Update editor and blur because the cursor will reset anyway
-              cm.current.view.dispatch({
-                changes: { from: 0, to: doc.length, insert: formatted },
-              });
-              cm.current.view.contentDOM.blur();
-              // Fire change event
-              onChange?.(formatted);
-            }}
-          />
         </HStack>
       )}
     </div>

src-web/components/responseViewers/TextViewer.tsx

@@ -1,8 +1,15 @@
+import { useState } from 'react';
+import { useDebouncedSetState } from '../../hooks/useDebouncedSetState';
+import { useFilterResponse } from '../../hooks/useFilterResponse';
 import { useResponseBodyText } from '../../hooks/useResponseBodyText';
 import { useResponseContentType } from '../../hooks/useResponseContentType';
+import { useToggle } from '../../hooks/useToggle';
 import { tryFormatJson } from '../../lib/formatters';
 import type { HttpResponse } from '../../lib/models';
 import { Editor } from '../core/Editor';
+import { IconButton } from '../core/IconButton';
+import { Input } from '../core/Input';
+import { HStack } from '../core/Stacks';
 
 interface Props {
   response: HttpResponse;
@@ -10,17 +17,48 @@ interface Props {
 }
 
 export function TextViewer({ response, pretty }: Props) {
+  const [isSearching, toggleIsSearching] = useToggle();
+  const [filterText, setFilterText] = useDebouncedSetState<string>('', 500);
+
   const contentType = useResponseContentType(response);
   const rawBody = useResponseBodyText(response) ?? '';
-  const body = pretty && contentType?.includes('json') ? tryFormatJson(rawBody) : rawBody;
+  const formattedBody = pretty && contentType?.includes('json') ? tryFormatJson(rawBody) : rawBody;
+  const filteredResponse = useFilterResponse({ filter: filterText, responseId: response.id });
+
+  const body = filteredResponse ?? formattedBody;
+
+  const actions = contentType?.startsWith('application/json') && (
+    <HStack className="w-full" justifyContent="end" space={1}>
+      {isSearching && (
+        <Input
+          hideLabel
+          autoFocus
+          containerClassName="bg-gray-50"
+          size="sm"
+          placeholder="Filter response"
+          label="Filter with JSONPath"
+          name="filter"
+          defaultValue={filterText}
+          onChange={setFilterText}
+        />
+      )}
+      <IconButton
+        size="sm"
+        icon={isSearching ? 'x' : 'magnifyingGlass'}
+        title="Filter response"
+        onClick={toggleIsSearching}
+      />
+    </HStack>
+  );
 
   return (
     <Editor
       readOnly
-      forceUpdateKey={body}
       className="bg-gray-50 dark:!bg-gray-100"
+      forceUpdateKey={body}
       defaultValue={body}
       contentType={contentType}
+      actions={actions}
     />
   );
 }