[Maps] Elasticsearch source empty state (#29395) (#29471)

src/ui/public/index_patterns/components/index_pattern_select.js

@@ -51,6 +51,7 @@ export class IndexPatternSelect extends Component {
       isLoading: false,
       options: [],
       selectedIndexPattern: undefined,
+      searchValue: undefined,
     };
   }
 
@@ -100,7 +101,7 @@ export class IndexPatternSelect extends Component {
   }
 
   debouncedFetch = _.debounce(async (searchValue) => {
-    const { fieldTypes } = this.props;
+    const { fieldTypes, onNoIndexPatterns } = this.props;
 
     const savedObjectFields = ['title'];
     if (fieldTypes) {
@@ -139,6 +140,10 @@ export class IndexPatternSelect extends Component {
         isLoading: false,
         options,
       });
+
+      if (onNoIndexPatterns && searchValue === '' && options.length === 0) {
+        onNoIndexPatterns();
+      }
     }
   }, 300);
 
@@ -159,6 +164,7 @@ export class IndexPatternSelect extends Component {
       onChange, // eslint-disable-line no-unused-vars
       indexPatternId, // eslint-disable-line no-unused-vars
       placeholder,
+      onNoIndexPatterns, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
 
@@ -185,4 +191,9 @@ IndexPatternSelect.propTypes = {
    * Filter index patterns to only those that include the field types
    */
   fieldTypes: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * Callback called when there are no Kibana index patterns (or none that match the field types filter).
+   * Does not get called when user provided index pattern title search does match any index patterns.
+   */
+  onNoIndexPatterns: PropTypes.func,
 };

x-pack/plugins/gis/public/shared/components/no_index_pattern_callout.js

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import chrome from 'ui/chrome';
+
+import React from 'react';
+import { EuiCallOut, EuiLink } from '@elastic/eui';
+
+export function NoIndexPatternCallout() {
+  return (
+    <EuiCallOut
+      title="Couldn't find any index patterns with geospatial fields"
+      color="warning"
+    >
+      <p>
+        You&rsquo;ll need to{' '}
+        <EuiLink href={chrome.addBasePath('/app/kibana#/management/kibana/index_pattern')}>
+          create an index pattern
+        </EuiLink>{' '}
+        with geospatial fields.
+      </p>
+      <p>
+        Don&rsquo;t have any geospatial data sets?{' '}
+        <EuiLink href={chrome.addBasePath('/app/kibana#/home/tutorial_directory/sampleData')}>
+          Get started with some sample data sets.
+        </EuiLink>
+      </p>
+    </EuiCallOut>
+  );
+}

x-pack/plugins/gis/public/shared/layers/sources/es_geohashgrid_source/create_source_editor.js

@@ -12,46 +12,45 @@ import { IndexPatternSelect } from 'ui/index_patterns/components/index_pattern_s
 import { SingleFieldSelect } from '../../../components/single_field_select';
 import { RENDER_AS } from './render_as';
 import { indexPatternService } from '../../../../kibana_services';
+import { NoIndexPatternCallout } from '../../../components/no_index_pattern_callout';
 
 import {
   EuiFormRow,
-  EuiComboBox
+  EuiComboBox,
+  EuiSpacer,
 } from '@elastic/eui';
 
 function filterGeoField({ type }) {
   return ['geo_point'].includes(type);
 }
 
+const requestTypeOptions = [
+  {
+    label: 'points',
+    value: RENDER_AS.POINT
+  },
+  {
+    label: 'grid rectangles',
+    value: RENDER_AS.GRID
+  },
+  {
+    label: 'heatmap',
+    value: RENDER_AS.HEATMAP
+  }
+];
+
 export class CreateSourceEditor extends Component {
 
   static propTypes = {
     onSelect: PropTypes.func.isRequired,
   };
 
-  constructor() {
-    super();
-
-    this._requestTypeOptions = [
-      {
-        label: 'points',
-        value: RENDER_AS.POINT
-      },
-      {
-        label: 'grid rectangles',
-        value: RENDER_AS.GRID
-      },
-      {
-        label: 'heatmap',
-        value: RENDER_AS.HEATMAP
-      }
-    ];
-
-    this.state = {
-      isLoadingIndexPattern: false,
-      indexPatternId: '',
-      geoField: '',
-      requestType: this._requestTypeOptions[0],
-    };
+  state = {
+    isLoadingIndexPattern: false,
+    indexPatternId: '',
+    geoField: '',
+    requestType: requestTypeOptions[0],
+    noGeoIndexPatternsExist: false,
   }
 
   componentWillUnmount() {
@@ -139,6 +138,10 @@ export class CreateSourceEditor extends Component {
     }
   };
 
+  _onNoIndexPatterns = () => {
+    this.setState({ noGeoIndexPatternsExist: true });
+  }
+
   _renderGeoSelect() {
     if (!this.state.indexPattern) {
       return null;
@@ -158,12 +161,16 @@ export class CreateSourceEditor extends Component {
   }
 
   _renderLayerSelect() {
+    if (!this.state.indexPattern) {
+      return null;
+    }
+
     return (
       <EuiFormRow label="Show as">
         <EuiComboBox
           placeholder="Select a single option"
           singleSelection={{ asPlainText: true }}
-          options={this._requestTypeOptions}
+          options={requestTypeOptions}
           selectedOptions={[this.state.requestType]}
           onChange={this._onRequestTypeSelect}
           isClearable={false}
@@ -175,18 +182,34 @@ export class CreateSourceEditor extends Component {
     return (
       <EuiFormRow label="Index pattern">
         <IndexPatternSelect
+          isDisabled={this.state.noGeoIndexPatternsExist}
           indexPatternId={this.state.indexPatternId}
           onChange={this.onIndexPatternSelect}
           placeholder="Select index pattern"
           fieldTypes={['geo_point']}
+          onNoIndexPatterns={this._onNoIndexPatterns}
         />
       </EuiFormRow>
     );
   }
 
+  _renderNoIndexPatternWarning() {
+    if (!this.state.noGeoIndexPatternsExist) {
+      return null;
+    }
+
+    return (
+      <Fragment>
+        <NoIndexPatternCallout />
+        <EuiSpacer size="s" />
+      </Fragment>
+    );
+  }
+
   render() {
     return (
       <Fragment>
+        {this._renderNoIndexPatternWarning()}
         {this._renderIndexPatternSelect()}
         {this._renderGeoSelect()}
         {this._renderLayerSelect()}

x-pack/plugins/gis/public/shared/layers/sources/es_search_source/create_source_editor.js

@@ -7,11 +7,12 @@
 import _ from 'lodash';
 import React, { Fragment, Component } from 'react';
 import PropTypes from 'prop-types';
-import { EuiFormRow } from '@elastic/eui';
+import { EuiFormRow, EuiSpacer } from '@elastic/eui';
 
 import { IndexPatternSelect } from 'ui/index_patterns/components/index_pattern_select';
 import { SingleFieldSelect } from '../../../components/single_field_select';
 import { indexPatternService } from '../../../../kibana_services';
+import { NoIndexPatternCallout } from '../../../components/no_index_pattern_callout';
 
 function filterGeoField(field) {
   return ['geo_point', 'geo_shape'].includes(field.type);
@@ -23,13 +24,11 @@ export class CreateSourceEditor extends Component {
     onSelect: PropTypes.func.isRequired,
   }
 
-  constructor() {
-    super();
-    this.state = {
-      isLoadingIndexPattern: false,
-      indexPatternId: '',
-      geoField: '',
-    };
+  state = {
+    isLoadingIndexPattern: false,
+    indexPatternId: '',
+    geoField: '',
+    noGeoIndexPatternsExist: false,
   }
 
   componentWillUnmount() {
@@ -117,6 +116,10 @@ export class CreateSourceEditor extends Component {
     }
   }
 
+  _onNoIndexPatterns = () => {
+    this.setState({ noGeoIndexPatternsExist: true });
+  }
+
   _renderGeoSelect() {
     if (!this.state.indexPattern) {
       return;
@@ -137,18 +140,35 @@ export class CreateSourceEditor extends Component {
     );
   }
 
+  _renderNoIndexPatternWarning() {
+    if (!this.state.noGeoIndexPatternsExist) {
+      return null;
+    }
+
+    return (
+      <Fragment>
+        <NoIndexPatternCallout />
+        <EuiSpacer size="s" />
+      </Fragment>
+    );
+  }
+
   render() {
     return (
       <Fragment>
 
+        {this._renderNoIndexPatternWarning()}
+
         <EuiFormRow
           label="Index pattern"
         >
           <IndexPatternSelect
+            isDisabled={this.state.noGeoIndexPatternsExist}
             indexPatternId={this.state.indexPatternId}
             onChange={this.onIndexPatternSelect}
             placeholder="Select index pattern"
             fieldTypes={['geo_point', 'geo_shape']}
+            onNoIndexPatterns={this._onNoIndexPatterns}
           />
         </EuiFormRow>