github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[ES|QL Editor] Add hideRunQueryButton prop to control run query button visibility (#208446)

Browse source 
## Summary

Working on "SIEM Migrations" we needed to be able to have a bigger
height for the ES|QL editor. To achive that we could use
`editorIsInline` prop which extends the height of the editor, though it
would expose "run query" button. The "run query" button does not fit the
the UI of the "SIEM Migrations" feature, so we added the new prop
`hideRunQueryButton` to be able to hide the "run query" button. More
details in
[slack](https://elastic.slack.com/archives/C06RG9MTZMJ/p1737996842482479).

### Screenshot of the inlined ES|QL editor within "SIEM Migrations"
feature

<img width="1281" alt="Screenshot 2025-01-27 at 21 31 24"
src="https://github.com/user-attachments/assets/4b6f1917-c7f0-4a73-9e3b-912257d6d825"
/>
This commit is contained in:
Ievgen Sorokopud 2025-01-28 09:27:49 +01:00 • committed by GitHub
parent 2d3fc93e74
commit 34092ec953
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 14 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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

@ -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