top nav ts arg support (#56984)

timefilter initial state

Co-authored-by: Elastic Machine <[email protected]>

src/plugins/data/public/ui/index.ts

@@ -21,7 +21,7 @@ export { SuggestionsComponent } from './typeahead/suggestions_component';
 export { IndexPatternSelect } from './index_pattern_select';
 export { FilterBar } from './filter_bar';
 export { QueryStringInput } from './query_string_input/query_string_input';
-export { SearchBar, SearchBarProps } from './search_bar';
+export { SearchBar, SearchBarProps, StatefulSearchBarProps } from './search_bar';
 
 // @internal
 export {

src/plugins/data/public/ui/search_bar/create_search_bar.tsx

@@ -132,6 +132,10 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
       filterManager: data.query.filterManager,
     });
     const { timeRange, refreshInterval } = useTimefilter({
+      dateRangeFrom: props.dateRangeFrom,
+      dateRangeTo: props.dateRangeTo,
+      refreshInterval: props.refreshInterval,
+      isRefreshPaused: props.isRefreshPaused,
       timefilter: data.query.timefilter.timefilter,
     });
 

src/plugins/data/public/ui/search_bar/index.tsx

@@ -18,3 +18,4 @@
  */
 
 export { SearchBar, SearchBarProps } from './search_bar';
+export { StatefulSearchBarProps } from './create_search_bar';

src/plugins/data/public/ui/search_bar/lib/use_timefilter.ts

@@ -19,15 +19,27 @@
 
 import { useState, useEffect } from 'react';
 import { Subscription } from 'rxjs';
-import { DataPublicPluginStart } from 'src/plugins/data/public';
+import { DataPublicPluginStart, TimeRange, RefreshInterval } from 'src/plugins/data/public';
 
 interface UseTimefilterProps {
+  dateRangeFrom?: string;
+  dateRangeTo?: string;
+  refreshInterval?: number;
+  isRefreshPaused?: boolean;
   timefilter: DataPublicPluginStart['query']['timefilter']['timefilter'];
 }
 
 export const useTimefilter = (props: UseTimefilterProps) => {
-  const [timeRange, setTimerange] = useState(props.timefilter.getTime());
-  const [refreshInterval, setRefreshInterval] = useState(props.timefilter.getRefreshInterval());
+  const initialTimeRange: TimeRange = {
+    from: props.dateRangeFrom || props.timefilter.getTime().from,
+    to: props.dateRangeTo || props.timefilter.getTime().to,
+  };
+  const initialRefreshInterval: RefreshInterval = {
+    value: props.refreshInterval || props.timefilter.getRefreshInterval().value,
+    pause: props.isRefreshPaused || props.timefilter.getRefreshInterval().pause,
+  };
+  const [timeRange, setTimerange] = useState(initialTimeRange);
+  const [refreshInterval, setRefreshInterval] = useState(initialRefreshInterval);
 
   useEffect(() => {
     const subscriptions = new Subscription();

src/plugins/data/public/ui/search_bar/search_bar.tsx

@@ -47,13 +47,8 @@ interface SearchBarInjectedDeps {
   timeHistory: TimeHistoryContract;
   // Filter bar
   onFiltersUpdated?: (filters: esFilters.Filter[]) => void;
-  // Date picker
-  dateRangeFrom?: string;
-  dateRangeTo?: string;
   // Autorefresh
   onRefreshChange?: (options: { isPaused: boolean; refreshInterval: number }) => void;
-  isRefreshPaused?: boolean;
-  refreshInterval?: number;
 }
 
 export interface SearchBarOwnProps {
@@ -69,6 +64,11 @@ export interface SearchBarOwnProps {
   showDatePicker?: boolean;
   showAutoRefreshOnly?: boolean;
   filters?: esFilters.Filter[];
+  // Date picker
+  isRefreshPaused?: boolean;
+  refreshInterval?: number;
+  dateRangeFrom?: string;
+  dateRangeTo?: string;
   // Query bar - should be in SearchBarInjectedDeps
   query?: Query;
   // Show when user has privileges to save

src/plugins/navigation/public/top_nav_menu/top_nav_menu.test.tsx

@@ -22,13 +22,6 @@ import { TopNavMenu } from './top_nav_menu';
 import { TopNavMenuData } from './top_nav_menu_data';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 
-const mockTimeHistory = {
-  add: () => {},
-  get: () => {
-    return [];
-  },
-};
-
 const dataShim = {
   ui: {
     SearchBar: () => <div className="searchBar" />,
@@ -76,12 +69,7 @@ describe('TopNavMenu', () => {
 
   it('Should render search bar', () => {
     const component = shallowWithIntl(
-      <TopNavMenu
-        appName={'test'}
-        showSearchBar={true}
-        timeHistory={mockTimeHistory}
-        data={dataShim as any}
-      />
+      <TopNavMenu appName={'test'} showSearchBar={true} data={dataShim as any} />
     );
 
     expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(0);

src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx

@@ -24,10 +24,9 @@ import { I18nProvider } from '@kbn/i18n/react';
 
 import { TopNavMenuData } from './top_nav_menu_data';
 import { TopNavMenuItem } from './top_nav_menu_item';
-import { SearchBarProps, DataPublicPluginStart } from '../../../data/public';
+import { StatefulSearchBarProps, DataPublicPluginStart } from '../../../data/public';
 
-export type TopNavMenuProps = Partial<SearchBarProps> & {
-  appName: string;
+export type TopNavMenuProps = StatefulSearchBarProps & {
   config?: TopNavMenuData[];
   showSearchBar?: boolean;
   data?: DataPublicPluginStart;