Updating usePolling to cleanup after unmount (#1598)

* clear interval when component unmounts Signed-off-by: Sean Li <[email protected]> * updating empty state Signed-off-by: Sean Li <[email protected]> * adding back button on empty page, fixing empty accelerations length checker in associated objects tab Signed-off-by: Sean Li <[email protected]> --------- Signed-off-by: Sean Li <[email protected]>
opensearch-project · Mar 20, 2024 · a03bf43 · a03bf43
1 parent 2bc9c17
commit a03bf43
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 47 deletions.
diff --git a/...nents/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap b/...nents/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"
       >
         <EuiEmptyPrompt
+          actions={
+            <EuiButton
+              iconSide="right"
+              iconType="popout"
+              onClick={[Function]}
+            >
+              Query Workbench
+            </EuiButton>
+          }
           body={
             <React.Fragment>
               <EuiText>
@@ -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
                 </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,23 +5083,96 @@ 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>
             </EuiTextColor>
+            <EuiSpacer
+              size="l"
+            >
+              <div
+                className="euiSpacer euiSpacer--l"
+              />
+            </EuiSpacer>
+            <EuiButton
+              iconSide="right"
+              iconType="popout"
+              onClick={[Function]}
+            >
+              <EuiButtonDisplay
+                baseClassName="euiButton"
+                disabled={false}
+                element="button"
+                iconSide="right"
+                iconType="popout"
+                isDisabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                <button
+                  className="euiButton euiButton--primary"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
+                  type="button"
+                >
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="right"
+                    iconType="popout"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
+                  >
+                    <span
+                      className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                    >
+                      <EuiIcon
+                        className="euiButtonContent__icon"
+                        color="inherit"
+                        size="m"
+                        type="popout"
+                      >
+                        <EuiIconBeaker
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                            />
+                          </svg>
+                        </EuiIconBeaker>
+                      </EuiIcon>
+                      <span
+                        className="euiButton__text"
+                      >
+                        Query Workbench
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
+            </EuiButton>
           </div>
         </EuiEmptyPrompt>
       </AssociatedObjectsTabEmpty>

diff --git a/...ic/components/datasources/components/manage/associated_objects/associated_objects_tab.tsx b/...ic/components/datasources/components/manage/associated_objects/associated_objects_tab.tsx
@@ -160,7 +160,8 @@ export const AssociatedObjectsTab: React.FC<AssociatedObjectsTabProps> = (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<AssociatedObjectsTabProps> = (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<AssociatedObjectsTabProps> = (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<AssociatedObjectsTabProps> = (props)
                       <AssociatedObjectsTabFailure type="objects" />
                     ) : (
                       <>
-                        {cachedTables.length > 0 || cachedAccelerations.length > 0 ? (
+                        {cachedTables.length > 0 ||
+                        cachedAccelerations.filter(
+                          (acceleration: CachedAcceleration) =>
+                            acceleration.database === selectedDatabase
+                        ).length > 0 ? (
                           <AssociatedObjectsTable
                             datasourceName={datasource.name}
                             associatedObjects={associatedObjects}

diff --git a/...s/datasources/components/manage/associated_objects/utils/associated_objects_tab_empty.tsx b/...s/datasources/components/manage/associated_objects/utils/associated_objects_tab_empty.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiEmptyPrompt, EuiLink, EuiText } from '@elastic/eui';
+import { EuiButton, EuiEmptyPrompt, EuiText } from '@elastic/eui';
 import React from 'react';
 import { LoadCacheType } from '../../../../../../../common/types/data_connections';
 import { coreRefs } from '../../../../../../framework/core_refs';
@@ -51,12 +51,9 @@ export const AssociatedObjectsTabEmpty: React.FC<AssociatedObjectsTabEmptyProps>
             <h4>{titleText}</h4>
             <p>{bodyText}</p>
           </EuiText>
-          <EuiLink onClick={() => console.log()} external>
-            Learn more
-          </EuiLink>
         </>
       }
-      button={QueryWorkbenchButton}
+      actions={QueryWorkbenchButton}
     />
   );
 };
diff --git 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<T, P = void> = (params?: P) => Promise<T>;
 
@@ -85,6 +85,7 @@ export function usePolling<T, P = void>(
   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 @@ export function usePolling<T, P = void>(
       }
     }, interval);
     intervalRef.current = intervalId;
+    if (unmounted.current) {
+      clearInterval(intervalId);
+    }
   };
 
   const stopPolling = () => {
@@ -124,5 +128,11 @@ export function usePolling<T, P = void>(
     }
   };
 
+  useEffect(() => {
+    return () => {
+      unmounted.current = true;
+    };
+  }, []);
+
   return { data, loading, error, startPolling, stopPolling };
 }