From 96573a40c1d9b2429dafd1f88abda3a9a9c0171a Mon Sep 17 00:00:00 2001 From: Julia Bardi <90178898+juliaElastic@users.noreply.github.com> Date: Thu, 12 Dec 2024 11:39:32 +0100 Subject: [PATCH] [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. image image --- .../components/agent_export_csv_tour.tsx | 68 +++++++++++++++++++ .../components/agents_selection_status.tsx | 4 +- .../agents/agent_list_page/index.test.tsx | 6 ++ .../agent_export_csv_modal/index.tsx | 9 +-- .../plugins/fleet/public/constants/index.ts | 1 + 5 files changed, 79 insertions(+), 9 deletions(-) create mode 100644 x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_export_csv_tour.tsx diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_export_csv_tour.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_export_csv_tour.tsx new file mode 100644 index 0000000000000..c0e9e4f5427bb --- /dev/null +++ b/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 ( + <> + + + + } + isStepOpen={!isTourHidden && tourState.isOpen} + onFinish={onFinish} + minWidth={360} + maxWidth={360} + step={1} + stepsTotal={1} + title={ + + } + anchorPosition="upLeft" + anchor="#agentListSelectionText" + /> + + ); +}; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agents_selection_status.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agents_selection_status.tsx index 618a7a6b8e112..160e29737bf78 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agents_selection_status.tsx +++ b/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<{ <> - + {totalAgents > SO_SEARCH_LIMIT ? ( )} + {showSelectionInfoAndOptions ? ( <> diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.test.tsx index 985e709ba22d0..319c2ee5455d8 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.test.tsx +++ b/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() }), diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_export_csv_modal/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_export_csv_modal/index.tsx index 901a90d5dea68..e289f660eb007 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_export_csv_modal/index.tsx +++ b/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 = ({ initialSelected: INITIAL_AGENT_FIELDS_TO_EXPORT, }; - const search: EuiSearchBarProps = { - box: { - incremental: true, - }, - }; - return ( = ({ items={items} itemId="field" columns={columns} - search={search} selection={selectionValue} /> diff --git a/x-pack/plugins/fleet/public/constants/index.ts b/x-pack/plugins/fleet/public/constants/index.ts index 4fbe799aa7337..059bae6ea7bff 100644 --- 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 {