add a new flag in timefilter service to disable time filter

changelogs/fragments/8981.yml

@@ -0,0 +1,2 @@
+feat:
+- Hide time filter when query assistant input is expanded ([#8981](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8981))

src/plugins/data/public/query/timefilter/timefilter.ts

@@ -51,6 +51,8 @@
   private autoRefreshFetch$ = new Subject();
   private fetch$ = new Subject();
 
+  private disabled$ = new BehaviorSubject(false);
+
   private _time: TimeRange;
   private _refreshInterval!: RefreshInterval;
   private _history: TimeHistoryContract;
@@ -173,6 +175,18 @@
     }
   };
 
+  public setDisabled(val: boolean) {
+    this.disabled$.next(val);
+  }
+
+  public getDisabled$() {
+    return this.disabled$;
+  }
+
+  public isDisabled() {
+    return this.disabled$.value;
+  }
+
   public createFilter = (indexPattern: IndexPattern, timeRange?: TimeRange) => {
     return getTime(indexPattern, timeRange ? timeRange : this._time, {
       forceNow: this.getForceNow(),

src/plugins/data/public/query/timefilter/timefilter_service.mock.ts

@@ -29,7 +29,7 @@
  */
 
 import { TimefilterService, TimeHistoryContract, TimefilterContract } from '.';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 export type TimefilterServiceClientContract = PublicMethodsOf<TimefilterService>;
 
@@ -56,6 +56,9 @@ const createSetupContractMock = () => {
     createFilter: jest.fn(),
     getRefreshIntervalDefaults: jest.fn(),
     getTimeDefaults: jest.fn(),
+    getDisabled$: jest.fn(() => new BehaviorSubject<boolean>(false)),
+    setDisabled: jest.fn(),
+    isDisabled: jest.fn(),
   };
 
   const historyMock: jest.Mocked<TimeHistoryContract> = {

src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx

@@ -15,6 +15,7 @@ import {
 import classNames from 'classnames';
 import React, { useState } from 'react';
 import { createPortal } from 'react-dom';
+import { useObservable } from 'react-use';
 import {
   DatasetSelector,
   DatasetSelectorAppearance,
@@ -74,6 +75,8 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
   const opensearchDashboards = useOpenSearchDashboards<IDataPluginServices>();
   const { uiSettings, storage, appName, data } = opensearchDashboards.services;
 
+  const timeFilterDisabled = useObservable(data.query.timefilter.timefilter.getDisabled$());
+
   const queryLanguage = props.query && props.query.language;
   const persistedLog: PersistedLog | undefined = React.useMemo(
     () =>
@@ -309,6 +312,7 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
     return (
       <EuiFlexItem className={wrapperClasses}>
         <EuiSuperDatePicker
+          isDisabled={timeFilterDisabled}
           start={props.dateRangeFrom}
           end={props.dateRangeTo}
           isPaused={props.isRefreshPaused}

src/plugins/query_enhancements/public/query_assist/components/query_assist_bar.tsx

@@ -28,6 +28,7 @@ interface QueryAssistInputProps {
 export const QueryAssistBar: React.FC<QueryAssistInputProps> = (props) => {
   const { services } = useOpenSearchDashboards<IDataPluginServices>();
   const queryString = services.data.query.queryString;
+  const timefilter = services.data.query.timefilter;
   const inputRef = useRef<HTMLInputElement>(null);
   const storage = getStorage();
   const persistedLog: PersistedLog = useMemo(
@@ -52,6 +53,17 @@ export const QueryAssistBar: React.FC<QueryAssistInputProps> = (props) => {
     return () => subscription.unsubscribe();
   }, [queryString]);
 
+  useEffect(() => {
+    // Disable time filter when the assistant query input is expanded
+    const disabled = !(props.dependencies.isCollapsed || isQueryAssistCollapsed);
+    timefilter.timefilter.setDisabled(disabled);
+  }, [props.dependencies.isCollapsed, isQueryAssistCollapsed, timefilter]);
+
+  useEffect(() => {
+    // reset the time filter state to false when query assist bar unmounted
+    return () => timefilter.timefilter.setDisabled(false);
+  }, [timefilter]);
+
   const onSubmit = async (e: SyntheticEvent) => {
     e.preventDefault();
     if (!inputRef.current?.value) {

src/plugins/query_enhancements/public/search/ppl_search_interceptor.ts

@@ -76,7 +76,14 @@ export class PPLSearchInterceptor extends SearchInterceptor {
   private buildQuery() {
     const query: Query = this.queryService.queryString.getQuery();
     const dataset = query.dataset;
+    // If the dataset has no time field, so time filter is not supported, time filter should not be included in the query
     if (!dataset || !dataset.timeFieldName) return query;
+
+    // If the time filter be disabled explicitly, time filter should not be included in the query
+    if (this.queryService.timefilter.timefilter.isDisabled()) {
+      return query;
+    }
+
     const [baseQuery, ...afterPipeParts] = query.query.split('|');
     const afterPipe = afterPipeParts.length > 0 ? ` | ${afterPipeParts.join('|').trim()}` : '';
     const timeFilter = this.getTimeFilter(dataset.timeFieldName);