[TSVB] Fix pinned filters not showing in TSVB (#109223)

Closes: #17025

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/vis_type_timeseries/public/application/components/vis_editor.tsx

@@ -12,9 +12,8 @@ import { share } from 'rxjs/operators';
 import { isEqual, isEmpty, debounce } from 'lodash';
 import { EventEmitter } from 'events';
 import type { IUiSettingsClient } from 'kibana/public';
-import {
+import type {
   Vis,
-  PersistedState,
   VisualizeEmbeddableContract,
 } from '../../../../../plugins/visualizations/public';
 import { KibanaContextProvider } from '../../../../../plugins/kibana_react/public';
@@ -31,8 +30,9 @@ import { TIME_RANGE_DATA_MODES, TIME_RANGE_MODE_KEY } from '../../../common/enum
 import { VisPicker } from './vis_picker';
 import { fetchFields, VisFields } from '../lib/fetch_fields';
 import { getDataStart, getCoreStart } from '../../services';
-import { TimeseriesVisParams } from '../../types';
+import type { TimeseriesVisParams } from '../../types';
 import { UseIndexPatternModeCallout } from './use_index_patter_mode_callout';
+import type { EditorRenderProps } from '../../../../visualize/public';
 
 const VIS_STATE_DEBOUNCE_DELAY = 200;
 const APP_NAME = 'VisEditor';
@@ -42,7 +42,9 @@ export interface TimeseriesEditorProps {
   embeddableHandler: VisualizeEmbeddableContract;
   eventEmitter: EventEmitter;
   timeRange: TimeRange;
-  uiState: PersistedState;
+  filters: EditorRenderProps['filters'];
+  query: EditorRenderProps['query'];
+  uiState: EditorRenderProps['uiState'];
   vis: Vis<TimeseriesVisParams>;
 }
 
@@ -189,6 +191,8 @@ export class VisEditor extends Component<TimeseriesEditorProps, TimeseriesEditor
             eventEmitter={this.props.eventEmitter}
             vis={this.props.vis}
             timeRange={this.props.timeRange}
+            filters={this.props.filters}
+            query={this.props.query}
             uiState={this.props.uiState}
             onCommit={this.handleCommit}
             onToggleAutoApply={this.handleAutoApplyToggle}

src/plugins/vis_type_timeseries/public/application/components/vis_editor_visualization.js

@@ -98,11 +98,8 @@ class VisEditorVisualizationUI extends Component {
 
   componentDidUpdate() {
     if (this._handler) {
-      this._handler.updateInput({
+      const { timeRange, filters, query } = this.props;
-        timeRange: this.props.timeRange,
+      this._handler.updateInput({ timeRange, filters, query });
-        filters: this.props.filters || [],
-        query: this.props.query,
-      });
     }
   }
 

src/plugins/vis_type_timeseries/public/application/editor_controller.tsx

@@ -26,7 +26,7 @@ export class EditorController implements IEditorController {
     private embeddableHandler: VisualizeEmbeddableContract
   ) {}
 
-  render({ timeRange, uiState }: EditorRenderProps) {
+  render({ timeRange, uiState, filters, query }: EditorRenderProps) {
     const I18nContext = getI18n().Context;
 
     render(
@@ -38,6 +38,8 @@ export class EditorController implements IEditorController {
           embeddableHandler={this.embeddableHandler}
           eventEmitter={this.eventEmitter}
           uiState={uiState}
+          filters={filters}
+          query={query}
         />
       </I18nContext>,
       this.el

src/plugins/vis_type_timeseries/public/metrics_type.ts

@@ -105,8 +105,8 @@ export const metricsVisDefinition: VisTypeDefinition<
     editor: TSVB_EDITOR_NAME,
   },
   options: {
-    showQueryBar: false,
+    showQueryBar: true,
-    showFilterBar: false,
+    showFilterBar: true,
     showIndexSelection: false,
   },
   toExpressionAst,
@@ -117,6 +117,7 @@ export const metricsVisDefinition: VisTypeDefinition<
     return [];
   },
   inspectorAdapters: {},
+  requiresSearch: true,
   getUsedIndexPattern: async (params: VisParams) => {
     const { indexPatterns } = getDataStart();
     const indexPatternValue = params.index_pattern;

src/plugins/visualizations/public/embeddable/visualize_embeddable.ts

@@ -340,14 +340,6 @@ export class VisualizeEmbeddable
               data: { timeFieldName: this.vis.data.indexPattern?.timeFieldName!, ...event.data },
             };
           }
-          // do not trigger the filter click event if the filter bar is not visible
-          if (
-            triggerId === VIS_EVENT_TO_TRIGGER.filter &&
-            !this.input.id &&
-            !this.vis.type.options.showFilterBar
-          ) {
-            return;
-          }
 
           getUiActions().getTrigger(triggerId).exec(context);
         }