[Multiple Datasource] Use data source filter function before rendering (

#6175) (#6265)

* 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>
(cherry picked from commit 8975381)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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={