[Remote Clusters] Fix table filtering when there are clusters with proxy mode (#124220)

* Fix table search for clusters with proxy mode

* commit using @elastic.co

* Fix tests and add docs

* Add tests for different kinds of search

x-pack/plugins/remote_clusters/__jest__/client_integration/list/remote_clusters_list.test.js

@@ -77,6 +77,51 @@ describe('<RemoteClusterList />', () => {
     });
   });
 
+  describe('can search', () => {
+    let table;
+    let component;
+    let form;
+
+    const remoteClusters = [
+      {
+        name: 'simple_remote_cluster',
+        seeds: ['127.0.0.1:2000', '127.0.0.2:3000'],
+      },
+      {
+        name: 'remote_cluster_with_proxy',
+        proxyAddress: '192.168.0.1:80',
+        mode: PROXY_MODE,
+      },
+    ];
+
+    beforeEach(async () => {
+      httpRequestsMockHelpers.setLoadRemoteClustersResponse(remoteClusters);
+
+      await act(async () => {
+        ({ table, component, form } = setup());
+      });
+
+      component.update();
+    });
+
+    test('without any search params it should show all clusters', () => {
+      const { tableCellsValues } = table.getMetaData('remoteClusterListTable');
+      expect(tableCellsValues.length).toBe(2);
+    });
+
+    test('search by seed works', () => {
+      form.setInputValue('remoteClusterSearch', 'simple');
+      const { tableCellsValues } = table.getMetaData('remoteClusterListTable');
+      expect(tableCellsValues.length).toBe(1);
+    });
+
+    test('search by proxyAddress works', () => {
+      form.setInputValue('remoteClusterSearch', 'proxy');
+      const { tableCellsValues } = table.getMetaData('remoteClusterListTable');
+      expect(tableCellsValues.length).toBe(1);
+    });
+  });
+
   describe('when there are multiple pages of remote clusters', () => {
     let table;
     let actions;
@@ -91,10 +136,18 @@ describe('<RemoteClusterList />', () => {
     ];
 
     for (let i = 0; i < 29; i++) {
-      remoteClusters.push({
-        name: `name${i}`,
-        seeds: [],
-      });
+      if (i % 2 === 0) {
+        remoteClusters.push({
+          name: `cluster-${i}`,
+          seeds: [],
+        });
+      } else {
+        remoteClusters.push({
+          name: `cluster_with_proxy-${i}`,
+          proxyAddress: `127.0.0.1:10${i}`,
+          mode: PROXY_MODE,
+        });
+      }
     }
 
     beforeEach(async () => {

x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.js

@@ -31,13 +31,22 @@ const getFilteredClusters = (clusters, queryText) => {
     const normalizedSearchText = queryText.toLowerCase();
 
     return clusters.filter((cluster) => {
-      const { name, seeds } = cluster;
+      const { name, seeds, proxyAddress } = cluster;
       const normalizedName = name.toLowerCase();
+
       if (normalizedName.toLowerCase().includes(normalizedSearchText)) {
         return true;
       }
 
-      return seeds.some((seed) => seed.includes(normalizedSearchText));
+      if (proxyAddress && proxyAddress.toLowerCase().includes(normalizedSearchText)) {
+        return true;
+      }
+
+      if (seeds) {
+        return seeds.some((seed) => seed.includes(normalizedSearchText));
+      }
+
+      return false;
     });
   } else {
     return clusters;
@@ -81,6 +90,11 @@ export class RemoteClusterTable extends Component {
   }
 
   onSearch = ({ query }) => {
+    // There's no need to update the state if there arent any search params
+    if (!query) {
+      return;
+    }
+
     const { clusters } = this.props;
     const { text } = query;