From 30100989f4efa321c846522c080d3e37fdaf1e3e Mon Sep 17 00:00:00 2001 From: Anton Kastritskiy Date: Wed, 18 Oct 2023 09:33:48 -0700 Subject: [PATCH] fix tabs + localStorage Summary: Key fix is ```diff - 'Tabs:' + localStorageKeyOverride ?? keys.join(','), + 'Tabs:' + (localStorageKeyOverride ?? keys.join(',')), ``` Previously it worked like `('Tabs:' + localStorageKeyOverride) ?? keys.join(','),` which always evaluated to `"Tabs:undefined"`. This means that all tabs that were not using localStorageKeyOverride were reusing the same localstorage key. If you open some tabs with A, B, and C tabs. And open tab B. Then open other tabs with D, E, and F. No tab would be selected as the default value would be B. The second part it extracing keys from `items` prop instead of children. Reviewed By: lblasa Differential Revision: D50411422 fbshipit-source-id: 30f70c4347649f29e8c8ff1f2f38fdca7e826198 --- desktop/flipper-plugin/src/ui/Tabs.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/desktop/flipper-plugin/src/ui/Tabs.tsx b/desktop/flipper-plugin/src/ui/Tabs.tsx index 60730f523..46f88e880 100644 --- a/desktop/flipper-plugin/src/ui/Tabs.tsx +++ b/desktop/flipper-plugin/src/ui/Tabs.tsx @@ -25,7 +25,7 @@ export function Tabs({ 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; localStorageKeyOverride?: string} & TabsProps) { - const keys: string[] = []; + const keys: string[] = baseProps.items?.map((item) => item.key) ?? []; const keyedChildren = Children.map(children, (child: any, idx) => { if (!child || typeof child !== 'object') { return; @@ -53,7 +53,7 @@ export function Tabs({ }); const [activeTab, setActiveTab] = useLocalStorageState( - 'Tabs:' + localStorageKeyOverride ?? keys.join(','), + 'Tabs:' + (localStorageKeyOverride ?? keys.join(',')), undefined, );