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

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

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"