From fd8065eb7aca8c00e30c2ddebe7069ac71849c53 Mon Sep 17 00:00:00 2001
From: John Knox <jknox@fb.com>
Date: Wed, 11 Nov 2020 03:47:18 -0800
Subject: [PATCH] Sort headers when displaying them

Summary: It's easier to scan the same header value of multiple requests when it's in roughly the same place for each one.

Reviewed By: mweststrate

Differential Revision: D24885172

fbshipit-source-id: 7be02903d2f9f79c8ba618e57c74169392f6244b
---
 desktop/plugins/network/RequestDetails.tsx | 26 ++++++++++++----------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/desktop/plugins/network/RequestDetails.tsx b/desktop/plugins/network/RequestDetails.tsx
index 8f0cc8c52..601e0af08 100644
--- a/desktop/plugins/network/RequestDetails.tsx
+++ b/desktop/plugins/network/RequestDetails.tsx
@@ -271,20 +271,22 @@ class HeaderInspector extends Component<
     );
 
     const rows: any = [];
-    computedHeaders.forEach((value: string, key: string) => {
-      rows.push({
-        columns: {
-          key: {
-            value: <WrappingText>{key}</WrappingText>,
+    Array.from(computedHeaders.entries())
+      .sort((a, b) => (a[0] < b[0] ? -1 : a[0] == b[0] ? 0 : 1))
+      .forEach(([key, value]) => {
+        rows.push({
+          columns: {
+            key: {
+              value: <WrappingText>{key}</WrappingText>,
+            },
+            value: {
+              value: <WrappingText>{value}</WrappingText>,
+            },
           },
-          value: {
-            value: <WrappingText>{value}</WrappingText>,
-          },
-        },
-        copyText: value,
-        key,
+          copyText: value,
+          key,
+        });
       });
-    });
 
     return rows.length > 0 ? (
       <ManagedTable