From 32824176639d9f9a9358b0f6e0602786e3c80f54 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Wed, 19 Jul 2023 08:58:20 -0700
Subject: [PATCH] Fix bug where if events come in the creation of a new tab
 throws exception

Summary:
See title. The issue occurs because this tabs component derives a key by essentially serializing the children. Since its possible for different elements in the UIDebugger to have different number of tabs, due to framework events not always being present this was never anticipated.

Solution is to just let the callee supply a storage key which does not depend on the exact number of tabs

Reviewed By: lblasa

Differential Revision: D47520033

fbshipit-source-id: 67e57db5110fde52451d30496c25a25b0eb4a6f7
---
 desktop/flipper-plugin/src/ui/Tabs.tsx                      | 5 +++--
 .../public/ui-debugger/components/sidebar/Inspector.tsx     | 6 +++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/desktop/flipper-plugin/src/ui/Tabs.tsx b/desktop/flipper-plugin/src/ui/Tabs.tsx
index d5a5ad685..9d0fe2ba4 100644
--- a/desktop/flipper-plugin/src/ui/Tabs.tsx
+++ b/desktop/flipper-plugin/src/ui/Tabs.tsx
@@ -22,8 +22,9 @@ export function Tabs({
   grow,
   children,
   className,
+  localStorageKeyOverride, //set this if you need to have a dynamic number of tabs, you do *not* need to namespace with the plugin name
   ...baseProps
-}: {grow?: boolean} & TabsProps) {
+}: {grow?: boolean; localStorageKeyOverride?: string} & TabsProps) {
   const keys: string[] = [];
   const keyedChildren = Children.map(children, (child: any, idx) => {
     if (!child || typeof child !== 'object') {
@@ -52,7 +53,7 @@ export function Tabs({
   });
 
   const [activeTab, setActiveTab] = useLocalStorageState<string | undefined>(
-    'Tabs:' + keys.join(','),
+    'Tabs:' + localStorageKeyOverride ?? keys.join(','),
     undefined,
   );
 
diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx
index 2139caa66..5a256959c 100644
--- a/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx
@@ -55,7 +55,11 @@ export const Inspector: React.FC<Props> = ({
 
   return (
     <Layout.Container gap pad>
-      <Tabs grow centered key={selectedNodeId}>
+      <Tabs
+        localStorageKeyOverride="sidebar-tabs"
+        grow
+        centered
+        key={selectedNodeId}>
         <Tab
           key={'identity'}
           tab={