Fix bug where if events come in the creation of a new tab throws exce…

…ption

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

@@ -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,
   );
 

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={