From a033f9672548efc17f04214cf9cb8fcb321429ae Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Wed, 20 Sep 2023 05:43:49 -0700
Subject: [PATCH] Add support for warnings from client

Summary:
THis is useful for bloks where fliper needs to be open before hand,

We might also be able to replace some of the annoying notification bubles with these sleeker inline warnings

Reviewed By: lblasa

Differential Revision: D49454977

fbshipit-source-id: fca4fbd3258a68d93c75655cfff247adfa3e6bb2
---
 desktop/plugins/public/ui-debugger/ClientTypes.tsx   |  3 ++-
 .../public/ui-debugger/components/tree/Tree.tsx      | 12 +++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/ClientTypes.tsx b/desktop/plugins/public/ui-debugger/ClientTypes.tsx
index a135b3526..8883d176d 100644
--- a/desktop/plugins/public/ui-debugger/ClientTypes.tsx
+++ b/desktop/plugins/public/ui-debugger/ClientTypes.tsx
@@ -187,7 +187,8 @@ export type Tag =
   | 'iOS'
   | 'BloksBoundTree'
   | 'BloksDerived'
-  | 'TreeRoot';
+  | 'TreeRoot'
+  | 'Warning';
 
 export type Inspectable =
   | InspectableObject
diff --git a/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx b/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx
index c67f5a5a9..7e646484c 100644
--- a/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx
+++ b/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx
@@ -10,6 +10,7 @@
 import {Id, ClientNode} from '../../ClientTypes';
 import {OnSelectNode} from '../../DesktopTypes';
 import React, {
+  CSSProperties,
   Ref,
   RefObject,
   useEffect,
@@ -35,7 +36,7 @@ import {useVirtualizer} from '@tanstack/react-virtual';
 import {ContextMenu} from './ContextMenu';
 import {MillisSinceEpoch, useKeyboardControls} from './useKeyboardControls';
 import {toTreeList} from './toTreeList';
-import {CaretDownOutlined} from '@ant-design/icons';
+import {CaretDownOutlined, WarningOutlined} from '@ant-design/icons';
 
 const {Text} = Typography;
 
@@ -584,6 +585,10 @@ function nodeIcon(node: TreeNode) {
     return <NodeIconImage src="facebook/bloks-logo-orange.png" />;
   } else if (node.tags.includes('BloksDerived')) {
     return <NodeIconImage src="facebook/bloks-logo-blue.png" />;
+  } else if (node.tags.includes('Warning')) {
+    return (
+      <WarningOutlined style={{...nodeiconStyle, color: theme.errorColor}} />
+    );
   } else {
     return (
       <div
@@ -599,12 +604,13 @@ function nodeIcon(node: TreeNode) {
 
 const NodeIconSize = 14;
 const IconRightMargin = '4px';
-const NodeIconImage = styled.img({
+const nodeiconStyle: CSSProperties = {
   height: NodeIconSize,
   width: NodeIconSize,
   marginRight: IconRightMargin,
   userSelect: 'none',
-});
+};
+const NodeIconImage = styled.img({...nodeiconStyle});
 
 const renderDepthOffset = 12;