[MDS] Bug-fix Fix data source picker trigger local cluster call by default

changelogs/fragments/7528.yml

@@ -0,0 +1,2 @@
+fix:
+- Fix data source picker trigger local cluster call by default ([#7528](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7528))

src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table.tsx

@@ -80,12 +80,14 @@ export const ManageDirectQueryDataConnectionsTable: React.FC<ManageDirectQueryDa
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />);
   const [selectedConnection, setSelectedConnection] = useState<string | undefined>(undefined);
-  const [selectedDataSourceId, setSelectedDataSourceId] = useState<string | undefined>('');
+  const [selectedDataSourceId, setSelectedDataSourceId] = useState<string | undefined>(undefined);
   const [searchText, setSearchText] = useState<string>('');
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const history = useHistory();
 
   const fetchDataSources = useCallback(() => {
+    if (featureFlagStatus && selectedDataSourceId === undefined) return;
+
     const endpoint =
       featureFlagStatus && selectedDataSourceId !== undefined
         ? `${DATACONNECTIONS_BASE}/dataSourceMDSId=${selectedDataSourceId}`
@@ -113,7 +115,7 @@ export const ManageDirectQueryDataConnectionsTable: React.FC<ManageDirectQueryDa
 
   const deleteDataSources = useCallback(
     (connectionName: string | undefined) => {
-      if (!connectionName) return;
+      if (!connectionName || (featureFlagStatus && selectedDataSourceId === undefined)) return;
 
       const endpoint =
         featureFlagStatus && selectedDataSourceId !== undefined
@@ -150,7 +152,7 @@ export const ManageDirectQueryDataConnectionsTable: React.FC<ManageDirectQueryDa
   }, [fetchDataSources]);
 
   const handleSelectedDataSourceChange = (e: DataSourceOption[]) => {
-    const dataSourceId = e[0] ? e[0].id : '';
+    const dataSourceId = e[0] ? e[0].id : undefined;
     setSelectedDataSourceId(dataSourceId);
   };
 
@@ -203,7 +205,7 @@ export const ManageDirectQueryDataConnectionsTable: React.FC<ManageDirectQueryDa
       onClick: (datasource: DataConnection) => {
         renderCreateAccelerationFlyout({
           dataSourceName: datasource.name,
-          dataSourceMDSId: selectedDataSourceId,
+          dataSourceMDSId: selectedDataSourceId ?? '',
         });
       },
       'data-test-subj': 'action-accelerate',
@@ -266,7 +268,7 @@ export const ManageDirectQueryDataConnectionsTable: React.FC<ManageDirectQueryDa
             <EuiLink
               data-test-subj={`${record.name}DataConnectionsLink`}
               onClick={() =>
-                history.push(`/manage/${record.name}?dataSourceMDSId=${selectedDataSourceId}`)
+                history.push(`/manage/${record.name}?dataSourceMDSId=${selectedDataSourceId ?? ''}`)
               }
             >
               {truncate(record.name, 100)}
@@ -307,6 +309,7 @@ export const ManageDirectQueryDataConnectionsTable: React.FC<ManageDirectQueryDa
             disabled={false}
             compressed={true}
             hideLocalCluster={getHideLocalCluster().enabled}
+            isClearable={false}
           />
         </EuiFlexItem>
       )}