[8.x] [Fleet] added tour component, removed search (#203741) (#203994)

# Backport This will backport the following commits from `main` to `8.x`: - [[Fleet] added tour component, removed search (#203741)](#203741)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Julia Bardi <90178898+juliaElastic@users.noreply.github.com>
elastic · Dec 12, 2024 · 3b2de11 · 3b2de11
1 parent 3cd88c8
commit 3b2de11
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 9 deletions.
diff --git a/...c/applications/fleet/sections/agents/agent_list_page/components/agent_export_csv_tour.tsx b/...c/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"
+      />
+    </>
+  );
+};
diff --git a/...applications/fleet/sections/agents/agent_list_page/components/agents_selection_status.tsx b/...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 ? (
           <>

diff --git a/...ck/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.test.tsx b/...ck/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() }),

diff --git a/...eet/public/applications/fleet/sections/agents/components/agent_export_csv_modal/index.tsx b/...eet/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>

diff --git a/x-pack/plugins/fleet/public/constants/index.ts b/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 {