Sort HTTP headers

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

@@ -7,7 +7,7 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 
 import { useInterceptedRequests } from "lib/InterceptedRequestsContext";
-import { KeyValuePair, sortKeyValuePairs } from "lib/components/KeyValuePair";
+import { KeyValuePair } from "lib/components/KeyValuePair";
 import Link from "lib/components/Link";
 import RequestTabs from "lib/components/RequestTabs";
 import ResponseStatus from "lib/components/ResponseStatus";
@@ -112,11 +112,11 @@ function EditRequest(): JSX.Element {
       newQueryParams.push({ key: "", value: "" });
       setQueryParams(newQueryParams);
 
-      const newReqHeaders = sortKeyValuePairs(interceptedRequest.headers || []);
+      const newReqHeaders = interceptedRequest.headers || [];
       setReqHeaders([...newReqHeaders.map(({ key, value }) => ({ key, value })), { key: "", value: "" }]);
 
       setResBody(interceptedRequest.response?.body || "");
-      const newResHeaders = sortKeyValuePairs(interceptedRequest.response?.headers || []);
+      const newResHeaders = interceptedRequest.response?.headers || [];
       setResHeaders([...newResHeaders.map(({ key, value }) => ({ key, value })), { key: "", value: "" }]);
     },
   });

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

@@ -3,7 +3,7 @@ import { Alert, Box, Button, Fab, Tooltip, Typography, useTheme } from "@mui/mat
 import { useRouter } from "next/router";
 import React, { useState } from "react";
 
-import { KeyValuePair, sortKeyValuePairs } from "lib/components/KeyValuePair";
+import { KeyValuePair } from "lib/components/KeyValuePair";
 import RequestTabs from "lib/components/RequestTabs";
 import Response from "lib/components/Response";
 import SplitPane from "lib/components/SplitPane";
@@ -90,7 +90,7 @@ function EditRequest(): JSX.Element {
       newQueryParams.push({ key: "", value: "" });
       setQueryParams(newQueryParams);
 
-      const newHeaders = sortKeyValuePairs(senderRequest.headers || []);
+      const newHeaders = senderRequest.headers || [];
       setHeaders([...newHeaders.map(({ key, value }) => ({ key, value })), { key: "", value: "" }]);
       setResponse(senderRequest.response);
     },

admin/src/lib/components/KeyValuePair.tsx

@@ -184,20 +184,4 @@ export function KeyValuePairTable({ items, onChange, onDelete }: KeyValuePairTab
   );
 }
 
-export function sortKeyValuePairs(items: KeyValuePair[]): KeyValuePair[] {
-  const sorted = [...items];
-
-  sorted.sort((a, b) => {
-    if (a.key < b.key) {
-      return -1;
-    }
-    if (a.key > b.key) {
-      return 1;
-    }
-    return 0;
-  });
-
-  return sorted;
-}
-
 export default KeyValuePairTable;

admin/src/lib/components/Response.tsx

@@ -1,6 +1,5 @@
 import { Box, Typography } from "@mui/material";
 
-import { sortKeyValuePairs } from "./KeyValuePair";
 import ResponseTabs from "./ResponseTabs";
 
 import ResponseStatus from "lib/components/ResponseStatus";
@@ -29,7 +28,7 @@ function Response({ response }: ResponseProps): JSX.Element {
       </Box>
       <ResponseTabs
         body={response?.body}
-        headers={sortKeyValuePairs(response?.headers || [])}
+        headers={response?.headers || []}
         hasResponse={response !== undefined && response !== null}
       />
     </Box>

pkg/api/models.go

@@ -49,3 +49,17 @@ func UnmarshalURL(v interface{}) (*url.URL, error) {
 
 	return u, nil
 }
+
+type HTTPHeaders []HTTPHeader
+
+func (h HTTPHeaders) Len() int {
+	return len(h)
+}
+
+func (h HTTPHeaders) Less(i, j int) bool {
+	return h[i].Key < h[j].Key
+}
+
+func (h HTTPHeaders) Swap(i, j int) {
+	h[i], h[j] = h[j], h[i]
+}

pkg/api/resolvers.go

@@ -11,6 +11,7 @@ import (
 	"io/ioutil"
 	"net/http"
 	"regexp"
+	"sort"
 	"strings"
 
 	"github.com/99designs/gqlgen/graphql"
@@ -124,6 +125,8 @@ func parseRequestLog(reqLog reqlog.RequestLog) (HTTPRequestLog, error) {
 				})
 			}
 		}
+
+		sort.Sort(HTTPHeaders(log.Headers))
 	}
 
 	if reqLog.Response != nil {
@@ -172,6 +175,8 @@ func parseResponseLog(resLog reqlog.ResponseLog) (HTTPResponseLog, error) {
 				})
 			}
 		}
+
+		sort.Sort(HTTPHeaders(httpResLog.Headers))
 	}
 
 	return httpResLog, nil
@@ -710,6 +715,8 @@ func parseSenderRequest(req sender.Request) (SenderRequest, error) {
 				})
 			}
 		}
+
+		sort.Sort(HTTPHeaders(senderReq.Headers))
 	}
 
 	if len(req.Body) > 0 {
@@ -765,6 +772,8 @@ func parseHTTPRequest(req *http.Request) (HTTPRequest, error) {
 				})
 			}
 		}
+
+		sort.Sort(HTTPHeaders(httpReq.Headers))
 	}
 
 	if req.Body != nil {
@@ -815,6 +824,8 @@ func parseHTTPResponse(res *http.Response) (HTTPResponse, error) {
 				})
 			}
 		}
+
+		sort.Sort(HTTPHeaders(httpRes.Headers))
 	}
 
 	if res.Body != nil {