[Lens] Add "no data" popover

docs/development/plugins/data/public/kibana-plugin-plugins-data-public.searchbar.md

@@ -7,7 +7,7 @@
 <b>Signature:</b>
 
 ```typescript
-SearchBar: React.ComponentClass<Pick<Pick<SearchBarProps, "query" | "isLoading" | "filters" | "onRefresh" | "onRefreshChange" | "refreshInterval" | "intl" | "indexPatterns" | "dataTestSubj" | "customSubmitButton" | "screenTitle" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "timeHistory" | "onFiltersUpdated">, "query" | "isLoading" | "filters" | "onRefresh" | "onRefreshChange" | "refreshInterval" | "indexPatterns" | "dataTestSubj" | "customSubmitButton" | "screenTitle" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "timeHistory" | "onFiltersUpdated">, any> & {
-    WrappedComponent: React.ComponentType<Pick<SearchBarProps, "query" | "isLoading" | "filters" | "onRefresh" | "onRefreshChange" | "refreshInterval" | "intl" | "indexPatterns" | "dataTestSubj" | "customSubmitButton" | "screenTitle" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "timeHistory" | "onFiltersUpdated"> & ReactIntl.InjectedIntlProps>;
+SearchBar: React.ComponentClass<Pick<Pick<SearchBarProps, "query" | "isLoading" | "filters" | "onRefresh" | "onRefreshChange" | "refreshInterval" | "intl" | "indexPatterns" | "dataTestSubj" | "customSubmitButton" | "screenTitle" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "indicateNoData" | "timeHistory" | "onFiltersUpdated">, "query" | "isLoading" | "filters" | "onRefresh" | "onRefreshChange" | "refreshInterval" | "indexPatterns" | "dataTestSubj" | "customSubmitButton" | "screenTitle" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "indicateNoData" | "timeHistory" | "onFiltersUpdated">, any> & {
+    WrappedComponent: React.ComponentType<Pick<SearchBarProps, "query" | "isLoading" | "filters" | "onRefresh" | "onRefreshChange" | "refreshInterval" | "intl" | "indexPatterns" | "dataTestSubj" | "customSubmitButton" | "screenTitle" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "indicateNoData" | "timeHistory" | "onFiltersUpdated"> & ReactIntl.InjectedIntlProps>;
 }
 ```

src/plugins/data/public/public.api.md

