From bf67b19c4a1f902e6c238882747396ebca22a033 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Fri, 17 Nov 2023 04:18:41 -0800
Subject: [PATCH] Allow searching on inline attribute keys

Summary: useful for bloks debugging

Reviewed By: lblasa

Differential Revision: D51349211

fbshipit-source-id: a11eca19bdecf989ceb6a95e9a3cb504020c7467
---
 .../plugins/public/ui-debugger/components/tree/Tree.tsx    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx b/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx
index fac4d7524..88a548a5f 100644
--- a/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx
+++ b/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx
@@ -497,7 +497,9 @@ function InlineAttributes({attributes}: {attributes: Record<string, string>}) {
     <>
       {Object.entries(attributes ?? {}).map(([key, value]) => (
         <TreeAttributeContainer key={key}>
-          <span style={{color: theme.warningColor}}>{key}</span>
+          <span style={{color: theme.warningColor}}>
+            {highlightManager.render(key)}
+          </span>
           <span>={highlightManager.render(value)}</span>
         </TreeAttributeContainer>
       ))}
@@ -661,6 +663,9 @@ function searchPredicate(
 ): (node: ClientNode) => string | true | undefined {
   return (node: ClientNode): string | true | undefined =>
     node.name.toLowerCase().includes(searchTerm) ||
+    Object.keys(node.inlineAttributes).find((inlineAttr) =>
+      inlineAttr.toLocaleLowerCase().includes(searchTerm),
+    ) ||
     Object.values(node.inlineAttributes).find((inlineAttr) =>
       inlineAttr.toLocaleLowerCase().includes(searchTerm),
     );