[UII] Save agent list table state using session storage (elastic#228875)

## Summary

Resolves elastic/ingest-dev#5213.

This PR makes Fleet's agent list table state be saved using session
storage. The state of the table includes:
- Pagination (rows per page and page #)
- Sort field and direction
- Text search bar
- All other filters (status, tags, agent policy, has upgrade)

Using session storage means that this state will be saved _within_ a
window/tab session. Saving the state this way suffices to manage agents
without losing context and clears up the state for new tabs/sessions.

When some state is declared using URL query params (i.e. `&kuery=` and
`&showInactive=`), the session storage state is overridden with defaults
*plus* state from query params. This is so that referral pages that
apply filters (like from Agent policy > click into count of Unprivileged
agents) do not run into unexpected filtering from the user's session
storage.

Because the filter state is now persistent, I changed `Clear filters`
button to `Reset filters` and updated the behavior accordingly: clicking
it resets back to initial filter state rather than clearing every filter
(i.e. clicking it resets back to 5 active agent statuses, rather than
clearing all statuses which causes inactive agents to be shown).

## Testing
I recommend using `node scripts/create_agents` (from Fleet directory) to
create large number of agents and playing around with filtering the list
UI and navigating between pages.

## Release note
Fleet agent list table now persists state of filters while navigating
within a session.

## To-do
- [x] Make this behave nicely with kuery & other URL query params

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [x] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

Author: jen-huang

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_list_table.tsx

@@ -139,7 +139,7 @@ export const AgentListTable: React.FC<Props> = (props: Props) => {
             <EuiLink onClick={() => clearFilters()}>
               <FormattedMessage
                 id="xpack.fleet.agentList.clearFiltersLinkText"
-                defaultMessage="Clear filters"
+                defaultMessage="Reset filters"
               />
             </EuiLink>
           ),

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_list_page/components/search_and_filter_bar.tsx

@@ -205,6 +205,8 @@ export const SearchAndFilterBar: React.FunctionComponent<SearchAndFilterBarProps
                   agentPolicies={agentPolicies}
                 />
                 <EuiFilterButton
+                  isToggle
+                  isSelected={showUpgradeable}
                   hasActiveFilters={showUpgradeable}
                   onClick={() => {
                     onShowUpgradeableChange(!showUpgradeable);

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_list_page/components/table_header.tsx

@@ -44,8 +44,8 @@ export const AgentTableHeader: React.FunctionComponent<{
 }) => {
   return (
     <>
-      <EuiFlexGroup justifyContent="spaceBetween">
-        <EuiFlexGroup justifyContent="flexStart" alignItems="center">
+      <EuiFlexGroup justifyContent="spaceBetween" gutterSize="m">
+        <EuiFlexGroup justifyContent="flexStart" alignItems="center" gutterSize="s">
           <EuiFlexItem grow={false}>
             <AgentsSelectionStatus
               totalAgents={totalAgents}
@@ -63,7 +63,7 @@ export const AgentTableHeader: React.FunctionComponent<{
               <EuiLink onClick={() => clearFilters()}>
                 <FormattedMessage
                   id="xpack.fleet.agentList.header.clearFiltersLinkText"
-                  defaultMessage="Clear filters"
+                  defaultMessage="Reset filters"
                 />
               </EuiLink>
             </EuiFlexItem>

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/use_fetch_agents_data.test.tsx

@@ -17,6 +17,40 @@ import { useFetchAgentsData } from './use_fetch_agents_data';
 jest.mock('../../../../../../services/experimental_features');
 const mockedExperimentalFeaturesService = jest.mocked(ExperimentalFeaturesService);
 
+const defaultState = {
+  search: '',
+  selectedAgentPolicies: [],
+  selectedStatus: ['healthy', 'unhealthy', 'orphaned', 'updating', 'offline'],
+  selectedTags: [],
+  showUpgradeable: false,
+  sort: { field: 'enrolled_at', direction: 'desc' },
+  page: { index: 0, size: 20 },
+};
+
+jest.mock('./use_session_agent_list_state', () => {
+  let currentMockState = { ...defaultState };
+
+  const mockUseSessionAgentListState = jest.fn(() => {
+    const mockUpdateTableState = jest.fn((updates: any) => {
+      currentMockState = { ...currentMockState, ...updates };
+    });
+
+    return {
+      ...currentMockState,
+      updateTableState: mockUpdateTableState,
+      onTableChange: jest.fn(),
+      clearFilters: jest.fn(),
+      resetToDefaults: jest.fn(),
+    };
+  });
+
+  return {
+    useSessionAgentListState: mockUseSessionAgentListState,
+    getDefaultAgentListState: jest.fn(() => defaultState),
+    defaultAgentListState: defaultState,
+  };
+});
+
 jest.mock('../../../../hooks', () => ({
   ...jest.requireActual('../../../../hooks'),
   sendGetAgentsForRq: jest.fn().mockResolvedValue({
@@ -87,14 +121,6 @@ jest.mock('../../../../hooks', () => ({
     cloud: {},
     data: { dataViews: { getFieldsForWildcard: jest.fn() } },
   }),
-  usePagination: jest.fn().mockReturnValue({
-    pagination: {
-      currentPage: 1,
-      pageSize: 5,
-    },
-    pageSizeOptions: [5, 20, 50],
-    setPagination: jest.fn(),
-  }),
 }));
 
 describe('useFetchAgentsData', () => {
@@ -149,7 +175,7 @@ describe('useFetchAgentsData', () => {
       'status:online or (status:error or status:degraded) or status:orphaned or (status:updating or status:unenrolling or status:enrolling) or status:offline'
     );
 
-    expect(result?.current.pagination).toEqual({ currentPage: 1, pageSize: 5 });
+    expect(result?.current.page).toEqual({ index: 0, size: 20 });
     expect(result?.current.pageSizeOptions).toEqual([5, 20, 50]);
   });
 

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_list_page/hooks/use_fetch_agents_data.tsx

@@ -12,9 +12,8 @@ import { useQuery } from '@kbn/react-query';
 
 import { agentStatusesToSummary } from '../../../../../../../common/services';
 
-import type { Agent, AgentPolicy } from '../../../../types';
+import type { AgentPolicy } from '../../../../types';
 import {
-  usePagination,
   useGetAgentPolicies,
   sendGetAgentStatus,
   useUrlParams,
@@ -32,6 +31,8 @@ import { LEGACY_AGENT_POLICY_SAVED_OBJECT_TYPE, SO_SEARCH_LIMIT } from '../../..
 
 import { getKuery } from '../utils/get_kuery';
 
+import { useSessionAgentListState, defaultAgentListState } from './use_session_agent_list_state';
+
 const REFRESH_INTERVAL_MS = 30000;
 const MAX_AGENT_ACTIONS = 100;
 /** Allow to fetch full agent policy using a cache */
@@ -102,29 +103,91 @@ export function useFetchAgentsData() {
   const { showAgentless } = useAgentlessResources();
   const defaultKuery: string = (urlParams.kuery as string) || '';
   const urlHasInactive = (urlParams.showInactive as string) === 'true';
+  const isUsingParams = defaultKuery || urlHasInactive;
+
+  // Extract state from session storage hook
+  const sessionState = useSessionAgentListState();
+  const {
+    search,
+    selectedAgentPolicies,
+    selectedStatus,
+    selectedTags,
+    showUpgradeable,
+    sort,
+    page,
+    updateTableState,
+  } = sessionState;
+
+  // If URL params are used, reset the table state to defaults with the param options
+  useEffect(() => {
+    if (isUsingParams) {
+      updateTableState({
+        ...defaultAgentListState,
+        search: defaultKuery,
+        selectedStatus: [...new Set([...selectedStatus, ...(urlHasInactive ? ['inactive'] : [])])],
+      });
+    }
+    // Empty array so that this only runs once on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Sync URL kuery param with session storage search to maintain shareable state
+  useEffect(() => {
+    const currentUrlKuery = (urlParams.kuery as string) || '';
+    // If search is empty and URL has kuery, or search differs from URL, update URL
+    if ((search === '' && currentUrlKuery !== '') || (search && search !== currentUrlKuery)) {
+      const { kuery: _, ...restParams } = urlParams;
+      const newParams = search === '' ? restParams : { ...restParams, kuery: search };
+      history.replace({
+        search: toUrlParams(newParams),
+      });
+    }
+  }, [search, urlParams, history, toUrlParams]);
+
+  // Flag to indicate if filters differ from default state
+  const isUsingFilter = useMemo(() => {
+    return (
+      search !== defaultAgentListState.search ||
+      !isEqual(selectedAgentPolicies, defaultAgentListState.selectedAgentPolicies) ||
+      !isEqual(selectedStatus, defaultAgentListState.selectedStatus) ||
+      !isEqual(selectedTags, defaultAgentListState.selectedTags) ||
+      showUpgradeable !== defaultAgentListState.showUpgradeable
+    );
+  }, [search, selectedAgentPolicies, selectedStatus, selectedTags, showUpgradeable]);
+
+  // Create individual setters using updateTableState
+  const setSearchState = useCallback(
+    (value: string) => updateTableState({ search: value }),
+    [updateTableState]
+  );
+
+  const setSelectedAgentPolicies = useCallback(
+    (value: string[]) => updateTableState({ selectedAgentPolicies: value }),
+    [updateTableState]
+  );
+
+  const setSelectedStatus = useCallback(
+    (value: string[]) => updateTableState({ selectedStatus: value }),
+    [updateTableState]
+  );
 
-  // Table and search states
-  const [showUpgradeable, setShowUpgradeable] = useState<boolean>(false);
-  const [draftKuery, setDraftKuery] = useState<string>(defaultKuery);
-  const [search, setSearchState] = useState<string>(defaultKuery);
-  const { pagination, pageSizeOptions, setPagination } = usePagination();
-  const [sortField, setSortField] = useState<keyof Agent>('enrolled_at');
-  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
-
-  // Policies state for filtering
-  const [selectedAgentPolicies, setSelectedAgentPolicies] = useState<string[]>([]);
-
-  // Status for filtering
-  const [selectedStatus, setSelectedStatus] = useState<string[]>([
-    'healthy',
-    'unhealthy',
-    'orphaned',
-    'updating',
-    'offline',
-    ...(urlHasInactive ? ['inactive'] : []),
-  ]);
-
-  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const setSelectedTags = useCallback(
+    (value: string[]) => updateTableState({ selectedTags: value }),
+    [updateTableState]
+  );
+
+  const setShowUpgradeable = useCallback(
+    (value: boolean) => updateTableState({ showUpgradeable: value }),
+    [updateTableState]
+  );
+
+  const pageSizeOptions = [5, 20, 50];
+
+  // Sync draftKuery with session storage search
+  const [draftKuery, setDraftKuery] = useState<string>(search);
+  useEffect(() => {
+    setDraftKuery(search);
+  }, [search]);
 
   const showInactive = useMemo(() => {
     return selectedStatus.some((status) => status === 'inactive') || selectedStatus.length === 0;
@@ -142,13 +205,14 @@ export function useFetchAgentsData() {
       }
 
       if (urlParams.kuery !== newVal) {
+        const { kuery: _, ...restParams } = urlParams;
+        const newParams = newVal === '' ? restParams : { ...restParams, kuery: newVal };
         history.replace({
-          // @ts-expect-error - kuery can't be undefined
-          search: toUrlParams({ ...urlParams, kuery: newVal === '' ? undefined : newVal }),
+          search: toUrlParams(newParams),
         });
       }
     },
-    [urlParams, history, toUrlParams]
+    [setSearchState, urlParams, history, toUrlParams]
   );
 
   // filters kuery
@@ -192,7 +256,12 @@ export function useFetchAgentsData() {
     }
   }, [latestAgentActionErrors, actionErrors]);
 
-  const queryKeyPagination = JSON.stringify({ pagination, sortField, sortOrder });
+  // Use session storage state for pagination and sort
+  const queryKeyPagination = JSON.stringify({
+    pagination: { currentPage: page.index + 1, pageSize: page.size },
+    sortField: sort.field,
+    sortOrder: sort.direction,
+  });
   const queryKeyFilters = JSON.stringify({
     kuery,
     showAgentless,
@@ -210,7 +279,7 @@ export function useFetchAgentsData() {
     refetch,
   } = useQuery({
     queryKey: ['get-agents-list', queryKeyFilters, queryKeyPagination],
-    keepPreviousData: true, // Keep previous data to avoid flashing when going through pages coulse
+    keepPreviousData: true, // Keep previous data to avoid flashing when going through pages
     queryFn: async () => {
       try {
         const [
@@ -220,11 +289,11 @@ export function useFetchAgentsData() {
           agentTagsResponse,
         ] = await Promise.all([
           sendGetAgentsForRq({
-            page: pagination.currentPage,
-            perPage: pagination.pageSize,
+            page: page.index + 1,
+            perPage: page.size,
             kuery: kuery && kuery !== '' ? kuery : undefined,
-            sortField: getSortFieldForAPI(sortField),
-            sortOrder,
+            sortField: getSortFieldForAPI(sort.field),
+            sortOrder: sort.direction,
             showAgentless,
             showInactive,
             showUpgradeable,
@@ -377,26 +446,25 @@ export function useFetchAgentsData() {
     setSearch,
     selectedAgentPolicies,
     setSelectedAgentPolicies,
-    sortField,
-    setSortField,
-    sortOrder,
-    setSortOrder,
+    sort,
     selectedStatus,
     setSelectedStatus,
     selectedTags,
     setSelectedTags,
     allAgentPolicies,
     agentPoliciesRequest,
     agentPoliciesIndexedById,
-    pagination,
+    page,
     pageSizeOptions,
-    setPagination,
     kuery,
     draftKuery,
     setDraftKuery,
     fetchData,
     queryHasChanged,
     latestAgentActionErrors,
     setLatestAgentActionErrors,
+    isUsingFilter,
+    clearFilters: sessionState.clearFilters,
+    onTableChange: sessionState.onTableChange,
   };
 }