From 8975381e0e5eead66653581b979a89d8f971646e Mon Sep 17 00:00:00 2001
From: Lu Yu <nluyu@amazon.com>
Date: Tue, 19 Mar 2024 12:55:28 -0700
Subject: [PATCH] [Multiple Datasource] Use data source filter function before
 rendering (#6175)

* use filter function before rendering

Signed-off-by: Lu Yu <nluyu@amazon.com>

* add change log

Signed-off-by: Lu Yu <nluyu@amazon.com>

---------

Signed-off-by: Lu Yu <nluyu@amazon.com>
Co-authored-by: ZilongX <99905560+ZilongX@users.noreply.github.com>
---
 CHANGELOG.md                                  |  1 +
 .../data_source_selector.tsx                  | 38 +++++++------------
 2 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e17bb7d1a207..6b7e1101d553 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -52,6 +52,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Workspace] Add workspace id in basePath ([#6060](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6060))
 - Implement new home page ([#6065](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6065))
 - Add sidecar service ([#5920](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5920))
+- [Multiple Datasource] Use data source filter function before rendering ([#6175](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6175))
 - [Chrome] Introduce registerCollapsibleNavHeader to allow plugins to customize the rendering of nav menu header ([#5244](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5244))
 - [Dynamic Configurations] Pass request headers when making application config calls ([#6164](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6164))
 - [Discover] Options button to configure legacy mode and remove the top navigation option ([#6170](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6170))
diff --git a/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.tsx b/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.tsx
index e7503cba645a..3e9f4c377160 100644
--- a/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.tsx
@@ -32,8 +32,8 @@ export interface DataSourceSelectorProps {
 }
 
 interface DataSourceSelectorState {
-  dataSourceOptions: DataSourceOption[];
   selectedOption: DataSourceOption[];
+  allDataSources: Array<SavedObject<DataSourceAttributes>>;
 }
 
 export interface DataSourceOption {
@@ -52,11 +52,7 @@ export class DataSourceSelector extends React.Component<
     super(props);
 
     this.state = {
-      dataSourceOptions: this.props.defaultOption
-        ? this.props.defaultOption
-        : this.props.hideLocalCluster
-        ? []
-        : [LocalCluster],
+      allDataSources: [],
       selectedOption: this.props.defaultOption
         ? this.props.defaultOption
         : this.props.hideLocalCluster
@@ -74,26 +70,10 @@ export class DataSourceSelector extends React.Component<
     getDataSourcesWithFields(this.props.savedObjectsClient, ['id', 'title', 'auth.type'])
       .then((fetchedDataSources) => {
         if (fetchedDataSources?.length) {
-          let filteredDataSources = fetchedDataSources;
-          if (this.props.dataSourceFilter) {
-            filteredDataSources = fetchedDataSources.filter((ds) =>
-              this.props.dataSourceFilter!(ds)
-            );
-          }
-
-          const dataSourceOptions = filteredDataSources.map((dataSource) => ({
-            id: dataSource.id,
-            label: dataSource.attributes?.title || '',
-          }));
-
-          if (!this.props.hideLocalCluster) {
-            dataSourceOptions.unshift(LocalCluster);
-          }
-
           if (!this._isMounted) return;
           this.setState({
             ...this.state,
-            dataSourceOptions,
+            allDataSources: fetchedDataSources,
           });
         }
       })
@@ -119,6 +99,16 @@ export class DataSourceSelector extends React.Component<
       this.props.placeholderText === undefined
         ? 'Select a data source'
         : this.props.placeholderText;
+
+    const dataSources = this.props.dataSourceFilter
+      ? this.state.allDataSources.filter((ds) => this.props.dataSourceFilter!(ds))
+      : this.state.allDataSources;
+
+    const options = dataSources.map((ds) => ({ id: ds.id, label: ds.attributes?.title || '' }));
+    if (!this.props.hideLocalCluster) {
+      options.unshift(LocalCluster);
+    }
+
     return (
       <EuiComboBox
         aria-label={
@@ -136,7 +126,7 @@ export class DataSourceSelector extends React.Component<
             : ''
         }
         singleSelection={{ asPlainText: true }}
-        options={this.state.dataSourceOptions}
+        options={options}
         selectedOptions={this.state.selectedOption}
         onChange={(e) => this.onChange(e)}
         prepend={