From 7c3ff5500bee2b2ffacdda0786d9e83b95eaade4 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Wed, 23 Oct 2024 13:35:00 -0700
Subject: [PATCH] fix: data source picker is remounted multiple times (#1131)
 (#1135)

(cherry picked from commit 7deec899da935484f1a48de3dbb29f4d74dc4f51)

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .../DataSourceAlertsCard/DataSourceAlertsCard.tsx      | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx b/public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx
index 6dd41b89..2e91ea87 100644
--- a/public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx
+++ b/public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx
@@ -3,7 +3,7 @@
 * SPDX-License-Identifier: Apache-2.0
 */
 
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { EuiBadge, EuiDescriptionList, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiLink, EuiLoadingContent, EuiPanel, EuiText, EuiTitle } from "@elastic/eui";
 import { DataSourceManagementPluginSetup, DataSourceOption } from "../../../../../src/plugins/data_source_management/public";
 import { getApplication, getClient, getNotifications, getSavedObjectsClient } from "../../services";
@@ -18,7 +18,13 @@ export interface DataSourceAlertsCardProps {
 }
 
 export const DataSourceAlertsCard: React.FC<DataSourceAlertsCardProps> =  ({ getDataSourceMenu }) => {
-  const DataSourceSelector = getDataSourceMenu?.();
+  const DataSourceSelector = useMemo(() => {
+    if (getDataSourceMenu) {
+      return getDataSourceMenu();
+    }
+
+    return null;
+  }, [getDataSourceMenu]);
   const [loading, setLoading] = useState(false);
   const [dataSource, setDataSource] = useState<DataSourceOption>({
     label: 'Local cluster',