diff --git a/x-pack/plugins/security_solution/public/management/components/console/components/command_execution_output.tsx b/x-pack/plugins/security_solution/public/management/components/console/components/command_execution_output.tsx index b72e601e2a8b..4ebf075004b8 100644 --- a/x-pack/plugins/security_solution/public/management/components/console/components/command_execution_output.tsx +++ b/x-pack/plugins/security_solution/public/management/components/console/components/command_execution_output.tsx @@ -28,7 +28,7 @@ export interface CommandExecutionOutputProps { item: CommandHistoryItem; } export const CommandExecutionOutput = memo( - ({ item: { command, state, id, enteredAt } }) => { + ({ item: { command, state, id, enteredAt, isValid } }) => { const dispatch = useConsoleStateDispatch(); const RenderComponent = command.commandDefinition.RenderComponent; const [isLongRunningCommand, setIsLongRunningCommand] = useState(false); @@ -92,7 +92,7 @@ export const CommandExecutionOutput = memo( return (
- +
{/* UX desire for 12px (current theme): achieved with EuiSpace sizes - s (8px) + xs (4px) */} diff --git a/x-pack/plugins/security_solution/public/management/components/console/components/console_state/state_update_handlers/handle_execute_command.tsx b/x-pack/plugins/security_solution/public/management/components/console/components/console_state/state_update_handlers/handle_execute_command.tsx index c569cb104cbd..92248513446e 100644 --- a/x-pack/plugins/security_solution/public/management/components/console/components/console_state/state_update_handlers/handle_execute_command.tsx +++ b/x-pack/plugins/security_solution/public/management/components/console/components/console_state/state_update_handlers/handle_execute_command.tsx @@ -115,10 +115,12 @@ const cloneCommandDefinitionWithNewRenderComponent = ( const createCommandHistoryEntry = ( command: CommandHistoryItem['command'], - state: CommandHistoryItem['state'] = createCommandExecutionState() + state: CommandHistoryItem['state'] = createCommandExecutionState(), + isValid: CommandHistoryItem['isValid'] = true ): CommandHistoryItem => { return { id: uuidV4(), + isValid, enteredAt: new Date().toISOString(), command, state, @@ -143,14 +145,18 @@ export const handleExecuteCommand: ConsoleStoreReducer< if (!commandDefinition) { return updateStateWithNewCommandHistoryItem( state, - createCommandHistoryEntry({ - input: parsedInput.input, - args: parsedInput, - commandDefinition: { - ...UnknownCommandDefinition, - RenderComponent: UnknownCommand, + createCommandHistoryEntry( + { + input: parsedInput.input, + args: parsedInput, + commandDefinition: { + ...UnknownCommandDefinition, + RenderComponent: UnknownCommand, + }, }, - }) + undefined, + false + ) ); } @@ -185,7 +191,9 @@ export const handleExecuteCommand: ConsoleStoreReducer< return updateStateWithNewCommandHistoryItem( state, createCommandHistoryEntry( - cloneCommandDefinitionWithNewRenderComponent(command, HelpCommandArgument) + cloneCommandDefinitionWithNewRenderComponent(command, HelpCommandArgument), + undefined, + false ) ); } @@ -203,7 +211,8 @@ export const handleExecuteCommand: ConsoleStoreReducer< defaultMessage: 'Command does not support any arguments', } ), - }) + }), + false ) ); } @@ -238,7 +247,8 @@ export const handleExecuteCommand: ConsoleStoreReducer< /> ), - }) + }), + false ) ); } @@ -265,7 +275,8 @@ export const handleExecuteCommand: ConsoleStoreReducer< )} ), - }) + }), + false ) ); } @@ -280,7 +291,8 @@ export const handleExecuteCommand: ConsoleStoreReducer< cloneCommandDefinitionWithNewRenderComponent(command, BadArgument), createCommandExecutionState({ errorMessage: exclusiveOrErrorMessage, - }) + }), + false ) ); } @@ -309,7 +321,8 @@ export const handleExecuteCommand: ConsoleStoreReducer< )} ), - }) + }), + false ) ); } @@ -332,7 +345,8 @@ export const handleExecuteCommand: ConsoleStoreReducer< )} ), - }) + }), + false ) ); } @@ -357,7 +371,8 @@ export const handleExecuteCommand: ConsoleStoreReducer< )} ), - }) + }), + false ) ); } @@ -381,7 +396,8 @@ export const handleExecuteCommand: ConsoleStoreReducer< })} ), - }) + }), + false ) ); } else if (exclusiveOrArgs.length > 0) { @@ -391,7 +407,8 @@ export const handleExecuteCommand: ConsoleStoreReducer< cloneCommandDefinitionWithNewRenderComponent(command, BadArgument), createCommandExecutionState({ errorMessage: exclusiveOrErrorMessage, - }) + }), + false ) ); } else if (commandDefinition.mustHaveArgs) { @@ -407,7 +424,8 @@ export const handleExecuteCommand: ConsoleStoreReducer< })} ), - }) + }), + false ) ); } @@ -423,7 +441,8 @@ export const handleExecuteCommand: ConsoleStoreReducer< cloneCommandDefinitionWithNewRenderComponent(command, BadArgument), createCommandExecutionState({ errorMessage: validationResult, - }) + }), + false ) ); } diff --git a/x-pack/plugins/security_solution/public/management/components/console/components/console_state/types.ts b/x-pack/plugins/security_solution/public/management/components/console/components/console_state/types.ts index 04acd88057f9..00681edf6248 100644 --- a/x-pack/plugins/security_solution/public/management/components/console/components/console_state/types.ts +++ b/x-pack/plugins/security_solution/public/management/components/console/components/console_state/types.ts @@ -79,6 +79,7 @@ export interface InputHistoryItem { export interface CommandHistoryItem { id: string; enteredAt: string; + isValid: boolean; command: Command; state: CommandExecutionState; } diff --git a/x-pack/plugins/security_solution/public/management/components/console/components/user_command_input.tsx b/x-pack/plugins/security_solution/public/management/components/console/components/user_command_input.tsx index 7a87a048d2b9..f5139d79fc8b 100644 --- a/x-pack/plugins/security_solution/public/management/components/console/components/user_command_input.tsx +++ b/x-pack/plugins/security_solution/public/management/components/console/components/user_command_input.tsx @@ -5,8 +5,8 @@ * 2.0. */ -import React, { memo } from 'react'; -import { EuiCode } from '@elastic/eui'; +import React, { memo, useMemo } from 'react'; +import { EuiCode, EuiTextColor } from '@elastic/eui'; import styled from 'styled-components'; import { useTestIdGenerator } from '../../../hooks/use_test_id_generator'; import { useDataTestSubj } from '../hooks/state_selectors/use_data_test_subj'; @@ -17,18 +17,19 @@ const StyledEuiCode = styled(EuiCode)` export interface UserCommandInputProps { input: string; + isValid?: boolean; } -export const UserCommandInput = memo(({ input }) => { +export const UserCommandInput = memo(({ input, isValid = true }) => { const getTestId = useTestIdGenerator(useDataTestSubj()); + const displayInputValue = useMemo(() => { + return isValid ? input : {input}; + }, [input, isValid]); + return ( - - {input} + + {displayInputValue} ); });