@@ -1710,8 +1710,8 @@ export const search: {
 // Warning: (ae-missing-release-tag) "SearchBar" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const SearchBar: React.ComponentClass<Pick<Pick<SearchBarProps, "query" | "isLoading" | "filters" | "onRefresh" | "onRefreshChange" | "refreshInterval" | "intl" | "indexPatterns" | "dataTestSubj" | "customSubmitButton" | "screenTitle" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "timeHistory" | "onFiltersUpdated">, "query" | "isLoading" | "filters" | "onRefresh" | "onRefreshChange" | "refreshInterval" | "indexPatterns" | "dataTestSubj" | "customSubmitButton" | "screenTitle" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "timeHistory" | "onFiltersUpdated">, any> & {
-    WrappedComponent: React.ComponentType<Pick<SearchBarProps, "query" | "isLoading" | "filters" | "onRefresh" | "onRefreshChange" | "refreshInterval" | "intl" | "indexPatterns" | "dataTestSubj" | "customSubmitButton" | "screenTitle" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "timeHistory" | "onFiltersUpdated"> & ReactIntl.InjectedIntlProps>;
+export const SearchBar: React.ComponentClass<Pick<Pick<SearchBarProps, "query" | "isLoading" | "filters" | "onRefresh" | "onRefreshChange" | "refreshInterval" | "intl" | "indexPatterns" | "dataTestSubj" | "customSubmitButton" | "screenTitle" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "indicateNoData" | "timeHistory" | "onFiltersUpdated">, "query" | "isLoading" | "filters" | "onRefresh" | "onRefreshChange" | "refreshInterval" | "indexPatterns" | "dataTestSubj" | "customSubmitButton" | "screenTitle" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "indicateNoData" | "timeHistory" | "onFiltersUpdated">, any> & {
+    WrappedComponent: React.ComponentType<Pick<SearchBarProps, "query" | "isLoading" | "filters" | "onRefresh" | "onRefreshChange" | "refreshInterval" | "intl" | "indexPatterns" | "dataTestSubj" | "customSubmitButton" | "screenTitle" | "showQueryBar" | "showQueryInput" | "showFilterBar" | "showDatePicker" | "showAutoRefreshOnly" | "isRefreshPaused" | "dateRangeFrom" | "dateRangeTo" | "showSaveQuery" | "savedQuery" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated" | "onClearSavedQuery" | "indicateNoData" | "timeHistory" | "onFiltersUpdated"> & ReactIntl.InjectedIntlProps>;
 };
 
 // Warning: (ae-forgotten-export) The symbol "SearchBarOwnProps" needs to be exported by the entry point index.d.ts

src/plugins/data/public/ui/query_string_input/no_data_popover.test.tsx

@@ -0,0 +1,95 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
+import { NoDataPopover } from './no_data_popover';
+import { EuiTourStep } from '@elastic/eui';
+import { act } from 'react-dom/test-utils';
+
+describe('NoDataPopover', () => {
+  const createMockStorage = () => ({
+    get: jest.fn(),
+    set: jest.fn(),
+    remove: jest.fn(),
+    clear: jest.fn(),
+  });
+
+  it('should hide popover if showNoDataPopover is set to false', () => {
+    const Child = () => <span />;
+    const instance = mount(
+      <NoDataPopover storage={createMockStorage()} showNoDataPopover={false}>
+        <Child />
+      </NoDataPopover>
+    );
+    expect(instance.find(EuiTourStep).prop('isStepOpen')).toBe(false);
+    expect(instance.find(EuiTourStep).find(Child)).toHaveLength(1);
+  });
+
+  it('should hide popover if showNoDataPopover is set to true, but local storage flag is set', () => {
+    const child = <span />;
+    const storage = createMockStorage();
+    storage.get.mockReturnValue(true);
+    const instance = mount(
+      <NoDataPopover storage={storage} showNoDataPopover={false}>
+        {child}
+      </NoDataPopover>
+    );
+    expect(instance.find(EuiTourStep).prop('isStepOpen')).toBe(false);
+  });
+
+  it('should render popover if showNoDataPopover is set to true and local storage flag is not set', () => {
+    const child = <span />;
+    const instance = mount(
+      <NoDataPopover storage={createMockStorage()} showNoDataPopover={true}>
+        {child}
+      </NoDataPopover>
+    );
+    expect(instance.find(EuiTourStep).prop('isStepOpen')).toBe(true);
+  });
+
+  it('should hide popover if it is closed', async () => {
+    const props = {
+      children: <span />,
+      showNoDataPopover: true,
+      storage: createMockStorage(),
+    };
+    const instance = mount(<NoDataPopover {...props} />);
+    act(() => {
+      instance.find(EuiTourStep).prop('closePopover')!();
+    });
+    instance.setProps({ ...props });
+    expect(instance.find(EuiTourStep).prop('isStepOpen')).toBe(false);
+  });
+
+  it('should set local storage flag and hide on closing with button', () => {
+    const props = {
+      children: <span />,
+      showNoDataPopover: true,
+      storage: createMockStorage(),
+    };
+    const instance = mount(<NoDataPopover {...props} />);
+    act(() => {
+      instance.find(EuiTourStep).prop('footerAction')!.props.onClick();
+    });
+    instance.setProps({ ...props });
+    expect(props.storage.set).toHaveBeenCalledWith(expect.any(String), true);
+    expect(instance.find(EuiTourStep).prop('isStepOpen')).toBe(false);
+  });
+});

src/plugins/data/public/ui/query_string_input/no_data_popover.tsx

@@ -0,0 +1,96 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ReactElement, useEffect, useState } from 'react';
+import React from 'react';
+import { EuiButtonEmpty, EuiText, EuiTourStep } from '@elastic/eui';
+import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
+import { i18n } from '@kbn/i18n';
+
+const NO_DATA_POPOVER_STORAGE_KEY = 'data.noDataPopover';
+
+export function NoDataPopover({
+  showNoDataPopover,
+  storage,
+  children,
+}: {
+  showNoDataPopover?: boolean;
+  storage: IStorageWrapper;
+  children: ReactElement;
+}) {
+  const [noDataPopoverDismissed, setNoDataPopoverDismissed] = useState(() =>
+    Boolean(storage.get(NO_DATA_POPOVER_STORAGE_KEY))
+  );
+  const [noDataPopoverVisible, setNoDataPopoverVisible] = useState(false);
+
+  useEffect(() => {
+    if (showNoDataPopover && !noDataPopoverDismissed) {
+      setNoDataPopoverVisible(true);
+    }
+  }, [noDataPopoverDismissed, showNoDataPopover]);
+
+  return (
+    <EuiTourStep
+      onFinish={() => {}}
+      closePopover={() => {
+        setNoDataPopoverVisible(false);
+      }}
+      content={
+        <EuiText size="s">
+          <p style={{ maxWidth: 300 }}>
+            {i18n.translate('data.noDataPopover.content', {
+              defaultMessage:
+                "This time range doesn't contain any data for this index pattern. Increase or adjust the time range to see more fields and create charts",
+            })}
+          </p>
+        </EuiText>
+      }
+      minWidth={300}
+      anchorPosition="downCenter"
+      step={1}
+      stepsTotal={1}
+      isStepOpen={noDataPopoverVisible}
+      subtitle={i18n.translate('data.noDataPopover.title', { defaultMessage: 'Tip' })}
+      title=""
+      footerAction={
+        <EuiButtonEmpty
+          size="s"
+          data-test-subj="noDataPopoverDismissButton"
+          onClick={() => {
+            storage.set(NO_DATA_POPOVER_STORAGE_KEY, true);
+            setNoDataPopoverDismissed(true);
+            setNoDataPopoverVisible(false);
+          }}
+        >
+          {i18n.translate('data.noDataPopover.dismissAction', {
+            defaultMessage: "Don't show again",
+          })}
+        </EuiButtonEmpty>
+      }
+    >
+      <div
+        onFocus={() => {
+          setNoDataPopoverVisible(false);
+        }}
+      >
+        {children}
+      </div>
+    </EuiTourStep>
+  );
+}

