diff --git a/x-pack/plugins/security_solution/public/management/components/console/components/builtin_commands/help_command_argument.tsx b/x-pack/plugins/security_solution/public/management/components/console/components/builtin_commands/help_command_argument.tsx index 1c74ee178bfcc..17cdd39e7177e 100644 --- a/x-pack/plugins/security_solution/public/management/components/console/components/builtin_commands/help_command_argument.tsx +++ b/x-pack/plugins/security_solution/public/management/components/console/components/builtin_commands/help_command_argument.tsx @@ -15,7 +15,9 @@ import type { CommandExecutionComponentProps } from '../../types'; /** * Builtin component that handles the output of command's `--help` argument */ -export const HelpCommandArgument = memo((props) => { +export const HelpCommandArgument = memo< + CommandExecutionComponentProps<{}, { errorMessage?: string }> +>((props) => { const CustomCommandHelp = props.command.commandDefinition.HelpComponent; useEffect(() => { @@ -37,7 +39,10 @@ export const HelpCommandArgument = memo((props) } )} > - + ); }); diff --git a/x-pack/plugins/security_solution/public/management/components/console/components/command_usage.tsx b/x-pack/plugins/security_solution/public/management/components/console/components/command_usage.tsx index a79cc3cd7ad54..eae2a34b86143 100644 --- a/x-pack/plugins/security_solution/public/management/components/console/components/command_usage.tsx +++ b/x-pack/plugins/security_solution/public/management/components/console/components/command_usage.tsx @@ -5,14 +5,16 @@ * 2.0. */ -import React, { memo, useMemo } from 'react'; +import React, { memo, useCallback, useMemo } from 'react'; import { EuiDescriptionList, EuiPanel, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n-react'; import { ConsoleCodeBlock } from './console_code_block'; import { getArgumentsForCommand } from '../service/parsed_command_input'; import type { CommandDefinition } from '../types'; import { useTestIdGenerator } from '../../../hooks/use_test_id_generator'; import { useDataTestSubj } from '../hooks/state_selectors/use_data_test_subj'; +import { UnsupportedMessageCallout } from './unsupported_message_callout'; const additionalProps = { className: 'euiTruncateText', @@ -80,9 +82,10 @@ CommandInputUsage.displayName = 'CommandInputUsage'; export interface CommandUsageProps { commandDef: CommandDefinition; + errorMessage?: string; } -export const CommandUsage = memo(({ commandDef }) => { +export const CommandUsage = memo(({ commandDef, errorMessage }) => { const getTestId = useTestIdGenerator(useDataTestSubj()); const hasArgs = useMemo(() => Object.keys(commandDef.args ?? []).length > 0, [commandDef.args]); @@ -156,8 +159,31 @@ export const CommandUsage = memo(({ commandDef }) => { ); }; + const renderErrorMessage = useCallback(() => { + if (!errorMessage) { + return null; + } + return ( + + + + } + data-test-subj={getTestId('validationError')} + > +
{errorMessage}
+ +
+ ); + }, [errorMessage, getTestId]); + return ( + {renderErrorMessage()}