[Lens] Fix query bar integration

x-pack/legacy/plugins/lens/public/app_plugin/app.tsx

@@ -27,6 +27,25 @@ interface State {
   query: Query;
   indexPatternTitles: string[];
   persistedDoc?: Document;
+  localQueryBarState: {
+    query?: Query;
+    dateRange?: {
+      from: string;
+      to: string;
+    };
+  };
+}
+
+function isLocalStateDirty(
+  localState: State['localQueryBarState'],
+  query: Query,
+  dateRange: State['dateRange']
+) {
+  return Boolean(
+    (localState.query && query && localState.query.query !== query.query) ||
+      (localState.dateRange && dateRange.fromDate !== localState.dateRange.from) ||
+      (localState.dateRange && dateRange.toDate !== localState.dateRange.to)
+  );
 }
 
 export function App({
@@ -57,6 +76,13 @@ export function App({
       toDate: timeDefaults.to,
     },
     indexPatternTitles: [],
+    localQueryBarState: {
+      query: { query: '', language },
+      dateRange: {
+        from: timeDefaults.from,
+        to: timeDefaults.to,
+      },
+    },
   });
 
   const lastKnownDocRef = useRef<Document | undefined>(undefined);
@@ -72,6 +98,10 @@ export function App({
             isLoading: false,
             persistedDoc: doc,
             query: doc.state.query,
+            localQueryBarState: {
+              ...state.localQueryBarState,
+              query: doc.state.query,
+            },
             indexPatternTitles: doc.state.datasourceMetaData.filterableIndexPatterns.map(
               ({ title }) => title
             ),
@@ -152,24 +182,34 @@ export function App({
           <QueryBar
             data-test-subj="lnsApp_queryBar"
             screenTitle={'lens'}
-            onSubmit={({ dateRange, query }) => {
+            onSubmit={payload => {
+              const { dateRange, query } = payload;
               setState({
                 ...state,
                 dateRange: {
                   fromDate: dateRange.from,
                   toDate: dateRange.to,
                 },
                 query: query || state.query,
+                localQueryBarState: payload,
               });
             }}
+            onChange={localQueryBarState => {
+              setState({ ...state, localQueryBarState });
+            }}
+            isDirty={isLocalStateDirty(state.localQueryBarState, state.query, state.dateRange)}
             appName={'lens'}
             indexPatterns={state.indexPatternTitles}
             store={store}
             showDatePicker={true}
             showQueryInput={true}
-            query={state.query}
-            dateRangeFrom={state.dateRange && state.dateRange.fromDate}
-            dateRangeTo={state.dateRange && state.dateRange.toDate}
+            query={state.localQueryBarState.query}
+            dateRangeFrom={
+              state.localQueryBarState.dateRange && state.localQueryBarState.dateRange.from
+            }
+            dateRangeTo={
+              state.localQueryBarState.dateRange && state.localQueryBarState.dateRange.to
+            }
             uiSettings={uiSettings}
           />
         </div>

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/index.scss

@@ -115,12 +115,14 @@ $lnsPanelMinWidth: $euiSize * 18;
   width: 100%;
   height: 100%;
   display: flex;
-  align-items: center;
-  justify-content: center;
   overflow-x: hidden;
   padding: $euiSize;
 }
 
+.lnsExpressionOutput > * {
+  flex: 1;
+}
+
 .lnsTitleInput {
   width: 100%;
   min-width: 100%;

x-pack/legacy/plugins/lens/public/indexpattern_plugin/operation_definitions/date_histogram.test.tsx

@@ -98,6 +98,7 @@ describe('date_histogram', () => {
               label: 'Value of timestamp',
               dataType: 'date',
               isBucketed: true,
+              isMetric: false,
 
               // Private
               operationType: 'date_histogram',
@@ -197,6 +198,7 @@ describe('date_histogram', () => {
         sourceField: 'timestamp',
         label: 'Date over timestamp',
         isBucketed: true,
+        isMetric: false,
         dataType: 'date',
         params: {
           interval: 'd',
@@ -217,6 +219,7 @@ describe('date_histogram', () => {
         sourceField: 'timestamp',
         label: 'Date over timestamp',
         isBucketed: true,
+        isMetric: false,
         dataType: 'date',
         params: {
           interval: 'auto',

x-pack/legacy/plugins/lens/public/indexpattern_plugin/operation_definitions/terms.test.tsx

@@ -84,6 +84,7 @@ describe('terms', () => {
         label: 'Top values of source',
         isBucketed: true,
         dataType: 'string',
+        isMetric: false,
         params: {
           size: 5,
           orderBy: {

x-pack/test/api_integration/apis/xpack_main/features/features.ts

@@ -130,6 +130,7 @@ export default function({ getService }: FtrProviderContext) {
             'canvas',
             'code',
             'infrastructure',
+            'lens',
             'logs',
             'maps',
             'uptime',

x-pack/test/saved_object_api_integration/common/suites/export.ts

@@ -60,7 +60,7 @@ export function exportTestSuiteFactory(esArchiver: any, supertest: SuperTest<any
     expect(resp.body).to.eql({
       statusCode: 400,
       error: 'Bad Request',
-      message: `child \"objects\" fails because [\"objects\" at position 0 fails because [child \"type\" fails because [\"type\" must be one of [canvas-element, canvas-workpad, config, dashboard, globaltype, index-pattern, lens, map, search, url, visualization]]]]`,
+      message: `child \"objects\" fails because [\"objects\" at position 0 fails because [child \"type\" fails because [\"type\" must be one of [canvas-element, canvas-workpad, config, dashboard, globaltype, index-pattern, lens, map, query, search, url, visualization]]]]`,
       validation: {
         source: 'payload',
         keys: ['objects.0.type'],