From a78472626708cd18a408ac14b7a70691152dcf58 Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Sun, 8 May 2022 13:18:09 +0200
Subject: [PATCH] feat(web/context): allow custom metadata order

---
 web/src/features/menu/ContextMenu.tsx | 2 +-
 web/src/features/menu/Item.tsx        | 9 +++++++--
 web/src/interfaces/context.ts         | 5 ++++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/src/features/menu/ContextMenu.tsx b/web/src/features/menu/ContextMenu.tsx
index d65acb2a7..94220ca42 100644
--- a/web/src/features/menu/ContextMenu.tsx
+++ b/web/src/features/menu/ContextMenu.tsx
@@ -17,7 +17,7 @@ debugData<ContextMenuProps>([
         {
           title: "Example button",
           description: "Example button description",
-          metadata: { ["Value 1"]: "Some value", ["Value 2"]: 300 },
+          metadata: [{ label: "Value 1", value: 300 }],
         },
         {
           title: "Menu button",
diff --git a/web/src/features/menu/Item.tsx b/web/src/features/menu/Item.tsx
index f342a3a33..5a319ead0 100644
--- a/web/src/features/menu/Item.tsx
+++ b/web/src/features/menu/Item.tsx
@@ -104,9 +104,14 @@ const Item: React.FC<{
                   <PopoverBody>
                     {Array.isArray(option[1].metadata) ? (
                       option[1].metadata.map(
-                        (metadata: string, index: number) => (
+                        (
+                          metadata: string | { label: string; value: any },
+                          index: number
+                        ) => (
                           <Text key={`context-metadata-${index}`}>
-                            {metadata}
+                            {typeof metadata === "string"
+                              ? `${metadata}`
+                              : `${metadata.label}: ${metadata.value}`}
                           </Text>
                         )
                       )
diff --git a/web/src/interfaces/context.ts b/web/src/interfaces/context.ts
index 276baa06c..b5347b8d2 100644
--- a/web/src/interfaces/context.ts
+++ b/web/src/interfaces/context.ts
@@ -3,7 +3,10 @@ export interface Option {
   title?: string;
   description?: string;
   arrow?: boolean;
-  metadata?: string[] | { [key: string]: any };
+  metadata?:
+    | string[]
+    | { [key: string]: any }
+    | { label: string; value: any }[];
   event?: string;
   serverEvent?: string;
   args?: any;