src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx

@@ -40,6 +40,7 @@ import { useKibana, toMountPoint } from '../../../../kibana_react/public';
 import { QueryStringInput } from './query_string_input';
 import { doesKueryExpressionHaveLuceneSyntaxError, UI_SETTINGS } from '../../../common';
 import { PersistedLog, getQueryLog } from '../../query';
+import { NoDataPopover } from './no_data_popover';
 
 interface Props {
   query?: Query;
@@ -63,6 +64,7 @@ interface Props {
   customSubmitButton?: any;
   isDirty: boolean;
   timeHistory?: TimeHistoryContract;
+  indicateNoData?: boolean;
 }
 
 export function QueryBarTopRow(props: Props) {
@@ -230,10 +232,12 @@ export function QueryBarTopRow(props: Props) {
     }
 
     return (
-      <EuiFlexGroup responsive={false} gutterSize="s">
-        {renderDatePicker()}
-        <EuiFlexItem grow={false}>{button}</EuiFlexItem>
-      </EuiFlexGroup>
+      <NoDataPopover storage={storage} showNoDataPopover={props.indicateNoData}>
+        <EuiFlexGroup responsive={false} gutterSize="s">
+          {renderDatePicker()}
+          <EuiFlexItem grow={false}>{button}</EuiFlexItem>
+        </EuiFlexGroup>
+      </NoDataPopover>
     );
   }
 

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

@@ -198,6 +198,7 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
           showSaveQuery={props.showSaveQuery}
           screenTitle={props.screenTitle}
           indexPatterns={props.indexPatterns}
+          indicateNoData={props.indicateNoData}
           timeHistory={data.query.timefilter.history}
           dateRangeFrom={timeRange.from}
           dateRangeTo={timeRange.to}

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

@@ -75,6 +75,7 @@ export interface SearchBarOwnProps {
   onClearSavedQuery?: () => void;
 
   onRefresh?: (payload: { dateRange: TimeRange }) => void;
+  indicateNoData?: boolean;
 }
 
 export type SearchBarProps = SearchBarOwnProps & SearchBarInjectedDeps;
@@ -402,6 +403,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
             this.props.customSubmitButton ? this.props.customSubmitButton : undefined
           }
           dataTestSubj={this.props.dataTestSubj}
+          indicateNoData={this.props.indicateNoData}
         />
       );
     }

test/functional/page_objects/time_picker.ts

