[8.x] [ES|QL Editor] Add `hideRunQueryButton` prop to control run query button visibility (#208446) (#208487)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ES|QL Editor] Add `hideRunQueryButton` prop to control run
query button visibility
(#208446)](https://github.com/elastic/kibana/pull/208446)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Ievgen
Sorokopud","email":"ievgen.sorokopud@elastic.co"},"sourceCommit":{"committedDate":"2025-01-28T08:27:49Z","message":"[ES|QL
Editor] Add `hideRunQueryButton` prop to control run query button
visibility (#208446)\n\n## Summary\r\n\r\nWorking on \"SIEM Migrations\"
we needed to be able to have a bigger\r\nheight for the ES|QL editor. To
achive that we could use\r\n`editorIsInline` prop which extends the
height of the editor, though it\r\nwould expose \"run query\" button.
The \"run query\" button does not fit the\r\nthe UI of the \"SIEM
Migrations\" feature, so we added the new prop\r\n`hideRunQueryButton`
to be able to hide the \"run query\" button. More\r\ndetails
in\r\n[slack](https://elastic.slack.com/archives/C06RG9MTZMJ/p1737996842482479).\r\n\r\n###
Screenshot of the inlined ES|QL editor within \"SIEM
Migrations\"\r\nfeature\r\n\r\n<img width=\"1281\" alt=\"Screenshot
2025-01-27 at 21 31
24\"\r\nsrc=\"https://github.com/user-attachments/assets/4b6f1917-c7f0-4a73-9e3b-912257d6d825\"\r\n/>","sha":"34092ec953b95341c7c8a2f6478b99288bbdb405","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor","Feature:ES|QL","Team:ESQL"],"title":"[ES|QL
Editor] Add `hideRunQueryButton` prop to control run query button
visibility","number":208446,"url":"https://github.com/elastic/kibana/pull/208446","mergeCommit":{"message":"[ES|QL
Editor] Add `hideRunQueryButton` prop to control run query button
visibility (#208446)\n\n## Summary\r\n\r\nWorking on \"SIEM Migrations\"
we needed to be able to have a bigger\r\nheight for the ES|QL editor. To
achive that we could use\r\n`editorIsInline` prop which extends the
height of the editor, though it\r\nwould expose \"run query\" button.
The \"run query\" button does not fit the\r\nthe UI of the \"SIEM
Migrations\" feature, so we added the new prop\r\n`hideRunQueryButton`
to be able to hide the \"run query\" button. More\r\ndetails
in\r\n[slack](https://elastic.slack.com/archives/C06RG9MTZMJ/p1737996842482479).\r\n\r\n###
Screenshot of the inlined ES|QL editor within \"SIEM
Migrations\"\r\nfeature\r\n\r\n<img width=\"1281\" alt=\"Screenshot
2025-01-27 at 21 31
24\"\r\nsrc=\"https://github.com/user-attachments/assets/4b6f1917-c7f0-4a73-9e3b-912257d6d825\"\r\n/>","sha":"34092ec953b95341c7c8a2f6478b99288bbdb405"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/208446","number":208446,"mergeCommit":{"message":"[ES|QL
Editor] Add `hideRunQueryButton` prop to control run query button
visibility (#208446)\n\n## Summary\r\n\r\nWorking on \"SIEM Migrations\"
we needed to be able to have a bigger\r\nheight for the ES|QL editor. To
achive that we could use\r\n`editorIsInline` prop which extends the
height of the editor, though it\r\nwould expose \"run query\" button.
The \"run query\" button does not fit the\r\nthe UI of the \"SIEM
Migrations\" feature, so we added the new prop\r\n`hideRunQueryButton`
to be able to hide the \"run query\" button. More\r\ndetails
in\r\n[slack](https://elastic.slack.com/archives/C06RG9MTZMJ/p1737996842482479).\r\n\r\n###
Screenshot of the inlined ES|QL editor within \"SIEM
Migrations\"\r\nfeature\r\n\r\n<img width=\"1281\" alt=\"Screenshot
2025-01-27 at 21 31
24\"\r\nsrc=\"https://github.com/user-attachments/assets/4b6f1917-c7f0-4a73-9e3b-912257d6d825\"\r\n/>","sha":"34092ec953b95341c7c8a2f6478b99288bbdb405"}}]}]
BACKPORT-->

Co-authored-by: Ievgen Sorokopud <ievgen.sorokopud@elastic.co>

src/platform/packages/private/kbn-esql-editor/src/esql_editor.test.tsx

@@ -163,4 +163,14 @@ describe('ESQLEditor', () => {
     findTestSubject(component, 'ESQLEditor-run-query-button').simulate('click');
     expect(onTextLangQuerySubmit).toHaveBeenCalled();
   });
+
+  it('should not render the run query button if the hideRunQueryButton prop is set to true and editorIsInline prop is set to true', async () => {
+    const newProps = {
+      ...props,
+      hideRunQueryButton: true,
+      editorIsInline: true,
+    };
+    const component = mount(renderESQLEditorComponent({ ...newProps }));
+    expect(component.find('[data-test-subj="ESQLEditor-run-query-button"]').length).toBe(0);
+  });
 });

src/platform/packages/private/kbn-esql-editor/src/esql_editor.tsx

@@ -96,6 +96,7 @@ export const ESQLEditor = memo(function ESQLEditor({
   isLoading,
   isDisabled,
   hideRunQueryText,
+  hideRunQueryButton,
   editorIsInline,
   disableSubmitAction,
   dataTestSubj,
@@ -687,7 +688,7 @@ export const ESQLEditor = memo(function ESQLEditor({
 
   const editorPanel = (
     <>
-      {Boolean(editorIsInline) && (
+      {Boolean(editorIsInline) && !hideRunQueryButton && (
         <EuiFlexGroup
           gutterSize="none"
           responsive={false}

src/platform/packages/private/kbn-esql-editor/src/types.ts

@@ -46,6 +46,8 @@ export interface ESQLEditorProps {
   dataTestSubj?: string;
   /** Hide the Run query information which appears on the footer*/
   hideRunQueryText?: boolean;
+  /** Hide the Run query button which appears when editor is inlined*/
+  hideRunQueryButton?: boolean;
   /** This is used for applications (such as the inline editing flyout in dashboards)
    * which want to add the editor without being part of the Unified search component
    * It renders a submit query button inside the editor