[Security Solution][Responder Console] Input area has arrow submit button (#136233)

x-pack/plugins/security_solution/public/management/components/console/components/command_input/command_input.test.tsx

@@ -10,7 +10,7 @@ import type { ConsoleTestSetup } from '../../mocks';
 import { getConsoleTestSetup } from '../../mocks';
 import type { ConsoleProps } from '../../types';
 import { INPUT_DEFAULT_PLACEHOLDER_TEXT } from '../console_state/state_update_handlers/handle_input_area_state';
-import { waitFor } from '@testing-library/react';
+import { act, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 describe('When entering data into the Console input', () => {
@@ -92,6 +92,30 @@ describe('When entering data into the Console input', () => {
     expect(getFooterText()).toEqual('Unknown command abc');
   });
 
+  it('should show the arrow button as not disabled if input has text entered', () => {
+    render();
+    enterCommand('cm ', { inputOnly: true });
+
+    const arrowButton = renderResult.getByTestId('test-inputTextSubmitButton');
+    expect(arrowButton).not.toBeDisabled();
+  });
+
+  it('should show the arrow button as disabled if input area is blank', () => {
+    render();
+
+    const arrowButton = renderResult.getByTestId('test-inputTextSubmitButton');
+    expect(arrowButton).toBeDisabled();
+  });
+
+  it('should execute correct command if arrow button is clicked', () => {
+    render();
+    enterCommand('isolate', { inputOnly: true });
+    act(() => {
+      renderResult.getByTestId('test-inputTextSubmitButton').click();
+    });
+    expect(renderResult.getByTestId('test-userCommandText').textContent).toEqual('isolate');
+  });
+
   // FIXME:PT uncomment once task OLM task #4384 is implemented
   it.skip('should display the input history popover when UP key is pressed', async () => {
     render();

x-pack/plugins/security_solution/public/management/components/console/components/command_input/command_input.tsx

@@ -8,7 +8,7 @@
 import type { MouseEventHandler } from 'react';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { CommonProps } from '@elastic/eui';
-import { EuiFlexGroup, EuiFlexItem, useResizeObserver } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, useResizeObserver, EuiButtonIcon } from '@elastic/eui';
 import styled from 'styled-components';
 import classNames from 'classnames';
 import type { ConsoleDataState } from '../console_state/types';
@@ -110,6 +110,25 @@ export const CommandInput = memo<CommandInputProps>(({ prompt = '', focusRef, ..
     });
   }, [isKeyInputBeingCaptured]);
 
+  const disableArrowButton = useMemo(
+    () => textEntered.length === 0 && rightOfCursor.text.length === 0,
+    [rightOfCursor.text.length, textEntered.length]
+  );
+
+  const handleSubmitButton = useCallback<MouseEventHandler>(
+    (ev) => {
+      setCommandToExecute(textEntered + rightOfCursor.text);
+      dispatch({
+        type: 'updateInputTextEnteredState',
+        payload: {
+          textEntered: '',
+          rightOfCursor: undefined,
+        },
+      });
+    },
+    [dispatch, textEntered, rightOfCursor.text]
+  );
+
   const handleKeyCaptureOnStateChange = useCallback<NonNullable<KeyCaptureProps['onStateChange']>>(
     (isCapturing) => {
       setIsKeyInputBeingCaptured(isCapturing);
@@ -285,6 +304,17 @@ export const CommandInput = memo<CommandInputProps>(({ prompt = '', focusRef, ..
             </EuiFlexGroup>
             <InputPlaceholder />
           </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonIcon
+              data-test-subj={getTestId('inputTextSubmitButton')}
+              aria-label="submit-command"
+              iconType="playFilled"
+              display="empty"
+              color="primary"
+              isDisabled={disableArrowButton}
+              onClick={handleSubmitButton}
+            />
+          </EuiFlexItem>
         </EuiFlexGroup>
 
         <KeyCapture