Expose response headers in DocsService

docs-client/src/containers/MethodPage/DebugPage.tsx

@@ -149,6 +149,9 @@ const DebugPage: React.FunctionComponent<Props> = ({
   const [requestBody, setRequestBody] = useState('');
   const [debugResponse, setDebugResponse] = useState('');
   const [additionalQueries, setAdditionalQueries] = useState('');
+  const [debugResponseHeaders, setDebugResponseHeaders] = useState<
+    [string, string[]][]
+  >([]);
   const [additionalPath, setAdditionalPath] = useState('');
   const [additionalHeaders, setAdditionalHeaders] = useState('');
   const [stickyHeaders, toggleStickyHeaders] = useReducer(toggle, false);
@@ -159,13 +162,36 @@ const DebugPage: React.FunctionComponent<Props> = ({
     false,
   );
 
+  const [currentApiId, setCurrentApiId] = useState<string>(
+    method.id || method.name,
+  );
+  const [responseCache, setResponseCache] = useState<
+    Record<string, { body: string; headers: Map<string, string[]> }>
+  >({});
+
   const classes = useStyles();
 
   const transport = TRANSPORTS.getDebugTransport(method);
   if (!transport) {
     throw new Error("This method doesn't have a debug transport.");
   }
 
+  useEffect(() => {
+    const apiId = method.id || method.name;
+    if (apiId !== currentApiId) {
+      setCurrentApiId(apiId);
+      if (responseCache[apiId]) {
+        setDebugResponse(responseCache[apiId].body);
+        setDebugResponseHeaders(
+          Array.from(responseCache[apiId].headers.entries()),
+        );
+      } else {
+        setDebugResponse('');
+        setDebugResponseHeaders([]);
+      }
+    }
+  }, [method, currentApiId, responseCache]);
+
   useEffect(() => {
     const urlParams = new URLSearchParams(location.search);
 
@@ -202,6 +228,7 @@ const DebugPage: React.FunctionComponent<Props> = ({
 
     if (!keepDebugResponse) {
       setDebugResponse('');
+      setDebugResponseHeaders([]);
       toggleKeepDebugResponse(false);
     }
     setSnackbarOpen(false);
@@ -307,23 +334,23 @@ const DebugPage: React.FunctionComponent<Props> = ({
         escapeSingleQuote(requestBody),
       );
 
-      const headers = new Headers();
-      headers.set('content-type', transport.getDebugMimeType());
+      const headersObj = new Headers();
+      headersObj.set('content-type', transport.getDebugMimeType());
       if (process.env.WEBPACK_DEV === 'true') {
-        headers.set(docServiceDebug, 'true');
+        headersObj.set(docServiceDebug, 'true');
       }
       if (serviceType === ServiceType.GRAPHQL) {
-        headers.set('accept', 'application/json');
+        headersObj.set('accept', 'application/json');
       }
       if (additionalHeaders) {
         const entries = Object.entries(JSON.parse(additionalHeaders));
         entries.forEach(([key, value]) => {
-          headers.set(key, String(value));
+          headersObj.set(key, String(value));
         });
       }
 
       const headerOptions: string[] = [];
-      headers.forEach((value, key) => {
+      headersObj.forEach((value, key) => {
         headerOptions.push(`-H '${key}: ${value}'`);
       });
 
@@ -364,6 +391,7 @@ const DebugPage: React.FunctionComponent<Props> = ({
 
   const onClear = useCallback(() => {
     setDebugResponse('');
+    setDebugResponseHeaders([]);
   }, []);
 
   const executeRequest = useCallback(
@@ -390,24 +418,29 @@ const DebugPage: React.FunctionComponent<Props> = ({
       const headersText = params.get('headers');
       const headers = headersText ? JSON.parse(headersText) : {};
 
-      let executedDebugResponse;
       try {
-        executedDebugResponse = await transport.send(
+        const { body, headers: responseHeaders } = await transport.send(
           method,
           headers,
           parseServerRootPath(docServiceRoute),
           executedRequestBody,
           executedEndpointPath,
           queries,
         );
+        setDebugResponse(body);
+        setDebugResponseHeaders(Array.from(responseHeaders.entries()));
+        setResponseCache((prev) => ({
+          ...prev,
+          [currentApiId]: {
+            body,
+            headers: responseHeaders,
+          },
+        }));
       } catch (e) {
-        if (e instanceof Object) {
-          executedDebugResponse = e.toString();
-        } else {
-          executedDebugResponse = '<unknown>';
-        }
+        const message = e instanceof Object ? e.toString() : '<unknown>';
+        setDebugResponse(message);
+        setDebugResponseHeaders([]);
       }
-      setDebugResponse(executedDebugResponse);
     },
     [
       useRequestBody,
@@ -416,6 +449,7 @@ const DebugPage: React.FunctionComponent<Props> = ({
       method,
       transport,
       docServiceRoute,
+      currentApiId,
     ],
   );
 
@@ -505,6 +539,22 @@ const DebugPage: React.FunctionComponent<Props> = ({
     transport,
   ]);
 
+  useEffect(() => {
+    const newApiId = method.id || method.name;
+    if (newApiId !== currentApiId) {
+      setCurrentApiId(newApiId);
+      if (responseCache[newApiId]) {
+        setDebugResponse(responseCache[newApiId].body);
+        setDebugResponseHeaders(
+          Array.from(responseCache[newApiId].headers.entries()),
+        );
+      } else {
+        setDebugResponse('');
+        setDebugResponseHeaders([]);
+      }
+    }
+  }, [method, currentApiId, responseCache]);
+
   const supportedExamplePaths = useMemo(() => {
     if (
       serviceType === ServiceType.HTTP ||
@@ -572,7 +622,7 @@ const DebugPage: React.FunctionComponent<Props> = ({
             <Grid item xs={12} sm={6}>
               <Grid container spacing={1}>
                 <Grid item xs="auto">
-                  <Tooltip title="Copy response">
+                  <Tooltip title="Copy response body">
                     <div>
                       <IconButton
                         onClick={onCopy}
@@ -596,13 +646,45 @@ const DebugPage: React.FunctionComponent<Props> = ({
                   </Tooltip>
                 </Grid>
               </Grid>
-              <SyntaxHighlighter
-                language="json"
-                style={githubGist}
-                wrapLines={false}
-              >
-                {debugResponse}
-              </SyntaxHighlighter>
+              {debugResponse && (
+                <>
+                  {Object.keys(debugResponseHeaders).length > 0 && (
+                    <>
+                      <Typography
+                        variant="subtitle1"
+                        style={{ marginTop: '1rem' }}
+                      >
+                        Response Headers:
+                      </Typography>
+                      <SyntaxHighlighter
+                        language="json"
+                        style={githubGist}
+                        wrapLines={false}
+                      >
+                        {JSON.stringify(
+                          Object.fromEntries(
+                            Array.from(debugResponseHeaders).map(
+                              ([key, values]) => [key, values.join(', ')],
+                            ),
+                          ),
+                          null,
+                          2,
+                        )}
+                      </SyntaxHighlighter>
+                    </>
+                  )}
+                  <Typography variant="subtitle1" style={{ marginTop: '1rem' }}>
+                    Response Body:
+                  </Typography>
+                  <SyntaxHighlighter
+                    language="json"
+                    style={githubGist}
+                    wrapLines={false}
+                  >
+                    {debugResponse}
+                  </SyntaxHighlighter>
+                </>
+              )}
             </Grid>
           </Grid>
           <Snackbar
@@ -684,6 +766,34 @@ const DebugPage: React.FunctionComponent<Props> = ({
                     </Tooltip>
                   </Grid>
                 </Grid>
+                {Object.keys(debugResponseHeaders).length > 0 && (
+                  <>
+                    <Typography
+                      variant="subtitle1"
+                      style={{ marginTop: '1rem' }}
+                    >
+                      Response Headers:
+                    </Typography>
+                    <SyntaxHighlighter
+                      language="json"
+                      style={githubGist}
+                      wrapLines={false}
+                    >
+                      {JSON.stringify(
+                        Object.fromEntries(
+                          Array.from(debugResponseHeaders).map(
+                            ([key, values]) => [key, values.join(', ')],
+                          ),
+                        ),
+                        null,
+                        2,
+                      )}
+                    </SyntaxHighlighter>
+                  </>
+                )}
+                <Typography variant="subtitle1" style={{ marginTop: '1rem' }}>
+                  Response Body:
+                </Typography>
                 <SyntaxHighlighter
                   language="json"
                   style={githubGist}

docs-client/src/lib/transports/annotated-http.ts

@@ -17,6 +17,7 @@ import { Endpoint, Method } from '../specification';
 
 import Transport from './transport';
 import { isValidJsonMimeType, validateJsonObject } from '../json-util';
+import { ResponseData } from '../types';
 
 export const ANNOTATED_HTTP_MIME_TYPE = 'application/json; charset=utf-8';
 
@@ -88,7 +89,7 @@ export default class AnnotatedHttpTransport extends Transport {
     bodyJson?: string,
     endpointPath?: string,
     queries?: string,
-  ): Promise<Response> {
+  ): Promise<ResponseData> {
     const endpoint = this.getDebugMimeTypeEndpoint(method);
 
     const hdrs = new Headers();
@@ -116,10 +117,26 @@ export default class AnnotatedHttpTransport extends Transport {
     }
     newPath = pathPrefix + newPath;
 
-    return fetch(encodeURI(newPath), {
+    const response = await fetch(encodeURI(newPath), {
       headers: hdrs,
       method: method.httpMethod,
       body: bodyJson,
     });
+
+    const responseHeaders = new Map<string, string[]>();
+    response.headers.forEach((value, key) => {
+      const lowerKey = key.toLowerCase();
+      if (!responseHeaders.has(lowerKey)) {
+        responseHeaders.set(lowerKey, []);
+      }
+      responseHeaders.get(lowerKey)!.push(value);
+    });
+
+    const responseText = await response.text();
+
+    return {
+      body: responseText,
+      headers: responseHeaders,
+    };
   }
 }

docs-client/src/lib/transports/grahpql-http.ts

@@ -17,6 +17,7 @@
 import Transport from './transport';
 import { Method } from '../specification';
 import { validateJsonObject } from '../json-util';
+import { ResponseData } from '../types';
 
 export const GRAPHQL_HTTP_MIME_TYPE = 'application/graphql+json';
 
@@ -36,7 +37,7 @@ export default class GraphqlHttpTransport extends Transport {
     bodyJson?: string,
     endpointPath?: string,
     queries?: string,
-  ): Promise<Response> {
+  ): Promise<ResponseData> {
     const endpoint = this.getDebugMimeTypeEndpoint(method);
 
     const hdrs = new Headers();
@@ -59,10 +60,26 @@ export default class GraphqlHttpTransport extends Transport {
     }
     newPath = pathPrefix + newPath;
 
-    return fetch(encodeURI(newPath), {
+    const response = await fetch(encodeURI(newPath), {
       headers: hdrs,
       method: method.httpMethod,
       body: bodyJson,
     });
+
+    const responseHeaders = new Map<string, string[]>();
+    response.headers.forEach((value, key) => {
+      const lowerKey = key.toLowerCase();
+      if (!responseHeaders.has(lowerKey)) {
+        responseHeaders.set(lowerKey, []);
+      }
+      responseHeaders.get(lowerKey)!.push(value);
+    });
+
+    const responseText = await response.text();
+
+    return {
+      body: responseText,
+      headers: responseHeaders,
+    };
   }
 }

docs-client/src/lib/transports/grpc-unframed.ts

@@ -17,6 +17,7 @@ import { Method } from '../specification';
 
 import Transport from './transport';
 import { validateJsonObject } from '../json-util';
+import { ResponseData } from '../types';
 
 export const GRPC_UNFRAMED_MIME_TYPE =
   'application/json; charset=utf-8; protocol=gRPC';
@@ -36,7 +37,7 @@ export default class GrpcUnframedTransport extends Transport {
     pathPrefix: string,
     bodyJson?: string,
     endpointPath?: string,
-  ): Promise<Response> {
+  ): Promise<ResponseData> {
     if (!bodyJson) {
       throw new Error('A gRPC request must have body.');
     }
@@ -56,11 +57,26 @@ export default class GrpcUnframedTransport extends Transport {
     }
 
     const newPath = pathPrefix + (endpointPath ?? endpoint.pathMapping);
-
-    return fetch(newPath, {
+    const response = await fetch(newPath, {
       headers: hdrs,
       method: 'POST',
       body: bodyJson,
     });
+
+    const responseHeaders = new Map<string, string[]>();
+    response.headers.forEach((value, key) => {
+      const lowerKey = key.toLowerCase();
+      if (!responseHeaders.has(lowerKey)) {
+        responseHeaders.set(lowerKey, []);
+      }
+      responseHeaders.get(lowerKey)!.push(value);
+    });
+
+    const responseText = await response.text();
+
+    return {
+      body: responseText,
+      headers: responseHeaders,
+    };
   }
 }