[Security Solution][Endpoint] Adjust the colors for entered console commands to the UX mocks (#136580)

* adjust all command execution history entries to set command input `isValid`
* Color the user's command input property to the console output area

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<CommandExecutionOutputProps>(
-  ({ 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<CommandExecutionOutputProps>(
     return (
       <CommandOutputContainer>
         <div>
-          <UserCommandInput input={command.input} />
+          <UserCommandInput input={command.input} isValid={isValid} />
         </div>
         <div>
           {/* UX desire for 12px (current theme): achieved with EuiSpace sizes - s (8px) + xs (4px) */}

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({
+      createCommandHistoryEntry(
-        input: parsedInput.input,
+        {
-        args: parsedInput,
+          input: parsedInput.input,
-        commandDefinition: {
+          args: parsedInput,
-          ...UnknownCommandDefinition,
+          commandDefinition: {
-          RenderComponent: UnknownCommand,
+            ...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<
                 />
               </ConsoleCodeBlock>
             ),
-          })
+          }),
+          false
         )
       );
     }
@@ -265,7 +275,8 @@ export const handleExecuteCommand: ConsoleStoreReducer<
                   )}
                 </ConsoleCodeBlock>
               ),
-            })
+            }),
+            false
           )
         );
       }
@@ -280,7 +291,8 @@ export const handleExecuteCommand: ConsoleStoreReducer<
           cloneCommandDefinitionWithNewRenderComponent(command, BadArgument),
           createCommandExecutionState({
             errorMessage: exclusiveOrErrorMessage,
-          })
+          }),
+          false
         )
       );
     }
@@ -309,7 +321,8 @@ export const handleExecuteCommand: ConsoleStoreReducer<
                   )}
                 </ConsoleCodeBlock>
               ),
-            })
+            }),
+            false
           )
         );
       }
@@ -332,7 +345,8 @@ export const handleExecuteCommand: ConsoleStoreReducer<
                   )}
                 </ConsoleCodeBlock>
               ),
-            })
+            }),
+            false
           )
         );
       }
@@ -357,7 +371,8 @@ export const handleExecuteCommand: ConsoleStoreReducer<
                     )}
                   </ConsoleCodeBlock>
                 ),
-              })
+              }),
+              false
             )
           );
         }
@@ -381,7 +396,8 @@ export const handleExecuteCommand: ConsoleStoreReducer<
               })}
             </ConsoleCodeBlock>
           ),
-        })
+        }),
+        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<
               })}
             </ConsoleCodeBlock>
           ),
-        })
+        }),
+        false
       )
     );
   }
@@ -423,7 +441,8 @@ export const handleExecuteCommand: ConsoleStoreReducer<
           cloneCommandDefinitionWithNewRenderComponent(command, BadArgument),
           createCommandExecutionState({
             errorMessage: validationResult,
-          })
+          }),
+          false
         )
       );
     }

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;
 }

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 React, { memo, useMemo } from 'react';
-import { EuiCode } from '@elastic/eui';
+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<UserCommandInputProps>(({ input }) => {
+export const UserCommandInput = memo<UserCommandInputProps>(({ input, isValid = true }) => {
   const getTestId = useTestIdGenerator(useDataTestSubj());
 
+  const displayInputValue = useMemo(() => {
+    return isValid ? input : <EuiTextColor>{input}</EuiTextColor>;
+  }, [input, isValid]);
+
   return (
-    <StyledEuiCode
+    <StyledEuiCode transparentBackground={true} data-test-subj={getTestId('userCommandText')}>
-      language="shell"
+      {displayInputValue}
-      transparentBackground={true}
-      data-test-subj={getTestId('userCommandText')}
-    >
-      {input}
     </StyledEuiCode>
   );
 });