[Osquery] Add keyboard handling for submitting live query (#123224)

* add keyboard handling for submitting live query

* fix command enter issue

* change user

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Patryk Kopycinski <patryk.kopycinski@elastic.co>

x-pack/plugins/osquery/cypress/integration/superuser/live_query.spec.ts

@@ -23,11 +23,13 @@ describe('Super User - Live Query', () => {
   });
 
   it('should run query and enable ecs mapping', () => {
+    const cmd = Cypress.platform === 'darwin' ? '{meta}{enter}' : '{ctrl}{enter}';
     cy.contains('New live query').click();
     selectAllAgents();
-    inputQuery('select * from uptime;');
-    submitQuery();
-
+    inputQuery('select * from uptime; ');
+    cy.wait(500);
+    // checking submit by clicking cmd+enter
+    inputQuery(cmd);
     checkResults();
     cy.react('EuiDataGridHeaderCellWrapper', {
       props: { id: 'osquery.days.number', index: 1 },

x-pack/plugins/osquery/public/editor/index.tsx

@@ -9,7 +9,7 @@ import React, { useEffect, useState } from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
 import 'brace/theme/tomorrow';
 
-import { EuiCodeEditor } from '../shared_imports';
+import { EuiCodeEditor, EuiCodeEditorProps } from '../shared_imports';
 
 import './osquery_mode.ts';
 
@@ -25,9 +25,14 @@ const EDITOR_PROPS = {
 interface OsqueryEditorProps {
   defaultValue: string;
   onChange: (newValue: string) => void;
+  commands?: EuiCodeEditorProps['commands'];
 }
 
-const OsqueryEditorComponent: React.FC<OsqueryEditorProps> = ({ defaultValue, onChange }) => {
+const OsqueryEditorComponent: React.FC<OsqueryEditorProps> = ({
+  defaultValue,
+  onChange,
+  commands,
+}) => {
   const [editorValue, setEditorValue] = useState(defaultValue ?? '');
 
   useDebounce(() => onChange(editorValue.replaceAll('\n', ' ').replaceAll('  ', ' ')), 500, [
@@ -35,7 +40,6 @@ const OsqueryEditorComponent: React.FC<OsqueryEditorProps> = ({ defaultValue, on
   ]);
 
   useEffect(() => setEditorValue(defaultValue), [defaultValue]);
-
   return (
     <EuiCodeEditor
       value={editorValue}
@@ -47,6 +51,7 @@ const OsqueryEditorComponent: React.FC<OsqueryEditorProps> = ({ defaultValue, on
       editorProps={EDITOR_PROPS}
       height="100px"
       width="100%"
+      commands={commands}
     />
   );
 };

x-pack/plugins/osquery/public/live_queries/form/index.tsx

@@ -235,11 +235,23 @@ const LiveQueryFormComponent: React.FC<LiveQueryFormProps> = ({
     [setFieldValue]
   );
 
+  const commands = useMemo(
+    () => [
+      {
+        name: 'submitOnCmdEnter',
+        bindKey: { win: 'ctrl+enter', mac: 'cmd+enter' },
+        exec: () => submit(),
+      },
+    ],
+    [submit]
+  );
+
   const queryComponentProps = useMemo(
     () => ({
       disabled: queryStatus === 'disabled',
+      commands,
     }),
-    [queryStatus]
+    [queryStatus, commands]
   );
 
   const flyoutFormDefaultValue = useMemo(

x-pack/plugins/osquery/public/live_queries/form/live_query_query_field.tsx

@@ -10,7 +10,7 @@ import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
 import { OsquerySchemaLink } from '../../components/osquery_schema_link';
-import { FieldHook } from '../../shared_imports';
+import { EuiCodeEditorProps, FieldHook } from '../../shared_imports';
 import { OsqueryEditor } from '../../editor';
 import { useKibana } from '../../common/lib/kibana';
 
@@ -21,9 +21,14 @@ const StyledEuiCodeBlock = styled(EuiCodeBlock)`
 interface LiveQueryQueryFieldProps {
   disabled?: boolean;
   field: FieldHook<string>;
+  commands?: EuiCodeEditorProps['commands'];
 }
 
-const LiveQueryQueryFieldComponent: React.FC<LiveQueryQueryFieldProps> = ({ disabled, field }) => {
+const LiveQueryQueryFieldComponent: React.FC<LiveQueryQueryFieldProps> = ({
+  disabled,
+  field,
+  commands,
+}) => {
   const permissions = useKibana().services.application.capabilities.osquery;
   const { value, setValue, errors } = field;
   const error = errors[0]?.message;
@@ -53,7 +58,7 @@ const LiveQueryQueryFieldComponent: React.FC<LiveQueryQueryFieldProps> = ({ disa
           {value}
         </StyledEuiCodeBlock>
       ) : (
-        <OsqueryEditor defaultValue={value} onChange={handleEditorChange} />
+        <OsqueryEditor defaultValue={value} onChange={handleEditorChange} commands={commands} />
       )}
     </EuiFormRow>
   );

x-pack/test/osquery_cypress/runner.ts

@@ -92,8 +92,8 @@ function startOsqueryCypress(context: FtrProviderContext, cypressCommand: string
           // eslint-disable-next-line @typescript-eslint/naming-convention
           CYPRESS_configport: config.get('servers.kibana.port'),
           CYPRESS_ELASTICSEARCH_URL: Url.format(config.get('servers.elasticsearch')),
-          CYPRESS_ELASTICSEARCH_USERNAME: config.get('servers.elasticsearch.username'),
-          CYPRESS_ELASTICSEARCH_PASSWORD: config.get('servers.elasticsearch.password'),
+          CYPRESS_ELASTICSEARCH_USERNAME: config.get('servers.kibana.username'),
+          CYPRESS_ELASTICSEARCH_PASSWORD: config.get('servers.kibana.password'),
           CYPRESS_KIBANA_URL: Url.format({
             protocol: config.get('servers.kibana.protocol'),
             hostname: config.get('servers.kibana.hostname'),