[Dashboard Agent] Fix preview time picker not updating on chart brush (#262112)

rbrtj · mbondyra · web-flow · commit ffd4e340e6ad · 2026-04-09T11:11:12.000+02:00
## Summary FIxes #262061 Fixes previewing time picker not updating on chart brush via adding `useDefaultBehaviours` prop. This, however, breaks for when we go to Discover and switch to ESQL view: <img width="1081" height="673" alt="Screenshot 2026-04-08 at 22 51 21" src="https://github.com/user-attachments/assets/53c566bf-3609-4241-9935-06ab220db39e" /> I made sure we only show ESQL editor when `showQueryInput: true` --------- Co-authored-by: mbondyra <marta.bondyra@elastic.co>
diff --git a/src/platform/plugins/shared/unified_search/public/query_string_input/query_bar_top_row.test.tsx b/src/platform/plugins/shared/unified_search/public/query_string_input/query_bar_top_row.test.tsx
@@ -594,6 +594,30 @@ describe('QueryBarTopRowTopRow', () => {
     });
   });
 
+  it('Should hide ES|QL UI when query input is disabled', async () => {
+    render(
+      wrapQueryBarTopRowInContext({
+        query: esqlQuery,
+        isDirty: false,
+        screenTitle: 'SQL Screen',
+        timeHistory: mockTimeHistory,
+        indexPatterns: [stubIndexPattern],
+        showQueryInput: false,
+        showDatePicker: true,
+        showQueryMenu: false,
+        dateRangeFrom: 'now-7d',
+        dateRangeTo: 'now',
+      })
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('esql-menu-button')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('unifiedTextLangEditor')).not.toBeInTheDocument();
+      expect(screen.getByTestId('superDatePickerShowDatesButton')).toBeInTheDocument();
+      expect(within(screen.getByTestId('querySubmitButton')).getByText('Refresh')).toBeVisible();
+    });
+  });
+
   it('Should render custom data view picker', async () => {
     const dataViewPickerOverride = <div data-test-subj="dataViewPickerOverride" />;
     const { getByTestId } = render(
diff --git a/src/platform/plugins/shared/unified_search/public/query_string_input/query_bar_top_row.tsx b/src/platform/plugins/shared/unified_search/public/query_string_input/query_bar_top_row.tsx
@@ -343,6 +343,7 @@ export const QueryBarTopRow = React.memo(
     } = kibana.services;
 
     const isQueryLangSelected = props.query && !isOfQueryType(props.query);
+    const shouldRenderESQLUi = Boolean(showQueryInput && isQueryLangSelected);
 
     const backgroundSearchState = useObservable(
       data.search.session.state$.pipe(
@@ -601,7 +602,7 @@ export const QueryBarTopRow = React.memo(
     function shouldShowDatePickerAsBadge(): boolean {
       return (
         (Boolean(props.showDatePickerAsBadge) && !shouldRenderQueryInput()) ||
-        Boolean(isQueryLangSelected && props.query && isOfAggregateQueryType(props.query))
+        Boolean(shouldRenderESQLUi && props.query && isOfAggregateQueryType(props.query))
       );
     }
 
@@ -744,7 +745,7 @@ export const QueryBarTopRow = React.memo(
     }
 
     const getSubmitButtonProps = () => {
-      if (isQueryLangSelected) {
+      if (shouldRenderESQLUi) {
         const label = strings.getSearchButtonLabel();
         return { icon: undefined, text: label, ariaLabel: label, color: 'primary' as const };
       }
@@ -839,7 +840,7 @@ export const QueryBarTopRow = React.memo(
         <EuiFlexItem grow={false}>
           <NoDataPopover storage={storage} showNoDataPopover={props.indicateNoData}>
             <EuiFlexGroup alignItems="center" responsive={false} gutterSize="s">
-              {isQueryLangSelected ? (
+              {shouldRenderESQLUi ? (
                 <>
                   {shouldRenderUpdateButton() ? button : null}
                   {shouldRenderDatePicker() ? renderDatePicker() : null}
@@ -1001,9 +1002,9 @@ export const QueryBarTopRow = React.memo(
       );
     }
 
-    function renderTextLangEditor() {
+    function renderESQLEditor() {
       return (
-        isQueryLangSelected &&
+        shouldRenderESQLUi &&
         props.query &&
         isOfAggregateQueryType(props.query) && (
           <ESQLLangEditor
@@ -1069,7 +1070,7 @@ export const QueryBarTopRow = React.memo(
           dateFormat={uiSettings.get('dateFormat')}
         />
         {!isScreenshotMode &&
-          (isQueryLangSelected ? (
+          (shouldRenderESQLUi ? (
             <EsqlEditorActionsProvider>
               <EuiFlexGroup {...queryBarFlexGroupProps}>
                 {props.dataViewPickerOverride || renderDataViewsPicker()}
@@ -1090,7 +1091,7 @@ export const QueryBarTopRow = React.memo(
                 {renderEsqlMenuPopover()}
               </EuiFlexGroup>
               {!shouldShowDatePickerAsBadge() && props.filterBar}
-              {renderTextLangEditor()}
+              {renderESQLEditor()}
             </EsqlEditorActionsProvider>
           ) : (
             <>
@@ -1102,7 +1103,7 @@ export const QueryBarTopRow = React.memo(
                 {renderDatePickerWithUpdateBtn()}
               </EuiFlexGroup>
               {!shouldShowDatePickerAsBadge() && props.filterBar}
-              {renderTextLangEditor()}
+              {renderESQLEditor()}
             </>
           ))}
       </FilterBarContextProvider>
diff --git a/x-pack/platform/plugins/shared/dashboard_agent/public/attachment_types/canvas_integration/dashboard_canvas_content.tsx b/x-pack/platform/plugins/shared/dashboard_agent/public/attachment_types/canvas_integration/dashboard_canvas_content.tsx
@@ -154,6 +154,7 @@ export const DashboardCanvasContent = ({
           showQueryMenu={false}
           query={undefined}
           displayStyle="inPage"
+          useDefaultBehaviors={true}
           disableQueryLanguageSwitcher
           isDisabled={!dashboardApi}
           dateRangeFrom={timeRange.from}
