[Security Solution][Detection Engine] hides 'run query' label on ES|Q…

…L rule creation (elastic#167912) ## Summary - hides **Run query ⌘ + Enter** label on ES|QL text editor when create/edit rule - On unified search side, passes property `hideTextBasedRunQueryLabel` to underlying `TextBasedLangEditor` component ### Before <img width="1012" alt="Screenshot 2023-10-03 at 17 16 09" src="https://github.com/elastic/kibana/assets/92328789/8a063167-fd78-4afd-8e2a-0f1168e5a7eb"> ### After <img width="1099" alt="Screenshot 2023-10-03 at 17 16 45" src="https://github.com/elastic/kibana/assets/92328789/59819074-aab3-4367-a398-739f718368d0"> --------- Co-authored-by: Stratoula Kalafateli <[email protected]>
kibanamachine · Oct 6, 2023 · 01fdd67 · 01fdd67
1 parent 447d310
commit 01fdd67
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 0 deletions.
diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx
@@ -731,6 +731,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
                         onErrorClick={onErrorClick}
                         refreshErrors={onTextLangQuerySubmit}
                         detectTimestamp={detectTimestamp}
+                        hideRunQueryText={hideRunQueryText}
                       />
                     )}
                   </div>

diff --git a/src/plugins/unified_search/public/query_string_input/query_bar_top_row.test.tsx b/src/plugins/unified_search/public/query_string_input/query_bar_top_row.test.tsx
@@ -346,6 +346,41 @@ describe('QueryBarTopRowTopRow', () => {
     `);
   });
 
+  it('should render query input bar with hideRunQueryText when configured', () => {
+    const component = mount(
+      wrapQueryBarTopRowInContext({
+        query: sqlQuery,
+        isDirty: false,
+        screenTitle: 'SQL Screen',
+        timeHistory: mockTimeHistory,
+        indexPatterns: [stubIndexPattern],
+        showDatePicker: true,
+        dateRangeFrom: 'now-7d',
+        dateRangeTo: 'now',
+        hideTextBasedRunQueryLabel: true,
+      })
+    );
+
+    expect(component.find(TEXT_BASED_EDITOR).prop('hideRunQueryText')).toBe(true);
+  });
+
+  it('should render query input bar with hideRunQueryText as undefined if not configured', () => {
+    const component = mount(
+      wrapQueryBarTopRowInContext({
+        query: sqlQuery,
+        isDirty: false,
+        screenTitle: 'SQL Screen',
+        timeHistory: mockTimeHistory,
+        indexPatterns: [stubIndexPattern],
+        showDatePicker: true,
+        dateRangeFrom: 'now-7d',
+        dateRangeTo: 'now',
+      })
+    );
+
+    expect(component.find(TEXT_BASED_EDITOR).prop('hideRunQueryText')).toBe(undefined);
+  });
+
   it('Should render custom data view picker', () => {
     const dataViewPickerOverride = <div data-test-subj="dataViewPickerOverride" />;
     const { getByTestId } = render(

diff --git a/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx b/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx
@@ -145,6 +145,7 @@ export interface QueryBarTopRowProps<QT extends Query | AggregateQuery = Query>
   dataViewPickerComponentProps?: DataViewPickerProps;
   textBasedLanguageModeErrors?: Error[];
   textBasedLanguageModeWarning?: string;
+  hideTextBasedRunQueryLabel?: boolean;
   onTextBasedSavedAndExit?: ({ onSave }: OnSaveTextLanguageQueryProps) => void;
   filterBar?: React.ReactNode;
   showDatePickerAsBadge?: boolean;
@@ -664,6 +665,7 @@ export const QueryBarTopRow = React.memo(
               })
             }
             isDisabled={props.isDisabled}
+            hideRunQueryText={props.hideTextBasedRunQueryLabel}
             data-test-subj="unifiedTextLangEditor"
           />
         )

diff --git a/src/plugins/unified_search/public/search_bar/search_bar.tsx b/src/plugins/unified_search/public/search_bar/search_bar.tsx
@@ -105,6 +105,7 @@ export interface SearchBarOwnProps<QT extends AggregateQuery | Query = Query> {
   dataViewPickerComponentProps?: DataViewPickerProps;
   textBasedLanguageModeErrors?: Error[];
   textBasedLanguageModeWarning?: string;
+  hideTextBasedRunQueryLabel?: boolean;
   onTextBasedSavedAndExit?: ({ onSave }: OnSaveTextLanguageQueryProps) => void;
   showSubmitButton?: boolean;
   submitButtonStyle?: QueryBarTopRowProps['submitButtonStyle'];
@@ -599,6 +600,7 @@ class SearchBarUI<QT extends (Query | AggregateQuery) | Query = Query> extends C
           dataViewPickerComponentProps={this.props.dataViewPickerComponentProps}
           textBasedLanguageModeErrors={this.props.textBasedLanguageModeErrors}
           textBasedLanguageModeWarning={this.props.textBasedLanguageModeWarning}
+          hideTextBasedRunQueryLabel={this.props.hideTextBasedRunQueryLabel}
           onTextBasedSavedAndExit={this.props.onTextBasedSavedAndExit}
           showDatePickerAsBadge={this.shouldShowDatePickerAsBadge()}
           filterBar={filterBar}

diff --git a/x-pack/plugins/security_solution/public/common/components/query_bar/index.tsx b/x-pack/plugins/security_solution/public/common/components/query_bar/index.tsx
@@ -167,6 +167,7 @@ export const QueryBar = memo<QueryBarComponentProps>(
         savedQuery={savedQuery}
         displayStyle={displayStyle}
         isDisabled={isDisabled}
+        hideTextBasedRunQueryLabel
       />
     );
   }