Fix response filtering

README.md

@@ -1,4 +1,4 @@
-# [Yaak API Client](https://yaak.app)
+# Yaak API Client
 
 Yaak is a desktop API client for organizing and executing REST, GraphQL, and gRPC
 requests. It's built using [Tauri](https://tauri.app), Rust, and ReactJS.

src-tauri/src/http_request.rs

@@ -406,9 +406,9 @@ pub async fn send_http_request<R: Runtime>(
                     let base_dir = dir.join("responses");
                     create_dir_all(base_dir.clone()).await.expect("Failed to create responses dir");
                     let body_path = if response_id.is_empty() {
-                        base_dir.join(response_id.clone())
-                    } else {
                         base_dir.join(uuid::Uuid::new_v4().to_string())
+                    } else {
+                        base_dir.join(response_id.clone())
                     };
 
                     {
@@ -459,11 +459,11 @@ pub async fn send_http_request<R: Runtime>(
                         }
                         match chunk {
                             Ok(Some(bytes)) => {
+                                let mut r = response.lock().await;
+                                r.elapsed = start.elapsed().as_millis() as i32;
                                 f.write_all(&bytes).await.expect("Failed to write to file");
                                 f.flush().await.expect("Failed to flush file");
                                 written_bytes += bytes.len();
-                                let mut r = response.lock().await;
-                                r.elapsed = start.elapsed().as_millis() as i32;
                                 r.content_length = Some(written_bytes as i32);
                                 update_response_if_id(&window, &r)
                                     .await

src-tauri/tauri.conf.json

@@ -72,9 +72,6 @@
       "rpm"
     ],
     "createUpdaterArtifacts": "v1Compatible",
-    "iOS": {
-      "developmentTeam": "7PU3P6ELJ8"
-    },
     "macOS": {
       "minimumSystemVersion": "13.0",
       "exceptionDomain": "",

src-tauri/yaak_models/src/queries.rs

@@ -509,7 +509,7 @@ pub async fn get_grpc_connection<R: Runtime>(
     Ok(stmt.query_row(&*params.as_params(), |row| row.try_into())?)
 }
 
-pub async fn list_grpc_connections<R: Runtime>(
+pub async fn list_grpc_connections_for_workspace<R: Runtime>(
     mgr: &impl Manager<R>,
     workspace_id: &str,
 ) -> Result<Vec<GrpcConnection>> {
@@ -573,6 +573,16 @@ pub async fn delete_all_grpc_connections<R: Runtime>(
     Ok(())
 }
 
+pub async fn delete_all_grpc_connections_for_workspace<R: Runtime>(
+    window: &WebviewWindow<R>,
+    workspace_id: &str,
+) -> Result<()> {
+    for r in list_grpc_connections_for_workspace(window, workspace_id).await? {
+        delete_grpc_connection(window, &r.id).await?;
+    }
+    Ok(())
+}
+
 pub async fn upsert_grpc_event<R: Runtime>(
     window: &WebviewWindow<R>,
     event: &GrpcEvent,
@@ -1433,7 +1443,17 @@ pub async fn delete_all_http_responses_for_request<R: Runtime>(
     Ok(())
 }
 
-pub async fn list_http_responses<R: Runtime>(
+pub async fn delete_all_http_responses_for_workspace<R: Runtime>(
+    window: &WebviewWindow<R>,
+    workspace_id: &str,
+) -> Result<()> {
+    for r in list_http_responses_for_workspace(window, workspace_id, None).await? {
+        delete_http_response(window, &r.id).await?;
+    }
+    Ok(())
+}
+
+pub async fn list_http_responses_for_workspace<R: Runtime>(
     mgr: &impl Manager<R>,
     workspace_id: &str,
     limit: Option<i64>,

src-tauri/yaak_plugin_runtime/src/manager.rs

@@ -273,9 +273,9 @@ impl PluginManager {
         Ok(())
     }
 
-    pub async fn subscribe(&self) -> (String, mpsc::Receiver<InternalEvent>) {
+    pub async fn subscribe(&self, label: &str) -> (String, mpsc::Receiver<InternalEvent>) {
         let (tx, rx) = mpsc::channel(128);
-        let rx_id = generate_id();
+        let rx_id = format!("{label}_{}", generate_id());
         self.subscribers.lock().await.insert(rx_id.clone(), tx);
         (rx_id, rx)
     }
@@ -362,7 +362,8 @@ impl PluginManager {
         payload: &InternalEventPayload,
         plugins: Vec<PluginHandle>,
     ) -> Result<Vec<InternalEvent>> {
-        let (rx_id, mut rx) = self.subscribe().await;
+        let label = format!("wait[{}]", plugins.len());
+        let (rx_id, mut rx) = self.subscribe(label.as_str()).await;
 
         // 1. Build the events with IDs and everything
         let events_to_send = plugins
@@ -557,9 +558,9 @@ impl PluginManager {
         content_type: &str,
     ) -> Result<FilterResponse> {
         let plugin_name = if content_type.to_lowercase().contains("json") {
-            "filter-jsonpath"
+            "@yaakapp/filter-jsonpath"
         } else {
-            "filter-xpath"
+            "@yaakapp/filter-xpath"
         };
 
         let plugin = self

src-web/components/TemplateFunctionDialog.tsx

@@ -1,3 +1,4 @@
+import type { Folder, HttpRequest } from '@yaakapp-internal/models';
 import type {
   TemplateFunction,
   TemplateFunctionArg,
@@ -12,6 +13,7 @@ import classNames from 'classnames';
 import { useCallback, useMemo, useState } from 'react';
 import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useDebouncedValue } from '../hooks/useDebouncedValue';
+import { useFolders } from '../hooks/useFolders';
 import { useHttpRequests } from '../hooks/useHttpRequests';
 import { useRenderTemplate } from '../hooks/useRenderTemplate';
 import { useTemplateTokensToString } from '../hooks/useTemplateTokensToString';
@@ -253,6 +255,7 @@ function HttpRequestArg({
   value: string;
   onChange: (v: string) => void;
 }) {
+  const folders = useFolders();
   const httpRequests = useHttpRequests();
   const activeRequest = useActiveRequest();
   return (
@@ -262,15 +265,35 @@ function HttpRequestArg({
       onChange={onChange}
       value={value}
       options={[
-        ...httpRequests.map((r) => ({
-          label: fallbackRequestName(r) + (activeRequest?.id === r.id ? ' (current)' : ''),
-          value: r.id,
-        })),
+        ...httpRequests.map((r) => {
+          return {
+            label: buildRequestBreadcrumbs(r, folders).join(' / ') + (r.id == activeRequest?.id ? ' (current)' : ''),
+            value: r.id,
+          };
+        }),
       ]}
     />
   );
 }
 
+function buildRequestBreadcrumbs(request: HttpRequest, folders: Folder[]): string[] {
+  const ancestors: (HttpRequest | Folder)[] = [request];
+
+  const next = () => {
+    const latest = ancestors[0];
+    if (latest == null) return [];
+
+    const parent = folders.find((f) => f.id === latest.folderId);
+    if (parent == null) return;
+
+    ancestors.unshift(parent);
+    next();
+  };
+  next();
+
+  return ancestors.map((a) => (a.model === 'folder' ? a.name : fallbackRequestName(a)));
+}
+
 function CheckboxArg({
   arg,
   onChange,

src-web/components/WorkspaceActionsDropdown.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import { memo, useCallback, useMemo } from 'react';
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
 import { useCreateWorkspace } from '../hooks/useCreateWorkspace';
+import { useDeleteSendHistory } from '../hooks/useDeleteSendHistory';
 import { useDeleteWorkspace } from '../hooks/useDeleteWorkspace';
 import { useOpenWorkspace } from '../hooks/useOpenWorkspace';
 import { usePrompt } from '../hooks/usePrompt';
@@ -36,6 +37,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
   const settings = useSettings();
   const openWorkspace = useOpenWorkspace();
   const openWorkspaceNewWindow = settings?.openWorkspaceNewWindow ?? null;
+  const deleteSendHistory = useDeleteSendHistory();
 
   const { workspaceItems, extraItems } = useMemo<{
     workspaceItems: RadioDropdownItem[];
@@ -70,9 +72,15 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
           updateWorkspace.mutate({ name });
         },
       },
+      {
+        key: 'delete-responses',
+        label: 'Clear Send History',
+        leftSlot: <Icon icon="history" />,
+        onSelect: deleteSendHistory.mutate,
+      },
       {
         key: 'delete',
-        label: 'Delete',
+        label: 'Delete Workspace',
         leftSlot: <Icon icon="trash" />,
         onSelect: deleteWorkspace.mutate,
         variant: 'danger',
@@ -90,7 +98,8 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
   }, [
     activeWorkspace?.name,
     activeWorkspaceId,
-    createWorkspace,
+    createWorkspace.mutate,
+    deleteSendHistory.mutate,
     deleteWorkspace.mutate,
     prompt,
     updateWorkspace,

src-web/components/core/Dropdown.tsx

@@ -350,8 +350,9 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
     container: CSSProperties;
     menu: CSSProperties;
     triangle: CSSProperties;
+    upsideDown: boolean;
   }>(() => {
-    if (triggerShape == null) return { container: {}, triangle: {}, menu: {} };
+    if (triggerShape == null) return { container: {}, triangle: {}, menu: {}, upsideDown: false };
 
     const menuMarginY = 5;
     const docRect = document.documentElement.getBoundingClientRect();
@@ -364,6 +365,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
     const upsideDown = heightBelow < heightAbove && heightBelow < items.length * 25 + 20 + 200;
     const triggerWidth = triggerShape.right - triggerShape.left;
     return {
+      upsideDown,
       container: {
         top: !upsideDown ? top + menuMarginY : undefined,
         bottom: upsideDown
@@ -426,7 +428,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
             <motion.div
               tabIndex={0}
               onKeyDown={handleMenuKeyDown}
-              initial={{ opacity: 0, y: -5, scale: 0.98 }}
+              initial={{ opacity: 0, y: (styles.upsideDown ? 1 : -1) * 5, scale: 0.98 }}
               animate={{ opacity: 1, y: 0, scale: 1 }}
               role="menu"
               aria-orientation="vertical"

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

@@ -364,7 +364,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
         changes: cm.current.view.state.changes({
           from: 0,
           to: currentDoc.length,
-          insert: currentDoc,
+          insert: defaultValue,
         }),
       });
     }

src-web/components/core/Icon.tsx

@@ -26,7 +26,7 @@ const icons = {
   chevron_down: lucide.ChevronDownIcon,
   chevron_right: lucide.ChevronRightIcon,
   circle_alert: lucide.CircleAlertIcon,
-  cloud: lucide.CloudIcon,
+  clock: lucide.ClockIcon,
   code: lucide.CodeIcon,
   cookie: lucide.CookieIcon,
   copy: lucide.CopyIcon,
@@ -48,6 +48,7 @@ const icons = {
   grip_vertical: lucide.GripVerticalIcon,
   hand: lucide.HandIcon,
   help: lucide.CircleHelpIcon,
+  history: lucide.HistoryIcon,
   house: lucide.HomeIcon,
   info: lucide.InfoIcon,
   keyboard: lucide.KeyboardIcon,

src-web/components/responseViewers/EventStreamViewer.tsx

@@ -65,7 +65,14 @@ function ActualEventStreamViewer({ response }: Props) {
                   <Separator />
                 </div>
                 <div className="pl-2 overflow-y-auto">
-                  <div className="mb-2 select-text cursor-text font-semibold">Message Received</div>
+                  <HStack space={1.5} className="mb-2 select-text cursor-text font-semibold">
+                    <EventLabels
+                      className="text-sm"
+                      event={activeEvent}
+                      index={activeEventIndex ?? 0}
+                    />
+                    Message Received
+                  </HStack>
                   {!showLarge && activeEvent.data.length > 1000 * 1000 ? (
                     <VStack space={2} className="italic text-text-subtlest">
                       Message previews larger than 1MB are hidden
@@ -148,6 +155,7 @@ function EventStreamEventsVirtual({
               <EventStreamEvent
                 event={event}
                 isActive={virtualItem.index === activeEventIndex}
+                index={virtualItem.index}
                 onClick={() => {
                   if (virtualItem.index === activeEventIndex) setActiveEventIndex(null);
                   else setActiveEventIndex(virtualItem.index);
@@ -166,11 +174,13 @@ function EventStreamEvent({
   isActive,
   event,
   className,
+  index,
 }: {
   onClick: () => void;
   isActive: boolean;
   event: ServerSentEvent;
   className?: string;
+  index: number;
 }) {
   return (
     <motion.button
@@ -186,19 +196,33 @@ function EventStreamEvent({
       )}
     >
       <Icon className={classNames('text-info')} title="Server Message" icon="arrow_big_down_dash" />
-      <HStack space={1.5} className="text-sm">
-        {event.eventType && (
-          <InlineCode className={classNames('py-0', isActive && 'bg-text-subtlest text-text')}>
-            {event.eventType}
-          </InlineCode>
-        )}
-        {event.id && (
-          <InlineCode className={classNames('py-0', isActive && 'bg-text-subtlest text-text')}>
-            {event.id}
-          </InlineCode>
-        )}
-      </HStack>
+      <EventLabels className="text-sm" event={event} isActive={isActive} index={index} />
       <div className={classNames('w-full truncate text-xs')}>{event.data.slice(0, 1000)}</div>
     </motion.button>
   );
 }
+
+function EventLabels({
+  className,
+  event,
+  index,
+  isActive,
+}: {
+  event: ServerSentEvent;
+  index: number;
+  className: string;
+  isActive?: boolean;
+}) {
+  return (
+    <HStack space={1.5} alignItems="center" className={className}>
+      <InlineCode className={classNames('py-0', isActive && 'bg-text-subtlest text-text')}>
+        {event.id ?? index}
+      </InlineCode>
+      {event.eventType && (
+        <InlineCode className={classNames('py-0', isActive && 'bg-text-subtlest text-text')}>
+          {event.eventType}
+        </InlineCode>
+      )}
+    </HStack>
+  );
+}

src-web/components/responseViewers/HTMLOrTextViewer.tsx

@@ -41,6 +41,7 @@ export function HTMLOrTextViewer({ response, pretty, textViewerClassName }: Prop
         className={textViewerClassName}
         onSaveResponse={saveResponse.mutate}
         responseId={response.id}
+        requestId={response.requestId}
       />
     );
   }

src-web/components/responseViewers/TextViewer.tsx

@@ -28,6 +28,7 @@ interface Props {
   text: string;
   language: EditorProps['language'];
   responseId: string;
+  requestId: string;
   onSaveResponse: () => void;
 }
 
@@ -37,20 +38,21 @@ export function TextViewer({
   language,
   text,
   responseId,
+  requestId,
   pretty,
   className,
   onSaveResponse,
 }: Props) {
   const [filterTextMap, setFilterTextMap] = useFilterText();
   const [showLargeResponse, toggleShowLargeResponse] = useToggle();
-  const filterText = filterTextMap[responseId] ?? null;
+  const filterText = filterTextMap[requestId] ?? null;
   const copy = useCopy();
   const debouncedFilterText = useDebouncedValue(filterText, 200);
   const setFilterText = useCallback(
     (v: string | null) => {
-      setFilterTextMap((m) => ({ ...m, [responseId]: v }));
+      setFilterTextMap((m) => ({ ...m, [requestId]: v }));
     },
-    [setFilterTextMap, responseId],
+    [setFilterTextMap, requestId],
   );
 
   const isSearching = filterText != null;
@@ -75,7 +77,7 @@ export function TextViewer({
       nodes.push(
         <div key="input" className="w-full !opacity-100">
           <Input
-            key={responseId}
+            key={requestId}
             validate={!filteredResponse.error}
             hideLabel
             autoFocus
@@ -110,7 +112,7 @@ export function TextViewer({
     filteredResponse.error,
     isSearching,
     language,
-    responseId,
+    requestId,
     setFilterText,
     toggleSearch,
   ]);

src-web/hooks/useAlert.ts

@@ -4,20 +4,17 @@ import { useDialog } from '../components/DialogContext';
 import type { AlertProps } from './Alert';
 import { Alert } from './Alert';
 
+interface AlertArg {
+  id: string;
+  title: DialogProps['title'];
+  body: AlertProps['body'];
+  size?: DialogProps['size'];
+}
+
 export function useAlert() {
   const dialog = useDialog();
-  return useCallback(
-    ({
-      id,
-      title,
-      body,
-      size = 'sm',
-    }: {
-      id: string;
-      title: DialogProps['title'];
-      body: AlertProps['body'];
-      size?: DialogProps['size'];
-    }) =>
+  return useCallback<(a: AlertArg) => void>(
+    ({ id, title, body, size = 'sm' }: AlertArg) =>
       dialog.show({
         id,
         title,

src-web/hooks/useDeleteSendHistory.tsx

@@ -0,0 +1,43 @@
+import { useMutation } from '@tanstack/react-query';
+import { count } from '../lib/pluralize';
+import { invokeCmd } from '../lib/tauri';
+import { useActiveWorkspace } from './useActiveWorkspace';
+import { useAlert } from './useAlert';
+import { useConfirm } from './useConfirm';
+import { useGrpcConnections } from './useGrpcConnections';
+import { useHttpResponses } from './useHttpResponses';
+
+export function useDeleteSendHistory() {
+  const confirm = useConfirm();
+  const alert = useAlert();
+  const activeWorkspace = useActiveWorkspace();
+  const httpResponses = useHttpResponses();
+  const grpcConnections = useGrpcConnections();
+  const labels = [
+    httpResponses.length > 0 ? count('Http Response', httpResponses.length) : null,
+    grpcConnections.length > 0 ? count('Grpc Connection', grpcConnections.length) : null,
+  ].filter((l) => l != null);
+
+  return useMutation({
+    mutationKey: ['delete_send_history'],
+    mutationFn: async () => {
+      if (labels.length === 0) {
+        alert({
+          id: 'no-responses',
+          title: 'Nothing to Delete',
+          body: 'There are no Http Response or Grpc Connections to delete',
+        });
+        return;
+      }
+
+      const confirmed = await confirm({
+        id: 'delete-send-history',
+        title: 'Clear Send History',
+        variant: 'delete',
+        description: <>Delete {labels.join(' and ')}?</>,
+      });
+      if (!confirmed) return;
+      await invokeCmd('cmd_delete_send_history', { workspaceId: activeWorkspace?.id ?? 'n/a' });
+    },
+  });
+}

src-web/hooks/useGrpc.ts

@@ -3,6 +3,7 @@ import { emit } from '@tauri-apps/api/event';
 import type { GrpcConnection, GrpcRequest } from '@yaakapp-internal/models';
 import { trackEvent } from '../lib/analytics';
 import { minPromiseMillis } from '../lib/minPromiseMillis';
+import { isResponseLoading } from '../lib/model_util';
 import { invokeCmd } from '../lib/tauri';
 import { useActiveEnvironment } from './useActiveEnvironment';
 import { useDebouncedValue } from './useDebouncedValue';
@@ -22,27 +23,27 @@ export function useGrpc(
 
   const go = useMutation<void, string>({
     mutationKey: ['grpc_go', conn?.id],
-    mutationFn: async () =>
-      await invokeCmd('cmd_grpc_go', { requestId, environmentId: environment?.id, protoFiles }),
+    mutationFn: () =>
+      invokeCmd<void>('cmd_grpc_go', { requestId, environmentId: environment?.id, protoFiles }),
     onSettled: () => trackEvent('grpc_request', 'send'),
   });
 
   const send = useMutation({
     mutationKey: ['grpc_send', conn?.id],
-    mutationFn: async ({ message }: { message: string }) =>
-      await emit(`grpc_client_msg_${conn?.id ?? 'none'}`, { Message: message }),
+    mutationFn: ({ message }: { message: string }) =>
+      emit(`grpc_client_msg_${conn?.id ?? 'none'}`, { Message: message }),
     onSettled: () => trackEvent('grpc_connection', 'send'),
   });
 
   const cancel = useMutation({
     mutationKey: ['grpc_cancel', conn?.id ?? 'n/a'],
-    mutationFn: async () => await emit(`grpc_client_msg_${conn?.id ?? 'none'}`, 'Cancel'),
+    mutationFn: () => emit(`grpc_client_msg_${conn?.id ?? 'none'}`, 'Cancel'),
     onSettled: () => trackEvent('grpc_connection', 'cancel'),
   });
 
   const commit = useMutation({
     mutationKey: ['grpc_commit', conn?.id ?? 'n/a'],
-    mutationFn: async () => await emit(`grpc_client_msg_${conn?.id ?? 'none'}`, 'Commit'),
+    mutationFn: () => emit(`grpc_client_msg_${conn?.id ?? 'none'}`, 'Commit'),
     onSettled: () => trackEvent('grpc_connection', 'commit'),
   });
 
@@ -51,11 +52,11 @@ export function useGrpc(
   const reflect = useQuery<ReflectResponseService[], string>({
     enabled: req != null,
     queryKey: ['grpc_reflect', req?.id ?? 'n/a', debouncedUrl, protoFiles],
-    queryFn: async () =>
-      (await minPromiseMillis(
+    queryFn: () =>
+      minPromiseMillis<ReflectResponseService[]>(
         invokeCmd('cmd_grpc_reflect', { requestId, protoFiles }),
         300,
-      )) as ReflectResponseService[],
+      ),
   });
 
   return {
@@ -63,7 +64,7 @@ export function useGrpc(
     reflect,
     cancel,
     commit,
-    isStreaming: conn != null && conn.elapsed === 0,
+    isStreaming: isResponseLoading(conn),
     send,
   };
 }

src-web/lib/tauri.ts

@@ -14,6 +14,7 @@ type TauriCmd =
   | 'cmd_curl_to_request'
   | 'cmd_delete_all_grpc_connections'
   | 'cmd_delete_all_http_responses'
+  | 'cmd_delete_send_history'
   | 'cmd_delete_cookie_jar'
   | 'cmd_delete_environment'
   | 'cmd_delete_folder'