Fix clear filters on agents table not working (#71978) (#72119)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: jen-huang

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/agent_list_page/index.tsx

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import {
   EuiBasicTable,
   EuiButton,
@@ -144,13 +144,20 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
   const [search, setSearch] = useState(defaultKuery);
   const { pagination, pageSizeOptions, setPagination } = usePagination();
 
-  // Configs state (for filtering)
+  // Configs state for filtering
   const [isConfigsFilterOpen, setIsConfigsFilterOpen] = useState<boolean>(false);
   const [selectedConfigs, setSelectedConfigs] = useState<string[]>([]);
+
   // Status for filtering
   const [isStatusFilterOpen, setIsStatutsFilterOpen] = useState<boolean>(false);
   const [selectedStatus, setSelectedStatus] = useState<string[]>([]);
 
+  const clearFilters = useCallback(() => {
+    setSearch('');
+    setSelectedConfigs([]);
+    setSelectedStatus([]);
+  }, [setSearch, setSelectedConfigs, setSelectedStatus]);
+
   // Add a config id to current search
   const addConfigFilter = (configId: string) => {
     setSelectedConfigs([...selectedConfigs, configId]);
@@ -500,23 +507,21 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
       <EuiBasicTable<Agent>
         className="fleet__agentList__table"
         data-test-subj="fleetAgentListTable"
-        loading={isLoading && agentsRequest.isInitialRequest}
+        loading={isLoading}
         hasActions={true}
         noItemsMessage={
           isLoading && agentsRequest.isInitialRequest ? (
             <FormattedMessage
               id="xpack.ingestManager.agentList.loadingAgentsMessage"
               defaultMessage="Loading agents…"
             />
-          ) : !search.trim() && selectedConfigs.length === 0 && totalAgents === 0 ? (
-            emptyPrompt
-          ) : (
+          ) : search.trim() || selectedConfigs.length || selectedStatus.length ? (
             <FormattedMessage
               id="xpack.ingestManager.agentList.noFilteredAgentsPrompt"
               defaultMessage="No agents found. {clearFiltersLink}"
               values={{
                 clearFiltersLink: (
-                  <EuiLink onClick={() => setSearch('')}>
+                  <EuiLink onClick={() => clearFilters()}>
                     <FormattedMessage
                       id="xpack.ingestManager.agentList.clearFiltersLinkText"
                       defaultMessage="Clear filters"
@@ -525,7 +530,9 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
                 ),
               }}
             />
-          )
+          ) : !isLoading && totalAgents === 0 ? (
+            emptyPrompt
+          ) : undefined
         }
         items={totalAgents ? agents : []}
         itemId="id"