From c41995f035b75981d2d9ec2c64157c1800a089c6 Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul@posthog.com>
Date: Sun, 19 May 2024 12:39:22 +0100
Subject: [PATCH] feat: sort the simple key value list (#22335)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
---
 .../components/SimpleKeyValueList.tsx         | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/SimpleKeyValueList.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/SimpleKeyValueList.tsx
index 27af943713b25..6ea7472a6945f 100644
--- a/frontend/src/scenes/session-recordings/player/inspector/components/SimpleKeyValueList.tsx
+++ b/frontend/src/scenes/session-recordings/player/inspector/components/SimpleKeyValueList.tsx
@@ -1,16 +1,43 @@
 // A React component that renders a list of key-value pairs in a simple way.
 
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
+import { useEffect, useState } from 'react'
 
 export interface SimpleKeyValueListProps {
     item: Record<string, any>
     emptyMessage?: string | JSX.Element | null
+    /**
+     * SimpleKeyValueList will render these keys first.
+     * keys are otherwise rendered in alphabetical order.
+     */
+    promotedKeys?: string[]
 }
 
-export function SimpleKeyValueList({ item, emptyMessage }: SimpleKeyValueListProps): JSX.Element {
+export function SimpleKeyValueList({ item, emptyMessage, promotedKeys }: SimpleKeyValueListProps): JSX.Element {
+    const [sortedItemsPromotedFirst, setSortedItemsPromotedFirst] = useState<[string, any][]>([])
+
+    useEffect(() => {
+        const sortedItems = Object.entries(item).sort((a, b) => {
+            if (a[0] < b[0]) {
+                return -1
+            }
+            if (a[0] > b[0]) {
+                return 1
+            }
+            return 0
+        })
+
+        const promotedItems = promotedKeys?.length ? sortedItems.filter(([key]) => promotedKeys.includes(key)) : []
+        const nonPromotedItems = promotedKeys?.length
+            ? sortedItems.filter(([key]) => !promotedKeys.includes(key))
+            : sortedItems
+
+        setSortedItemsPromotedFirst([...promotedItems, ...nonPromotedItems])
+    }, [item, promotedKeys])
+
     return (
         <div className="text-xs space-y-1 max-w-full">
-            {Object.entries(item).map(([key, value]) => (
+            {sortedItemsPromotedFirst.map(([key, value]) => (
                 <div key={key} className="flex gap-4 items-start justify-between overflow-hidden">
                     <span className="font-semibold">
                         <PropertyKeyInfo value={key} />