From 29565551d1582e3378b9888788e3f4285a58e90d Mon Sep 17 00:00:00 2001 From: Supplementing Date: Fri, 25 Apr 2025 10:55:22 -0600 Subject: [PATCH 1/5] updated stream toggles to only show nested when more than one stream per section --- .../steps/components/package_policy_input_panel.tsx | 1 + .../steps/components/package_policy_input_stream.tsx | 10 +++++++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx index 7949508da9238..f5dd3101183d3 100644 --- a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx +++ b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx @@ -259,6 +259,7 @@ export const PackagePolicyInputPanel: React.FunctionComponent<{ data-test-subj="PackagePolicy.InputStreamConfig" packageInfo={packageInfo} packageInputStream={packageInputStream} + totalStreams={inputStreams.length} packagePolicyInputStream={packagePolicyInputStream!} updatePackagePolicyInputStream={( updatedStream: Partial diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx index 246b6db8d8e35..fc3d5c3962201 100644 --- a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx +++ b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_stream.tsx @@ -65,6 +65,7 @@ interface Props { inputStreamValidationResults: PackagePolicyConfigValidationResults; forceShowErrors?: boolean; isEditPage?: boolean; + totalStreams?: number; } export const PackagePolicyInputStreamConfig = memo( @@ -76,6 +77,7 @@ export const PackagePolicyInputStreamConfig = memo( inputStreamValidationResults, forceShowErrors, isEditPage, + totalStreams, }) => { const config = useConfig(); const isExperimentalDataStreamSettingsEnabled = @@ -92,7 +94,7 @@ export const PackagePolicyInputStreamConfig = memo( !!packagePolicyInputStream.id && packagePolicyInputStream.id === defaultDataStreamId; const isPackagePolicyEdit = !!packagePolicyId; - + const shouldShowStreamsToggles = totalStreams ? totalStreams > 1 : true; const customDatasetVar = packagePolicyInputStream.vars?.[DATASET_VAR_NAME]; const customDatasetVarValue = customDatasetVar?.value?.dataset || customDatasetVar?.value; @@ -182,7 +184,7 @@ export const PackagePolicyInputStreamConfig = memo( alignItems="flexStart" justifyContent="spaceBetween" > - {packageInfo.type !== 'input' && ( + {packageInfo.type !== 'input' && shouldShowStreamsToggles && ( ( ) : null} - {packageInfo.type !== 'input' && packageInputStream.description ? ( + {packageInfo.type !== 'input' && + packageInputStream.description && + shouldShowStreamsToggles ? ( <> From cbb52d144fada26786ca3a2e2a49492a56a0095d Mon Sep 17 00:00:00 2001 From: Supplementing Date: Mon, 28 Apr 2025 08:34:25 -0600 Subject: [PATCH 2/5] added description under top level toggle when only one item --- .../steps/components/package_policy_input_panel.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx index f5dd3101183d3..d2852232efdd6 100644 --- a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx +++ b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx @@ -6,6 +6,7 @@ */ import React, { useState, Fragment, memo, useMemo, useCallback } from 'react'; +import ReactMarkdown from 'react-markdown'; import styled from 'styled-components'; import { FormattedMessage } from '@kbn/i18n-react'; import { @@ -196,7 +197,18 @@ export const PackagePolicyInputPanel: React.FunctionComponent<{ } }} /> + + {packagePolicyInput.streams.length <= 1 && ( + + + {typeof inputStreams[0].packageInputStream.description === 'string' + ? inputStreams[0].packageInputStream.description + : ''} + + + )} + {hasErrors ? ( From e3476029ec64cb54970b1374ea53940ed462f7e6 Mon Sep 17 00:00:00 2001 From: Supplementing Date: Mon, 28 Apr 2025 08:34:54 -0600 Subject: [PATCH 3/5] updated conditional --- .../steps/components/package_policy_input_panel.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx index d2852232efdd6..874f3bedbb0f2 100644 --- a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx +++ b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx @@ -198,12 +198,11 @@ export const PackagePolicyInputPanel: React.FunctionComponent<{ }} /> - {packagePolicyInput.streams.length <= 1 && ( + {/* show the description under the top level toggle if theres only one stream */} + {packagePolicyInput.streams.length === 1 && ( - {typeof inputStreams[0].packageInputStream.description === 'string' - ? inputStreams[0].packageInputStream.description - : ''} + {String(inputStreams[0].packageInputStream.description)} )} From 59c2df6bc83a6480486cca7a854c297457642c94 Mon Sep 17 00:00:00 2001 From: Supplementing Date: Mon, 28 Apr 2025 16:37:40 -0600 Subject: [PATCH 4/5] updated tests --- .../package_policy_input_panel.test.tsx | 152 +++++++++++++++++- 1 file changed, 151 insertions(+), 1 deletion(-) diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.test.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.test.tsx index f6a66933b16ee..50c9aadb1ce8d 100644 --- a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.test.tsx +++ b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.test.tsx @@ -304,6 +304,107 @@ describe('PackagePolicyInputPanel', () => { ], }, }, + // Duplicated items to make sure they show up in the UI as we now only show multiple switches/descriptions when theres more than one input + { + input: 'logfile', + title: 'Sample logs hidden in agentless (duplicated)', + template_path: 'stream.yml.hbs', + vars: [ + { + name: 'paths', + type: 'text', + title: 'Paths', + multi: false, + default: ['/var/log/*.log'], + required: false, + show_user: true, + hide_in_deployment_modes: ['agentless'], + }, + ], + description: 'Collect sample logs - hidden in agentless', + data_stream: { + title: 'Default data stream', + release: 'ga', + type: 'logs', + package: 'agentless_test_package', + dataset: 'agentless_test_package.default_data_stream', + path: 'default_data_stream', + elasticsearch: { + 'ingest_pipeline.name': 'default', + }, + ingest_pipeline: 'default', + streams: [ + { + input: 'logfile', + title: 'Sample logs hidden in agentless', + template_path: 'stream.yml.hbs', + vars: [ + { + name: 'paths', + type: 'text', + title: 'Paths', + multi: false, + default: ['/var/log/*.log'], + required: false, + show_user: true, + hide_in_deployment_modes: ['agentless'], + }, + ], + description: 'Collect sample logs - hidden in agentless', + }, + ], + }, + }, + { + input: 'logfile', + title: 'Sample logs on Agentless (duplicated)', + template_path: 'stream.yml.hbs', + vars: [ + { + name: 'paths', + type: 'text', + title: 'Paths', + multi: true, + default: ['/var/log/*.log'], + required: false, + show_user: true, + hide_in_deployment_modes: ['default'], + }, + ], + description: 'Collect sample logs on Agentless only', + data_stream: { + title: 'Logs Stream on Agentless', + release: 'ga', + type: 'logs', + package: 'agentless_test_package', + dataset: 'agentless_test_package.logs_stream', + path: 'logs_stream', + elasticsearch: { + 'ingest_pipeline.name': 'default', + }, + ingest_pipeline: 'default', + streams: [ + { + input: 'logfile', + title: 'Sample logs on Agentless', + template_path: 'stream.yml.hbs', + vars: [ + { + name: 'paths', + type: 'text', + title: 'Paths', + multi: true, + default: ['/var/log/*.log'], + required: false, + show_user: true, + hide_in_deployment_modes: ['default'], + }, + ], + description: 'Collect sample logs on Agentless only', + }, + ], + }, + }, ]; const mockUpdatePackagePolicyInput = jest.fn().mockImplementation((val: any) => { return undefined; @@ -471,6 +572,55 @@ describe('PackagePolicyInputPanel', () => { ], }, }, + // Duplicated items to make sure they show up in the UI as we now only show multiple switches/descriptions when theres more than one input + { + input: 'logfile', + title: 'Sample logs (duplicated)', + template_path: 'stream.yml.hbs', + vars: [ + { + name: 'paths', + type: 'text', + title: 'Paths', + multi: false, + default: ['/var/log/*.log'], + required: false, + show_user: true, + }, + ], + description: 'Collect sample logs (duplicated)', + data_stream: { + title: 'Default data stream', + release: 'ga', + type: 'logs', + package: 'agentless_test_package', + dataset: 'agentless_test_package.default_data_stream', + path: 'default_data_stream', + elasticsearch: { + 'ingest_pipeline.name': 'default', + }, + ingest_pipeline: 'default', + streams: [ + { + input: 'logfile', + title: 'Sample logs', + template_path: 'stream.yml.hbs', + vars: [ + { + name: 'paths', + type: 'text', + title: 'Paths', + multi: false, + default: ['/var/log/*.log'], + required: false, + show_user: true, + }, + ], + description: 'Collect sample log - hidden in agentless', + }, + ], + }, + }, ]; const packageInfo = { ...mockPackageInfo, @@ -516,7 +666,7 @@ describe('PackagePolicyInputPanel', () => { ).toBeInTheDocument(); }); await waitFor(async () => { - expect(await renderResult.findByText('Sample logs')).toBeInTheDocument(); + expect(await renderResult.queryByText('Sample logs')).toBeInTheDocument(); }); await waitFor(async () => { expect(await renderResult.findByText('Collect sample logs')).toBeInTheDocument(); From f505545b21b227a8b6e6ecf55c9d6cfb081d9eba Mon Sep 17 00:00:00 2001 From: Supplementing Date: Tue, 29 Apr 2025 08:48:48 -0600 Subject: [PATCH 5/5] updated to use a const for check, added test case for single toggle render --- .../components/package_policy_input_panel.test.tsx | 12 ++++++++++++ .../steps/components/package_policy_input_panel.tsx | 4 ++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.test.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.test.tsx index 4b5a9cace1791..2527a9b793e54 100644 --- a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.test.tsx +++ b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.test.tsx @@ -525,6 +525,18 @@ describe('PackagePolicyInputPanel', () => { ).toBeInTheDocument(); }); }); + it('should not render multiple toggles when theres only one stream', async () => { + // Only send one input and then it should not be rendered, only the top level switch should render + render(mockPackageInfo, mockPackageInputStreams.slice(0, 1)); + await waitFor(async () => { + expect( + await renderResult.findByTestId('PackagePolicy.InputStreamConfig.Switch') + ).toBeInTheDocument(); + expect( + await renderResult.queryByText('Sample logs hidden in agentless') + ).not.toBeInTheDocument(); + }); + }); it('should render inputs when hide_in_deployment_modes is not present', async () => { const packageInputStreams: RegistryStreamWithDataStream[] = [ diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx index 874f3bedbb0f2..ca91397547048 100644 --- a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx +++ b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_panel.tsx @@ -95,7 +95,7 @@ export const PackagePolicyInputPanel: React.FunctionComponent<{ }) => { const defaultDataStreamId = useDataStreamId(); const { isAgentlessEnabled } = useAgentless(); - + const showTopLevelDescription = packagePolicyInput.streams.length === 1; // Showing streams toggle state const [isShowingStreams, setIsShowingStreams] = useState(() => shouldShowStreamsByDefault( @@ -199,7 +199,7 @@ export const PackagePolicyInputPanel: React.FunctionComponent<{ /> {/* show the description under the top level toggle if theres only one stream */} - {packagePolicyInput.streams.length === 1 && ( + {showTopLevelDescription && ( {String(inputStreams[0].packageInputStream.description)}