Add "Cancel" action to proxy intercept

admin/src/features/intercept/components/EditRequest.tsx

@@ -1,3 +1,4 @@
+import CancelIcon from "@mui/icons-material/Cancel";
 import SendIcon from "@mui/icons-material/Send";
 import { Alert, Box, Button, CircularProgress, Typography } from "@mui/material";
 import { useRouter } from "next/router";
@@ -12,6 +13,7 @@ import UrlBar, { HttpMethod, HttpProto, httpProtoMap } from "lib/components/UrlB
 import {
   HttpProtocol,
   HttpRequest,
+  useCancelRequestMutation,
   useGetInterceptedRequestQuery,
   useModifyRequestMutation,
 } from "lib/graphql/generated";
@@ -27,7 +29,6 @@ function EditRequest(): JSX.Element {
     // If there's no request selected and there are pending reqs, navigate to
     // the first one in the list. This helps you quickly review/handle reqs
     // without having to manually select the next one in the requests table.
-    console.log(router.isReady, router.query.id, interceptedRequests?.length);
     if (router.isReady && !router.query.id && interceptedRequests?.length) {
       const req = interceptedRequests[0];
       router.replace(`/proxy/intercept?id=${req.id}`);
@@ -104,6 +105,16 @@ function EditRequest(): JSX.Element {
   const interceptedReq = reqId ? getReqResult?.data?.interceptedRequest : undefined;
 
   const [modifyRequest, modifyResult] = useModifyRequestMutation();
+  const [cancelRequest, cancelResult] = useCancelRequestMutation();
+
+  const onActionCompleted = () => {
+    setURL("");
+    setMethod(HttpMethod.Get);
+    setBody("");
+    setQueryParams([]);
+    setHeaders([]);
+    router.replace(`/proxy/intercept`);
+  };
 
   const handleFormSubmit: React.FormEventHandler = (e) => {
     e.preventDefault();
@@ -132,15 +143,29 @@ function EditRequest(): JSX.Element {
           },
         });
       },
-      onCompleted: () => {
-        setURL("");
-        setMethod(HttpMethod.Get);
-        setBody("");
-        setQueryParams([]);
-        setHeaders([]);
-        console.log("done!");
-        router.replace(`/proxy/intercept`);
+      onCompleted: onActionCompleted,
+    });
+  };
+
+  const handleCancelClick = () => {
+    if (!interceptedReq) {
+      return;
+    }
+
+    cancelRequest({
+      variables: {
+        id: interceptedReq.id,
       },
+      update(cache) {
+        cache.modify({
+          fields: {
+            interceptedRequests(existing: HttpRequest[], { readField }) {
+              return existing.filter((ref) => interceptedReq.id !== readField("id", ref));
+            },
+          },
+        });
+      },
+      onCompleted: onActionCompleted,
     });
   };
 
@@ -161,17 +186,32 @@ function EditRequest(): JSX.Element {
             variant="contained"
             disableElevation
             type="submit"
-            disabled={!interceptedReq || modifyResult.loading}
+            disabled={!interceptedReq || modifyResult.loading || cancelResult.loading}
             startIcon={modifyResult.loading ? <CircularProgress size={22} /> : <SendIcon />}
           >
             Send
           </Button>
+          <Button
+            variant="contained"
+            color="error"
+            disableElevation
+            onClick={handleCancelClick}
+            disabled={!interceptedReq || modifyResult.loading || cancelResult.loading}
+            startIcon={cancelResult.loading ? <CircularProgress size={22} /> : <CancelIcon />}
+          >
+            Cancel
+          </Button>
         </Box>
         {modifyResult.error && (
           <Alert severity="error" sx={{ mt: 1 }}>
             {modifyResult.error.message}
           </Alert>
         )}
+        {cancelResult.error && (
+          <Alert severity="error" sx={{ mt: 1 }}>
+            {cancelResult.error.message}
+          </Alert>
+        )}
       </Box>
 
       <Box flex="1 auto" position="relative">

admin/src/features/intercept/graphql/cancelRequest.graphql

@@ -0,0 +1,5 @@
+mutation CancelRequest($id: ID!) {
+  cancelRequest(id: $id) {
+    success
+  }
+}

admin/src/lib/graphql/generated.tsx

@@ -18,6 +18,11 @@ export type Scalars = {
   URL: any;
 };
 
+export type CancelRequestResult = {
+  __typename?: 'CancelRequestResult';
+  success: Scalars['Boolean'];
+};
+
 export type ClearHttpRequestLogResult = {
   __typename?: 'ClearHTTPRequestLogResult';
   success: Scalars['Boolean'];
@@ -127,6 +132,7 @@ export type ModifyRequestResult = {
 
 export type Mutation = {
   __typename?: 'Mutation';
+  cancelRequest: CancelRequestResult;
   clearHTTPRequestLog: ClearHttpRequestLogResult;
   closeProject: CloseProjectResult;
   createOrUpdateSenderRequest: SenderRequest;
@@ -143,6 +149,11 @@ export type Mutation = {
 };
 
 
+export type MutationCancelRequestArgs = {
+  id: Scalars['ID'];
+};
+
+
 export type MutationCreateOrUpdateSenderRequestArgs = {
   request: SenderRequestInput;
 };
@@ -285,6 +296,13 @@ export type SenderRequestInput = {
   url: Scalars['URL'];
 };
 
+export type CancelRequestMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type CancelRequestMutation = { __typename?: 'Mutation', cancelRequest: { __typename?: 'CancelRequestResult', success: boolean } };
+
 export type GetInterceptedRequestQueryVariables = Exact<{
   id: Scalars['ID'];
 }>;
@@ -410,6 +428,39 @@ export type GetInterceptedRequestsQueryVariables = Exact<{ [key: string]: never;
 export type GetInterceptedRequestsQuery = { __typename?: 'Query', interceptedRequests: Array<{ __typename?: 'HttpRequest', id: string, url: any, method: HttpMethod }> };
 
 
+export const CancelRequestDocument = gql`
+    mutation CancelRequest($id: ID!) {
+  cancelRequest(id: $id) {
+    success
+  }
+}
+    `;
+export type CancelRequestMutationFn = Apollo.MutationFunction<CancelRequestMutation, CancelRequestMutationVariables>;
+
+/**
+ * __useCancelRequestMutation__
+ *
+ * To run a mutation, you first call `useCancelRequestMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCancelRequestMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [cancelRequestMutation, { data, loading, error }] = useCancelRequestMutation({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useCancelRequestMutation(baseOptions?: Apollo.MutationHookOptions<CancelRequestMutation, CancelRequestMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<CancelRequestMutation, CancelRequestMutationVariables>(CancelRequestDocument, options);
+      }
+export type CancelRequestMutationHookResult = ReturnType<typeof useCancelRequestMutation>;
+export type CancelRequestMutationResult = Apollo.MutationResult<CancelRequestMutation>;
+export type CancelRequestMutationOptions = Apollo.BaseMutationOptions<CancelRequestMutation, CancelRequestMutationVariables>;
 export const GetInterceptedRequestDocument = gql`
     query GetInterceptedRequest($id: ID!) {
   interceptedRequest(id: $id) {