From 15e043ac7c49418c8802d2d60d4b3318a58a44e8 Mon Sep 17 00:00:00 2001
From: Sean Li <lnse@amazon.com>
Date: Wed, 20 Mar 2024 15:21:55 -0700
Subject: [PATCH 1/3] clear interval when component unmounts

Signed-off-by: Sean Li <lnse@amazon.com>
---
 public/components/hooks/use_polling.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

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<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 };
 }

From be6f8bcde6cf07d0f45b6219cf61f3511d5a03d1 Mon Sep 17 00:00:00 2001
From: Sean Li <lnse@amazon.com>
Date: Wed, 20 Mar 2024 15:40:15 -0700
Subject: [PATCH 2/3] updating empty state

Signed-off-by: Sean Li <lnse@amazon.com>
---
 .../associated_objects_tab.test.tsx.snap      | 37 -------------------
 .../associated_objects_tab.tsx                | 10 +++--
 .../utils/associated_objects_tab_empty.tsx    | 18 +--------
 3 files changed, 8 insertions(+), 57 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..34efe888ba 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
@@ -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>
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..04dce0f543 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<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);
diff --git a/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_empty.tsx b/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_empty.tsx
index b34575bc02..573977a5c7 100644
--- a/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_empty.tsx
+++ b/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_empty.tsx
@@ -3,10 +3,9 @@
  * 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;
@@ -14,17 +13,6 @@ interface AssociatedObjectsTabEmptyProps {
 
 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}
     />
   );
 };

From e2abfe3e5d7196ee7d651af5e72516d1f622fc3f Mon Sep 17 00:00:00 2001
From: Sean Li <lnse@amazon.com>
Date: Wed, 20 Mar 2024 15:59:21 -0700
Subject: [PATCH 3/3] adding back button on empty page, fixing empty
 accelerations length checker in associated objects tab

Signed-off-by: Sean Li <lnse@amazon.com>
---
 .../associated_objects_tab.test.tsx.snap      | 95 +++++++++++++++++++
 .../associated_objects_tab.tsx                |  6 +-
 .../utils/associated_objects_tab_empty.tsx    | 15 ++-
 3 files changed, 114 insertions(+), 2 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 34efe888ba..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"
       >
         <EuiEmptyPrompt
+          actions={
+            <EuiButton
+              iconSide="right"
+              iconType="popout"
+              onClick={[Function]}
+            >
+              Query Workbench
+            </EuiButton>
+          }
           body={
             <React.Fragment>
               <EuiText>
@@ -5078,6 +5087,92 @@ exports[`AssociatedObjectsTab Component renders tab with no databases or objects
                 </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/public/components/datasources/components/manage/associated_objects/associated_objects_tab.tsx b/public/components/datasources/components/manage/associated_objects/associated_objects_tab.tsx
index 04dce0f543..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
@@ -367,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/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_empty.tsx b/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_empty.tsx
index 573977a5c7..2d1273af68 100644
--- a/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_empty.tsx
+++ b/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_empty.tsx
@@ -3,9 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiEmptyPrompt, 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';
 
 interface AssociatedObjectsTabEmptyProps {
   cacheType: LoadCacheType;
@@ -13,6 +14,17 @@ interface AssociatedObjectsTabEmptyProps {
 
 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;
@@ -41,6 +53,7 @@ export const AssociatedObjectsTabEmpty: React.FC<AssociatedObjectsTabEmptyProps>
           </EuiText>
         </>
       }
+      actions={QueryWorkbenchButton}
     />
   );
 };