Working sidebar actions for grpc

src-web/hooks/Confirm.tsx

@@ -30,7 +30,7 @@ export function Confirm({ onHide, onResult, variant = 'confirm' }: ConfirmProps)
   };
 
   return (
-    <HStack space={2} justifyContent="end" className="mt-2 mb-4 flex-row-reverse">
+    <HStack space={2} justifyContent="start" className="mt-2 mb-4 flex-row-reverse">
       <Button className="focus" color={colors[variant]} onClick={handleSuccess}>
         {confirmButtonTexts[variant]}
       </Button>

src-web/hooks/useDeleteAnyGrpcRequest.tsx

@@ -0,0 +1,43 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { invoke } from '@tauri-apps/api';
+import { InlineCode } from '../components/core/InlineCode';
+import { trackEvent } from '../lib/analytics';
+import { fallbackRequestName } from '../lib/fallbackRequestName';
+import type { GrpcRequest } from '../lib/models';
+import { getGrpcRequest } from '../lib/store';
+import { useConfirm } from './useConfirm';
+import { grpcRequestsQueryKey } from './useGrpcRequests';
+
+export function useDeleteAnyGrpcRequest() {
+  const queryClient = useQueryClient();
+  const confirm = useConfirm();
+
+  return useMutation<GrpcRequest | null, string, string>({
+    mutationFn: async (id) => {
+      const request = await getGrpcRequest(id);
+      if (request == null) return null;
+
+      const confirmed = await confirm({
+        id: 'delete-grpc-request',
+        title: 'Delete Request',
+        variant: 'delete',
+        description: (
+          <>
+            Permanently delete <InlineCode>{fallbackRequestName(request)}</InlineCode>?
+          </>
+        ),
+      });
+      if (!confirmed) return null;
+      return invoke('cmd_delete_grpc_request', { requestId: id });
+    },
+    onSettled: () => trackEvent('GrpcRequest', 'Delete'),
+    onSuccess: async (request) => {
+      if (request === null) return;
+
+      const { workspaceId, id: requestId } = request;
+      queryClient.setQueryData<GrpcRequest[]>(grpcRequestsQueryKey({ workspaceId }), (requests) =>
+        (requests ?? []).filter((r) => r.id !== requestId),
+      );
+    },
+  });
+}

src-web/hooks/useDeleteAnyHttpRequest.tsx

@@ -9,13 +9,15 @@ import { useConfirm } from './useConfirm';
 import { httpRequestsQueryKey } from './useHttpRequests';
 import { httpResponsesQueryKey } from './useHttpResponses';
 
-export function useDeleteAnyRequest() {
+export function useDeleteAnyHttpRequest() {
   const queryClient = useQueryClient();
   const confirm = useConfirm();
 
   return useMutation<HttpRequest | null, string, string>({
     mutationFn: async (id) => {
       const request = await getHttpRequest(id);
+      if (request == null) return null;
+
       const confirmed = await confirm({
         id: 'delete-request',
         title: 'Delete Request',

src-web/hooks/useDeleteRequest.tsx

@@ -1,9 +1,9 @@
 import { useMutation } from '@tanstack/react-query';
 import type { HttpRequest } from '../lib/models';
-import { useDeleteAnyRequest } from './useDeleteAnyRequest';
+import { useDeleteAnyHttpRequest } from './useDeleteAnyHttpRequest';
 
 export function useDeleteRequest(id: string | null) {
-  const deleteAnyRequest = useDeleteAnyRequest();
+  const deleteAnyRequest = useDeleteAnyHttpRequest();
 
   return useMutation<HttpRequest | null, string>({
     mutationFn: () => deleteAnyRequest.mutateAsync(id ?? 'n/a'),