From 19c53a0d143e6d12344af65a59b141ce4cc75c9b Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Mon, 22 Aug 2022 17:00:25 -0700 Subject: [PATCH 1/3] fix: Filter throwing an error on Embedded Dashboard --- superset-frontend/src/hooks/useTabId.ts | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/superset-frontend/src/hooks/useTabId.ts b/superset-frontend/src/hooks/useTabId.ts index 1bd0df3a36aa7..2fc6914010abf 100644 --- a/superset-frontend/src/hooks/useTabId.ts +++ b/superset-frontend/src/hooks/useTabId.ts @@ -31,19 +31,28 @@ const channel = new BroadcastChannel('tab_id_channel'); export function useTabId() { const [tabId, setTabId] = useState(); + let sessionStorage: any; + let localStorage: any; + try { + localStorage = window.localStorage || {}; + sessionStorage = window.sessionStorage || {}; + } catch (e) { + localStorage = null; + sessionStorage = null; + } useEffect(() => { const updateTabId = () => { - const lastTabId = window.localStorage.getItem('last_tab_id'); + const lastTabId = localStorage?.getItem('last_tab_id'); const newTabId = String( lastTabId ? Number.parseInt(lastTabId, 10) + 1 : 1, ); - window.sessionStorage.setItem('tab_id', newTabId); - window.localStorage.setItem('last_tab_id', newTabId); + sessionStorage?.setItem('tab_id', newTabId); + localStorage?.setItem('last_tab_id', newTabId); setTabId(newTabId); }; - const storedTabId = window.sessionStorage.getItem('tab_id'); + const storedTabId = sessionStorage && sessionStorage.getItem('tab_id'); if (storedTabId) { channel.postMessage({ type: 'REQUESTING_TAB_ID', @@ -67,7 +76,7 @@ export function useTabId() { } } }; - }, [tabId]); + }, [localStorage, tabId, sessionStorage]); return tabId; } From bb80569ebafad7df25e4fa5f205341e319c0743e Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Tue, 23 Aug 2022 11:18:03 -0700 Subject: [PATCH 2/3] use short_id if storage not available --- superset-frontend/src/hooks/useTabId.ts | 38 ++++++++++++++----------- 1 file changed, 21 insertions(+), 17 deletions(-) diff --git a/superset-frontend/src/hooks/useTabId.ts b/superset-frontend/src/hooks/useTabId.ts index 2fc6914010abf..23cd88bbb7d2b 100644 --- a/superset-frontend/src/hooks/useTabId.ts +++ b/superset-frontend/src/hooks/useTabId.ts @@ -17,6 +17,7 @@ * under the License. */ import { useEffect, useState } from 'react'; +import shortid from 'shortid'; import { BroadcastChannel } from 'broadcast-channel'; interface TabIdChannelMessage { @@ -31,28 +32,31 @@ const channel = new BroadcastChannel('tab_id_channel'); export function useTabId() { const [tabId, setTabId] = useState(); - let sessionStorage: any; - let localStorage: any; - try { - localStorage = window.localStorage || {}; - sessionStorage = window.sessionStorage || {}; - } catch (e) { - localStorage = null; - sessionStorage = null; + function isStorageAvailable() { + try { + return window.localStorage && window.sessionStorage; + } catch (error) { + return false; + } } useEffect(() => { const updateTabId = () => { - const lastTabId = localStorage?.getItem('last_tab_id'); - const newTabId = String( - lastTabId ? Number.parseInt(lastTabId, 10) + 1 : 1, - ); - sessionStorage?.setItem('tab_id', newTabId); - localStorage?.setItem('last_tab_id', newTabId); - setTabId(newTabId); + if (isStorageAvailable()) { + const lastTabId = window.localStorage.getItem('last_tab_id'); + const newTabId = String( + lastTabId ? Number.parseInt(lastTabId, 10) + 1 : 1, + ); + window.sessionStorage.setItem('tab_id', newTabId); + window.localStorage.setItem('last_tab_id', newTabId); + setTabId(newTabId); + } else { + setTabId(shortid.generate()); + } }; - const storedTabId = sessionStorage && sessionStorage.getItem('tab_id'); + const storedTabId = + isStorageAvailable() && window.sessionStorage.getItem('tab_id'); if (storedTabId) { channel.postMessage({ type: 'REQUESTING_TAB_ID', @@ -76,7 +80,7 @@ export function useTabId() { } } }; - }, [localStorage, tabId, sessionStorage]); + }, [tabId]); return tabId; } From ccaf011b823511bf3db94abb601ebe501b4aacbb Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Tue, 23 Aug 2022 11:47:19 -0700 Subject: [PATCH 3/3] avoid infinite loop --- superset-frontend/src/hooks/useTabId.ts | 26 +++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/superset-frontend/src/hooks/useTabId.ts b/superset-frontend/src/hooks/useTabId.ts index 23cd88bbb7d2b..4f60763c88875 100644 --- a/superset-frontend/src/hooks/useTabId.ts +++ b/superset-frontend/src/hooks/useTabId.ts @@ -41,22 +41,24 @@ export function useTabId() { } } useEffect(() => { - const updateTabId = () => { - if (isStorageAvailable()) { - const lastTabId = window.localStorage.getItem('last_tab_id'); - const newTabId = String( - lastTabId ? Number.parseInt(lastTabId, 10) + 1 : 1, - ); - window.sessionStorage.setItem('tab_id', newTabId); - window.localStorage.setItem('last_tab_id', newTabId); - setTabId(newTabId); - } else { + if (!isStorageAvailable()) { + if (!tabId) { setTabId(shortid.generate()); } + return; + } + + const updateTabId = () => { + const lastTabId = window.localStorage.getItem('last_tab_id'); + const newTabId = String( + lastTabId ? Number.parseInt(lastTabId, 10) + 1 : 1, + ); + window.sessionStorage.setItem('tab_id', newTabId); + window.localStorage.setItem('last_tab_id', newTabId); + setTabId(newTabId); }; - const storedTabId = - isStorageAvailable() && window.sessionStorage.getItem('tab_id'); + const storedTabId = window.sessionStorage.getItem('tab_id'); if (storedTabId) { channel.postMessage({ type: 'REQUESTING_TAB_ID',