From 8d435595cd87dc8a4b44f84741be18790016e694 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 4 Apr 2019 14:09:10 -0700
Subject: [PATCH] Added truncation UI indicator for hooks. Addressed lint rule
 violations.

---
 .../app/InspectableElements/CustomHooks.js    | 29 +++++++++++++++----
 src/devtools/views/Components/HooksTree.css   |  4 +++
 src/devtools/views/Components/HooksTree.js    | 17 +++++++----
 3 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/shells/dev/app/InspectableElements/CustomHooks.js b/shells/dev/app/InspectableElements/CustomHooks.js
index 2b368a15fe..56eea075d1 100644
--- a/shells/dev/app/InspectableElements/CustomHooks.js
+++ b/shells/dev/app/InspectableElements/CustomHooks.js
@@ -32,11 +32,28 @@ function useCustomObject() {
   return useState(123);
 }
 
-function useVeryDeeplyNestedHook(i) {
-  useDebugValue(i);
-  if (i > 0) {
-    useVeryDeeplyNestedHook(i - 1);
-  }
+function useDeepHookA() {
+  useDebugValue('useDeepHookA');
+  useDeepHookB();
+}
+function useDeepHookB() {
+  useDebugValue('useDeepHookB');
+  useDeepHookC();
+}
+function useDeepHookC() {
+  useDebugValue('useDeepHookC');
+  useDeepHookD();
+}
+function useDeepHookD() {
+  useDebugValue('useDeepHookD');
+  useDeepHookE();
+}
+function useDeepHookE() {
+  useDebugValue('useDeepHookE');
+  useDeepHookF();
+}
+function useDeepHookF() {
+  useDebugValue('useDeepHookF');
 }
 
 function FunctionWithHooks(props: any, ref: React$Ref<any>) {
@@ -61,7 +78,7 @@ function FunctionWithHooks(props: any, ref: React$Ref<any>) {
   useNestedOuterHook();
 
   // Verify deep nesting doesn't break
-  useVeryDeeplyNestedHook(50);
+  useDeepHookA();
 
   return <button onClick={onClick}>Count: {debouncedCount}</button>;
 }
diff --git a/src/devtools/views/Components/HooksTree.css b/src/devtools/views/Components/HooksTree.css
index 57a6fe39dc..a1acc5a493 100644
--- a/src/devtools/views/Components/HooksTree.css
+++ b/src/devtools/views/Components/HooksTree.css
@@ -46,3 +46,7 @@
   color: var(--color-dimmer);
   font-style: italic;
 }
+
+.TruncationIndicator {
+  color: var(--color-dimmer);
+}
diff --git a/src/devtools/views/Components/HooksTree.js b/src/devtools/views/Components/HooksTree.js
index 702318136e..993760696c 100644
--- a/src/devtools/views/Components/HooksTree.js
+++ b/src/devtools/views/Components/HooksTree.js
@@ -72,15 +72,22 @@ type HookViewProps = {|
 
 function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
   const { name, id: hookID, isStateEditable, subHooks, value } = hook;
-  if (hook.hasOwnProperty(meta.inspected)) {
-    // This Hook is too deep and hasn't been hydrated.
-    // TODO: show UI to load its data.
-    return null;
-  }
 
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
+  if (hook.hasOwnProperty(meta.inspected)) {
+    // This Hook is too deep and hasn't been hydrated.
+    // TODO: show UI to load its data.
+    return (
+      <div className={styles.Hook}>
+        <div className={styles.NameValueRow}>
+          <span className={styles.TruncationIndicator}>...</span>
+        </div>
+      </div>
+    );
+  }
+
   // TODO Add click and key handlers for toggling element open/close state.
 
   const isCustomHook = subHooks.length > 0;