Updating usePolling to cleanup after unmount

public/components/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap

@@ -5046,34 +5046,10 @@ exports[`AssociatedObjectsTab Component renders tab with no databases or objects
                   Add databases and tables to your data source or use Query Workbench
                 </p>
               </EuiText>
-              <EuiLink
-                external={true}
-                onClick={[Function]}
-              >
-                Learn more
-              </EuiLink>
             </React.Fragment>
           }
-          button={
-            <EuiButton
-              iconSide="right"
-              iconType="popout"
-              onClick={[Function]}
-            >
-              Query Workbench
-            </EuiButton>
-          }
         >
           <div
-            button={
-              <EuiButton
-                iconSide="right"
-                iconType="popout"
-                onClick={[Function]}
-              >
-                Query Workbench
-              </EuiButton>
-            }
             className="euiEmptyPrompt"
           >
             <EuiTextColor
@@ -5098,19 +5074,6 @@ exports[`AssociatedObjectsTab Component renders tab with no databases or objects
                         </p>
                       </div>
                     </EuiText>
-                    <EuiLink
-                      external={true}
-                      onClick={[Function]}
-                    >
-                      <button
-                        className="euiLink euiLink--primary"
-                        disabled={false}
-                        onClick={[Function]}
-                        type="button"
-                      >
-                        Learn more
-                      </button>
-                    </EuiLink>
                   </div>
                 </EuiText>
               </span>

public/components/datasources/components/manage/associated_objects/associated_objects_tab.tsx

@@ -47,7 +47,7 @@
 
 export interface AssociatedObjectsTabProps {
   datasource: DatasourceDetails;
   cacheLoadingHooks: any;
   selectedDatabase: string;
   setSelectedDatabase: React.Dispatch<React.SetStateAction<string>>;
 }
@@ -160,7 +160,8 @@
     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);
@@ -169,7 +170,7 @@
         setIsFirstTimeLoading(false);
       }
     }
   }, [datasource.name]);
 
   // Retrieve from cache upon load success
   useEffect(() => {
@@ -209,7 +210,8 @@
         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 @@
         setCachedTables(databaseCache.tables);
       }
       if (
-        (accelerationsCache.status === CachedDataSourceStatus.Empty || isRefreshing) &&
+        (accelerationsCache.status === CachedDataSourceStatus.Empty ||
+          accelerationsCache.status === CachedDataSourceStatus.Failed ||
+          isRefreshing) &&
         !isCatalogCacheFetching(accelerationsLoadStatus)
       ) {
         startLoadingAccelerations(datasource.name);
@@ -227,7 +231,7 @@
         setCachedAccelerations(accelerationsCache.accelerations);
       }
     }
   }, [datasource.name, selectedDatabase, databaseSelectorOptions]);
 
   // Retrieve from tables cache upon load success
   useEffect(() => {
@@ -277,7 +281,7 @@
         };
       })
     );
   }, [cachedDatabases]);
 
   useEffect(() => {
     setSelectedDatabase((prevState) => {
@@ -287,7 +291,7 @@
       }
       return prevState;
     });
   }, [databaseSelectorOptions]);
 
   useEffect(() => {
     const tableObjects: AssociatedObject[] = cachedTables.map((table: CachedTable) => {
@@ -316,7 +320,7 @@
         columns: undefined,
       }));
     setAssociatedObjects([...tableObjects, ...accelerationObjects]);
   }, [selectedDatabase, cachedTables, cachedAccelerations]);
 
   const renderCreateAccelerationFlyout = getRenderCreateAccelerationFlyout();
 

public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_empty.tsx

@@ -3,28 +3,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiEmptyPrompt, EuiLink, EuiText } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiText } from '@elastic/eui';
 import React from 'react';
 import { LoadCacheType } from '../../../../../../../common/types/data_connections';
-import { coreRefs } from '../../../../../../framework/core_refs';
 
 interface AssociatedObjectsTabEmptyProps {
   cacheType: LoadCacheType;
 }
 
 export const AssociatedObjectsTabEmpty: React.FC<AssociatedObjectsTabEmptyProps> = (props) => {
   const { cacheType } = props;
-  const { application } = coreRefs;
-
-  const QueryWorkbenchButton = (
-    <EuiButton
-      iconSide="right"
-      onClick={() => application!.navigateToApp('opensearch-query-workbench')}
-      iconType="popout"
-    >
-      Query Workbench
-    </EuiButton>
-  );
 
   let titleText;
   let bodyText;
@@ -51,12 +39,8 @@ export const AssociatedObjectsTabEmpty: React.FC<AssociatedObjectsTabEmptyProps>
             <h4>{titleText}</h4>
             <p>{bodyText}</p>
           </EuiText>
-          <EuiLink onClick={() => console.log()} external>
-            Learn more
-          </EuiLink>
         </>
       }
-      button={QueryWorkbenchButton}
     />
   );
 };

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<T, P = void> = (params?: P) => Promise<T>;
 
@@ -70,7 +70,7 @@
   data: T | null;
   loading: boolean;
   error: Error | null;
   startPolling: (params?: any) => void;
   stopPolling: () => void;
 }
 
@@ -85,6 +85,7 @@
   const [error, setError] = useState<Error | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const intervalRef = useRef<NodeJS.Timeout | string | number | undefined>(undefined);
+  const unmounted = useRef<boolean>(false);
 
   const shouldPoll = useRef(false);
 
@@ -96,6 +97,9 @@
       }
     }, interval);
     intervalRef.current = intervalId;
+    if (unmounted.current) {
+      clearInterval(intervalId);
+    }
   };
 
   const stopPolling = () => {
@@ -124,5 +128,11 @@
     }
   };
 
+  useEffect(() => {
+    return () => {
+      unmounted.current = true;
+    };
+  }, []);
+
   return { data, loading, error, startPolling, stopPolling };
 }