@@ -52,6 +52,13 @@ export function TimePickerProvider({ getService, getPageObjects }: FtrProviderCo
       await this.setAbsoluteRange(this.defaultStartTime, this.defaultEndTime);
     }
 
+    async ensureHiddenNoDataPopover() {
+      const isVisible = await testSubjects.exists('noDataPopoverDismissButton');
+      if (isVisible) {
+        await testSubjects.click('noDataPopoverDismissButton');
+      }
+    }
+
     /**
      * the provides a quicker way to set the timepicker to the default range, saves a few seconds
      */

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

@@ -243,6 +243,7 @@ describe('Lens App', () => {
               "query": "",
             },
             "savedQuery": undefined,
+            "showNoDataPopover": [Function],
           },
         ],
       ]

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

@@ -40,6 +40,7 @@ import {
 } from '../../../../../src/plugins/data/public';
 
 interface State {
+  indicateNoData: boolean;
   isLoading: boolean;
   isSaveModalVisible: boolean;
   indexPatternsForTopNav: IndexPatternInstance[];
@@ -104,9 +105,27 @@ export function App({
         toDate: currentRange.to,
       },
       filters: [],
+      indicateNoData: false,
     };
   });
 
+  const showNoDataPopover = useCallback(() => {
+    setState((prevState) => ({ ...prevState, indicateNoData: true }));
+  }, [setState]);
+
+  useEffect(() => {
+    if (state.indicateNoData) {
+      setState((prevState) => ({ ...prevState, indicateNoData: false }));
+    }
+  }, [
+    setState,
+    state.indicateNoData,
+    state.query,
+    state.filters,
+    state.dateRange,
+    state.indexPatternsForTopNav,
+  ]);
+
   const { lastKnownDoc } = state;
 
   const isSaveable =
@@ -465,6 +484,7 @@ export function App({
               query={state.query}
               dateRangeFrom={state.dateRange.fromDate}
               dateRangeTo={state.dateRange.toDate}
+              indicateNoData={state.indicateNoData}
             />
           </div>
 
@@ -479,6 +499,7 @@ export function App({
                 savedQuery: state.savedQuery,
                 doc: state.persistedDoc,
                 onError,
+                showNoDataPopover,
                 onChange: ({ filterableIndexPatterns, doc }) => {
                   if (!_.isEqual(state.persistedDoc, doc)) {
                     setState((s) => ({ ...s, lastKnownDoc: doc }));

x-pack/plugins/lens/public/editor_frame_service/editor_frame/data_panel_wrapper.tsx

@@ -19,6 +19,7 @@ interface DataPanelWrapperProps {
   activeDatasource: string | null;
   datasourceIsLoading: boolean;
   dispatch: (action: Action) => void;
+  showNoDataPopover: () => void;
   core: DatasourceDataPanelProps['core'];
   query: Query;
   dateRange: FramePublicAPI['dateRange'];
@@ -46,6 +47,7 @@ export const DataPanelWrapper = memo((props: DataPanelWrapperProps) => {
     query: props.query,
     dateRange: props.dateRange,
     filters: props.filters,
+    showNoDataPopover: props.showNoDataPopover,
   };
 
   const [showDatasourceSwitcher, setDatasourceSwitcher] = useState(false);

x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx

@@ -56,6 +56,7 @@ function getDefaultProps() {
       data: dataPluginMock.createStartContract(),
       expressions: expressionsPluginMock.createStartContract(),
     },
+    showNoDataPopover: jest.fn(),
   };
 }
 

x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx

@@ -49,6 +49,7 @@ export interface EditorFrameProps {
     filterableIndexPatterns: DatasourceMetaData['filterableIndexPatterns'];
     doc: Document;
   }) => void;
+  showNoDataPopover: () => void;
 }
 
 export function EditorFrame(props: EditorFrameProps) {
@@ -256,6 +257,7 @@ export function EditorFrame(props: EditorFrameProps) {
             query={props.query}
             dateRange={props.dateRange}
             filters={props.filters}
+            showNoDataPopover={props.showNoDataPopover}
           />
         }
         configPanel={

x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_management.test.ts

@@ -35,6 +35,7 @@ describe('editor_frame state management', () => {
         dateRange: { fromDate: 'now-7d', toDate: 'now' },
         query: { query: '', language: 'lucene' },
         filters: [],
+        showNoDataPopover: jest.fn(),
       };
     });