[Fleet] added tour component, removed search (#203741)

## Summary

Closes https://github.com/elastic/ingest-dev/issues/4324

- Added tour component for Export CSV feature, it goes away on`Close
tour`
- Removed search in column selection
- Tried a few ways to fix the search not to remove the existing
selection (see in https://github.com/elastic/kibana/pull/203103), but
doesn't seem possible with EuiTable. Removed for now as there aren't
that many columns, and don't want to leave it in as is.

<img width="1772" alt="image"
src="https://github.com/user-attachments/assets/464f8247-bc2d-45d5-8fd4-96d790a40833">
 
<img width="860" alt="image"
src="https://github.com/user-attachments/assets/5d3058f0-2e52-4248-af34-0dfa1c149417">

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_export_csv_tour.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiText, EuiTourStep } from '@elastic/eui';
+import React, { useState } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import type { TOUR_STORAGE_CONFIG } from '../../../../constants';
+import { TOUR_STORAGE_KEYS } from '../../../../constants';
+import { useStartServices } from '../../../../hooks';
+
+export const AgentExportCSVTour: React.FC<{}> = () => {
+  const { storage, uiSettings } = useStartServices();
+
+  const [tourState, setTourState] = useState({ isOpen: true });
+
+  const isTourHidden =
+    uiSettings.get('hideAnnouncements', false) ||
+    (
+      storage.get(TOUR_STORAGE_KEYS.AGENT_EXPORT_CSV) as
+        | TOUR_STORAGE_CONFIG['AGENT_EXPORT_CSV']
+        | undefined
+    )?.active === false;
+
+  const setTourAsHidden = () => {
+    storage.set(TOUR_STORAGE_KEYS.AGENT_EXPORT_CSV, {
+      active: false,
+    } as TOUR_STORAGE_CONFIG['AGENT_EXPORT_CSV']);
+  };
+
+  const onFinish = () => {
+    setTourState({ isOpen: false });
+    setTourAsHidden();
+  };
+
+  return (
+    <>
+      <EuiTourStep
+        content={
+          <EuiText>
+            <FormattedMessage
+              id="xpack.fleet.agentExportCSVTour.tourContent"
+              defaultMessage="Once you have selected the agents, click the action menu to download the CSV file."
+            />
+          </EuiText>
+        }
+        isStepOpen={!isTourHidden && tourState.isOpen}
+        onFinish={onFinish}
+        minWidth={360}
+        maxWidth={360}
+        step={1}
+        stepsTotal={1}
+        title={
+          <FormattedMessage
+            id="xpack.fleet.agentExportCSVTour.tourTitle"
+            defaultMessage="Download CSV file"
+          />
+        }
+        anchorPosition="upLeft"
+        anchor="#agentListSelectionText"
+      />
+    </>
+  );
+};

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agents_selection_status.tsx

@@ -14,6 +14,7 @@ import { SO_SEARCH_LIMIT } from '../../../../constants';
 import type { Agent } from '../../../../types';
 
 import type { SelectionMode } from './types';
+import { AgentExportCSVTour } from './agent_export_csv_tour';
 
 const Divider = styled.div`
   width: 0;
@@ -62,7 +63,7 @@ export const AgentsSelectionStatus: React.FunctionComponent<{
     <>
       <EuiFlexGroup gutterSize="s" alignItems="center">
         <EuiFlexItem grow={false}>
-          <EuiText size="xs" color="subdued">
+          <EuiText size="xs" color="subdued" id="agentListSelectionText">
             {totalAgents > SO_SEARCH_LIMIT ? (
               <FormattedMessage
                 id="xpack.fleet.agentBulkActions.totalAgentsWithLimit"
@@ -97,6 +98,7 @@ export const AgentsSelectionStatus: React.FunctionComponent<{
               </>
             )}
           </EuiText>
+          <AgentExportCSVTour />
         </EuiFlexItem>
         {showSelectionInfoAndOptions ? (
           <>

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

@@ -69,6 +69,12 @@ jest.mock('../../../hooks', () => ({
     cloud: {},
     data: { dataViews: { getFieldsForWildcard: jest.fn() } },
     docLinks: { links: { kibana: { secureSavedObject: 'my-link' } } },
+    uiSettings: {
+      get: jest.fn(),
+    },
+    storage: {
+      get: jest.fn(),
+    },
   }),
   useBreadcrumbs: jest.fn(),
   useLink: jest.fn().mockReturnValue({ getHref: jest.fn() }),

x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_export_csv_modal/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useState } from 'react';
-import type { EuiBasicTableColumn, EuiSearchBarProps, EuiTableSelectionType } from '@elastic/eui';
+import type { EuiBasicTableColumn, EuiTableSelectionType } from '@elastic/eui';
 import {
   EuiConfirmModal,
   EuiFlexGroup,
@@ -67,12 +67,6 @@ export const AgentExportCSVModal: React.FunctionComponent<Props> = ({
     initialSelected: INITIAL_AGENT_FIELDS_TO_EXPORT,
   };
 
-  const search: EuiSearchBarProps = {
-    box: {
-      incremental: true,
-    },
-  };
-
   return (
     <EuiConfirmModal
       data-test-subj="agentExportCSVModal"
@@ -129,7 +123,6 @@ export const AgentExportCSVModal: React.FunctionComponent<Props> = ({
             items={items}
             itemId="field"
             columns={columns}
-            search={search}
             selection={selectionValue}
           />
         </EuiFlexItem>

x-pack/plugins/fleet/public/constants/index.ts

@@ -54,6 +54,7 @@ export const TOUR_STORAGE_KEYS = {
   ADD_AGENT_POPOVER: 'fleet.addAgentPopoverTour',
   INACTIVE_AGENTS: 'fleet.inactiveAgentsTour',
   GRANULAR_PRIVILEGES: 'fleet.granularPrivileges',
+  AGENT_EXPORT_CSV: 'fleet.agentExportCSVTour',
 };
 
 export interface TourConfig {