[ES|QL Editor] Add hideRunQueryButton prop to control run query but…

…ton visibility
elastic · Jan 27, 2025 · 7454fd8 · 7454fd8
1 parent 10505bd
commit 7454fd8
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/src/platform/packages/private/kbn-esql-editor/src/esql_editor.test.tsx b/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);
+  });
 });
diff --git a/src/platform/packages/private/kbn-esql-editor/src/esql_editor.tsx b/src/platform/packages/private/kbn-esql-editor/src/esql_editor.tsx
@@ -89,6 +89,7 @@ export const ESQLEditor = memo(function ESQLEditor({
   isLoading,
   isDisabled,
   hideRunQueryText,
+  hideRunQueryButton,
   editorIsInline,
   disableSubmitAction,
   dataTestSubj,
@@ -679,7 +680,7 @@ export const ESQLEditor = memo(function ESQLEditor({
 
   const editorPanel = (
     <>
-      {Boolean(editorIsInline) && (
+      {Boolean(editorIsInline) && !hideRunQueryButton && (
         <EuiFlexGroup
           gutterSize="none"
           responsive={false}

diff --git a/src/platform/packages/private/kbn-esql-editor/src/types.ts b/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