From a03bf4319a12f8600c3988cc3e627ea393fcbae7 Mon Sep 17 00:00:00 2001 From: Sean Li Date: Wed, 20 Mar 2024 16:45:02 -0700 Subject: [PATCH] Updating usePolling to cleanup after unmount (#1598) * clear interval when component unmounts Signed-off-by: Sean Li * updating empty state Signed-off-by: Sean Li * adding back button on empty page, fixing empty accelerations length checker in associated objects tab Signed-off-by: Sean Li --------- Signed-off-by: Sean Li --- .../associated_objects_tab.test.tsx.snap | 132 +++++++++++++----- .../associated_objects_tab.tsx | 16 ++- .../utils/associated_objects_tab_empty.tsx | 7 +- public/components/hooks/use_polling.ts | 12 +- 4 files changed, 120 insertions(+), 47 deletions(-) diff --git a/public/components/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap b/public/components/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap index e1a0522114..2bc07095f6 100644 --- a/public/components/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap +++ b/public/components/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap @@ -5036,6 +5036,15 @@ exports[`AssociatedObjectsTab Component renders tab with no databases or objects cacheType="databases" > + Query Workbench + + } body={ @@ -5046,34 +5055,10 @@ exports[`AssociatedObjectsTab Component renders tab with no databases or objects Add databases and tables to your data source or use Query Workbench

- - Learn more - } - button={ - - Query Workbench - - } >
- Query Workbench - - } className="euiEmptyPrompt" >
- - - + +
+ + + + + +
diff --git a/public/components/datasources/components/manage/associated_objects/associated_objects_tab.tsx b/public/components/datasources/components/manage/associated_objects/associated_objects_tab.tsx index 6f1bb27302..02e690f0e0 100644 --- a/public/components/datasources/components/manage/associated_objects/associated_objects_tab.tsx +++ b/public/components/datasources/components/manage/associated_objects/associated_objects_tab.tsx @@ -160,7 +160,8 @@ export const AssociatedObjectsTab: React.FC = (props) if (datasource.name) { const datasourceCache = CatalogCacheManager.getOrCreateDataSource(datasource.name); if ( - datasourceCache.status === CachedDataSourceStatus.Empty && + (datasourceCache.status === CachedDataSourceStatus.Empty || + datasourceCache.status === CachedDataSourceStatus.Failed) && !isCatalogCacheFetching(databasesLoadStatus) ) { startLoadingDatabases(datasource.name); @@ -209,7 +210,8 @@ export const AssociatedObjectsTab: React.FC = (props) datasource.name ); if ( - databaseCache.status === CachedDataSourceStatus.Empty && + (databaseCache.status === CachedDataSourceStatus.Empty || + databaseCache.status === CachedDataSourceStatus.Failed) && !isCatalogCacheFetching(tablesLoadStatus) ) { startLoadingTables(datasource.name, selectedDatabase); @@ -218,7 +220,9 @@ export const AssociatedObjectsTab: React.FC = (props) setCachedTables(databaseCache.tables); } if ( - (accelerationsCache.status === CachedDataSourceStatus.Empty || isRefreshing) && + (accelerationsCache.status === CachedDataSourceStatus.Empty || + accelerationsCache.status === CachedDataSourceStatus.Failed || + isRefreshing) && !isCatalogCacheFetching(accelerationsLoadStatus) ) { startLoadingAccelerations(datasource.name); @@ -363,7 +367,11 @@ export const AssociatedObjectsTab: React.FC = (props) ) : ( <> - {cachedTables.length > 0 || cachedAccelerations.length > 0 ? ( + {cachedTables.length > 0 || + cachedAccelerations.filter( + (acceleration: CachedAcceleration) => + acceleration.database === selectedDatabase + ).length > 0 ? (

{titleText}

{bodyText}

- console.log()} external> - Learn more - } - button={QueryWorkbenchButton} + actions={QueryWorkbenchButton} /> ); }; diff --git a/public/components/hooks/use_polling.ts b/public/components/hooks/use_polling.ts index c1f79ada11..cf53684e89 100644 --- a/public/components/hooks/use_polling.ts +++ b/public/components/hooks/use_polling.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { useState, useRef } from 'react'; +import { useState, useRef, useEffect } from 'react'; type FetchFunction = (params?: P) => Promise; @@ -85,6 +85,7 @@ export function usePolling( const [error, setError] = useState(null); const [loading, setLoading] = useState(true); const intervalRef = useRef(undefined); + const unmounted = useRef(false); const shouldPoll = useRef(false); @@ -96,6 +97,9 @@ export function usePolling( } }, interval); intervalRef.current = intervalId; + if (unmounted.current) { + clearInterval(intervalId); + } }; const stopPolling = () => { @@ -124,5 +128,11 @@ export function usePolling( } }; + useEffect(() => { + return () => { + unmounted.current = true; + }; + }, []); + return { data, loading, error, startPolling, stopPolling }; }